diff --git a/_layouts/v1.0.0-beta.1/examples.html b/_layouts/v1.0.0-beta.1/examples.html new file mode 100644 index 0000000..c862892 --- /dev/null +++ b/_layouts/v1.0.0-beta.1/examples.html @@ -0,0 +1,16 @@ +--- +layout: default +--- + +

Examples

+ + + +{{ content }} diff --git a/stylesheets/example.css b/stylesheets/example.css index 1e154ba..73941ed 100644 --- a/stylesheets/example.css +++ b/stylesheets/example.css @@ -52,6 +52,7 @@ transform: translate(-50%, -50%); width: 90%; max-height: 90%; + max-width: 800px; } .overlay__close { @@ -85,11 +86,6 @@ top: 0; } -/* line 1, ../sass/_viewport.scss */ -#interactive.viewport { - width: 640px; -} - #interactive.viewport { position: relative; } @@ -189,22 +185,14 @@ canvas.drawing, canvas.drawingBuffer { clear: both; } -@media (min-width: 604px) and (max-width: 1024px) { - /* tablet styles */ -} @media (max-width: 603px) { /* line 2, ../sass/phone/_core.scss */ #container { - width: 300px; margin: 10px auto; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } - /* line 9, ../sass/phone/_core.scss */ - #container form.voucher-form input.voucher-code { - width: 180px; - } } @media (max-width: 603px) { /* line 5, ../sass/phone/_viewport.scss */ diff --git a/v1.0.0-beta.1/examples/file-input/index.html b/v1.0.0-beta.1/examples/file-input/index.html index e87b172..10dc6b9 100644 --- a/v1.0.0-beta.1/examples/file-input/index.html +++ b/v1.0.0-beta.1/examples/file-input/index.html @@ -1,5 +1,5 @@ --- -layout: examples +layout: v1.0.0-beta.1/examples title: Demo with live-stream showInMenu: false --- diff --git a/v1.0.0-beta.1/examples/file_input.js b/v1.0.0-beta.1/examples/file_input/file_input.js similarity index 100% rename from v1.0.0-beta.1/examples/file_input.js rename to v1.0.0-beta.1/examples/file_input/file_input.js diff --git a/v1.0.0-beta.1/examples/file_input.html b/v1.0.0-beta.1/examples/file_input/index.html similarity index 97% rename from v1.0.0-beta.1/examples/file_input.html rename to v1.0.0-beta.1/examples/file_input/index.html index 44b2508..7b3758a 100644 --- a/v1.0.0-beta.1/examples/file_input.html +++ b/v1.0.0-beta.1/examples/file_input/index.html @@ -1,5 +1,5 @@ --- -layout: examples +layout: v1.0.0-beta.1/examples title: Demo with file-input showInMenu: false --- @@ -82,5 +82,5 @@ showInMenu: false - + diff --git a/v1.0.0-beta.1/examples/live_w_locator.html b/v1.0.0-beta.1/examples/live_w_locator/index.html similarity index 97% rename from v1.0.0-beta.1/examples/live_w_locator.html rename to v1.0.0-beta.1/examples/live_w_locator/index.html index 038ec3f..da6c9b7 100644 --- a/v1.0.0-beta.1/examples/live_w_locator.html +++ b/v1.0.0-beta.1/examples/live_w_locator/index.html @@ -1,5 +1,5 @@ --- -layout: examples +layout: v1.0.0-beta.1/examples title: Demo with live-stream showInMenu: false --- @@ -77,5 +77,5 @@ showInMenu: false - + diff --git a/v1.0.0-beta.1/examples/live_w_locator.js b/v1.0.0-beta.1/examples/live_w_locator/live_w_locator.js similarity index 100% rename from v1.0.0-beta.1/examples/live_w_locator.js rename to v1.0.0-beta.1/examples/live_w_locator/live_w_locator.js diff --git a/v1.0.0-beta.1/examples/multiple/index.html b/v1.0.0-beta.1/examples/multiple/index.html new file mode 100644 index 0000000..358b4f0 --- /dev/null +++ b/v1.0.0-beta.1/examples/multiple/index.html @@ -0,0 +1,58 @@ +--- +layout: v1.0.0-beta.1/examples +title: Demo with live-stream +showInMenu: false +--- + + +
+

Scan various barcodes continously

+

+ Be aware that not all combinations play together nicely. Some + codes do not have a checksum (e.g. ITF). +

+
+ +
+ + + + + + + +
+
+
+
+
X
+
    +
    +
    +
    + + + + + diff --git a/v1.0.0-beta.1/examples/multiple/index.js b/v1.0.0-beta.1/examples/multiple/index.js new file mode 100644 index 0000000..6881631 --- /dev/null +++ b/v1.0.0-beta.1/examples/multiple/index.js @@ -0,0 +1,100 @@ +var Quagga = window.Quagga; +var App = { + _lastResult: null, + init: function() { + this.attachListeners(); + }, + activateScanner: function() { + var scanner = this.configureScanner('.overlay__content'), + onDetected = function (result) { + this.addToResults(result); + }.bind(this), + stop = function() { + scanner.stop(); // should also clear all event-listeners? + scanner.removeEventListener('detected', onDetected); + this.hideOverlay(); + this.attachListeners(); + }.bind(this); + + this.showOverlay(stop); + console.log("activateScanner"); + scanner.addEventListener('detected', onDetected).start(); + }, + addToResults: function(result) { + if (this._lastResult === result.codeResult.code) { + return; + } + this._lastResult = result.codeResult.code; + var resultSets = document.querySelectorAll('ul.results'); + + Array.prototype.slice.call(resultSets).forEach(function(resultSet) { + var li = document.createElement('li'), + format = document.createElement('span'), + code = document.createElement('span'); + + console.log(result); + li.className = "result"; + format.className = "format"; + code.className = "code"; + + li.appendChild(format); + li.appendChild(code); + + format.appendChild(document.createTextNode(result.codeResult.format)); + code.appendChild(document.createTextNode(result.codeResult.code)); + + resultSet.insertBefore(li, resultSet.firstChild); + }); + }, + attachListeners: function() { + var button = document.querySelector('button.scan'), + self = this; + + button.addEventListener("click", function clickListener (e) { + e.preventDefault(); + button.removeEventListener("click", clickListener); + self.activateScanner(); + }); + }, + showOverlay: function(cancelCb) { + document.querySelector('.container .controls') + .classList.add('hide'); + document.querySelector('.overlay--inline') + .classList.add('show'); + var closeButton = document.querySelector('.overlay__close'); + closeButton.addEventListener('click', function closeHandler() { + closeButton.removeEventListener("click", closeHandler); + cancelCb(); + }); + }, + hideOverlay: function() { + document.querySelector('.container .controls') + .classList.remove('hide'); + document.querySelector('.overlay--inline') + .classList.remove('show'); + }, + querySelectedReaders: function() { + return Array.prototype.slice.call(document.querySelectorAll('.readers input[type=checkbox]')) + .filter(function(element) { + return !!element.checked; + }) + .map(function(element) { + return element.getAttribute("name"); + }); + }, + configureScanner: function(selector) { + var scanner = Quagga + .decoder({readers: this.querySelectedReaders()}) + .locator({patchSize: 'medium'}) + .fromSource({ + target: selector, + constraints: { + width: 600, + height: 600, + facingMode: "environment" + } + }); + return scanner; + } +}; +App.init(); diff --git a/v1.0.0-beta.1/examples/multiple/styles.css b/v1.0.0-beta.1/examples/multiple/styles.css new file mode 100644 index 0000000..4a68287 --- /dev/null +++ b/v1.0.0-beta.1/examples/multiple/styles.css @@ -0,0 +1,121 @@ +/* Scan! Button */ + +.icon-barcode.scan { + font-size: large; + padding: 0.5em 0.5em 0.5em 4em; + text-align: center; + display: block; + background-position: 0.5em center; +} + +.icon-barcode.scan:before { + margin-right: 0.5em; +} + +/* Reader Checkboxes */ + +.controls { + display: flex; + flex-direction: row; + align-items: flex-start; +} + +.controls .readers { + font-size: 1.3em; + margin-left: 1em; +} + +.controls .readers label { + display: flex; + flex-direction: row; + align-items: center; +} + +.controls .readers input { + flex: 0 0 auto; + height: 1.5rem; + width: 1.5rem; +} + +.controls .readers span { + flex: 1 1 auto; +} + +/* Results */ + +.overlay .results { + position: absolute; + top: 100%; + background-color: white; + left: 0; + right: 0; +} + +.results { + flex: 0 0 auto; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + background-color: #DDD; + margin: 0; + padding: 0; + list-style-type: none; + padding: 0.25rem; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + border-top: 1px solid #777; +} + +.results > li { + flex: 0 1 auto; + margin: 0.25rem; + background: #fff; + border-radius: 2px; + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); +} + +.results:empty { + display: none; +} + +.result { + display: flex; + flex-direction: column; + padding: 0.5rem; +} + +.result > .format { + font-weight: bold; +} + +.result > .code { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +/* Scanner */ + +.container .controls.hide { + display: none; +} + +.overlay--inline { + display: none; +} + +.overlay--inline.show { + display: block; +} + +@media (max-width: 603px) { + .controls { + flex-direction: column; + align-items: stretch; + } + + .controls .readers { + margin-left: 0; + margin-top: 1em; + } +} diff --git a/v1.0.0-beta.1/examples/scan-to-input/index.html b/v1.0.0-beta.1/examples/scan-to-input/index.html index 635d643..197c4e6 100644 --- a/v1.0.0-beta.1/examples/scan-to-input/index.html +++ b/v1.0.0-beta.1/examples/scan-to-input/index.html @@ -1,5 +1,5 @@ --- -layout: examples +layout: v1.0.0-beta.1/examples title: Demo with live-stream showInMenu: false --- diff --git a/v1.0.0-beta.1/examples/static_images.html b/v1.0.0-beta.1/examples/static_images/index.html similarity index 94% rename from v1.0.0-beta.1/examples/static_images.html rename to v1.0.0-beta.1/examples/static_images/index.html index 0d2805e..edf9052 100644 --- a/v1.0.0-beta.1/examples/static_images.html +++ b/v1.0.0-beta.1/examples/static_images/index.html @@ -1,5 +1,5 @@ --- -layout: examples +layout: v1.0.0-beta.1/examples title: Demo with sample images showInMenu: false --- @@ -40,7 +40,7 @@ showInMenu: false - + diff --git a/v1.0.0-beta.1/examples/static_images.js b/v1.0.0-beta.1/examples/static_images/static_images.js similarity index 99% rename from v1.0.0-beta.1/examples/static_images.js rename to v1.0.0-beta.1/examples/static_images/static_images.js index 878432e..36859a4 100644 --- a/v1.0.0-beta.1/examples/static_images.js +++ b/v1.0.0-beta.1/examples/static_images/static_images.js @@ -128,7 +128,7 @@ $(function() { }, state: { inputStream: { - src: "../../test/fixtures/code_128/" + src: "../../../test/fixtures/code_128/" }, numOfWorkers: 1, decoder : {