From 6c3772eda3c90a59a57edfac53e6a82836aca34f Mon Sep 17 00:00:00 2001 From: Christoph Oberhofer Date: Thu, 19 May 2016 21:53:48 +0200 Subject: [PATCH] Added scan-to-input example --- example/css/colors.css | 16 --- example/css/fonts.css | 32 ++++- example/css/highlight-default.css | 99 +++++++++++++ example/css/styles.css | 232 ++++++++++++------------------ example/fonts/icomoon.eot | Bin 0 -> 1396 bytes example/fonts/icomoon.svg | 11 ++ example/fonts/icomoon.ttf | Bin 0 -> 1232 bytes example/fonts/icomoon.woff | Bin 0 -> 1308 bytes example/scan-to-input/index.html | 85 +++++++++++ example/scan-to-input/index.js | 78 ++++++++++ example/vendor/highlight.pack.js | 2 + src/quagga.js | 12 +- src/scanner.js | 5 - 13 files changed, 402 insertions(+), 170 deletions(-) delete mode 100644 example/css/colors.css create mode 100644 example/css/highlight-default.css create mode 100644 example/fonts/icomoon.eot create mode 100644 example/fonts/icomoon.svg create mode 100644 example/fonts/icomoon.ttf create mode 100644 example/fonts/icomoon.woff create mode 100644 example/scan-to-input/index.html create mode 100644 example/scan-to-input/index.js create mode 100644 example/vendor/highlight.pack.js diff --git a/example/css/colors.css b/example/css/colors.css deleted file mode 100644 index 0b96132..0000000 --- a/example/css/colors.css +++ /dev/null @@ -1,16 +0,0 @@ -@charset "UTF-8"; -/* LESS - http://lesscss.org style sheet */ -/* Palette color codes */ -/* Palette URL: http://paletton.com/#uid=31g0q0kHZAviRSkrHLOGomVNzac */ -/* Feel free to copy&paste color codes to your application */ -/* MIXINS */ -/* As hex codes */ -/* Main Primary color */ -/* Main Secondary color (1) */ -/* Main Secondary color (2) */ -/* As RGBa codes */ -/* Main Primary color */ -/* Main Secondary color (1) */ -/* Main Secondary color (2) */ -/* Generated by Paletton.com ├é┬® 2002-2014 */ -/* http://paletton.com */ diff --git a/example/css/fonts.css b/example/css/fonts.css index 9ee67c4..5543cef 100644 --- a/example/css/fonts.css +++ b/example/css/fonts.css @@ -1 +1,31 @@ -@import url("http://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600"); +@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600"); + +@font-face { + font-family: 'icomoon'; + src: url('../fonts/icomoon.eot?tad2ln'); + src: url('../fonts/icomoon.eot?tad2ln#iefix') format('embedded-opentype'), + url('../fonts/icomoon.ttf?tad2ln') format('truetype'), + url('../fonts/icomoon.woff?tad2ln') format('woff'), + url('../fonts/icomoon.svg?tad2ln#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-barcode:before { + content: "\e937"; +} diff --git a/example/css/highlight-default.css b/example/css/highlight-default.css new file mode 100644 index 0000000..f1bfade --- /dev/null +++ b/example/css/highlight-default.css @@ -0,0 +1,99 @@ +/* + +Original highlight.js style (c) Ivan Sagalaev + +*/ + +.hljs { + display: block; + overflow-x: auto; + padding: 0.5em; + background: #F0F0F0; +} + + +/* Base color: saturation 0; */ + +.hljs, +.hljs-subst { + color: #444; +} + +.hljs-comment { + color: #888888; +} + +.hljs-keyword, +.hljs-attribute, +.hljs-selector-tag, +.hljs-meta-keyword, +.hljs-doctag, +.hljs-name { + font-weight: bold; +} + + +/* User color: hue: 0 */ + +.hljs-type, +.hljs-string, +.hljs-number, +.hljs-selector-id, +.hljs-selector-class, +.hljs-quote, +.hljs-template-tag, +.hljs-deletion { + color: #880000; +} + +.hljs-title, +.hljs-section { + color: #880000; + font-weight: bold; +} + +.hljs-regexp, +.hljs-symbol, +.hljs-variable, +.hljs-template-variable, +.hljs-link, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #BC6060; +} + + +/* Language color: hue: 90; */ + +.hljs-literal { + color: #78A960; +} + +.hljs-built_in, +.hljs-bullet, +.hljs-code, +.hljs-addition { + color: #397300; +} + + +/* Meta color: hue: 200 */ + +.hljs-meta { + color: #1f7199; +} + +.hljs-meta-string { + color: #4d99bf; +} + + +/* Misc effects */ + +.hljs-emphasis { + font-style: italic; +} + +.hljs-strong { + font-weight: bold; +} diff --git a/example/css/styles.css b/example/css/styles.css index a39a361..87b0b4c 100644 --- a/example/css/styles.css +++ b/example/css/styles.css @@ -1,38 +1,91 @@ -@charset "UTF-8"; -/* usual styles */ -/* LESS - http://lesscss.org style sheet */ -/* Palette color codes */ -/* Palette URL: http://paletton.com/#uid=31g0q0kHZAviRSkrHLOGomVNzac */ -/* Feel free to copy&paste color codes to your application */ -/* MIXINS */ -/* As hex codes */ -/* Main Primary color */ -/* Main Secondary color (1) */ -/* Main Secondary color (2) */ -/* As RGBa codes */ -/* Main Primary color */ -/* Main Secondary color (1) */ -/* Main Secondary color (2) */ -/* Generated by Paletton.com ├é┬® 2002-2014 */ -/* http://paletton.com */ -@import url("http://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600"); -/* line 1, ../sass/_viewport.scss */ #interactive.viewport { width: 640px; height: 480px; } -/* line 6, ../sass/_viewport.scss */ #interactive.viewport canvas, video { float: left; width: 640px; height: 480px; } -/* line 10, ../sass/_viewport.scss */ + #interactive.viewport canvas.drawingBuffer, video.drawingBuffer { margin-left: -640px; } +.input-field { + display: flex; + align-items: center; + width: 260px; +} + +.input-field label { + flex: 0 0 auto; + padding-right: 0.5rem; +} + +.input-field input { + flex: 1 1 auto; + height: 20px; +} + +.input-field button { + flex: 0 0 auto; + height: 28px; + font-size: 20px; + width: 40px; +} + +.overlay { + overflow: hidden; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + background-color: rgba(0, 0, 0, 0.3); +} + +.overlay__content { + top: 50%; + position: absolute; + left: 50%; + transform: translate(-50%, -50%); + width: 90%; + max-height: 90%; +} + +.overlay__close { + position: absolute; + right: 0; + padding: 0.5rem; + width: 2rem; + height: 2rem; + line-height: 2rem; + text-align: center; + background-color: white; + cursor: pointer; + border: 3px solid black; + font-size: 1.5rem; + margin: -1rem; + border-radius: 2rem; + z-index: 100; +} + +.overlay__content video { + width: 100%; + height: 100%; +} + +.overlay__content canvas { + position: absolute; + width: 100%; + height: 100%; + left: 0; + top: 0; +} + /* line 16, ../sass/_viewport.scss */ .controls fieldset { border: none; @@ -117,98 +170,8 @@ clear: both; } -/* line 7, ../sass/_overlay.scss */ -.scanner-overlay { - display: none; - width: 640px; - height: 510px; - position: absolute; - padding: 20px; - top: 50%; - margin-top: -275px; - left: 50%; - margin-left: -340px; - background-color: #FFF; - -moz-box-shadow: #333333 0px 4px 10px; - -webkit-box-shadow: #333333 0px 4px 10px; - box-shadow: #333333 0px 4px 10px; -} -/* line 20, ../sass/_overlay.scss */ -.scanner-overlay > .header { - position: relative; - margin-bottom: 14px; -} -/* line 23, ../sass/_overlay.scss */ -.scanner-overlay > .header h4, .scanner-overlay > .header .close { - line-height: 16px; -} -/* line 26, ../sass/_overlay.scss */ -.scanner-overlay > .header h4 { - margin: 0px; - padding: 0px; -} -/* line 30, ../sass/_overlay.scss */ -.scanner-overlay > .header .close { - position: absolute; - right: 0px; - top: 0px; - height: 16px; - width: 16px; - text-align: center; - font-weight: bold; - font-size: 14px; - cursor: pointer; -} - -/* line 1, ../sass/_icons.scss */ -i.icon-24-scan { - width: 24px; - height: 24px; - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzFFMjMzNTBFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzFFMjMzNTFFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDMUUyMzM0RUU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDMUUyMzM0RkU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtQr90wAAAUuSURBVHjanFVLbFRVGP7ua97T9DGPthbamAYYBNSMVbBpjCliWWGIEBMWsnDJxkh8RDeEDW5MDGticMmGBWnSlRSCwgLFNkqmmrRIqzjTznTazkxn5s7c6/efzm0G0Jhwkj/nP+d/nv91tIWFBTQaDQWapkGW67p4ltUub5qmAi0UCqF/a/U2m81tpmddotwwDGSz2dzi4uKSaOucnJycGhsbe1XXdQiIIcdxEAgEtgXq9brySHCht79UXi/8QheawN27d385fPjwuEl6XyKR6LdtW7t06RLK5TKOHj2K/fv3Q87Dw8OYn5/HiRMnMDs7i5mZGQwODiqlPp8PuVwO6XRaOXb16lXl1OnTp5FMJvtosF8M+MWLarWqGJaWlpBKpRRcu3YN4+PjmJ6exsTEhDJw5coVjI6OKgPhcBiZTAbxeBx+vx+XL19Gd3c3Tp48Ka9zqDYgBlTQxYNgMIhIJKLCILkQb+TZsgvdsiyFi+feWRR7oRNZyanQtvW2V4DEUUBiK2eJpeDirSyhCe7F2QPh8fiEp72i9PbsC5G52DbiKZA771yr1dTuGfJ4PQNPFoAyQNR1aNEmsS5eyB3PgjeooMZd2AWvNmzYci/Gea7TeFOcI93jV/K67noGmi4vdRI9gPSDeMLSdKUBZZczlWm1rTtHjLZ24d+WER2tc8N1m+Y+ID74wx0zGYvhg9UNrJdtHJyZRdQfwPsrq9g99xsGlgsYmr6BNzO/IVwsYfjBQ6XYz6JI/72MV366B5/lw0elOkJWGUM3bmKtWjXSLuLaBWhnPnnp0FfoiFi4+TMfVAb2poBkDLjO845uYLEAjL4ALGWBP5YAOsP4AJYBFDaB1HOSVWD2PuV95H2RdV93Lv74/cf6p6Zxq/h6OofeOPJBC39JtONdwOAAViOs4p4OFGTf0Uc8iiyrr9YdQrUnDLsngrVOC0jQib44HlF2RafRZBz1Qy+vfhgK3NJZBlrm+LEm9qWwzFgLU7Ozg0JxZP06jQSRpQ7EerAWDSt6PuhHPmChEAog56fCLvJT5hHTm3OZkz3DyLx7XNWTGEA1GkV14gjWgwbW0ESVjYRwCOuai03L5E7OUBAV4kXSS4auoGIaKOma4m8EA5R1sMEGLh95C+XuLph0WJWpxepYYLtfT0RRgY1KgNODY6BoaChRuEhDCIZQYseuki5KN6hcQHiq7OZNv4/Zq2O6P4Lfkwn46vZjjaYZrIpvWbpzjLErrc4xUGE4avRedpYJalRcIl5hQius/SrPm9xrNOQYJhao6BvNUeWqtY8KaWuNjHOFAr7mM9f4NA4UbKysoUJ8PV9UzVOx6wxDDWUOxnK1pmCD07fOMAvtIsM3l89Dl3HRGhVma9AZMqjOnz2LQqWCxs6dqr3T7x1DTzKJaG8SekcHhg4cgI/56uKdlKnBV/WndqN3YAB/7tyBd3oT6GBIOzs7kc/nDfFdDFT5bS73cp06dQoaPa/Rw/rtO/resTHxxE2m9rCrbSR27UJCcMf1BpiA5rAAGgdfc868fUR1sMwj0cm9Iu9IctweisViB3hhKTHDcHc5jv/LspbyaZrR1OD82/fIlOkuB9LnEWRmDX2TsddUPg3D5gvuc0je0rZaD5EW6G3yjS+A3eeBEWq3XW/Abw1HhUspXADufQb86oW7tZytkYCN//3hHwBvDALPi8EnSOYK8DAOfCc2h4aGcO7cuafkzampqf9UripH12/DtOZbx8ciVGzYy5OO40o25ascGRl5Ssc/AgwAjW3JwqIUjSYAAAAASUVORK5CYII="); - display: inline-block; - background-repeat: no-repeat; - line-height: 24px; - margin-top: 1px; - vertical-align: text-top; -} - -@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 */ - #interactive.viewport { - width: 300px; - height: 300px; - overflow: hidden; - } - - /* line 11, ../sass/phone/_viewport.scss */ - #interactive.viewport canvas, video { - margin-top: -50px; - width: 300px; - height: 400px; - } - /* line 15, ../sass/phone/_viewport.scss */ - #interactive.viewport canvas.drawingBuffer, video.drawingBuffer { - margin-left: -300px; - } - - /* line 20, ../sass/phone/_viewport.scss */ + /* line 20, ../sass/phone/_viewport.scss */ #result_strip { margin-top: 5px; padding-top: 5px; @@ -230,34 +193,14 @@ i.icon-24-scan { height: 180px; } } -@media (max-width: 603px) { - /* line 8, ../sass/phone/_overlay.scss */ - .overlay.scanner { - width: 640px; - height: 510px; - padding: 20px; - margin-top: -275px; - margin-left: -340px; - background-color: #FFF; - -moz-box-shadow: none; - -webkit-box-shadow: none; - box-shadow: none; - } - /* line 17, ../sass/phone/_overlay.scss */ - .overlay.scanner > .header { - margin-bottom: 14px; - } - /* line 19, ../sass/phone/_overlay.scss */ - .overlay.scanner > .header h4, .overlay.scanner > .header .close { - line-height: 16px; - } - /* line 22, ../sass/phone/_overlay.scss */ - .overlay.scanner > .header .close { - height: 16px; - width: 16px; - } + +html { + height: 100%; +} +html, body { + min-height: 100%; } -/* line 15, ../sass/styles.scss */ + body { background-color: #FFF; margin: 0px; @@ -265,6 +208,9 @@ body { color: #1e1e1e; font-weight: normal; padding-top: 0; + box-sizing: border-box; + padding-bottom: 96px; + position: relative; } /* line 24, ../sass/styles.scss */ @@ -279,7 +225,7 @@ header { } /* line 31, ../sass/styles.scss */ header .headline { - width: 640px; + max-width: 640px; margin: 0 auto; } /* line 34, ../sass/styles.scss */ @@ -298,11 +244,15 @@ footer { background: #0A4DB7; color: #6C9CE8; padding: 1em 2em 2em; + position: absolute; + bottom: 0; + left: 0; + right: 0; } /* line 51, ../sass/styles.scss */ #container { - width: 640px; + max-width: 640px; margin: 20px auto; padding: 10px; } diff --git a/example/fonts/icomoon.eot b/example/fonts/icomoon.eot new file mode 100644 index 0000000000000000000000000000000000000000..6698f0e65ebebfac2faac11e5ab18e2375321c46 GIT binary patch literal 1396 zcmaJ>-%Aux6#nkaj=F2?R{nyL9I#LbR&B#ADjIqatfa8;HOF<@6?SKq-4PTDh8}u| zAYT;epk9)C^(l4x?#xwpW$`fQp6`6;+#hp)9Nz%G#Q*^f%_6WO zBy;zEGcR)^+1OmG9*qG>EFcFDC8`IP2}w-DK^}`J!bXKmFJ{P8P-U*nF)@ZTM#J2r zy-CUmI}t#~=)DIcmr|zo4ZoQ+|;p}#}_M9E$%bNROb zy@S5#+9hZ8cKjdxVUGX2>{WfPlM;I`yieRqYFzSCJKekP&g2*C2w+ZWasJ z%IdXx4VF%2Q0~RPm?4m}N$qDWvYayXW4J<_KnD+3BWG@9>$~+jIUHb7|JD1I{Tjy= z5X?$7aJ(GZt6|Dv-tnCL6)Oha;@Isxy%f68hqD;KAck-eBgi0&Yq$w?Wljw?s!+bP zI#pUD(=(V=dVyBzkg^DZnq>u+#a19Rdo|PKC)Q1KXFX&X7FMLSAlReo)^4B$$18g@ zh}<{z|JAk4jYp~L+vw!uq5PP8CeQo8hJVic$9<24{larZl+X5XC!-7_ibRg=cHk$_ zjdOSr_Ap?{+fCUYIdoK$#5*;v;I8k_p%Kq2UY^Fd!ZG4Sg$){^XA;LIhpgOxVAJV!t&(vFY+u{ZdkNz a__Xun=CI6mGAwsfs@$cy>+%&IBmV*0+R?TE literal 0 HcmV?d00001 diff --git a/example/fonts/icomoon.svg b/example/fonts/icomoon.svg new file mode 100644 index 0000000..562360b --- /dev/null +++ b/example/fonts/icomoon.svg @@ -0,0 +1,11 @@ + + + +Generated by IcoMoon + + + + + + + \ No newline at end of file diff --git a/example/fonts/icomoon.ttf b/example/fonts/icomoon.ttf new file mode 100644 index 0000000000000000000000000000000000000000..a305ffcb76f4bb1988a3d8deaf6ebb1a89c9d1f5 GIT binary patch literal 1232 zcmaJ=OKTHR7(I6$ZIeo)_61t(KrAf?X=|iWR2*CssuZD0w|1J2Ng$aCNeV3}3@%)V zpxX*c7p~PGAQD7e=|=y7ZY;X(%C_;`J2!2V(wltuJLh}e*FXU1MFbO5w{B0KPo1cxzP*;W}XUkUN1_@i%TH{*X_w{-bJG zZ*ZL))?4X^X+k`M&HN4HGc8YJEq);@5;Cr12rm2I;R0JZv)O9GH7Rt;vuF=T0ohH; z2z{|;OT{f*q)ws-27dz1R<5<%YSD&$ELuN?zA&$|u7F@vs>5agxl1bKAns_J+=^?# zbXmKbx0gachH)CBNMju5Fo`U3xQuH+fA&PWQ-tPHn-r<->|i>lWsF+NxYmfGrt3zo z%UM9Fy{6;vFE$-#XH!||7H%xfDB7c#?rvm6M+-ALhCDaD|N8UyZ|z<~cuCvkZOmwF5wB`&^Nt2J?xOvs#z~xFXTA?BK}#P!F*b+`8k@vdHMWTFYi#pN z;TNECyJ%m~IEf2*Rmz8zFbq&a9w91}5W%8ftCzySna)gM5k6|DGk^}(nMMXvhh`mW zT<{C4Wv|AjJ{P)*GCb4{jhqdGhEwnZzveak6=!+fnahXsTw4aSs&|9k3oH|;6?te- Zuh6!Pb#FFsE8E8N-n_ICLtk?4J@?%E-hCf)Z#I{M0EeAMm-N;b zY1@t2TVv+|afG=AiPUl1%a^?sYDLDkB?gDSZWp|&)ZQ|dwGusr()wL$ABaAQ#P0{i zqVFvM#&_nYBoaTSpGy%idl;XV=zMQ}ES76))Fv5oF8Y!*r7$n+u9F^BIExo$Z;gFT zxerHS0M`Pq>{F|;=Oc-Y8;L(FVU@A9vtMVDnI^%-A>{V{ z87{DuHS3K!T$5l<-Knl|lviEI(#%Porj=D`Shzr+EX#%`lQ4f|X)ehz%r zGgN{`K(H#MR*5wO$X-;f5BeXj$)mUyOqXkS@(W0z7lSy7Aq-;#=P-s0vbcn+KyT*Q za4Uq4r8f!b?M(l0R^tr4#EABYqPpuwu1hPR++N*r_!pawv$LrbriB}$9z}bE>F!2G zbT~MpWyrhG=dV6{_xeui@;16Gbwl44AHI>K>D9^QH_BU5gY(oo@=@fVJ-A7wz>YI< zAgAreNq(QF@L0{T;UfM_nk&Z>V%v>ZdR@U=Z}u?A7ql*4V@h+2d{uLsZ`7}O2lbnp zCvk$E`9)a?D&5S)+#oM#ZjxWo+##euyj;$QmZGu+!Ka;kTY-3weMP&@KaqhF%7h;`a&b%2@p0Nf)Vy7fu^=YIhk2*Vrz literal 0 HcmV?d00001 diff --git a/example/scan-to-input/index.html b/example/scan-to-input/index.html new file mode 100644 index 0000000..a32ec9f --- /dev/null +++ b/example/scan-to-input/index.html @@ -0,0 +1,85 @@ + + + + + + + index + + + + + + + + + + +
+
+

QuaggaJS

+

An advanced barcode-scanner written in JavaScript

+
+
+
+

Scan barcode to input-field

+

Click the button next to the input-field + to start scanning an EAN-13 barcode

+
+
+
+ + + +
+
+
+

An overlay will pop-up showing the users's back-facing + camera if access is granted.

+
+

Source

+ 
+                
+
+var scanner = Quagga
+   .decoder({readers: ['ean_reader']})
+   .locator({patchSize: 'medium'})
+   .fromVideo({
+       target: '.overlay__content',
+       constraints: {
+           width: 800,
+           height: 600,
+           facingMode: "environment"
+       }
+   });
+
+document.querySelector('.input-field input + button.scan')
+   .addEventListener("click", function onClick(e) {
+       e.preventDefault();
+       e.target.removeEventListener("click", onClick);
+
+       // Start scanning
+       scanner.addEventListener('detected', function detected(result) {
+           // show result and stop scanner
+          document.querySelector('input.isbn').value = result.codeResult.code;
+          scanner.stop();
+          scanner.removeEventListener('detected', detected);
+       }).start();
+   });
+
+                
+
+
+
+
+

+ © Copyright by Christoph Oberhofer +

+
+ + + + + + + diff --git a/example/scan-to-input/index.js b/example/scan-to-input/index.js new file mode 100644 index 0000000..06d7da0 --- /dev/null +++ b/example/scan-to-input/index.js @@ -0,0 +1,78 @@ +var Quagga = window.Quagga; +var App = { + _scanner: null, + init: function() { + this.attachListeners(); + }, + activateScanner: function() { + var scanner = this.configureScanner('.overlay__content'), + onDetected = function (result) { + document.querySelector('input.isbn').value = result.codeResult.code; + stop(); + }.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); + scanner.addEventListener('detected', onDetected).start(); + }, + attachListeners: function() { + var self = this; + + document.querySelector('.input-field input + button.scan') + .addEventListener("click", function onClick(e) { + e.preventDefault(); + e.target.removeEventListener("click", onClick); + self.activateScanner(); + }); + }, + showOverlay: function(cancelCb) { + if (!this._overlay) { + var content = document.createElement('div'), + closeButton = document.createElement('div'); + + closeButton.appendChild(document.createTextNode('X')); + content.className = 'overlay__content'; + closeButton.className = 'overlay__close'; + this._overlay = document.createElement('div'); + this._overlay.className = 'overlay'; + this._overlay.appendChild(content); + content.appendChild(closeButton); + closeButton.addEventListener('click', function closeClick(e) { + e.target.removeEventListener('click', closeClick); + cancelCb(); + }); + document.body.appendChild(this._overlay); + } else { + var closeButton = document.querySelector('.overlay__close'); + closeButton.addEventListener('click', cancelCb); + } + this._overlay.style.display = "block"; + }, + hideOverlay: function() { + if (this._overlay) { + this._overlay.style.display = "none"; + } + }, + configureScanner: function(selector) { + if (!this._scanner) { + this._scanner = Quagga + .decoder({readers: ['ean_reader']}) + .locator({patchSize: 'medium'}) + .fromVideo({ + target: selector, + constraints: { + width: 800, + height: 600, + facingMode: "environment" + } + }); + } + return this._scanner; + } +}; +App.init(); diff --git a/example/vendor/highlight.pack.js b/example/vendor/highlight.pack.js new file mode 100644 index 0000000..e9961b9 --- /dev/null +++ b/example/vendor/highlight.pack.js @@ -0,0 +1,2 @@ +/*! highlight.js v9.4.0 | BSD3 License | git.io/hljslicense */ +!function(e){var n="object"==typeof window&&window||"object"==typeof self&&self;"undefined"!=typeof exports?e(exports):n&&(n.hljs=e({}),"function"==typeof define&&define.amd&&define([],function(){return n.hljs}))}(function(e){function n(e){return e.replace(/&/gm,"&").replace(//gm,">")}function t(e){return e.nodeName.toLowerCase()}function r(e,n){var t=e&&e.exec(n);return t&&0==t.index}function a(e){return/^(no-?highlight|plain|text)$/i.test(e)}function i(e){var n,t,r,i=e.className+" ";if(i+=e.parentNode?e.parentNode.className:"",t=/\blang(?:uage)?-([\w-]+)\b/i.exec(i))return w(t[1])?t[1]:"no-highlight";for(i=i.split(/\s+/),n=0,r=i.length;r>n;n++)if(w(i[n])||a(i[n]))return i[n]}function o(e,n){var t,r={};for(t in e)r[t]=e[t];if(n)for(t in n)r[t]=n[t];return r}function u(e){var n=[];return function r(e,a){for(var i=e.firstChild;i;i=i.nextSibling)3==i.nodeType?a+=i.nodeValue.length:1==i.nodeType&&(n.push({event:"start",offset:a,node:i}),a=r(i,a),t(i).match(/br|hr|img|input/)||n.push({event:"stop",offset:a,node:i}));return a}(e,0),n}function c(e,r,a){function i(){return e.length&&r.length?e[0].offset!=r[0].offset?e[0].offset"}function u(e){f+=""}function c(e){("start"==e.event?o:u)(e.node)}for(var s=0,f="",l=[];e.length||r.length;){var g=i();if(f+=n(a.substr(s,g[0].offset-s)),s=g[0].offset,g==e){l.reverse().forEach(u);do c(g.splice(0,1)[0]),g=i();while(g==e&&g.length&&g[0].offset==s);l.reverse().forEach(o)}else"start"==g[0].event?l.push(g[0].node):l.pop(),c(g.splice(0,1)[0])}return f+n(a.substr(s))}function s(e){function n(e){return e&&e.source||e}function t(t,r){return new RegExp(n(t),"m"+(e.cI?"i":"")+(r?"g":""))}function r(a,i){if(!a.compiled){if(a.compiled=!0,a.k=a.k||a.bK,a.k){var u={},c=function(n,t){e.cI&&(t=t.toLowerCase()),t.split(" ").forEach(function(e){var t=e.split("|");u[t[0]]=[n,t[1]?Number(t[1]):1]})};"string"==typeof a.k?c("keyword",a.k):Object.keys(a.k).forEach(function(e){c(e,a.k[e])}),a.k=u}a.lR=t(a.l||/\w+/,!0),i&&(a.bK&&(a.b="\\b("+a.bK.split(" ").join("|")+")\\b"),a.b||(a.b=/\B|\b/),a.bR=t(a.b),a.e||a.eW||(a.e=/\B|\b/),a.e&&(a.eR=t(a.e)),a.tE=n(a.e)||"",a.eW&&i.tE&&(a.tE+=(a.e?"|":"")+i.tE)),a.i&&(a.iR=t(a.i)),void 0===a.r&&(a.r=1),a.c||(a.c=[]);var s=[];a.c.forEach(function(e){e.v?e.v.forEach(function(n){s.push(o(e,n))}):s.push("self"==e?a:e)}),a.c=s,a.c.forEach(function(e){r(e,a)}),a.starts&&r(a.starts,i);var f=a.c.map(function(e){return e.bK?"\\.?("+e.b+")\\.?":e.b}).concat([a.tE,a.i]).map(n).filter(Boolean);a.t=f.length?t(f.join("|"),!0):{exec:function(){return null}}}}r(e)}function f(e,t,a,i){function o(e,n){for(var t=0;t";return i+=e+'">',i+n+o}function h(){if(!k.k)return n(M);var e="",t=0;k.lR.lastIndex=0;for(var r=k.lR.exec(M);r;){e+=n(M.substr(t,r.index-t));var a=g(k,r);a?(B+=a[1],e+=p(a[0],n(r[0]))):e+=n(r[0]),t=k.lR.lastIndex,r=k.lR.exec(M)}return e+n(M.substr(t))}function d(){var e="string"==typeof k.sL;if(e&&!R[k.sL])return n(M);var t=e?f(k.sL,M,!0,y[k.sL]):l(M,k.sL.length?k.sL:void 0);return k.r>0&&(B+=t.r),e&&(y[k.sL]=t.top),p(t.language,t.value,!1,!0)}function b(){L+=void 0!==k.sL?d():h(),M=""}function v(e,n){L+=e.cN?p(e.cN,"",!0):"",k=Object.create(e,{parent:{value:k}})}function m(e,n){if(M+=e,void 0===n)return b(),0;var t=o(n,k);if(t)return t.skip?M+=n:(t.eB&&(M+=n),b(),t.rB||t.eB||(M=n)),v(t,n),t.rB?0:n.length;var r=u(k,n);if(r){var a=k;a.skip?M+=n:(a.rE||a.eE||(M+=n),b(),a.eE&&(M=n));do k.cN&&(L+=""),k.skip||(B+=k.r),k=k.parent;while(k!=r.parent);return r.starts&&v(r.starts,""),a.rE?0:n.length}if(c(n,k))throw new Error('Illegal lexeme "'+n+'" for mode "'+(k.cN||"")+'"');return M+=n,n.length||1}var N=w(e);if(!N)throw new Error('Unknown language: "'+e+'"');s(N);var x,k=i||N,y={},L="";for(x=k;x!=N;x=x.parent)x.cN&&(L=p(x.cN,"",!0)+L);var M="",B=0;try{for(var C,j,I=0;;){if(k.t.lastIndex=I,C=k.t.exec(t),!C)break;j=m(t.substr(I,C.index-I),C[0]),I=C.index+j}for(m(t.substr(I)),x=k;x.parent;x=x.parent)x.cN&&(L+="");return{r:B,value:L,language:e,top:k}}catch(O){if(-1!=O.message.indexOf("Illegal"))return{r:0,value:n(t)};throw O}}function l(e,t){t=t||E.languages||Object.keys(R);var r={r:0,value:n(e)},a=r;return t.filter(w).forEach(function(n){var t=f(n,e,!1);t.language=n,t.r>a.r&&(a=t),t.r>r.r&&(a=r,r=t)}),a.language&&(r.second_best=a),r}function g(e){return E.tabReplace&&(e=e.replace(/^((<[^>]+>|\t)+)/gm,function(e,n){return n.replace(/\t/g,E.tabReplace)})),E.useBR&&(e=e.replace(/\n/g,"
")),e}function p(e,n,t){var r=n?x[n]:t,a=[e.trim()];return e.match(/\bhljs\b/)||a.push("hljs"),-1===e.indexOf(r)&&a.push(r),a.join(" ").trim()}function h(e){var n=i(e);if(!a(n)){var t;E.useBR?(t=document.createElementNS("http://www.w3.org/1999/xhtml","div"),t.innerHTML=e.innerHTML.replace(/\n/g,"").replace(//g,"\n")):t=e;var r=t.textContent,o=n?f(n,r,!0):l(r),s=u(t);if(s.length){var h=document.createElementNS("http://www.w3.org/1999/xhtml","div");h.innerHTML=o.value,o.value=c(s,u(h),r)}o.value=g(o.value),e.innerHTML=o.value,e.className=p(e.className,n,o.language),e.result={language:o.language,re:o.r},o.second_best&&(e.second_best={language:o.second_best.language,re:o.second_best.r})}}function d(e){E=o(E,e)}function b(){if(!b.called){b.called=!0;var e=document.querySelectorAll("pre code");Array.prototype.forEach.call(e,h)}}function v(){addEventListener("DOMContentLoaded",b,!1),addEventListener("load",b,!1)}function m(n,t){var r=R[n]=t(e);r.aliases&&r.aliases.forEach(function(e){x[e]=n})}function N(){return Object.keys(R)}function w(e){return e=(e||"").toLowerCase(),R[e]||R[x[e]]}var E={classPrefix:"hljs-",tabReplace:null,useBR:!1,languages:void 0},R={},x={};return e.highlight=f,e.highlightAuto=l,e.fixMarkup=g,e.highlightBlock=h,e.configure=d,e.initHighlighting=b,e.initHighlightingOnLoad=v,e.registerLanguage=m,e.listLanguages=N,e.getLanguage=w,e.inherit=o,e.IR="[a-zA-Z]\\w*",e.UIR="[a-zA-Z_]\\w*",e.NR="\\b\\d+(\\.\\d+)?",e.CNR="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",e.BNR="\\b(0b[01]+)",e.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",e.BE={b:"\\\\[\\s\\S]",r:0},e.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[e.BE]},e.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[e.BE]},e.PWM={b:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|like)\b/},e.C=function(n,t,r){var a=e.inherit({cN:"comment",b:n,e:t,c:[]},r||{});return a.c.push(e.PWM),a.c.push({cN:"doctag",b:"(?:TODO|FIXME|NOTE|BUG|XXX):",r:0}),a},e.CLCM=e.C("//","$"),e.CBCM=e.C("/\\*","\\*/"),e.HCM=e.C("#","$"),e.NM={cN:"number",b:e.NR,r:0},e.CNM={cN:"number",b:e.CNR,r:0},e.BNM={cN:"number",b:e.BNR,r:0},e.CSSNM={cN:"number",b:e.NR+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",r:0},e.RM={cN:"regexp",b:/\//,e:/\/[gimuy]*/,i:/\n/,c:[e.BE,{b:/\[/,e:/\]/,r:0,c:[e.BE]}]},e.TM={cN:"title",b:e.IR,r:0},e.UTM={cN:"title",b:e.UIR,r:0},e.METHOD_GUARD={b:"\\.\\s*"+e.UIR,r:0},e});hljs.registerLanguage("javascript",function(e){return{aliases:["js","jsx"],k:{keyword:"in of if for while finally var new function do return void else break catch instanceof with throw case default try this switch continue typeof delete let yield const export super debugger as async await static import from as",literal:"true false null undefined NaN Infinity",built_in:"eval isFinite isNaN parseFloat parseInt decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Object Function Boolean Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError Number Math Date String RegExp Array Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray ArrayBuffer DataView JSON Intl arguments require module console window document Symbol Set Map WeakSet WeakMap Proxy Reflect Promise"},c:[{cN:"meta",r:10,b:/^\s*['"]use (strict|asm)['"]/},{cN:"meta",b:/^#!/,e:/$/},e.ASM,e.QSM,{cN:"string",b:"`",e:"`",c:[e.BE,{cN:"subst",b:"\\$\\{",e:"\\}"}]},e.CLCM,e.CBCM,{cN:"number",v:[{b:"\\b(0[bB][01]+)"},{b:"\\b(0[oO][0-7]+)"},{b:e.CNR}],r:0},{b:"("+e.RSR+"|\\b(case|return|throw)\\b)\\s*",k:"return throw case",c:[e.CLCM,e.CBCM,e.RM,{b://,sL:"xml",c:[{b:/<\w+\s*\/>/,skip:!0},{b:/<\w+/,e:/(\/\w+|\w+\/)>/,skip:!0,c:["self"]}]}],r:0},{cN:"function",bK:"function",e:/\{/,eE:!0,c:[e.inherit(e.TM,{b:/[A-Za-z$_][0-9A-Za-z$_]*/}),{cN:"params",b:/\(/,e:/\)/,eB:!0,eE:!0,c:[e.CLCM,e.CBCM]}],i:/\[|%/},{b:/\$[(.]/},e.METHOD_GUARD,{cN:"class",bK:"class",e:/[{;=]/,eE:!0,i:/[:"\[\]]/,c:[{bK:"extends"},e.UTM]},{bK:"constructor",e:/\{/,eE:!0}],i:/#(?!!)/}}); \ No newline at end of file diff --git a/src/quagga.js b/src/quagga.js index a4b3ca5..af2cd9f 100644 --- a/src/quagga.js +++ b/src/quagga.js @@ -1,16 +1,14 @@ -import TypeDefs from './common/typedefs'; // eslint-disable-line no-unused-vars -import WebrtcAdapter from 'webrtc-adapter'; // eslint-disable-line no-unused-vars +import './common/typedefs'; +import 'webrtc-adapter'; import createScanner from './scanner'; import ImageWrapper from './common/image_wrapper'; import ImageDebug from './common/image_debug'; import ResultCollector from './analytics/result_collector'; import Config from './config/config'; -import {merge, pick, omitBy, isEmpty, omit} from 'lodash'; +import {merge, pick, omitBy, isEmpty} from 'lodash'; -// TODO: Keep record of already created scanners for reuse?! - -function fromImage(config, imageSrc, inputConfig={}) { +function fromImage(config, imageSrc, inputConfig = {}) { const staticImageConfig = { inputStream: { type: "ImageStream", @@ -116,7 +114,7 @@ function fromVideo(config, source, inputConfig = {}) { }; } -let defaultScanner = createScanner(); +const defaultScanner = createScanner(); function setConfig(configuration = {}, key, config = {}) { var mergedConfig = merge({}, configuration, {[key]: config}); diff --git a/src/scanner.js b/src/scanner.js index 1309dc5..0d61cea 100644 --- a/src/scanner.js +++ b/src/scanner.js @@ -126,11 +126,6 @@ function createScanner() { if ($viewport) { $viewport.appendChild(_canvasContainer.dom.overlay); } - var clearFix = document.createElement("br"); - clearFix.setAttribute("clear", "all"); - if ($viewport) { - $viewport.appendChild(clearFix); - } } _canvasContainer.ctx.overlay = _canvasContainer.dom.overlay.getContext("2d"); _canvasContainer.dom.overlay.width = _inputStream.getCanvasSize().x;