Changeset 35775

Timestamp:

2021-12-08T16:57:15+13:00 (2 years ago)

Author:

cstephen

Message:

Work on image magnifier

Location:

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

Files:

• DirectInput.vue (deleted)
• MainPage.vue (modified) (4 diffs)
• OcrImageDisplay.vue (added)

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

@@ -38 +38 @@
             </div>
 
-            <div class="ocr-image-container">
-                <img class="ocr-image" :src="imageUrl" />
-                <img v-if="showThresholdedImage" 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>
-                </div>
-            </div>
+            <ocr-image-display :imageUrl="imageUrl" :thresholdedImageUrl="thresholdedImageUrl" />
 
             <textarea class="text-container" v-model="ocrResult" :placeholder="translations.get('MainPage_OCRHint')"
@@ -132 +122 @@
 }
 
-.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 {
-        .thresholded-image-controls {
-            opacity: 0.99;
-        }
-    }
-}
-
-.ocr-image {
-    border: 1px solid #444;
-    max-width: 100%;
-    max-height: 80vh;
-    object-fit: contain;
-    grid-row: 1;
-    grid-column: 1;
-}
-
-.thresholded-image-controls {
-    position: absolute;
-    top: 1em;
-    left: 1em;
-    max-width: 50%;
-
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto auto;
-    align-items: center;
-    justify-items: start;
-    gap: 0.5em;
-
-    transition-duration: var(--transition-duration);
-    opacity: 0;
-
-    span {
-        grid-column: span 2;
-    }
-}
-
 .controls {
     display: flex;
@@ -195 +136 @@
 import { mapState } from "vuex";
 import EditPage from "./EditPage.vue";
+import OcrImageDisplay from "./OcrImageDisplay.vue"
 import { ModalController } from "./ModalDialog.vue"
 import OcrService, { OcrOptions } from "../js/OcrService"
@@ -204 +146 @@
     name: "MainPage",
     components: {
-        EditPage
+        EditPage,
+        OcrImageDisplay
     },
     data() {