make buttons disabled when other process is running, added tabs, added comparative view, added rotation to taller images
This commit is contained in:
Pixelguy14
parent
13a5f7f222
commit
ddc690b659
45
app.jl
45
app.jl
@ -84,6 +84,11 @@ end
|
|||||||
@in ImgPlusT = false
|
@in ImgPlusT = false
|
||||||
@in ImgMinusT = false
|
@in ImgMinusT = false
|
||||||
|
|
||||||
|
#TABS
|
||||||
|
@out tabIDs = ["tab0","tab1","tab2","tab3"]
|
||||||
|
@out tabLabels = ["Image", "TrIQ", "2D Plot","3D Plot"]
|
||||||
|
@in selectedTab = "tab0"
|
||||||
|
|
||||||
# Interface Images
|
# Interface Images
|
||||||
@out imgInt = "/.bmp" # image Interface
|
@out imgInt = "/.bmp" # image Interface
|
||||||
@out imgIntT = "/.bmp" # image Interface TrIQ
|
@out imgIntT = "/.bmp" # image Interface TrIQ
|
||||||
@ -231,6 +236,9 @@ end
|
|||||||
SaveBitmap(joinpath("public", "TrIQ_$(text_nmass).bmp"),TrIQ(slice, Int(triqColor), triqProb),ViridisPalette)
|
SaveBitmap(joinpath("public", "TrIQ_$(text_nmass).bmp"),TrIQ(slice, Int(triqColor), triqProb),ViridisPalette)
|
||||||
# Flip te image vertically then save it again
|
# Flip te image vertically then save it again
|
||||||
img = load(image_path)
|
img = load(image_path)
|
||||||
|
if size(img, 1) > size(img, 2) # fix to taller images
|
||||||
|
img = reverse(permutedims(img, (2, 1)), dims=1)
|
||||||
|
end
|
||||||
flipped_img = reverse(img, dims=1)
|
flipped_img = reverse(img, dims=1)
|
||||||
save(image_path, flipped_img)
|
save(image_path, flipped_img)
|
||||||
# Use timestamp to refresh image interface container
|
# Use timestamp to refresh image interface container
|
||||||
@ -258,6 +266,9 @@ end
|
|||||||
SaveBitmap(joinpath("public", "MSI_$(text_nmass).bmp"),IntQuant(slice),ViridisPalette)
|
SaveBitmap(joinpath("public", "MSI_$(text_nmass).bmp"),IntQuant(slice),ViridisPalette)
|
||||||
# Flip te image vertically then save it again
|
# Flip te image vertically then save it again
|
||||||
img = load(image_path)
|
img = load(image_path)
|
||||||
|
if size(img, 1) > size(img, 2) # fix to taller images
|
||||||
|
img = reverse(permutedims(img, (2, 1)), dims=1)
|
||||||
|
end
|
||||||
flipped_img = reverse(img, dims=1)
|
flipped_img = reverse(img, dims=1)
|
||||||
save(image_path, flipped_img)
|
save(image_path, flipped_img)
|
||||||
# Use timestamp to refresh image interface container
|
# Use timestamp to refresh image interface container
|
||||||
@ -301,14 +312,15 @@ end
|
|||||||
@onbutton createSumPlot begin
|
@onbutton createSumPlot begin
|
||||||
msg = "Sum spectrum plot selected"
|
msg = "Sum spectrum plot selected"
|
||||||
full_route = joinpath( file_route, file_name )
|
full_route = joinpath( file_route, file_name )
|
||||||
progressPlot = true
|
|
||||||
if isfile(full_route) # Check if the file exists
|
if isfile(full_route) # Check if the file exists
|
||||||
btnPlotDisable = false
|
btnPlotDisable = false
|
||||||
btnStartDisable = false
|
btnStartDisable = false
|
||||||
full_routeMz = split( full_route, "." )[1] * ".mzML" # Splitting the route from imzml to mzml so the plotting can work
|
full_routeMz = split( full_route, "." )[1] * ".mzML" # Splitting the route from imzml to mzml so the plotting can work
|
||||||
if isfile(full_routeMz) && (full_routeMz2 == "" || full_routeMz2 != full_routeMz) # Check if the mzml exists
|
if isfile(full_routeMz) && (full_routeMz2 == "" || full_routeMz2 != full_routeMz) # Check if the mzml exists
|
||||||
println("I'm working as intended")
|
println("I'm working as intended")
|
||||||
|
progressPlot = true
|
||||||
btnPlotDisable = true
|
btnPlotDisable = true
|
||||||
|
btnStartDisable = true
|
||||||
msg = "Loading plot..."
|
msg = "Loading plot..."
|
||||||
spectraMz = LoadMzml(full_routeMz)
|
spectraMz = LoadMzml(full_routeMz)
|
||||||
layoutSpectra = PlotlyBase.Layout(
|
layoutSpectra = PlotlyBase.Layout(
|
||||||
@ -334,7 +346,6 @@ end
|
|||||||
ccall(:malloc_trim, Int32, (Int32,), 0) # Ensure julia returns the freed memory to OS
|
ccall(:malloc_trim, Int32, (Int32,), 0) # Ensure julia returns the freed memory to OS
|
||||||
end
|
end
|
||||||
msg = "Plot loaded."
|
msg = "Plot loaded."
|
||||||
btnPlotDisable = false
|
|
||||||
full_routeMz2 = full_routeMz # To avoid creating the plot if its the same file read as before
|
full_routeMz2 = full_routeMz # To avoid creating the plot if its the same file read as before
|
||||||
end
|
end
|
||||||
else
|
else
|
||||||
@ -342,6 +353,8 @@ end
|
|||||||
warning_msg = true
|
warning_msg = true
|
||||||
end
|
end
|
||||||
progressPlot = false
|
progressPlot = false
|
||||||
|
btnPlotDisable = false
|
||||||
|
btnStartDisable = false
|
||||||
end
|
end
|
||||||
|
|
||||||
# Image loaders based on the position of the current image (increment and decrement for both normal and filter)
|
# Image loaders based on the position of the current image (increment and decrement for both normal and filter)
|
||||||
@ -431,6 +444,9 @@ end
|
|||||||
var = joinpath( "./public", cleaned_imgInt )
|
var = joinpath( "./public", cleaned_imgInt )
|
||||||
|
|
||||||
if isfile(var)
|
if isfile(var)
|
||||||
|
progressPlot = true
|
||||||
|
btnPlotDisable = true
|
||||||
|
btnStartDisable = true
|
||||||
try
|
try
|
||||||
img = load(var)
|
img = load(var)
|
||||||
#println("Image type:", typeof(img))
|
#println("Image type:", typeof(img))
|
||||||
@ -500,6 +516,9 @@ end
|
|||||||
msg = "image could not be 3d plotted"
|
msg = "image could not be 3d plotted"
|
||||||
warning_msg = true
|
warning_msg = true
|
||||||
end
|
end
|
||||||
|
progressPlot = false
|
||||||
|
btnPlotDisable = false
|
||||||
|
btnStartDisable = false
|
||||||
end
|
end
|
||||||
# 3d plot for TrIQ
|
# 3d plot for TrIQ
|
||||||
@onbutton triq3dPlot begin
|
@onbutton triq3dPlot begin
|
||||||
@ -509,6 +528,9 @@ end
|
|||||||
var = joinpath( "./public", cleaned_imgIntT )
|
var = joinpath( "./public", cleaned_imgIntT )
|
||||||
|
|
||||||
if isfile(var)
|
if isfile(var)
|
||||||
|
progressPlot = true
|
||||||
|
btnPlotDisable = true
|
||||||
|
btnStartDisable = true
|
||||||
try
|
try
|
||||||
img = load(var)
|
img = load(var)
|
||||||
img_gray = Gray.(img) # Convert to grayscale
|
img_gray = Gray.(img) # Convert to grayscale
|
||||||
@ -572,6 +594,9 @@ end
|
|||||||
msg = "image could not be 3d plotted"
|
msg = "image could not be 3d plotted"
|
||||||
warning_msg = true
|
warning_msg = true
|
||||||
end
|
end
|
||||||
|
progressPlot = false
|
||||||
|
btnPlotDisable = false
|
||||||
|
btnStartDisable = false
|
||||||
end
|
end
|
||||||
|
|
||||||
# Contour 2d plot
|
# Contour 2d plot
|
||||||
@ -582,6 +607,9 @@ end
|
|||||||
var = joinpath("./public", cleaned_imgInt)
|
var = joinpath("./public", cleaned_imgInt)
|
||||||
|
|
||||||
if isfile(var)
|
if isfile(var)
|
||||||
|
progressPlot = true
|
||||||
|
btnPlotDisable = true
|
||||||
|
btnStartDisable = true
|
||||||
try
|
try
|
||||||
img = load(var)
|
img = load(var)
|
||||||
# Convert to grayscale
|
# Convert to grayscale
|
||||||
@ -610,7 +638,7 @@ end
|
|||||||
z = elevation_smoothed,
|
z = elevation_smoothed,
|
||||||
x = X[1, :], # Use the first row
|
x = X[1, :], # Use the first row
|
||||||
y = -Y[:, 1], # Use the first column
|
y = -Y[:, 1], # Use the first column
|
||||||
contours_coloring = "lines",
|
contours_coloring = "Viridis",
|
||||||
colorscale = "Viridis"
|
colorscale = "Viridis"
|
||||||
)
|
)
|
||||||
plotdata = [traceContour]
|
plotdata = [traceContour]
|
||||||
@ -631,6 +659,9 @@ end
|
|||||||
msg = "Image could not be 2D plotted"
|
msg = "Image could not be 2D plotted"
|
||||||
warning_msg = true
|
warning_msg = true
|
||||||
end
|
end
|
||||||
|
progressPlot = false
|
||||||
|
btnPlotDisable = false
|
||||||
|
btnStartDisable = false
|
||||||
end
|
end
|
||||||
# Contour 2d plot for TrIQ
|
# Contour 2d plot for TrIQ
|
||||||
@onbutton triqCPlot begin
|
@onbutton triqCPlot begin
|
||||||
@ -640,6 +671,9 @@ end
|
|||||||
var = joinpath("./public", cleaned_imgIntT)
|
var = joinpath("./public", cleaned_imgIntT)
|
||||||
|
|
||||||
if isfile(var)
|
if isfile(var)
|
||||||
|
progressPlot = true
|
||||||
|
btnPlotDisable = true
|
||||||
|
btnStartDisable = true
|
||||||
try
|
try
|
||||||
img = load(var)
|
img = load(var)
|
||||||
# Convert to grayscale
|
# Convert to grayscale
|
||||||
@ -668,7 +702,7 @@ end
|
|||||||
z = elevation_smoothed,
|
z = elevation_smoothed,
|
||||||
x = X[1, :], # Use the first row
|
x = X[1, :], # Use the first row
|
||||||
y = -Y[:, 1], # Use the first column
|
y = -Y[:, 1], # Use the first column
|
||||||
contours_coloring = "lines",
|
contours_coloring = "Viridis",
|
||||||
colorscale = "Viridis"
|
colorscale = "Viridis"
|
||||||
)
|
)
|
||||||
plotdata = [traceContour]
|
plotdata = [traceContour]
|
||||||
@ -689,6 +723,9 @@ end
|
|||||||
msg = "Image could not be 2D plotted"
|
msg = "Image could not be 2D plotted"
|
||||||
warning_msg = true
|
warning_msg = true
|
||||||
end
|
end
|
||||||
|
progressPlot = false
|
||||||
|
btnPlotDisable = false
|
||||||
|
btnStartDisable = false
|
||||||
end
|
end
|
||||||
|
|
||||||
@onbutton CompareBtn begin
|
@onbutton CompareBtn begin
|
||||||
|
|||||||
197
app.jl.html
197
app.jl.html
@ -5,10 +5,9 @@
|
|||||||
<h4>Julia mzML imzML analysis GUI </h4>
|
<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>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>
|
<h6>It may take a while to generate the image and the plot, please be patient.</h6>
|
||||||
<h6>To generate the contour or 3D plot, you have to select it using the User Interface</h6>
|
<h6>To generate the contour or surface plots, you have to select the desired image first using the interface.</h6>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<!-- TOP -->
|
|
||||||
<div id="extDivStyle" class="row col-12 q-pa-xl">
|
<div id="extDivStyle" class="row col-12 q-pa-xl">
|
||||||
<div class="row col-6">
|
<div class="row col-6">
|
||||||
<!-- Left DIV -->
|
<!-- Left DIV -->
|
||||||
@ -91,7 +90,7 @@
|
|||||||
]" :readonly="!triqEnabled" :disable="!triqEnabled"></q-input>
|
]" :readonly="!triqEnabled" :disable="!triqEnabled"></q-input>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class = "row">
|
<div class="row">
|
||||||
<q-btn id="btnStyle" :loading="progress" :disabled="btnStartDisable" icon="play_arrow" v-on:click="mainProcess = true" padding="lg">
|
<q-btn id="btnStyle" :loading="progress" :disabled="btnStartDisable" icon="play_arrow" v-on:click="mainProcess = true" padding="lg">
|
||||||
Start Process
|
Start Process
|
||||||
<template v-slot:loading>
|
<template v-slot:loading>
|
||||||
@ -108,52 +107,60 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="row col-6">
|
<div class="row col-6">
|
||||||
<!-- Right DIV -->
|
<!-- Right DIV -->
|
||||||
<div id="intDivStyle" class="st-col col-12 st-module">
|
<div id="intDivStyle" class="st-col col-12 col-sm st-module">
|
||||||
<h6>Image Visualizer</h6>
|
<st-tabs class="bg-primary text-white shadow-2" :ids="tabIDs" :labels="tabLabels" v-model="selectedTab"></st-tabs>
|
||||||
<!-- Btn image changer -->
|
<q-tab-panels v-model="selectedTab">
|
||||||
<div>
|
<q-tab-panel name="tab0">
|
||||||
<q-btn id="btnStyle" icon="arrow_back" rounded v-on:click="ImgMinus = true"></q-btn>
|
<!-- Content for Tab 0 -->
|
||||||
<q-btn id="btnStyle" icon="arrow_forward" rounded v-on:click="ImgPlus = true"></q-btn>
|
<!-- Btn image changer -->
|
||||||
</div>
|
<h6>Image Visualizer</h6>
|
||||||
<!-- Image manager -->
|
<div>
|
||||||
<div id="image-container" class="row st-col col-12 items-center">
|
<q-btn id="btnStyle" icon="arrow_back" class="q-my-sm" v-on:click="ImgMinus = true"></q-btn>
|
||||||
<div class="st-col col-10">
|
<q-btn id="btnStyle" icon="arrow_forward" class="q-my-sm on-right" v-on:click="ImgPlus = true"></q-btn>
|
||||||
<q-img id="imgInt" class="q-ma-none q-pa-none" :src="imgInt" fit="scale-down"></q-img>
|
</div>
|
||||||
</div>
|
<!-- Image manager -->
|
||||||
<div class="st-col col-2">
|
<div id="image-container" class="row st-col col-12 items-center">
|
||||||
<q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbar"></q-img>
|
<div class="st-col col-10">
|
||||||
</div>
|
<q-img id="imgInt" class="q-ma-none q-pa-none" :src="imgInt" fit="scale-down"></q-img>
|
||||||
</div>
|
</div>
|
||||||
<p>{{msgimg}}</p>
|
<div class="st-col col-2">
|
||||||
<!-- Triq Btn image changer -->
|
<q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbar"></q-img>
|
||||||
<div>
|
</div>
|
||||||
<q-btn id="btnStyle" icon="arrow_back" rounded v-on:click="ImgMinusT = true"></q-btn>
|
</div>
|
||||||
<q-btn id="btnStyle" icon="arrow_forward" rounded v-on:click="ImgPlusT = true"></q-btn>
|
<p>{{msgimg}}</p>
|
||||||
</div>
|
</q-tab-panel>
|
||||||
<!-- Triq Image manager -->
|
|
||||||
<div id="image-container" class="row st-col col-12 items-center">
|
<q-tab-panel name="tab1">
|
||||||
<div class="col-10">
|
<!-- Content for Tab 1 -->
|
||||||
<q-img id="imgInt" class="q-ma-none q-pa-none" :src="imgIntT" fit="scale-down"></q-img>
|
<!-- Triq Btn image changer -->
|
||||||
</div>
|
<h6>TrIQ Visualizer</h6>
|
||||||
<div class="col-2">
|
<div>
|
||||||
<q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbarT"></q-img>
|
<q-btn id="btnStyle" icon="arrow_back" class="q-my-sm" v-on:click="ImgMinusT = true"></q-btn>
|
||||||
</div>
|
<q-btn id="btnStyle" icon="arrow_forward" class="q-my-sm on-right" v-on:click="ImgPlusT = true"></q-btn>
|
||||||
</div>
|
</div>
|
||||||
<p>{{msgtriq}}</p>
|
<!-- Triq Image manager -->
|
||||||
|
<div id="image-container" class="row st-col col-12 items-center">
|
||||||
|
<div class="col-10">
|
||||||
|
<q-img id="imgInt" class="q-ma-none q-pa-none" :src="imgIntT" fit="scale-down"></q-img>
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbarT"></q-img>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>{{msgtriq}}</p>
|
||||||
|
</q-tab-panel>
|
||||||
|
<q-tab-panel name="tab2">
|
||||||
|
<!-- Content for Tab 2 -->
|
||||||
|
<plotly id="plotStyle" :data="plotdata" :layout="plotlayout" class="q-pt-none"></plotly>
|
||||||
|
</q-tab-panel>
|
||||||
|
<q-tab-panel name="tab3">
|
||||||
|
<!-- Content for Tab 3 -->
|
||||||
|
<plotly id="plotStyle3d" :data="plotdata3d" :layout="plotlayout3d" class="q-pt-none"></plotly>
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Bottom -->
|
|
||||||
<div id="extDivStyle" class="row col-12 q-pa-xl">
|
|
||||||
<!-- Bottom Left Div -->
|
|
||||||
<div class="st-col col-12 st-module q-pa-none" >
|
|
||||||
<plotly id="plotStyle" :data="plotdata" :layout="plotlayout" class="col-12"></plotly>
|
|
||||||
</div>
|
|
||||||
<!-- Bottom Right Div -->
|
|
||||||
<div class="st-col col-12 st-module q-pa-none" >
|
|
||||||
<plotly id="plotStyle3d" :data="plotdata3d" :layout="plotlayout3d" class="col-12"></plotly>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<q-dialog v-model="warning_msg">
|
<q-dialog v-model="warning_msg">
|
||||||
<q-card>
|
<q-card>
|
||||||
@ -180,10 +187,104 @@
|
|||||||
<q-card-section class="q-pt-none col-12">
|
<q-card-section class="q-pt-none col-12">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
{{msg}}
|
<st-tabs class="bg-primary text-white shadow-2" :ids="tabIDs" :labels="tabLabels" v-model="selectedTab"></st-tabs>
|
||||||
|
<q-tab-panels v-model="selectedTab">
|
||||||
|
<q-tab-panel name="tab0">
|
||||||
|
<!-- Content for Tab 0 -->
|
||||||
|
<!-- Btn image changer -->
|
||||||
|
<div>
|
||||||
|
<q-btn id="btnStyle" icon="arrow_back" class="q-my-sm" v-on:click="ImgMinus = true"></q-btn>
|
||||||
|
<q-btn id="btnStyle" icon="arrow_forward" class="q-my-sm on-right" v-on:click="ImgPlus = true"></q-btn>
|
||||||
|
</div>
|
||||||
|
<!-- Image manager -->
|
||||||
|
<div id="image-container" class="row st-col col-12 items-center">
|
||||||
|
<div class="st-col col-10">
|
||||||
|
<q-img id="imgInt" class="q-ma-none q-pa-none" :src="imgInt" fit="scale-down"></q-img>
|
||||||
|
</div>
|
||||||
|
<div class="st-col col-2">
|
||||||
|
<q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbar"></q-img>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>{{msgimg}}</p>
|
||||||
|
</q-tab-panel>
|
||||||
|
|
||||||
|
<q-tab-panel name="tab1">
|
||||||
|
<!-- Content for Tab 1 -->
|
||||||
|
<!-- Triq Btn image changer -->
|
||||||
|
<div>
|
||||||
|
<q-btn id="btnStyle" icon="arrow_back" class="q-my-sm" v-on:click="ImgMinusT = true"></q-btn>
|
||||||
|
<q-btn id="btnStyle" icon="arrow_forward" class="q-my-sm on-right" v-on:click="ImgPlusT = true"></q-btn>
|
||||||
|
</div>
|
||||||
|
<!-- Triq Image manager -->
|
||||||
|
<div id="image-container" class="row st-col col-12 items-center">
|
||||||
|
<div class="col-10">
|
||||||
|
<q-img id="imgInt" class="q-ma-none q-pa-none" :src="imgIntT" fit="scale-down"></q-img>
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbarT"></q-img>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>{{msgtriq}}</p>
|
||||||
|
</q-tab-panel>
|
||||||
|
<q-tab-panel name="tab2">
|
||||||
|
<!-- Content for Tab 2 -->
|
||||||
|
<plotly id="plotStyle" :data="plotdata" :layout="plotlayout" class="col-12"></plotly>
|
||||||
|
</q-tab-panel>
|
||||||
|
<q-tab-panel name="tab3">
|
||||||
|
<!-- Content for Tab 3 -->
|
||||||
|
<plotly id="plotStyle3d" :data="plotdata3d" :layout="plotlayout3d" class="col-12"></plotly>
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
{{msg}}
|
<st-tabs class="bg-primary text-white shadow-2" :ids="tabIDs" :labels="tabLabels" v-model="selectedTab"></st-tabs>
|
||||||
|
<q-tab-panels v-model="selectedTab">
|
||||||
|
<q-tab-panel name="tab0">
|
||||||
|
<!-- Content for Tab 0 -->
|
||||||
|
<!-- Btn image changer -->
|
||||||
|
<div>
|
||||||
|
<q-btn id="btnStyle" icon="arrow_back" class="q-my-sm" v-on:click="ImgMinus = true"></q-btn>
|
||||||
|
<q-btn id="btnStyle" icon="arrow_forward" class="q-my-sm on-right" v-on:click="ImgPlus = true"></q-btn>
|
||||||
|
</div>
|
||||||
|
<!-- Image manager -->
|
||||||
|
<div id="image-container" class="row st-col col-12 items-center">
|
||||||
|
<div class="st-col col-10">
|
||||||
|
<q-img id="imgInt" class="q-ma-none q-pa-none" :src="imgInt" fit="scale-down"></q-img>
|
||||||
|
</div>
|
||||||
|
<div class="st-col col-2">
|
||||||
|
<q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbar"></q-img>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>{{msgimg}}</p>
|
||||||
|
</q-tab-panel>
|
||||||
|
|
||||||
|
<q-tab-panel name="tab1">
|
||||||
|
<!-- Content for Tab 1 -->
|
||||||
|
<!-- Triq Btn image changer -->
|
||||||
|
<div>
|
||||||
|
<q-btn id="btnStyle" icon="arrow_back" class="q-my-sm" v-on:click="ImgMinusT = true"></q-btn>
|
||||||
|
<q-btn id="btnStyle" icon="arrow_forward" class="q-my-sm on-right" v-on:click="ImgPlusT = true"></q-btn>
|
||||||
|
</div>
|
||||||
|
<!-- Triq Image manager -->
|
||||||
|
<div id="image-container" class="row st-col col-12 items-center">
|
||||||
|
<div class="col-10">
|
||||||
|
<q-img id="imgInt" class="q-ma-none q-pa-none" :src="imgIntT" fit="scale-down"></q-img>
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbarT"></q-img>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>{{msgtriq}}</p>
|
||||||
|
</q-tab-panel>
|
||||||
|
<q-tab-panel name="tab2">
|
||||||
|
<!-- Content for Tab 2 -->
|
||||||
|
<plotly id="plotStyle" :data="plotdata" :layout="plotlayout" class="col-12"></plotly>
|
||||||
|
</q-tab-panel>
|
||||||
|
<q-tab-panel name="tab3">
|
||||||
|
<!-- Content for Tab 3 -->
|
||||||
|
<plotly id="plotStyle3d" :data="plotdata3d" :layout="plotlayout3d" class="col-12"></plotly>
|
||||||
|
</q-tab-panel>
|
||||||
|
</q-tab-panels>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
#btnStyle{background:#009f90;color:rgb(229, 236, 246);}#imgInt{float:left;}#header{display:flex;align-items:center;}#imgLogo{width:100px;height:80px;margin-right:10px;margin-left:10px;}#extDivStyle{background-color:#c9cdb1;border-radius: 10px;}#intDivStyle{padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;}#colorbar{float:left;}.custom-standout{background-color:#ccd2db!important;color:rgb(229, 236, 246)!important;}
|
#btnStyle{background:#009f90;color:rgb(229, 236, 246);}#imgInt{float:left;}#header{display:flex;align-items:center;}#imgLogo{width:100px;height:80px;margin-right:10px;margin-left:10px;}#extDivStyle{background-color:#c9cdb1;border-radius: 10px;}#intDivStyle{padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;background-color: #eff2f5;}#colorbar{float:left;}.custom-standout{background-color:#7f8389!important;color:rgb(0, 0, 0)!important;}
|
||||||
Loading…
x
Reference in New Issue
Block a user