Merge pull request #413 from sbs20/staging

Thumbnails; Host interface binding etc

docs/config.md

@@ -242,4 +242,24 @@ module.exports = {
     config.paperSizes = config.paperSizes.filter(p => /[AB]\d/.test(p.name));
   }
 }
-```
+```
+
+### Add custom scanimage command line options
+
+Some scanners need
+[additional arguments](https://github.com/sbs20/scanservjs/issues/401) for
+scanimage to behave. It's possible to set them in the config using the
+`scanimageAdditionalArguments` key. This is a dictionary of key value pairs
+which will be applied as arguments.
+
+For the linked issue, the solution is to add:
+
+```javascript
+module.exports = {
+  afterConfig(config) {
+    config.scanimageAdditionalArguments = {
+      '--page-height': 297
+    };
+  }
+}
+```

docs/development.md

@@ -133,4 +133,4 @@ docker run -d \
   --name scanservjs-container \
   --privileged \
   scanservjs-image
-```
+```

docs/install.md

@@ -84,4 +84,4 @@ for more details.
 ## Arch
 
 If you're using Arch, you probably don't need help but this worked a few years
-ago `sudo pacman -S nodejs npm sane-utils imagemagick curl`
+ago `sudo pacman -S nodejs npm sane-utils imagemagick curl`

docs/troubleshooting.md

@@ -41,4 +41,4 @@ server{
 When scanning files with high resolution, e.g. 1200dpi it is very likely for the
 request to timeout. This is because node HTTP times out after 2 minutes by
 default. The solution is to increase the default timeout. That's possible by
-setting `config.timeout = 600000;` (for 10 minutes for example).
+setting `config.timeout = 600000;` (for 10 minutes for example).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "scanservjs",
-  "version": "2.20.0",
+  "version": "2.21.0",
   "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.20.0",
+  "version": "2.21.0",
   "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/classes/settings.js

@@ -11,7 +11,11 @@ export default class Settings {
       version: Constants.Version,
       theme: 'system',
       locale: 'en',
-      appColor: 'accent-4'
+      appColor: 'accent-4',
+      thumbnails: {
+        show: true,
+        size: 64
+      }
     };
   }
 }

packages/client/src/components/Files.vue

@@ -11,7 +11,12 @@
       show-select>
     <template v-slot:top>
       <v-toolbar flat>
-      <v-spacer></v-spacer>
+      <v-checkbox class="mt-6"
+        v-model="thumbnails.show" :label="$t('files.thumbnail-show')" />
+      <v-slider v-if="thumbnails.show" class="mt-6 ml-8" min="32" max="128" step="16"
+        v-model="thumbnails.size" inverse-label="true"
+        :label="`${$t('files.thumbnail-size')} (${thumbnails.size})`"/>
+      <v-spacer/>
       <v-btn @click="multipleDelete" color="primary">{{ $t('files.button:delete-selected') }}</v-btn>
       <v-dialog v-model="dialogEdit" max-width="500px">
         <v-card>
@@ -35,6 +40,11 @@
       </v-dialog>
       </v-toolbar>
     </template>
+    <template v-slot:[`item.thumb`]="{ item }" v-if="thumbnails.show">
+      <v-img :src="`./files/${item.name}/thumbnail`"
+        :max-height="thumbnails.size" :max-width="thumbnails.size"
+        :contain="true" />
+    </template>
     <template v-slot:[`item.lastModified`]="{ item }">
       {{ $d(new Date(item.lastModified), 'long', $i18n.locale) }}
     </template>
@@ -57,6 +67,9 @@
 
 <script>
 import Common from '../classes/common';
+import Storage from '../classes/storage';
+
+const storage = Storage.instance();
 
 export default {
   name: 'Files',
@@ -70,23 +83,34 @@ export default {
       dialogDelete: false,
       dialogEdit: false,
       headers: [
+        {
+          align: 'start',
+          sortable: false,
+          value: 'thumb',
+        },
         {
           text: this.$t('files.filename'),
           align: 'start',
           sortable: true,
           value: 'name',
-        }, {
+        },
+        {
           text: this.$t('files.date'),
           align: 'start',
           sortable: true,
           value: 'lastModified',
-        }, {
+        },
+        {
           text: this.$t('files.size'),
           align: 'start',
           sortable: true,
           value: 'sizeString',
         },
-        {text: this.$t('files.actions'), value: 'actions', sortable: false},
+        {
+          text: this.$t('files.actions'),
+          value: 'actions',
+          sortable: false
+        },
       ],
       files: [],
       editedItem: {
@@ -97,14 +121,26 @@ export default {
         name: '',
         newName: ''
       },
-      selectedFiles: []
+      selectedFiles: [],
+      thumbnails: {
+        show: storage.settings.thumbnails.show,
+        size: storage.settings.thumbnails.size
+      }
     };
   },
 
   watch: {
     dialogEdit(val) {
       val || this.closeRename();
     },
+    thumbnails: {
+      handler(thumbnails) {
+        const settings = storage.settings;
+        settings.thumbnails = thumbnails;
+        storage.settings = settings;
+      },
+      deep: true
+    }
   },
 
   methods: {
@@ -200,5 +236,11 @@ export default {
 </script>
 
 <style>
-
+tbody > tr > td {
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+}
+div.v-input.v-input__slider {
+  max-width: 250px;
+}
 </style>

packages/client/src/locales/cs.json

@@ -51,7 +51,9 @@
     "dialog:rename": "Změnit název souboru",
     "dialog:rename-cancel": "Zrušit",
     "dialog:rename-save": "Uložit",
-    "actions": "Akce"
+    "actions": "Akce",
+    "thumbnail-show": "Show thumbnails",
+    "thumbnail-size": "Thumbnail size"
   },
 
   "navigation": {