77 lines
5.0 KiB
HTML
77 lines
5.0 KiB
HTML
<header id="ikbk"><!--<img src="/css/biotech_100dp_1B1F3B.png" alt="Bioteck Icon" id="i65e">-->
|
|
<img src="/css/LABI_logo.jpeg" alt="Labi Logo Icon" id="i65e">
|
|
<div>
|
|
<h4>Julia mzML imzML analysis 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>
|
|
</div>
|
|
</header>
|
|
<div class="row">
|
|
<div class="st-col col-12 col-sm st-module" id="i0xj8">
|
|
<div class="row">
|
|
<div class="st-col col-12 col-sm st-module" id="idbha">
|
|
<!--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-to-charge ratio of interest" type="number" :rules="[ val => !!val || '* Required', val => val >= 0 && val <= 2000 || '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="Mass-to-charge ratio 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 Levels" 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" id="i8pdn">
|
|
<div class="row">
|
|
<div class="st-col col-12 col-sm st-module" id="ihxlc">
|
|
<!--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>
|
|
<div id="image-container" class="row col-12 items-center">
|
|
<div class="col-10"><q-img id="i6e3p" :src="test" style="max-height: 500px; max-width: 100%; object-fit: contain;" class="q-ma-none q-pa-none"></q-img></div>
|
|
<div class="col-2"><q-img id="colorbar" :src="colorbar"></q-img></div>
|
|
</div>
|
|
<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>
|
|
<div id="image-container" class="row col-12 items-center">
|
|
<div class="col-10"><q-img id="i6e3p-2" :src="testT" style="max-height: 500px; max-width: 100%; object-fit: contain;" class="q-ma-none q-pa-none"></q-img></div>
|
|
<div class="col-2"><q-img id="colorbar-2" :src="colorbarT"></q-img></div>
|
|
</div>
|
|
<p>{{msgtriq}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="st-col col-12 col-sm st-module">
|
|
<plotly id="iiglk" :data="plotdata" :layout="plotlayout"></plotly>
|
|
</div>
|
|
</div>
|