Changeset 35779

Timestamp:

2021-12-09T13:18:40+13:00 (2 years ago)

Author:

cstephen

Message:

Improve magnifier, improve image controls layout

Location:

main/trunk/model-interfaces-dev/atea/ocr/src

Files:

• components/OcrImageDisplay.vue (modified) (7 diffs)
• styles/_material.scss (modified) (1 diff)

main/trunk/model-interfaces-dev/atea/ocr/src/components/OcrImageDisplay.vue

@@ -13 +13 @@
             /** @type {DOMRect} */
             magnifierBounds: null,
-            magnifierZoom: 1.5
+            magnifierZoom: 1.5,
+            showControls: false,
+            enableMagnifier: false
         }
     },
@@ -91 +93 @@
             // Convert the offset to valid CSS values
             const actualX = imageX < 0
-                ? "0"
+                ? `${(imageX * this.magnifierZoom * -1)}px`
                 : `-${(imageX * this.magnifierZoom)}px`
 
             const actualY = imageY < 0
-                ? "0"
+                ? `${(imageY * this.magnifierZoom * -1)}px`
                 : `-${(imageY * this.magnifierZoom)}px`
 
@@ -147 +149 @@
                 }
             }, 100);
+        },
+        magnifierZoom() {
+            if (this.showThresholdedImage) {
+                this.updateMagnifier(this.$refs.thresholdedImage);
+            }
+            else {
+                this.updateMagnifier(this.$refs.ocrImage);
+            }
         }
     },
@@ -160 +170 @@
 <template>
 <div ref="magContainer" class="ocr-image-container">
-    <div ref="magnifier" class="magnifier" @mousemove="moveMagnifier" />
+    <div ref="magnifier" class="magnifier" @mousemove="moveMagnifier" :style="{ 'visibility': enableMagnifier ? 'visible' : 'collapse' }" />
     <img ref="ocrImage" class="ocr-image" :src="imageUrl" />
     <img v-if="showThresholdedImage" ref="thresholdedImage" class="ocr-image" :src="thresholdedImageUrl" />
 
-    <div v-if="thresholdedImageUrl" class="thresholded-image-controls card">
-        <input id="chk-show-thresholded-image" type="checkbox" v-model="showThresholdedImage" />
-        <label for="chk-show-thresholded-image">{{ translations.get('MainPage_ShowThresholdedImage') }}</label>
-
-        <span class="body2">{{ translations.get('MainPage_ThresholdedImageDescription') }}</span>
+    <button class="control-tip btn-fab" @click="showControls = !showControls">
+        <span class="material-icons mdi-l">settings</span>
+    </button>
+
+    <div v-if="showControls" class="controls card">
+        <button class="spacer btn-fab">
+            <span class="material-icons mdi-l">settings</span>
+        </button>
+
+        <div class="flex-h">
+            <input id="chk-enable-magnifier" type="checkbox" v-model="enableMagnifier" />
+            <label for="chk-enable-magnifier">{{ translations.get('OcrImageDisplay_EnableMagnifier') }}</label>
+        </div>
+
+        <div class="flex-h">
+            <span>1.5x</span>
+            <input :disabled="!enableMagnifier" type="range" min="1.5" max="3" step="0.1" v-model="magnifierZoom" />
+            <span>3x</span>
+        </div>
+
+        <div v-if="thresholdedImageUrl" class="flex-h">
+            <input id="chk-show-thresholded-image" type="checkbox" v-model="showThresholdedImage" />
+            <label for="chk-show-thresholded-image">{{ translations.get('OcrImageDisplay_ShowThresholdedImage') }}</label>
+        </div>
+
+        <span v-if="thresholdedImageUrl" class="body2">{{ translations.get('OcrImageDisplay_ThresholdedImageDescription') }}</span>
     </div>
 </div>
@@ -187 +218 @@
 
     &:hover {
-        .thresholded-image-controls {
-            opacity: 0.99;
+        .control-tip {
+            opacity: 1;
+        }
+
+        .controls {
+            opacity: 1;
         }
     }
@@ -202 +237 @@
 }
 
-.thresholded-image-controls {
+.control-tip {
     position: absolute;
-    top: 1em;
-    left: 1em;
+    top: 0.5em;
+    left: 0.5em;
+
+    opacity: 0;
+    z-index: 3;
+}
+
+.controls {
+    position: absolute;
+    left: 0.2em;
+    top: 0.2em;
     max-width: 50%;
 
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto auto;
-    align-items: center;
-    justify-items: start;
+    display: flex;
+    flex-direction: column;
     gap: 0.5em;
 
     transition-duration: var(--transition-duration);
     opacity: 0;
+    z-index: 2;
+
+    .spacer {
+        visibility: hidden;
+    }
 
     span {
@@ -228 +274 @@
     height: 175px;
 
+    background-color: white;
     background-repeat: no-repeat;
     border: 2px solid #000;

main/trunk/model-interfaces-dev/atea/ocr/src/styles/_material.scss

@@ -460 +460 @@
 }
 
+/* Helpers */
+
+.flex-h {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+}
+
 /* === Start Theme Definitions === */