Merge pull request #195 from sbs20/staging

Paper sizes and geometry fix
sbs20 · Apr 17, 2021 · c3122b5 · c3122b5
2 parents 938a9b0 + 3458b6f
commit c3122b5
Show file tree

Hide file tree

Showing 14 changed files with 120 additions and 22 deletions.
diff --git a/server/package-lock.json b/server/package-lock.json
diff --git a/server/package.json b/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scanservjs-server",
-  "version": "2.9.1",
+  "version": "2.9.2",
   "description": "scanservjs is a simple web-based UI for SANE which allows you to share a scanner on a network without the need for drivers or complicated installation. scanserv does not do image conversion or manipulation (beyond the bare minimum necessary for the purposes of browser preview) or OCR.",
   "scripts": {
     "serve": "nodemon --exec 'vue-cli-service serve'",

diff --git a/server/src/config.js b/server/src/config.js
@@ -69,6 +69,27 @@ class Config {
         }
       ],
 
+      paperSizes: [
+        { name: 'A3', dimensions: { x: 297, y: 420 } },
+        { name: 'A4', dimensions: { x: 215, y: 297 } },
+        { name: 'A5', dimensions: { x: 148, y: 215 } },
+        { name: 'A6', dimensions: { x: 105, y: 148 } },
+        { name: 'B3', dimensions: { x: 353, y: 500 } },
+        { name: 'B4', dimensions: { x: 250, y: 353 } },
+        { name: 'B5', dimensions: { x: 176, y: 250 } },
+        { name: 'B6', dimensions: { x: 125, y: 176 } },
+        { name: 'DIN D3', dimensions: { x: 272, y: 385 } },
+        { name: 'DIN D4', dimensions: { x: 192, y: 272 } },
+        { name: 'DIN D5', dimensions: { x: 136, y: 192 } },
+        { name: 'DIN D6', dimensions: { x: 96, y: 136 } },
+        { name: 'Letter', dimensions: { x: 216, y: 279 } },
+        { name: 'Legal', dimensions: { x: 216, y: 356 } },
+        { name: 'Tabloid', dimensions: { x: 279, y: 432 } },
+        { name: 'Ledger', dimensions: { x: 432, y: 279 } },
+        { name: 'Junior legal', dimensions: { x: 127, y: 203 } },
+        { name: 'Half letter', dimensions: { x: 140, y: 216 } }
+      ],
+
       pipelines: [
         {
           extension: 'jpg',

diff --git a/server/src/context.js b/server/src/context.js
@@ -27,6 +27,9 @@ class Context {
 
     /** @type {Filter[]} */
     this.filters = Config.filters;
+
+    /** @type {PaperSize[]} */
+    this.paperSizes = Config.paperSizes;
   }
 
   /**

diff --git a/server/src/types.js b/server/src/types.js
@@ -40,6 +40,18 @@
  * @property {string[]} commands
  */
 
+/**
+ * @typedef {Object} Dimensions
+ * @property {number} x
+ * @property {number} y
+ */
+
+/**
+ * @typedef {Object} PaperSize
+ * @property {string} name
+ * @property {Dimensions} dimensions
+ */
+
 /**
  * @typedef {Object} Configuration
  * @property {string} version
@@ -58,6 +70,7 @@
  * @property {Pipeline} previewPipeline
  * @property {Filter[]} filters
  * @property {Pipeline[]} pipelines
+ * @property {PaperSize[]} paperSizes
  */
 
 /**

diff --git a/webui/src/components/Scan.vue b/webui/src/components/Scan.vue
@@ -64,14 +64,28 @@
       <v-col cols="12" md="auto" class="mb-10 mb-md-0" :style="{width: `${preview.width}px`}">
         <cropper ref="cropper" class="cropper" :key="preview.key" :transitionTime="10" :wheelResize="false"
             :default-position="cropperDefaultPosition" :default-size="cropperDefaultSize"
-            :src="img" @change="onCrop"></cropper>
+            :src="img" @change="onCropperChange"></cropper>
       </v-col>
 
       <v-col cols="12" md="3" class="mb-10 mb-md-0">
-        <v-text-field :label="$t('scan.top')" type="number" v-model="request.params.top"  @change="onCoordinatesChange" />
-        <v-text-field :label="$t('scan.left')" type="number" v-model="request.params.left"  @change="onCoordinatesChange" />
-        <v-text-field :label="$t('scan.width')" type="number" v-model="request.params.width"  @change="onCoordinatesChange" />
-        <v-text-field :label="$t('scan.height')" type="number" v-model="request.params.height"  @change="onCoordinatesChange" />
+        <v-text-field :label="$t('scan.top')" type="number" v-model="request.params.top" @blur="onCoordinatesChange" />
+        <v-text-field :label="$t('scan.left')" type="number" v-model="request.params.left" @blur="onCoordinatesChange" />
+        <v-text-field :label="$t('scan.width')" type="number" v-model="request.params.width" @blur="onCoordinatesChange" />
+        <v-text-field :label="$t('scan.height')" type="number" v-model="request.params.height" @blur="onCoordinatesChange" />
+
+        <v-menu offset-y>
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn color="primary" v-bind="attrs" v-on="on">{{ $t('scan.paperSize') }}</v-btn>
+          </template>
+          <v-list>
+            <v-list-item
+              v-for="(item, index) in paperSizes"
+              @click="updatePaperSize(item)"
+              :key="index">
+              <v-list-item-title>{{ item.name }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
 
         <div v-if="'--brightness' in device.features">
           <v-slider class="align-center" v-model="request.params.brightness"
@@ -116,6 +130,11 @@ import Storage from '../classes/storage';
 
 const storage = Storage.instance();
 
+function round(n, dp) {
+  const f = Math.pow(10, dp || 0);
+  return Math.round(n * f) / f;
+}
+
 export default {
   name: 'Scan',
   components: {
@@ -134,6 +153,7 @@ export default {
         ],
         filters: [],
         pipelines: [],
+        paperSizes: [],
         version: '0'
       },
       device: device,
@@ -159,6 +179,13 @@ export default {
   },
 
   computed: {
+    deviceSize() {
+      return {
+        width: this.device.features['-x'].limits[1],
+        height: this.device.features['-y'].limits[1]
+      };
+    },
+
     filters() {
       return this.context.filters.map(f => {
         return {
@@ -168,6 +195,17 @@ export default {
       });
     },
 
+    paperSizes() {
+      const deviceSize = {
+        x: this.device.features['-x'].limits[1],
+        y: this.device.features['-y'].limits[1]
+      };
+
+      const paperSizes = this.context.paperSizes
+        .filter(paper => paper.dimensions.x <= deviceSize.x && paper.dimensions.y <= deviceSize.y);
+      return paperSizes;
+    },
+
     pipelines() {
       return this.context.pipelines.map(p => {
         const variables = (p.match(/@:[a-z-.]+/ig) || []).map(s => s.substr(2));
@@ -188,7 +226,6 @@ export default {
     request: {
       handler(request) {
         storage.request = request;
-        this.onCoordinatesChange();
       },
       deep: true
     }
@@ -267,10 +304,7 @@ export default {
     },
 
     pixelsPerMm() {
-      const scanner = {
-        width: this.device.features['-x'].limits[1],
-        height: this.device.features['-y'].limits[1]
-      };
+      const scanner = this.deviceSize;
 
       // The preview image may not have perfectly scaled dimensions
       // because pixel counts are integers. So we report a horizontal
@@ -283,12 +317,11 @@ export default {
     },
 
     scaleCoordinates(coordinates, xScale, yScale) {
-      const round = (n) => Math.round(n * 10) / 10;
       return {
-        width: round(coordinates.width * xScale),
-        height: round(coordinates.height * yScale),
-        left: round(coordinates.left * xScale),
-        top: round(coordinates.top * yScale)
+        width: round(coordinates.width * xScale, 1),
+        height: round(coordinates.height * yScale, 1),
+        left: round(coordinates.left * xScale, 1),
+        top: round(coordinates.top * yScale, 1)
       };
     },
 
@@ -333,17 +366,29 @@ export default {
       this.$refs.cropper.setCoordinates(adjusted);
     },
 
-    onCrop({coordinates}) {
+    onCropperChange({coordinates}) {
       const adjusted = this.scaleCoordinates(
         coordinates,
         1 / this.pixelsPerMm().x,
         1 / this.pixelsPerMm().y);
 
+      // The cropper changes even when coordinates are set manually. This will
+      // result in manually set values being overwritten because of rounding.
+      // If someone is taking the trouble to set values manually then they
+      // should be preserved. We should only update the values if they breaach
+      // a threshold or the scanner dimensions
+      const scanner = this.deviceSize;
       const params = this.request.params;
-      params.width = adjusted.width;
-      params.height = adjusted.height;
-      params.left = adjusted.left;
-      params.top = adjusted.top;
+      const threshold = 0.4;
+      const boundAndRound = (n, min, max) => round(Math.min(Math.max(min, n), max), 1);
+      const bestValue = (current, crop, min, max) => Math.abs(current - crop) < threshold
+        ? boundAndRound(current, min, max)
+        : boundAndRound(crop, min, max);
+
+      params.width = bestValue(params.width, adjusted.width, 0, scanner.width);
+      params.height = bestValue(params.height, adjusted.height, 0, scanner.height);
+      params.left = bestValue(params.left, adjusted.left, 0, scanner.width);
+      params.top = bestValue(params.top, adjusted.top, 0, scanner.height);
     },
 
     readContext(force) {
@@ -454,6 +499,14 @@ export default {
           this.$router.push('/files');
         }
       });
+    },
+
+    updatePaperSize(value) {
+      if (value.dimensions) {
+        this.request.params.width = value.dimensions.x;
+        this.request.params.height = value.dimensions.y;
+        this.onCoordinatesChange();
+      }
     }
   }
 };

diff --git a/webui/src/locales/cn.json b/webui/src/locales/cn.json
@@ -69,6 +69,7 @@
     "left": "左边距",
     "width": "宽度",
     "height": "高度",
+    "paperSize": "Paper size",
     "brightness": "亮度",
     "contrast": "对比度",
     "message:loading-devices": "加载设备 ...",

diff --git a/webui/src/locales/cz.json b/webui/src/locales/cz.json
@@ -69,6 +69,7 @@
     "left": "Vlevo",
     "width": "Šířka",
     "height": "Výška",
+    "paperSize": "Paper size",
     "brightness": "Jas",
     "contrast": "Kontrast",
     "message:loading-devices": "Načítání zařízení...",

diff --git a/webui/src/locales/de.json b/webui/src/locales/de.json
@@ -69,6 +69,7 @@
     "left": "Links",
     "width": "Breite",
     "height": "Höhe",
+    "paperSize": "Paper size",
     "brightness": "Helligkeit",
     "contrast": "Kontrast",
     "message:loading-devices": "Suche nach Geräten...",

diff --git a/webui/src/locales/en.json b/webui/src/locales/en.json
@@ -69,6 +69,7 @@
     "left": "Left",
     "width": "Width",
     "height": "Height",
+    "paperSize": "Paper size",
     "brightness": "Brightness",
     "contrast": "Contrast",
     "message:loading-devices": "Loading devices...",

diff --git a/webui/src/locales/es.json b/webui/src/locales/es.json
@@ -69,6 +69,7 @@
     "left": "Izquierda",
     "width": "Anchura",
     "height": "Altura",
+    "paperSize": "Paper size",
     "brightness": "Brillo",
     "contrast": "Contraste",
     "message:loading-devices": "Cargando dispositivos...",

diff --git a/webui/src/locales/fr.json b/webui/src/locales/fr.json
@@ -69,6 +69,7 @@
     "left": "Gauche",
     "width": "Largeur",
     "height": "Hauteur",
+    "paperSize": "Paper size",
     "brightness": "Luminosité",
     "contrast": "Contraste",
     "message:loading-devices": "Chargement des scanners...",

diff --git a/webui/src/locales/it.json b/webui/src/locales/it.json
@@ -69,6 +69,7 @@
     "left": "Sinistra",
     "width": "Larghezza",
     "height": "Altezza",
+    "paperSize": "Paper size",
     "brightness": "Luminosità",
     "contrast": "Contrasto",
     "message:loading-devices": "Caricamento dispositivi...",

diff --git a/webui/src/locales/test.json b/webui/src/locales/test.json
@@ -70,6 +70,7 @@
     "left": "##SCAN.LEFT",
     "width": "##SCAN.WIDTH",
     "height": "##SCAN.HEIGHT",
+    "paperSize": "##SCAN.PAPERSIZE",
     "brightness": "##SCAN.BRIGHTNESS",
     "contrast": "##SCAN.CONSTRAST",
     "message:loading-devices": "##SCAN.LOADING",