Changeset 35955 for main/trunk

Timestamp:

2022-01-11T13:16:54+13:00 (2 years ago)

Author:

cstephen

Message:

Improve controls display and implement spellchecking control

Location:

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

Files:

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

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

@@ -6 +6 @@
 import { SnackController } from "./Snackbar.vue"
 import OcrService, { OcrOptions } from "../js/OcrService"
-import { log } from "../js/Util";
+import Util, { log } from "../js/Util";
 
 const ocrService = new OcrService();
@@ -31 +31 @@
 
             showEditor: false,
-            ocrTextEdited: false
+            ocrTextEdited: false,
+            enableMagnifier: false,
+            magnifierZoom: 1.5,
+            enableSpellcheck: false
         }
     },
@@ -55 +58 @@
             const blob = new Blob([ arrayView ], { type: this.imageType });
             this.imageUrl = URL.createObjectURL(blob);
+        },
+        enableMagnifier(newValue) {
+            localStorage.setItem("enableMagnifier", newValue);
+        },
+        magnifierZoom(newValue) {
+            localStorage.setItem("magnifierZoom", newValue);
+            this.enableMagnifier = true;
+        },
+        enableSpellcheck(newValue) {
+            localStorage.setItem("enableSpellcheck", newValue);
         }
     },
@@ -193 +206 @@
             saveAs(blob, fileName);
         }
+    },
+    beforeMount() {
+        this.enableMagnifier = localStorage.getItem("enableMagnifier") === "true";
+        this.magnifierZoom = parseFloat(localStorage.getItem("magnifierZoom") ?? "1.5");
+
+        const enableSpellcheck = localStorage.getItem("enableSpellcheck");
+        if (enableSpellcheck) {
+            this.enableSpellcheck = enableSpellcheck === "true";
+        }
+        else {
+            this.enableSpellcheck = Util.getNavigatorLanguage().startsWith("mi");
+        }
     }
 }
@@ -236 +261 @@
             </div>
 
-            <ocr-image-display :imageUrl="imageUrl" :thresholdedImageUrl="thresholdedImageUrl" />
-
-            <textarea class="text-container" v-model="ocrResult" :placeholder="translations.get('MainPage_OCRHint')"
-                @input="ocrTextEdited = true" :disabled="!isValidOcrResult || ocrInProgress" autocomplete="off" spellcheck="false"/>
+            <div class="content-controls">
+                <div>
+                    <div class="flex-h">
+                        <input id="chk-enable-magnifier" type="checkbox" v-model="enableMagnifier" />
+                        <label for="chk-enable-magnifier">{{ translations.get('MainPage_EnableMagnifier') }}</label>
+                    </div>
+
+                    <div class="flex-h" style="margin-top: 0.5em">
+                        <span>1.5x</span>
+                        <input type="range" min="1.5" max="3" step="0.1" v-model.number="magnifierZoom" />
+                        <span>3x</span>
+                    </div>
+                </div>
+
+                <div style="max-width: 450px; word-wrap: normal;">
+                    <div class="flex-h">
+                        <input id="chk-show-thresholded-image" type="checkbox" v-model="showThresholdedImage" :disabled="!ocrResult" />
+                        <label for="chk-show-thresholded-image">{{ translations.get('MainPage_ShowThresholdedImage') }}</label>
+                    </div>
+
+                    <span class="body2">
+                        {{ translations.get('MainPage_ThresholdedImageDescription') }}
+                    </span>
+                </div>
+
+                <div class="flex-h">
+                    <input id="chk-enable-spellcheck" type="checkbox" v-model="enableSpellcheck" />
+                    <label for="chk-enable-spellcheck">{{ translations.get('MainPage_EnableSpellcheck') }}</label>
+                </div>
+            </div>
+
+            <div class="main-content-columns">
+                <ocr-image-display
+                    :imageUrl="imageUrl"
+                    :thresholdedImageUrl="thresholdedImageUrl"
+                    :enableMagnifier="enableMagnifier"
+                    :magnifierZoom="magnifierZoom"
+                    :showThresholdedImage="showThresholdedImage" />
+
+                <textarea
+                    class="text-container"
+                    v-model="ocrResult"
+                    :placeholder="translations.get('MainPage_OCRHint')"
+                    @input="ocrTextEdited = true"
+                    :disabled="!isValidOcrResult || ocrInProgress"
+                    autocomplete="off"
+                    :spellcheck="enableSpellcheck"/>
+            </div>
         </div>
     </div>
@@ -303 +372 @@
 
 .main-area {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto auto 1fr;
+    display: flex;
+    flex-direction: column;
     height: 100%;
 
@@ -324 +392 @@
     display: flex;
     gap: 1em;
-    grid-column-start: span 2;
-}
-
-.ocr-progress {
-    grid-column-start: span 2;
+}
+
+.content-controls {
+    display: flex;
+    align-items: flex-start;
+    gap: 1em;
+}
+
+.main-content-columns {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+    flex-grow: 1;
+    width: 100%;
+
+    gap: 1em;
+    align-items: center;
+    justify-items: center;
 }
 </style>

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

@@ -6 +6 @@
     props: {
         imageUrl: String,
-        thresholdedImageUrl: String
+        thresholdedImageUrl: String,
+        enableMagnifier: Boolean,
+        magnifierZoom: Number,
+        showThresholdedImage: Boolean
     },
     data() {
         return {
-            showThresholdedImage: false,
             /** @type {DOMRect} */
-            magnifierBounds: null,
-            magnifierZoom: 1.5,
-            showControls: false,
-            enableMagnifier: false
+            magnifierBounds: null
         }
     },
@@ -146 +145 @@
             }, 100);
         },
-        magnifierZoom(newValue) {
+        magnifierZoom() {
             if (this.showThresholdedImage) {
                 this.updateMagnifier(this.$refs.thresholdedImage);
@@ -153 +152 @@
                 this.updateMagnifier(this.$refs.ocrImage);
             }
-
-            localStorage.setItem("magnifierZoom", newValue);
-        },
-        enableMagnifier(newValue) {
-            localStorage.setItem("enableMagnifier", newValue);
-        }
-    },
-    beforeMount() {
-        this.enableMagnifier = localStorage.getItem("enableMagnifier") === "true";
+        }
     },
     mounted() {
@@ -167 +158 @@
             this.updateMagnifier(this.$refs.ocrImage);
         }, 100);
-
-        this.magnifierZoom = localStorage.getItem("magnifierZoom") ?? "1.5";
     }
 }
@@ -178 +167 @@
     <img ref="ocrImage" class="ocr-image" :src="imageUrl" />
     <img v-if="showThresholdedImage" ref="thresholdedImage" class="ocr-image" :src="thresholdedImageUrl" />
-
-    <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>
 </template>
@@ -212 +173 @@
 .ocr-image-container {
     position: relative;
-    height: 100%;
-    width: 100%;
-
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-
-    align-items: center;
-    justify-items: center;
 
     &:hover {
@@ -247 +199 @@
 }
 
-.control-tip {
-    position: absolute;
-    top: 0.5em;
-    left: 0.5em;
-
-    opacity: 0;
-    z-index: 3;
-}
-
-.controls {
-    position: absolute;
-    left: 0.2em;
-    top: 0.2em;
-
-    display: flex;
-    flex-direction: column;
-    gap: 0.5em;
-
-    transition-duration: var(--transition-duration);
-    opacity: 0;
-    z-index: 2;
-
-    .spacer {
-        visibility: hidden;
-    }
-
-    span {
-        grid-column: span 2;
-    }
-}
-
 .magnifier {
     position: absolute;
@@ -290 +211 @@
 
     transition: opacity var(--transition-duration);
-    opacity: 0;
+    opacity: 0.2;
 }
 </style>

main/trunk/model-interfaces-dev/atea/ocr/src/js/Util.js

@@ -68 +68 @@
             this.lut[d3 & 0xff] + this.lut[d3 >> 8 & 0xff] + this.lut[d3 >> 16 & 0xff] + this.lut[d3 >> 24 & 0xff];
     }
+
+    /**
+     * Gets the navigator's primary language.
+     * @returns {String} The primary language code.
+     */
+    static getNavigatorLanguage() {
+        if (navigator.languages && navigator.languages.length) {
+            return navigator.languages[0];
+        }
+
+        if (navigator.language) {
+            return navigator.language;
+        }
+
+        // IE Support
+        return navigator.browserLanguage || navigator.systemLanguage || navigator.userLanguage;
+    }
 }

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

@@ -222 +222 @@
 
     height: 16px;
-    width: 38px;
+    max-width: 38px;
+    min-width: 38px;
     border-radius: 8px;
     display: inline-block;