Merge branch 'colourful-dragon' into 'v3'

Colour sliders in seadragon viewer

See merge request openflexure/openflexure-microscope-server!409

webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue

@@ -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;
+  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;
 }
 </style>

webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue

@@ -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>

webapp/src/components/tabContentComponents/scanListContent.vue

@@ -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"
+              class="uk-width-1-1"
-                thing="smart_scan"
+              thing="smart_scan"
-                action="stitch_all_scans"
+              action="stitch_all_scans"
-                submit-label="Stitch All Remaining"
+              submit-label="Stitch All Remaining"
-                :can-terminate="true"
+              :can-terminate="true"
-                :button-primary="false"
+              :button-primary="false"
-                :modal-progress="true"
+              :modal-progress="true"
-                :requires-confirmation="true"
+              :requires-confirmation="true"
-                :confirmation-message="
+              :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.'
+                '<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"
+              @error="modalError"
-                />
+            />
           </div>
           <div>
             <button
-              class="uk-button uk-button-default uk-width-1-1"
+              class="uk-button uk-button-default uk-width-1-1 scan-list-button"
-              style="margin-top:5px;margin-bottom: 2px"
               type="button"
               @click="deleteAllScans()"
             >
@@ -38,8 +37,7 @@
           </div>
           <div>
             <button
-              class="uk-button uk-button-default uk-width-1-1"
+              class="uk-button uk-button-default uk-width-1-1 scan-list-button"
-              style="margin-top:5px;margin-bottom: 2px"
               type="button"
               @click="updateScans()"
             >
@@ -50,25 +48,12 @@
       </div>
     </nav>
 
-    <!-- Modal for scan display -->
+    <ScanViewerModal
-    <div id="scan-modal" ref="scanModal" style="padding: 10px;" uk-modal>
+      ref="scanViewer"
-      <div class="uk-modal-dialog uk-modal-body " v-if="selectedScan" style="padding: 10px; width: 95%; height: 95%;">
+      :selectedScan="selectedScan"
-        <h2 class="uk-modal-title">
+      :baseUri="$store.getters.baseUri"
-          {{ 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>
 
     <!-- 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();
+        this.$refs.scanViewer.show();
-      }
+      } else {
-      else {
+        this.modalError("Scan not stitched for viewing in webapp, please download or stitch");
-        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>