Merge pull request #347 from sbs20/development

Internationalisation and localisation + docs

.github/workflows/docker.yml

@@ -3,6 +3,9 @@ name: docker-build
 on:
   workflow_dispatch:
   push:
+    paths-ignore:
+      - 'docs/**'
+      - 'README.md'
     branches:
       - 'master'
       - 'staging'

docs/config.md

@@ -219,7 +219,6 @@ Exercise caution with this recipe - the app is designed not to allow unsafe
 paths by default. If you are happy to disable this check, then go ahead.
 
 ```javascript
-const dayjs = require('dayjs');
 module.exports = {
   afterConfig(config) {
     // Set your path here
@@ -230,3 +229,17 @@ module.exports = {
   }
 }
 ```
+
+### Only show ISO paper sizes
+
+You can use a filter to include only the paper sizes you want. To only show ISO
+sizes do something like the following. You can obviously extend or reverse the
+filter as required.
+
+```javascript
+module.exports = {
+  afterConfig(config) {
+    config.paperSizes = config.paperSizes.filter(p => /[AB]\d/.test(p.name));
+  }
+}
+```

docs/development.md

@@ -1,33 +1,60 @@
 # Development
 
-## Steps
+## Install and setup
 
-* Install Node
-* Clone the repo
-* Navigate to the repo directory
-  ```
-  sudo npm install -g @vue/cli @vue/cli-service-global gulp-cli
-  npm run install
-  ```
+```shell
+# Install dependencies
+sudo apt-get install curl nodejs npm imagemagick sane-utils tesseract-ocr
 
-## Run for development
+# Ideally set the npm version
+sudo npm install [email protected] -g
 
-```
+# Enable PDF (required for execution and unit tests)
+sudo sed -i 's/policy domain="coder" rights="none" pattern="PDF"/policy domain="coder" rights="read | write" pattern="PDF"'/ /etc/ImageMagick-6/policy.xml
+
+# Clone the repo
+git clone https://github.com/sbs20/scanservjs.git
+
+# Install all packages
+cd scanservjs && npm run install
+
+# Run (from the scanservjs directory)
 npm run serve
 ```
 
-This will hook the server component into webpack (see vue.config.js) and
-references below.
+`npm run serve` will hook the development server into webpack (see
+vue.config.js).
+
+If you run into the following error, then you may need to increase your inotify
+limit:
+
+```
+[nodemon] Internal watch failed: ENOSPC: System limit for number of file watchers reached, watch '/.../scanservjs/packages/server/src'
+```
+
+To incease it temporarily:
+
+```
+sudo sysctl fs.inotify.max_user_watches=131072
+```
+
+To update it permanently will depend on your distribution - but this will work
+with Debian:
+
+```
+echo fs.inotify.max_user_watches=131072 | sudo tee -a /etc/sysctl.d/50-default.conf; sudo sysctl -p
+```
 
 ## Build
 
 Before committing please verify and build
+
 ```
-npm run verify
-npm run build
+npm run verify && npm run build
 ```
 
-Create a local release package
+Alternatively, create a local release package
+
 ```
 npm run release
 ```

docs/install.md

@@ -50,6 +50,12 @@ debug where the problem is:
   [here](./sane.md)) to allow certain groups access to the hardware - but it's
   also worth verifying that the `scanservjs` user is a member of the `scanner`
   group (or the group specified in your udev rule): `groups scanservjs`.
+* If everything so far has worked, then also try running a scan as the
+  scanservjs user with
+  `sudo su - scanservjs -c 'scanimage --format tiff > test.tif'` - this should
+  output a tif file in the scanservjs home directory (probably
+  `/home/scanservjs/`). If you can get this to work then scanservjs should be
+  working fine.
 * Getting logs: use `journalctl`. See the journalctl manpage for details but
   `sudo journalctl -e -u scanservjs` should be enough to get you started.
 

docs/troubleshooting.md

@@ -1,5 +1,19 @@
 # Troubleshooting
 
+## scanimage: sane_read: Invalid argument
+
+This is a problem with SANE rather than scanservjs. It usually signifies a
+[problem with the driver](https://askubuntu.com/a/447283). Your best bet is
+going back to first principles with SANE itself. Follow the steps
+[here](./install.md#troubleshooting)
+
+## Cropping results in incorrect positioning
+
+Some scanners mis-report their size - don't know why, but they do. This means
+that when the app attempts to crop things the maths is all wrong. The best way
+around this is to override the reported scanner dimensions. See
+[this recipe](./config.md#override-scanner-dimensions) for more.
+
 ## JSON.parse error
 
 This happens when the browser received a string from the server which is not a

package.json

@@ -1,6 +1,6 @@
 {
   "name": "scanservjs",
-  "version": "2.17.0",
+  "version": "2.17.1",
   "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.",
   "scripts": {
     "clean": "rm -rf ./dist",

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "scanservjs",
-  "version": "2.17.0",
+  "version": "2.17.1",
   "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.",
   "author": "Sam Strachan",
   "scripts": {

packages/client/src/components/BatchDialog.vue

@@ -1,15 +1,16 @@
 <template>
-  <v-dialog v-model="show" aria-role="dialog" max-width="480" v-on:keydown.stop="_onKeys" persistent aria-modal>
+  <v-dialog v-model="show" aria-role="dialog" max-width="620" v-on:keydown.stop="_onKeys" persistent aria-modal>
     <v-card>
       <v-card-title>
         {{ message }}
       </v-card-title>
       <v-card-text>
-        <v-spacer></v-spacer>
-        <v-btn text @click.prevent="show = false">{{ $t('batch-dialog.btn-cancel') }}</v-btn>
-        <v-btn v-if="onFinish" color="green" text @click.prevent="finish">{{ $t('batch-dialog.btn-finish') }}</v-btn>
-        <v-btn v-if="onRescan" color="warning" text @click.prevent="rescan">{{ $t('batch-dialog.btn-rescan') }}</v-btn>
-        <v-btn color="primary" text @click.prevent="next">{{ $t('batch-dialog.btn-next') }}</v-btn>
+        <div class="d-flex flex-wrap flex-row-reverse">
+          <v-btn small color="primary" text @click.prevent="next">{{ $t('batch-dialog.btn-next') }}</v-btn>
+          <v-btn small v-if="onFinish" color="green" text @click.prevent="finish">{{ $t('batch-dialog.btn-finish') }}</v-btn>
+          <v-btn small v-if="onRescan" text @click.prevent="rescan">{{ $t('batch-dialog.btn-rescan') }}</v-btn>
+          <v-btn small text @click.prevent="show = false" color="warning">{{ $t('batch-dialog.btn-cancel') }}</v-btn>
+        </div>
         <v-img v-if="image" :src="'data:image/jpeg;base64,' + image" contain />
       </v-card-text>
       <v-card-actions>

packages/client/src/components/Files.vue

@@ -4,6 +4,10 @@
       :items="files"
       v-model="selectedFiles"
       item-key="name"
+      :footer-props="{
+        'items-per-page-text': $t('files.items-per-page'),
+        'items-per-page-all-text': $t('files.items-per-page-all')
+      }"
       show-select>
     <template v-slot:top>
       <v-toolbar flat>
@@ -20,10 +24,10 @@
           </v-card-text>
           <v-card-actions>
             <v-spacer></v-spacer>
-            <v-btn @click="closeRename">
+            <v-btn small @click="closeRename">
               {{ $t('files.dialog:rename-cancel') }}
             </v-btn>
-            <v-btn @click="renameFileConfirm" color="primary">
+            <v-btn small @click="renameFileConfirm" color="primary">
               {{ $t('files.dialog:rename-save') }}
             </v-btn>
           </v-card-actions>
@@ -45,6 +49,9 @@
         mdi-delete
       </v-icon>
     </template>
+    <template v-slot:[`footer.page-text`]="items">
+      {{ items.pageStart }} - {{ items.pageStop }} / {{ items.itemsLength }}
+    </template>
   </v-data-table>
 </template>
 
@@ -117,7 +124,7 @@ export default {
       Common.fetch(`files/${file.name}`, {
         method: 'DELETE'
       }).then(data => {
-        this.$emit('notify', {type: 'i', message: `${this.$t('files.message:deleted')} ${data.name}`});
+        this.$emit('notify', {type: 'i', message: `${this.$t('files.message:deleted', [data.name])}`});
         this.fileList();
         this.$emit('mask', -1);
       }).catch(error => {
@@ -169,7 +176,7 @@ export default {
         const name = this.selectedFiles[0].name;
         try {
           await Common.fetch(`files/${name}`, {method: 'DELETE'});
-          this.$emit('notify', {type: 'i', message: `${this.$t('files.message:deleted')} ${name}`});
+          this.$emit('notify', {type: 'i', message: `${this.$t('files.message:deleted', [name])}`});
         } catch (error) {
           this.$emit('notify', {type: 'e', message: error});
         }

packages/client/src/components/Scan.vue

@@ -9,7 +9,7 @@
             v-if="context.devices.length > 0"
             :label="$t('scan.device')" v-model="device"
             :items="context.devices" return-object item-text="name" @change="clear"></v-select>
-          <v-btn class="ml-2 mt-4 pl-1 pr-1" min-width="32" @click="deviceRefresh"><v-icon>mdi-refresh</v-icon></v-btn>
+          <v-btn small class="ml-2 mt-5 pl-1 pr-1" min-width="32" @click="deviceRefresh"><v-icon>mdi-refresh</v-icon></v-btn>
         </div>
 
         <v-select v-if="'--source' in device.features"
@@ -51,9 +51,9 @@
           item-value="value"></v-select>
 
         <div class="d-flex flex-row-reverse flex-wrap">
+          <v-btn color="primary" @click="scan(1)" class="ml-1 mb-1">{{ $t('scan.btn-scan') }} <v-icon class="ml-2">mdi-camera</v-icon></v-btn>
           <v-btn color="green" @click="createPreview" class="ml-1 mb-1">{{ $t('scan.btn-preview') }} <v-icon class="ml-2">mdi-magnify</v-icon></v-btn>
           <v-btn color="amber" @click="deletePreview" class="ml-1 mb-1">{{ $t('scan.btn-clear') }} <v-icon class="ml-2">mdi-delete</v-icon></v-btn>
-          <v-btn color="primary" @click="scan(1)" class="ml-1 mb-1">{{ $t('scan.btn-scan') }} <v-icon class="ml-2">mdi-camera</v-icon></v-btn>
         </div>
       </v-col>
 
@@ -64,10 +64,10 @@
       </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" @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-text-field :label="$t('scan.top')" type="number" step="any" v-model="request.params.top" @blur="onCoordinatesChange" />
+        <v-text-field :label="$t('scan.left')" type="number" step="any" v-model="request.params.left" @blur="onCoordinatesChange" />
+        <v-text-field :label="$t('scan.width')" type="number" step="any" v-model="request.params.width" @blur="onCoordinatesChange" />
+        <v-text-field :label="$t('scan.height')" type="number" step="any" v-model="request.params.height" @blur="onCoordinatesChange" />
 
         <v-menu offset-y>
           <template v-slot:activator="{ on, attrs }">

packages/client/src/locales/cs.json

@@ -33,17 +33,19 @@
   },
 
   "batch-dialog": {
-    "btn-cancel": "Zrušení",
+    "btn-cancel": "Zrušit",
     "btn-finish": "Dokončit",
-    "btn-rescan": "Oskenovat znovu",
+    "btn-rescan": "Znovu oskenovat stranu",
     "btn-next": "Další"
   },
 
   "files": {
     "filename": "Název souboru",
     "date": "Datum",
     "size": "Velikost",
-    "message:deleted": "Odstraněno",
+    "items-per-page": "Počet souborů na stránku",
+    "items-per-page-all": "Všechny",
+    "message:deleted": "Soubor {0} byl odstraněn",
     "message:renamed": "Soubor byl přejmenován",
     "button:delete-selected": "Odstranit vybrané",
     "dialog:rename": "Změnit název souboru",
@@ -111,7 +113,7 @@
     "lzw-compressed": "S kompresí LZW",
     "ocr": "OCR",
     "text-file": "Textový soubor"
-  },  
+  },
 
   "paper-size": {
     "letter": "Letter",
@@ -149,7 +151,7 @@
     "message:no-devices": "Nebyla nalezena žádná zařízení",
     "message:deleted-preview": "Odstranit náhled",
     "message:turn-documents": "Obrátit dokumenty",
-    "message:preview-of-page": "Náhled stránky"
+    "message:preview-of-page": "Náhled strany"
   },
 
   "settings": {

packages/client/src/locales/de.json

@@ -43,7 +43,9 @@
     "filename": "Dateiname",
     "date": "Datum",
     "size": "Größe",
-    "message:deleted": "Gelöscht",
+    "items-per-page": "Files per page",
+    "items-per-page-all": "All",
+    "message:deleted": "Gelöscht {0}",
     "message:renamed": "Datei umbenannt",
     "button:delete-selected": "Auswahl löschen",
     "dialog:rename": "Datei umbennen",

packages/client/src/locales/en.json

@@ -43,7 +43,9 @@
     "filename": "Filename",
     "date": "Date",
     "size": "Size",
-    "message:deleted": "Deleted",
+    "items-per-page": "Files per page",
+    "items-per-page-all": "All",
+    "message:deleted": "Deleted {0}",
     "message:renamed": "File renamed",
     "button:delete-selected": "Delete Selected",
     "dialog:rename": "Change file name",

packages/client/src/locales/es.json

@@ -43,7 +43,9 @@
     "filename": "Nombre de fichero",
     "date": "Fecha",
     "size": "Tamaño",
-    "message:deleted": "Borrado",
+    "items-per-page": "Files per page",
+    "items-per-page-all": "All",
+    "message:deleted": "Borrado {0}",
     "message:renamed": "File renamed",
     "button:delete-selected": "Delete Selected",
     "dialog:rename": "Change file name",

packages/client/src/locales/fr.json

@@ -43,7 +43,9 @@
     "filename": "Nom de fichier",
     "date": "Date",
     "size": "Taille",
-    "message:deleted": "Supprimé",
+    "items-per-page": "Files per page",
+    "items-per-page-all": "All",
+    "message:deleted": "Supprimé {0}",
     "message:renamed": "File renamed",
     "button:delete-selected": "Delete Selected",
     "dialog:rename": "Change file name",

packages/client/src/locales/it.json

@@ -43,7 +43,9 @@
     "filename": "Nome file",
     "date": "Data",
     "size": "Dimensione",
-    "message:deleted": "Eliminato",
+    "items-per-page": "File per pagina",
+    "items-per-page-all": "Tutti",
+    "message:deleted": "Eliminato {0}",
     "message:renamed": "File rinominato",
     "button:delete-selected": "Elimina selezionati",
     "dialog:rename": "Rinomina file",