From a18fbcd501a83a5db68a9511120bea75e321a00f Mon Sep 17 00:00:00 2001 From: Christoph Oberhofer Date: Sun, 31 Jul 2016 18:36:08 +0200 Subject: [PATCH] Added file-input example --- stylesheets/example.css | 7 ++ v1.0.0-beta.1/examples/file-input/index.html | 104 +++++++++++++++++++ v1.0.0-beta.1/examples/file-input/index.js | 43 ++++++++ 3 files changed, 154 insertions(+) create mode 100644 v1.0.0-beta.1/examples/file-input/index.html create mode 100644 v1.0.0-beta.1/examples/file-input/index.js diff --git a/stylesheets/example.css b/stylesheets/example.css index c64a6d3..1e154ba 100644 --- a/stylesheets/example.css +++ b/stylesheets/example.css @@ -27,6 +27,13 @@ width: 40px; } +.icon-barcode { + background-size: contain; + background-repeat: no-repeat; + background-position: center center; + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTAgNGg0djIwaC00ek02IDRoMnYyMGgtMnpNMTAgNGgydjIwaC0yek0xNiA0aDJ2MjBoLTJ6TTI0IDRoMnYyMGgtMnpNMzAgNGgydjIwaC0yek0yMCA0aDF2MjBoLTF6TTE0IDRoMXYyMGgtMXpNMjcgNGgxdjIwaC0xek0wIDI2aDJ2MmgtMnpNNiAyNmgydjJoLTJ6TTEwIDI2aDJ2MmgtMnpNMjAgMjZoMnYyaC0yek0zMCAyNmgydjJoLTJ6TTI0IDI2aDR2MmgtNHpNMTQgMjZoNHYyaC00eiI+PC9wYXRoPjwvc3ZnPg==); +} + .overlay { overflow: hidden; position: fixed; diff --git a/v1.0.0-beta.1/examples/file-input/index.html b/v1.0.0-beta.1/examples/file-input/index.html new file mode 100644 index 0000000..e87b172 --- /dev/null +++ b/v1.0.0-beta.1/examples/file-input/index.html @@ -0,0 +1,104 @@ +--- +layout: examples +title: Demo with live-stream +showInMenu: false +--- + + + +
+

Scan barcode to input-field

+

Click the button next to the input-field + to select a file or snap a picture

+
+
+
+ + + + +
+
+
+

This example demonstrates the following features: +

+

+
+

Source

+
+ 
+                
+var Quagga = window.Quagga;
+var App = {
+    _scanner: null,
+    init: function() {
+        this.attachListeners();
+    },
+    decode: function(src) {
+        Quagga
+            .decoder({readers: ['ean_reader']})
+            .locator({patchSize: 'medium'})
+            .fromImage(src, {size: 800})
+            .toPromise()
+            .then(function(result) {
+                document.querySelector('input.isbn').value = result.codeResult.code;
+            })
+            .catch(function() {
+                document.querySelector('input.isbn').value = "Not Found";
+            })
+            .then(function() {
+                this.attachListeners();
+            }.bind(this));
+    },
+    attachListeners: function() {
+        var self = this,
+            button = document.querySelector('.input-field input + .button.scan'),
+            fileInput = document.querySelector('.input-field input[type=file]');
+
+        button.addEventListener("click", function onClick(e) {
+            e.preventDefault();
+            button.removeEventListener("click", onClick);
+            document.querySelector('.input-field input[type=file]').click();
+        });
+
+        fileInput.addEventListener("change", function onChange(e) {
+            e.preventDefault();
+            fileInput.removeEventListener("change", onChange);
+            if (e.target.files && e.target.files.length) {
+                self.decode(URL.createObjectURL(e.target.files[0]));
+            }
+        });
+    }
+};
+App.init();
+                
+
+
+
+ 
+                
+<form>
+    <div class="input-field">
+        <label for="isbn_input">EAN:</label>
+        <input id="isbn_input" class="isbn" type="text" />
+        <button type="button" class="icon-barcode button scan">&nbsp;</button>
+        <input type="file" id="file" capture/>
+    </div>
+</form>
+                
+
+
+
+
+ + + + diff --git a/v1.0.0-beta.1/examples/file-input/index.js b/v1.0.0-beta.1/examples/file-input/index.js new file mode 100644 index 0000000..a8acf52 --- /dev/null +++ b/v1.0.0-beta.1/examples/file-input/index.js @@ -0,0 +1,43 @@ +var Quagga = window.Quagga; +var App = { + _scanner: null, + init: function() { + this.attachListeners(); + }, + decode: function(file) { + Quagga + .decoder({readers: ['ean_reader']}) + .locator({patchSize: 'medium'}) + .fromSource(file, {size: 800}) + .toPromise() + .then(function(result) { + document.querySelector('input.isbn').value = result.codeResult.code; + }) + .catch(function() { + document.querySelector('input.isbn').value = "Not Found"; + }) + .then(function() { + this.attachListeners(); + }.bind(this)); + }, + attachListeners: function() { + var self = this, + button = document.querySelector('.input-field input + .button.scan'), + fileInput = document.querySelector('.input-field input[type=file]'); + + button.addEventListener("click", function onClick(e) { + e.preventDefault(); + button.removeEventListener("click", onClick); + document.querySelector('.input-field input[type=file]').click(); + }); + + fileInput.addEventListener("change", function onChange(e) { + e.preventDefault(); + fileInput.removeEventListener("change", onChange); + if (e.target.files && e.target.files.length) { + self.decode(e.target.files[0]); + } + }); + } +}; +App.init();