JuliaMSI/app.jl.html
José Julián Sierra Álvarez d955c9f0a0
Add files via upload
2024-09-11 16:23:09 -06:00

71 lines
4.1 KiB
HTML

<header>
<h4>Julia mzML imzML GUI&nbsp;</h4>
</header>
<h6>Please make sure the ibd, the mzML and the imzML files are located in the same directory and have the same name</h6>
<h6>It may take a while to generate the image, don't press the Start button more than once until it finishes</h6>
<div class="row">
<div class="st-col col-12 col-sm st-module">
<div class="row">
<div class="st-col col-12 col-sm st-module">
<!--Left DIV-->
<!--<q-file v-model="file_route" filled="" label="Select your imzML file" accept=".txt"></q-file>-->
<q-input id="ijii1" v-model="file_route" :dense="true" label="Insert the route to your imzML file"></q-input>
<q-input id="ijii1-2" v-model="file_name" :dense="true" label="Insert the name of your imzML file"></q-input>
<p id="i7brk">full route: {{full_route}} {{warning_fr}}</p>
<div class="row">
<div class="st-col col-12 col-sm">
<q-input id="icc9d" v-model="Nmass" :dense="true" label="Mass Value" type="number" :rules="[
val => val >= 0 || 'Need positive mass values',
]"></q-input>
</div>
<div class="st-col col-12 col-sm">
<q-input id="iqt3l" step="0.01" v-model="Tol" :dense="true" label="Tolerance" type="number" :rules="[
val => !!val || '* Required',
val => val >= 0 &amp;&amp; val <= 1 || 'Needs to be in range between 0 and 1',
]"></q-input>
</div>
</div>
<div class="row">
<div class="st-col col-12 col-sm">
<q-toggle id="igqon" v-on:click="triqEnabled" v-model="triqEnabled" color="blue" label="Add Threshold Intensity Quantization (TrIQ)!"></q-toggle>
</div>
</div>
<div class="row">
<div class="st-col col-12 col-sm-8">
<q-input id="i28wb" step="0.01" v-model="triqProb" :dense="true" label="TrIQ Probability" type="number" :rules="[
val => val >= 0 &amp;&amp; val <= 1 || 'Needs to be in range between 0 and 1',
]" :readonly="!triqEnabled"></q-input>
</div>
<div class="st-col col-12 col-sm-4">
<q-input id="i28wb-2" step="1" v-model="triqColor" :dense="true" label="TrIQ Color" type="number" :rules="[
val => val >= 0 &amp;&amp; val <= 256 || 'Needs to be in range between 1 and 256',
]" :readonly="!triqEnabled"></q-input>
</div>
</div>
<q-btn id="isfqg" :disabled="Disab_btn" color="primary" icon="play_arrow" v-on:click="Main_Process = true" label="Start"></q-btn>
<p>{{msg}}</p>
</div>
</div>
<!-- <plotly :data="plotdata" :layout="plotlayout"> </plotly>-->
</div>
<div class="st-col col-12 col-sm st-module">
<div class="row">
<div class="st-col col-12 col-sm st-module">
<!--Right DIV-->
<h6>Image Visualizer</h6><br>
<p></p>
<q-btn id="ijhjl-2" color="primary" icon="arrow_back" label="Previous" v-on:click="ImgMinus = true"></q-btn>
<q-btn id="i3zt1" color="primary" icon="arrow_forward" label="Next" v-on:click="ImgPlus = true"></q-btn>
<q-img id="i6e3p" :src="test"></q-img>
<p>{{msgimg}}</p>
<q-btn id="ijhjl-2-2" color="primary" icon="arrow_back" label="Previous" v-on:click="ImgMinusT = true"></q-btn>
<q-btn id="i3zt1-2" color="primary" icon="arrow_forward" label="Next" v-on:click="ImgPlusT = true"></q-btn>
<q-img id="i6e3p-2" :src="testT"></q-img>
<p>{{msgtriq}}</p>
</div>
</div>
</div>
</div>
<plotly :data="plotdata" :layout="plotlayout"> </plotly>