Colour sliders in seadragon viewer

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

@@ -7,10 +7,8 @@
 <script>
 import OpenSeaDragon from "openseadragon";
 
-// Export main app
 export default {
   name: "OpenSeadragonViewer",
-  components: {  },
 
   props: {
     src: {
@@ -21,7 +19,10 @@ export default {
 
   data: function() {
     return {
-      osdViewer: null
+      osdViewer: null,
+      brightness: 1,
+      contrast: 1,
+      saturation: 1,
     };
   },
 
@@ -67,6 +68,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 +96,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>

webapp/src/components/tabContentComponents/scanListContent.vue

@@ -52,21 +52,93 @@
 
     <!-- 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">
+      <div
+        class="uk-modal-dialog uk-modal-body"
+        v-if="selectedScan"
+        style="padding: 10px; width: 95%; height: 95%; display: flex; flex-direction: column;"
+      >
+        <h2 class="uk-modal-title" style="flex: 0 0 auto;">
           {{ selectedScan.name }}
-          <button class="uk-modal-close uk-float-right" type="button"><span class="material-symbols-outlined">close</span></button>
+          <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"
-            />
+        </h2>
+
+        <!-- Viewer -->
+        <div
+          v-if="selectedScanDZI"
+          id="viewer_container"
+          style="flex: 1 1 auto; position: relative; overflow: hidden;"
+        >
+          <OpenSeadragonViewer
+            id="openseadragon"
+            ref="openseadragon"
+            :src="selectedScanDZI"
+          />
+        </div>
+
+        <!-- Controls -->
+        <div
+          v-if="selectedScanDZI"
+          class="viewer-controls"
+          style="
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 0.5rem;
+            margin-top: 0.5rem;
+          "
+        >
+          <!-- Brightness/Contrast/Saturation -->
+          <div style="display: flex; justify-content: center; gap: 1.5rem;">
+            <label>
+              Brightness
+              <input
+                type="range"
+                min="0"
+                max="2"
+                step="0.01"
+                v-model.number="brightness"
+                @input="updateViewerFilter"
+              />
+            </label>
+            <label>
+              Contrast
+              <input
+                type="range"
+                min="0"
+                max="2"
+                step="0.01"
+                v-model.number="contrast"
+                @input="updateViewerFilter"
+              />
+            </label>
+            <label>
+              Saturation
+              <input
+                type="range"
+                min="0"
+                max="2"
+                step="0.01"
+                v-model.number="saturation"
+                @input="updateViewerFilter"
+              />
+            </label>
           </div>
+
+          <!-- Reset Button -->
+          <button
+            type="button"
+            class="uk-button uk-button-default"
+            style="margin-top: 0.5rem;"
+            @click="resetFilters"
+          >
+            Reset Filters
+          </button>
+        </div>
       </div>
     </div>
 
@@ -115,7 +187,10 @@ export default {
       scans: [],
       ongoing: null,
       selectedScan: null,
-      osdViewer: null
+      osdViewer: null,
+      brightness: 1,
+      contrast: 1,
+      saturation: 1,
     };
   },
 
@@ -188,6 +263,21 @@ export default {
         this.updateScans();
       }
     },
+    updateViewerFilter() {
+      const viewer = this.$refs.openseadragon;
+      if (viewer) {
+        viewer.brightness = this.brightness;
+        viewer.contrast = this.contrast;
+        viewer.saturation = this.saturation;
+        viewer.updateFilter();
+      }
+    },
+    resetFilters() {
+      this.brightness = 1;
+      this.contrast = 1;
+      this.saturation = 1;
+      this.updateViewerFilter();
+    },
     goFullscreen() {
       this.$refs.openseadragon.openFullscreen();
     },