Merge branch 'colourful-dragon' into 'v3'
Colour sliders in seadragon viewer See merge request openflexure/openflexure-microscope-server!409
This commit is contained in:
Joe Knapper
commit
be5087b9ca
3 changed files with 249 additions and 61 deletions
|
|
@ -7,15 +7,26 @@
|
|||
<script>
|
||||
import OpenSeaDragon from "openseadragon";
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
name: "OpenSeadragonViewer",
|
||||
components: { },
|
||||
|
||||
props: {
|
||||
src: {
|
||||
type: String,
|
||||
required: true
|
||||
|
||||
},
|
||||
brightness: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
contrast: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
saturation: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -31,6 +42,15 @@ export default {
|
|||
handler(newVal) {
|
||||
this.loadOpenSeaDragon(newVal);
|
||||
}
|
||||
},
|
||||
brightness() {
|
||||
this.updateFilter();
|
||||
},
|
||||
contrast() {
|
||||
this.updateFilter();
|
||||
},
|
||||
saturation() {
|
||||
this.updateFilter();
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -67,6 +87,19 @@ export default {
|
|||
clickToZoom: false
|
||||
}
|
||||
});
|
||||
|
||||
this.updateFilter();
|
||||
},
|
||||
|
||||
updateFilter() {
|
||||
const viewerEl = document.getElementById("openseadragon");
|
||||
if (viewerEl) {
|
||||
viewerEl.style.filter = `
|
||||
brightness(${this.brightness})
|
||||
contrast(${this.contrast})
|
||||
saturate(${this.saturation})
|
||||
`;
|
||||
}
|
||||
},
|
||||
openFullscreen() {
|
||||
if (this.osdViewer) {
|
||||
|
|
@ -82,15 +115,6 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
z-index:1;
|
||||
}
|
||||
#info-panel {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
padding: 5px;
|
||||
border-radius: 1px;
|
||||
z-index: 1000;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
<template>
|
||||
<div id="scan-modal" ref="scanModal" uk-modal>
|
||||
<div
|
||||
id="scan-modal-body"
|
||||
class="uk-modal-dialog uk-modal-body"
|
||||
v-if="selectedScan"
|
||||
>
|
||||
<h2 id="scan-modal-title" class="uk-modal-title">
|
||||
{{ selectedScan.name }}
|
||||
<button class="uk-modal-close uk-float-right" type="button">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
<button class="uk-float-right" type="button" @click="goFullscreen">
|
||||
<span class="material-symbols-outlined">fullscreen</span>
|
||||
</button>
|
||||
</h2>
|
||||
|
||||
<!-- Viewer -->
|
||||
<div
|
||||
v-if="selectedScanDZI"
|
||||
id="viewer_container"
|
||||
class="viewer_container"
|
||||
>
|
||||
<OpenSeadragonViewer
|
||||
id="openseadragon"
|
||||
ref="openseadragon"
|
||||
:src="selectedScanDZI"
|
||||
:brightness="brightness"
|
||||
:contrast="contrast"
|
||||
:saturation="saturation"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
<div
|
||||
v-if="selectedScanDZI"
|
||||
class="viewer-controls"
|
||||
>
|
||||
<div class="controlsContainer">
|
||||
<label>
|
||||
Brightness
|
||||
<input
|
||||
type="range"
|
||||
min="0.2"
|
||||
max="1.8"
|
||||
step="0.01"
|
||||
v-model.number="brightness"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Contrast
|
||||
<input
|
||||
type="range"
|
||||
min="0.2"
|
||||
max="1.8"
|
||||
step="0.01"
|
||||
v-model.number="contrast"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Saturation
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="2"
|
||||
step="0.01"
|
||||
v-model.number="saturation"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="uk-button uk-button-default reset-button"
|
||||
@click="resetFilters"
|
||||
>
|
||||
Reset Filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UIkit from "uikit";
|
||||
import OpenSeadragonViewer from "./openSeadragonViewer.vue";
|
||||
|
||||
export default {
|
||||
name: "ScanViewerModal",
|
||||
components: { OpenSeadragonViewer },
|
||||
props: {
|
||||
selectedScan: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
baseUri: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
brightness: 1,
|
||||
contrast: 1,
|
||||
saturation: 1,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
selectedScanDZI() {
|
||||
if (this.selectedScan && this.selectedScan.dzi) {
|
||||
return `${this.baseUri}/scans/${this.selectedScan.name}/images/${this.selectedScan.dzi}`;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
show() {
|
||||
UIkit.modal(this.$refs.scanModal).show();
|
||||
},
|
||||
hide() {
|
||||
UIkit.modal(this.$refs.scanModal).hide();
|
||||
},
|
||||
goFullscreen() {
|
||||
this.$refs.openseadragon.openFullscreen();
|
||||
},
|
||||
resetFilters() {
|
||||
this.brightness = 1;
|
||||
this.contrast = 1;
|
||||
this.saturation = 1;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
input[type="range"] {
|
||||
pointer-events: auto;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
#scan-modal {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#scan-modal-body {
|
||||
padding: 10px;
|
||||
width: 95%;
|
||||
height: 95%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#scan-modal-title {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.controlsContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.viewer-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.viewer_container {
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.reset-button{
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,26 +10,25 @@
|
|||
<!-- Right side buttons -->
|
||||
<div class="uk-navbar-right">
|
||||
<div class="uk-grid">
|
||||
<div style="margin-top:5px;margin-bottom: 2px">
|
||||
<div class="scan-list-button">
|
||||
<action-button
|
||||
class="uk-width-1-1"
|
||||
thing="smart_scan"
|
||||
action="stitch_all_scans"
|
||||
submit-label="Stitch All Remaining"
|
||||
:can-terminate="true"
|
||||
:button-primary="false"
|
||||
:modal-progress="true"
|
||||
:requires-confirmation="true"
|
||||
:confirmation-message="
|
||||
'<h3>Stitch all unstitched scans?</h3><br>Depending on the number and size of scans, this may be slow, and your microscope should not be used during the stitching.'
|
||||
"
|
||||
@error="modalError"
|
||||
/>
|
||||
class="uk-width-1-1"
|
||||
thing="smart_scan"
|
||||
action="stitch_all_scans"
|
||||
submit-label="Stitch All Remaining"
|
||||
:can-terminate="true"
|
||||
:button-primary="false"
|
||||
:modal-progress="true"
|
||||
:requires-confirmation="true"
|
||||
:confirmation-message="
|
||||
'<h3>Stitch all unstitched scans?</h3><br>Depending on the number and size of scans, this may be slow, and your microscope should not be used during the stitching.'
|
||||
"
|
||||
@error="modalError"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="uk-button uk-button-default uk-width-1-1"
|
||||
style="margin-top:5px;margin-bottom: 2px"
|
||||
class="uk-button uk-button-default uk-width-1-1 scan-list-button"
|
||||
type="button"
|
||||
@click="deleteAllScans()"
|
||||
>
|
||||
|
|
@ -38,8 +37,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="uk-button uk-button-default uk-width-1-1"
|
||||
style="margin-top:5px;margin-bottom: 2px"
|
||||
class="uk-button uk-button-default uk-width-1-1 scan-list-button"
|
||||
type="button"
|
||||
@click="updateScans()"
|
||||
>
|
||||
|
|
@ -50,25 +48,12 @@
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Modal for scan display -->
|
||||
<div id="scan-modal" ref="scanModal" style="padding: 10px;" uk-modal>
|
||||
<div class="uk-modal-dialog uk-modal-body " v-if="selectedScan" style="padding: 10px; width: 95%; height: 95%;">
|
||||
<h2 class="uk-modal-title">
|
||||
{{ selectedScan.name }}
|
||||
<button class="uk-modal-close uk-float-right" type="button"><span class="material-symbols-outlined">close</span></button>
|
||||
<button class="uk-float-right" type="button" @click="goFullscreen">
|
||||
<span class="material-symbols-outlined">fullscreen</span>
|
||||
</button>
|
||||
</h2>
|
||||
<div v-if="selectedScanDZI" id="viewer_container" style="height: 80%;">
|
||||
<OpenSeadragonViewer
|
||||
id="openseadragon"
|
||||
ref="openseadragon"
|
||||
:src="selectedScanDZI"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ScanViewerModal
|
||||
ref="scanViewer"
|
||||
:selectedScan="selectedScan"
|
||||
:baseUri="$store.getters.baseUri"
|
||||
/>
|
||||
|
||||
|
||||
<!-- Gallery -->
|
||||
<div
|
||||
|
|
@ -100,15 +85,14 @@
|
|||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import UIkit from "uikit";
|
||||
import actionButton from "../labThingsComponents/actionButton.vue";
|
||||
import scanCard from "./scanListComponents/scanCard.vue";
|
||||
import OpenSeadragonViewer from "./scanListComponents/openSeadragonViewer.vue";
|
||||
import ScanViewerModal from "./scanListComponents/scanViewer.vue";
|
||||
|
||||
// Export main app
|
||||
export default {
|
||||
name: "ScanListContent",
|
||||
components: { actionButton, OpenSeadragonViewer, scanCard },
|
||||
components: { actionButton, scanCard, ScanViewerModal },
|
||||
|
||||
data: function() {
|
||||
return {
|
||||
|
|
@ -188,9 +172,6 @@ export default {
|
|||
this.updateScans();
|
||||
}
|
||||
},
|
||||
goFullscreen() {
|
||||
this.$refs.openseadragon.openFullscreen();
|
||||
},
|
||||
async updateScans() {
|
||||
try {
|
||||
let scans_information = await this.readThingProperty("smart_scan", "scans");
|
||||
|
|
@ -230,16 +211,15 @@ export default {
|
|||
}
|
||||
},
|
||||
showScan(scan) {
|
||||
if (scan.dzi){
|
||||
if (scan.dzi) {
|
||||
this.selectedScan = scan;
|
||||
UIkit.modal(this.$refs.scanModal).show();
|
||||
}
|
||||
else {
|
||||
this.modalError(`Scan not stitched for viewing in webapp, please download or stitch`)
|
||||
this.$refs.scanViewer.show();
|
||||
} else {
|
||||
this.modalError("Scan not stitched for viewing in webapp, please download or stitch");
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
@ -254,4 +234,8 @@ export default {
|
|||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.scan-list-button {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue