75 lines
4.1 KiB
HTML
75 lines
4.1 KiB
HTML
<header>
|
|
<h4>Julia mzML imzML GUI </h4>
|
|
<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 and the plot, please be patient</h6>
|
|
</header>
|
|
|
|
<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=".imzML"></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 && 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 && 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 && 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>
|
|
<div class="row">
|
|
<div class="st-col col-12 col-sm st-module">
|
|
<plotly :data="plotdata" :layout="plotlayout"> </plotly>
|
|
</div>
|
|
</div>
|