source: main/trunk/model-interfaces-dev/atea/ocr/src/components/EditPage.vue@ 35734

Last change on this file since 35734 was 35734, checked in by cstephen, 13 months ago

Add OCR interface

File size: 4.0 KB
Line 
1<template>
2<div class="root">
3 <div class="image-panel">
4 <table v-if="rotateMode" class="rotate-guide">
5 <tr><hr /></tr>
6 <tr><hr /></tr>
7 <tr><hr /></tr>
8 <tr><hr /></tr>
9 <tr><hr /></tr>
10 <tr><hr /></tr>
11 <tr><hr /></tr>
12 <tr><hr /></tr>
13 <tr><hr /></tr>
14 <tr><hr /></tr>
15 <tr><hr /></tr>
16 <tr><hr /></tr>
17 </table>
18
19 <!-- <img :src="imageUrl" class="image" :style="{ filter: filterString, transform: transformString }" /> -->
20 <div class="image-container">
21 <img v-if="rotateMode" src="images/rotate_arrow_64.png" class="rotate-handle rotate-tl" />
22 <img v-if="rotateMode" src="images/rotate_arrow_64.png" class="rotate-handle rotate-tr" />
23 <img v-if="rotateMode" src="images/rotate_arrow_64.png" class="rotate-handle rotate-bl" />
24 <img v-if="rotateMode" src="images/rotate_arrow_64.png" class="rotate-handle rotate-br" />
25
26 <img :src="imageUrl" class="image" :style="{ filter: filterString, transform: transformString }" />
27 </div>
28 </div>
29
30 <div class="control-panel">
31 <button class="btn-fab" @click="$emit('closeRequested')">
32 <span class="material-icons mdi-l">save</span>
33 </button>
34
35 <button class="btn-fab" @click="invert = !invert">
36 <span class="material-icons mdi-l">invert_colors</span>
37 </button>
38
39 <toggle-button v-model="rotateMode">
40 <span class="material-icons mdi-l">crop_rotate</span>
41 </toggle-button>
42 </div>
43</div>
44</template>
45
46<style lang="scss" scoped>
47.root {
48 display: grid;
49 grid-template-columns: 1fr auto;
50 grid-template-rows: 100%;
51 align-items: center;
52 justify-items: center;
53 background: rgba(0, 0, 0, 0.8);
54}
55
56.image-panel {
57 position: relative;
58 height: 100%;
59 width: 100%;
60
61 display: grid;
62 align-items: center;
63 justify-items: center;
64}
65
66.image {
67 max-width: 100%;
68 height: auto;
69}
70
71.image-container {
72 max-width: 70%;
73 max-height: 70%;
74 position: relative;
75 margin: auto;
76 padding: 1em;
77
78 .rotate-handle {
79 height: 2em;
80 position: absolute;
81
82 // Generated with https://codepen.io/sosuke/pen/Pjoqqp using var(--primary-bg-color)
83 filter: invert(16%) sepia(100%) saturate(3091%) hue-rotate(347deg) brightness(75%) contrast(90%);
84 }
85
86 .rotate-tl {
87 top: 0;
88 left: 0;
89 }
90
91 .rotate-tr {
92 top: 0;
93 right: 0;
94 transform: rotate(90deg);
95 }
96
97 .rotate-bl {
98 bottom: 0;
99 left: 0;
100 transform: rotate(270deg);
101 }
102
103 .rotate-br {
104 bottom: 0;
105 right: 0;
106 transform: rotate(180deg);
107 }
108}
109
110.rotate-guide {
111 position: absolute;
112 top: 0;
113 left: 0;
114 height: 100%;
115 width: 100%;
116 z-index: 3;
117
118 tr hr {
119 background-color: rgba(var(--bg-color-raw), 0.5);
120 }
121}
122
123.control-panel {
124 display: flex;
125 flex-direction: column;
126 justify-content: center;
127 align-items: center;
128
129 padding: 0.5em;
130 gap: 1em;
131 height: 100%;
132
133 // background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 10%);
134}
135</style>
136
137<script>
138import { mapState } from "vuex";
139import ToggleButton from "./ToggleButton.vue"
140
141export default {
142 name: "EditPage",
143 components: {
144 ToggleButton
145 },
146 props: {
147 image: File
148 },
149 data() {
150 return {
151 imageUrl: URL.createObjectURL(this.image),
152 invert: false,
153 rotateMode: false
154 }
155 },
156 computed: {
157 ...mapState({
158 translations: state => state.translations,
159 filterString() {
160 let filters = "";
161
162 if (this.invert) {
163 filters += "invert(1) ";
164 }
165
166 return filters;
167 },
168 transformString() {
169 return `rotate(${this.rotation}deg)`
170 }
171 })
172 },
173 methods: {
174 }
175}
176</script>
Note: See TracBrowser for help on using the repository browser.