Changeset 35752


Ignore:
Timestamp:
2021-11-25T15:49:30+13:00 (10 days ago)
Author:
cstephen
Message:

Implement editing and downloading of the OCR result.

Location:
main/trunk/model-interfaces-dev/atea/ocr/src/components
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • main/trunk/model-interfaces-dev/atea/ocr/src/components/MainPage.vue

    r35751 r35752  
    2424                </button>
    2525
     26                <button class="btn-primary" @click="download" :disabled="ocrResult === null || ocrResult.length === 0">
     27                    <span class="material-icons">download</span>
     28                    <span>{{ translations.get("MainPage_Download") }}</span>
     29                </button>
     30
    2631                <button class="btn-primary" @click="reset(false)" :disabled="ocrInProgress">
    2732                    <span class="material-icons">restart_alt</span>
     
    3641            <img class="image-display" :src="imageUrl" />
    3742
    38             <div class="text-container">
    39                 <span v-if="ocrResult === null && !ocrInProgress" class="text-placeholder">{{ translations.get("MainPage_OCRHint") }}</span>
    40                 <pre>{{ ocrResult }}</pre>
    41             </div>
     43            <textarea class="text-container" v-model="ocrResult" :placeholder="translations.get('MainPage_OCRHint')"
     44                @input="modalChecks.ocrTextEdited = true" />
    4245        </div>
    4346    </div>
     
    135138.ocr-progress {
    136139    grid-column-start: span 2;
    137 }
    138 
    139 .text-container {
    140     overflow: scroll;
    141140}
    142141</style>
     
    171170                description: "",
    172171                buttons: []
     172            },
     173            modalChecks: {
     174                ocrTextEdited: false,
     175                pendingReset: false
    173176            }
    174177        }
     
    210213
    211214        async doOcr() {
     215            if (this.modalChecks.ocrTextEdited) {
     216                this.modal.title = this.translations.get("OCREditedModal_Title");
     217                this.modal.description = this.translations.get("OCREditedModal_Description");
     218                this.modal.buttons = [
     219                    this.translations.get("OCREditedModal_ButtonContinue"),
     220                    this.translations.get("OCREditedModal_ButtonCancel")
     221                ];
     222                this.modal.show = true;
     223
     224                return;
     225            }
     226
    212227            try {
    213228                this.ocrInProgress = true;
     
    225240
    226241                this.ocrResult = result[0].text;
     242                this.modalChecks.ocrTextEdited = false;
    227243            }
    228244            catch (ex) {
     
    253269        reset(hard) {
    254270            if (!hard) {
    255                 // TODO: Translate
     271                this.modalChecks.pendingReset = true;
     272
    256273                this.modal.title = this.translations.get("NewImageModal_Title");
    257274                this.modal.description = this.translations.get("NewImageModal_Description");
     
    259276                    this.translations.get("NewImageModal_ButtonContinue"),
    260277                    this.translations.get("NewImageModal_ButtonCancel")
    261                 ]
    262                 this.modal.resetConfirmation = true;
     278                ];
    263279                this.modal.show = true;
    264280
     
    274290        },
    275291
    276         onModalClose(button) {
     292        async onModalClose(button) {
    277293            this.modal.show = false;
    278294
    279             if (this.modal.resetConfirmation) {
     295            if (this.modalChecks.pendingReset) {
     296                console.log("reset is indeed pending");
    280297                if (button === "Continue") {
    281298                    this.reset(true);
    282299                }
    283300
    284                 this.modal.resetConfirmation = false;
    285             }
     301                this.modalChecks.pendingReset = false;
     302            }
     303            else if (this.modalChecks.ocrTextEdited) {
     304                if (button === "Continue") {
     305                    this.modalChecks.ocrTextEdited = false;
     306                    await this.doOcr();
     307                }
     308            }
     309        },
     310
     311        async download() {
     312            const blob = new Blob([ this.ocrResult ], { type: "text/plain;charset=utf-8" });
     313            const date = new Date();
     314            const fileName = `ocr-${date.getHours()}${date.getMinutes()}${date.getSeconds()}.txt`;
     315
     316            const { saveAs } = await import("file-saver");
     317            saveAs(blob, fileName);
    286318        }
    287319    }
  • main/trunk/model-interfaces-dev/atea/ocr/src/components/ModalDialog.vue

    r35751 r35752  
    11<template>
    22<div class="background-cover">
    3     <div class="paper">
     3    <div class="paper modal">
    44        <span class="heading3">{{ title }}</span>
    55        <hr />
     
    2828}
    2929
     30.modal {
     31    max-width: 50%;
     32}
     33
    3034.buttons {
    3135    display: flex;
Note: See TracChangeset for help on using the changeset viewer.