Added text-images for EAN and Code128
Christoph Oberhofer
11 years ago
parent
4cda686513
commit
5e4c3aeb55
File diff suppressed because one or more lines are too long
@ -0,0 +1,16 @@
|
||||
@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 */
|
||||
@ -0,0 +1 @@
|
||||
@import url("http://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");
|
||||
@ -0,0 +1,267 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
/* line 15, ../sass/_viewport.scss */
|
||||
#result_strip {
|
||||
margin: 10px 0;
|
||||
border-top: 1px solid #EEE;
|
||||
border-bottom: 1px solid #EEE;
|
||||
padding: 10px 0;
|
||||
overflow: auto;
|
||||
}
|
||||
/* line 21, ../sass/_viewport.scss */
|
||||
#result_strip ul.thumbnails {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
/* line 26, ../sass/_viewport.scss */
|
||||
#result_strip ul.thumbnails > li {
|
||||
float: left;
|
||||
width: 160px;
|
||||
}
|
||||
/* line 29, ../sass/_viewport.scss */
|
||||
#result_strip ul.thumbnails > li .thumbnail {
|
||||
padding: 5px;
|
||||
margin: 4px;
|
||||
border: 1px dashed #CCC;
|
||||
}
|
||||
/* line 34, ../sass/_viewport.scss */
|
||||
#result_strip ul.thumbnails > li .thumbnail img {
|
||||
max-width: 140px;
|
||||
}
|
||||
/* line 38, ../sass/_viewport.scss */
|
||||
#result_strip ul.thumbnails > li .thumbnail .caption h4 {
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
height: 40px;
|
||||
margin: 0px;
|
||||
}
|
||||
/* line 48, ../sass/_viewport.scss */
|
||||
#result_strip ul.thumbnails:after {
|
||||
content: "";
|
||||
display: table;
|
||||
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 */
|
||||
#result_strip {
|
||||
margin-top: 5px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
/* line 24, ../sass/phone/_viewport.scss */
|
||||
#result_strip ul.thumbnails > li {
|
||||
width: 150px;
|
||||
}
|
||||
/* line 27, ../sass/phone/_viewport.scss */
|
||||
#result_strip ul.thumbnails > li .thumbnail .imgWrapper {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* line 31, ../sass/phone/_viewport.scss */
|
||||
#result_strip ul.thumbnails > li .thumbnail .imgWrapper img {
|
||||
margin-top: -25px;
|
||||
width: 130px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
/* line 15, ../sass/styles.scss */
|
||||
body {
|
||||
background-color: #FFF;
|
||||
margin: 0px;
|
||||
font-family: Ubuntu, sans-serif;
|
||||
color: #1e1e1e;
|
||||
font-weight: normal;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* line 24, ../sass/styles.scss */
|
||||
h1, h2, h3, h4 {
|
||||
font-family: "Cabin Condensed", sans-serif;
|
||||
}
|
||||
|
||||
/* line 28, ../sass/styles.scss */
|
||||
header {
|
||||
background: #FFC600;
|
||||
padding: 1em;
|
||||
}
|
||||
/* line 31, ../sass/styles.scss */
|
||||
header .headline {
|
||||
width: 640px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/* line 34, ../sass/styles.scss */
|
||||
header .headline h1 {
|
||||
color: #FFDD69;
|
||||
font-size: 3em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
/* line 39, ../sass/styles.scss */
|
||||
header .headline h2 {
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
|
||||
/* line 45, ../sass/styles.scss */
|
||||
footer {
|
||||
background: #0A4DB7;
|
||||
color: #6C9CE8;
|
||||
padding: 1em 2em 2em;
|
||||
}
|
||||
|
||||
/* line 51, ../sass/styles.scss */
|
||||
#container {
|
||||
width: 640px;
|
||||
margin: 20px auto;
|
||||
padding: 10px;
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
|
||||
<title>index</title>
|
||||
<meta name="description" content="" />
|
||||
<meta name="author" content="Christoph Oberhofer" />
|
||||
|
||||
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
|
||||
<link rel="stylesheet" type="text/css" href="css/styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="headline">
|
||||
<h1>QuaggaJS</h1>
|
||||
<h2>An advanced barcode-scanner written in JavaScript</h2>
|
||||
</div>
|
||||
</header>
|
||||
<section id="container" class="container">
|
||||
<h3>The user's camera</h3>
|
||||
<p>If your platform supports the <strong>getUserMedia</strong> API call, you can try the real-time locating and decoding features.
|
||||
Simply allow the page to access your web-cam and point it to a barcode encoded with <strong>Code128</strong>.
|
||||
It works best if your camera has built-in auto-focus.
|
||||
</p>
|
||||
<div class="controls">
|
||||
<button class="next">Start/Continue</button>
|
||||
</div>
|
||||
<div id="result_strip">
|
||||
<ul class="thumbnails"></ul>
|
||||
</div>
|
||||
<div id="interactive" class="viewport"></div>
|
||||
</section>
|
||||
<footer>
|
||||
<p>
|
||||
© Copyright by Christoph Oberhofer
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script src="../src/vendor/jquery-1.9.0.min.js" type="text/javascript"></script>
|
||||
<script src="../dist/quagga.js" type="text/javascript"></script>
|
||||
<script src="live_w_locator.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,28 @@
|
||||
$(function() {
|
||||
Quagga.init({
|
||||
inputStream : {
|
||||
name : "Live",
|
||||
type : "LiveStream"
|
||||
},
|
||||
decoder : {
|
||||
readers : ['code_128_reader']
|
||||
},
|
||||
readyFunc : function() {
|
||||
Quagga.start();
|
||||
}
|
||||
});
|
||||
|
||||
Quagga.onDetected(function(result) {
|
||||
Quagga.stop();
|
||||
var $node = null, canvas = Quagga.canvas.dom.image;
|
||||
|
||||
$node = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');
|
||||
$node.find("img").attr("src", canvas.toDataURL());
|
||||
$node.find("h4.code").html(result);
|
||||
$("#result_strip ul.thumbnails").prepend($node);
|
||||
});
|
||||
|
||||
$(".controls").on("click", "button.next", function(e) {
|
||||
Quagga.start();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,10 @@
|
||||
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;
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
$overlayWidth: $videoWidth;
|
||||
$overlayHeadline: 16px;
|
||||
$overlayHeadlineMargin: 14px;
|
||||
$overlayPadding: 20px;
|
||||
$overlayHeight: $videoHeight + $overlayHeadlineMargin + $overlayHeadline;
|
||||
|
||||
.scanner-overlay {
|
||||
display: none;
|
||||
width: $overlayWidth;
|
||||
height: $overlayHeight;
|
||||
position: absolute;
|
||||
padding: $overlayPadding;
|
||||
top: 50%;
|
||||
margin-top: -($overlayHeight)/2 - $overlayPadding;
|
||||
left: 50%;
|
||||
margin-left: -($overlayWidth + 2*$overlayPadding)/2;
|
||||
background-color: $overlayBackground;
|
||||
@include box-shadow(#333333 0px 4px 10px);
|
||||
|
||||
& > .header{
|
||||
position: relative;
|
||||
margin-bottom: $overlayHeadlineMargin;
|
||||
h4, .close{
|
||||
line-height: $overlayHeadline;
|
||||
}
|
||||
h4{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.close{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
height: $overlayHeadline;
|
||||
width: $overlayHeadline;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
& > .body{
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
@import "phone/core";
|
||||
@import "phone/viewport";
|
||||
@import "phone/overlay";
|
||||
@ -0,0 +1,4 @@
|
||||
@include tablet {
|
||||
/* tablet styles */
|
||||
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
$tablet_upper: 1024px;
|
||||
$phone_upper: 603px;
|
||||
|
||||
@mixin phone {
|
||||
@media (max-width: $phone_upper) {
|
||||
@content;
|
||||
}
|
||||
|
||||
} // @mixin phone
|
||||
|
||||
@mixin tablet {
|
||||
|
||||
@media (min-width: $phone_upper+1) and (max-width: $tablet_upper) {
|
||||
@content;
|
||||
}
|
||||
|
||||
} // @mixin tablet
|
||||
@ -0,0 +1,7 @@
|
||||
$background_color: #FFF;
|
||||
$overlayBackground: #FFF;
|
||||
$videoWidth: 640px;
|
||||
$videoHeight: 480px;
|
||||
|
||||
$text-font: Ubuntu, sans-serif;
|
||||
$header-font: 'Cabin Condensed', sans-serif;
|
||||
@ -0,0 +1,54 @@
|
||||
#interactive.viewport{
|
||||
width: $videoWidth;
|
||||
height: $videoHeight;
|
||||
}
|
||||
|
||||
#interactive.viewport canvas, video{
|
||||
float: left;
|
||||
width: $videoWidth;
|
||||
height: $videoHeight;
|
||||
&.drawingBuffer{
|
||||
margin-left: -$videoWidth;
|
||||
}
|
||||
}
|
||||
|
||||
#result_strip{
|
||||
margin: 10px 0;
|
||||
border-top: 1px solid #EEE;
|
||||
border-bottom: 1px solid #EEE;
|
||||
padding: 10px 0;
|
||||
overflow: auto;
|
||||
ul.thumbnails{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
|
||||
& > li{
|
||||
float: left;
|
||||
width: $videoWidth/4;
|
||||
.thumbnail{
|
||||
padding: 5px;
|
||||
margin: 4px;
|
||||
border: 1px dashed #CCC;
|
||||
|
||||
img{
|
||||
max-width: $videoWidth/4 - 20px;
|
||||
}
|
||||
.caption{
|
||||
h4{
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
height: 40px;
|
||||
margin: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:after{
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
/* 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 */
|
||||
|
||||
$color-primary-0: #FFC600; /* Main Primary color */
|
||||
$color-primary-1: #FFDD69;
|
||||
$color-primary-2: #FFCE22;
|
||||
$color-primary-3: #B78E00;
|
||||
$color-primary-4: #513F00;
|
||||
|
||||
$color-secondary-1-0: #0A4DB7; /* Main Secondary color (1) */
|
||||
$color-secondary-1-1: #6C9CE8;
|
||||
$color-secondary-1-2: #2E6FD6;
|
||||
$color-secondary-1-3: #073379;
|
||||
$color-secondary-1-4: #021636;
|
||||
|
||||
$color-secondary-2-0: #5809BB; /* Main Secondary color (2) */
|
||||
$color-secondary-2-1: #A36BE9;
|
||||
$color-secondary-2-2: #782DD8;
|
||||
$color-secondary-2-3: #3A077C;
|
||||
$color-secondary-2-4: #190237;
|
||||
|
||||
|
||||
|
||||
/* As RGBa codes */
|
||||
|
||||
$rgba-primary-0: rgba(255,198, 0,1); /* Main Primary color */
|
||||
$rgba-primary-1: rgba(255,221,105,1);
|
||||
$rgba-primary-2: rgba(255,206, 34,1);
|
||||
$rgba-primary-3: rgba(183,142, 0,1);
|
||||
$rgba-primary-4: rgba( 81, 63, 0,1);
|
||||
|
||||
$rgba-secondary-1-0: rgba( 10, 77,183,1); /* Main Secondary color (1) */
|
||||
$rgba-secondary-1-1: rgba(108,156,232,1);
|
||||
$rgba-secondary-1-2: rgba( 46,111,214,1);
|
||||
$rgba-secondary-1-3: rgba( 7, 51,121,1);
|
||||
$rgba-secondary-1-4: rgba( 2, 22, 54,1);
|
||||
|
||||
$rgba-secondary-2-0: rgba( 88, 9,187,1); /* Main Secondary color (2) */
|
||||
$rgba-secondary-2-1: rgba(163,107,233,1);
|
||||
$rgba-secondary-2-2: rgba(120, 45,216,1);
|
||||
$rgba-secondary-2-3: rgba( 58, 7,124,1);
|
||||
$rgba-secondary-2-4: rgba( 25, 2, 55,1);
|
||||
|
||||
|
||||
|
||||
/* Generated by Paletton.com © 2002-2014 */
|
||||
/* http://paletton.com */
|
||||
@ -0,0 +1 @@
|
||||
@import url('http://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600');
|
||||
@ -0,0 +1,15 @@
|
||||
@include phone {
|
||||
#container{
|
||||
width: 300px;
|
||||
margin: 10px auto;
|
||||
@include box-shadow(none);
|
||||
|
||||
form.voucher-form{
|
||||
input{
|
||||
&.voucher-code{
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
@include phone {
|
||||
$overlayWidth: $videoWidth;
|
||||
$overlayHeadline: 16px;
|
||||
$overlayHeadlineMargin: 14px;
|
||||
$overlayPadding: 20px;
|
||||
$overlayHeight: $videoHeight + $overlayHeadlineMargin + $overlayHeadline;
|
||||
|
||||
.overlay.scanner {
|
||||
width: $overlayWidth;
|
||||
height: $overlayHeight;
|
||||
padding: $overlayPadding;
|
||||
margin-top: -($overlayHeight)/2 - $overlayPadding;
|
||||
margin-left: -($overlayWidth + 2*$overlayPadding)/2;
|
||||
background-color: $overlayBackground;
|
||||
@include box-shadow(none);
|
||||
|
||||
& > .header{
|
||||
margin-bottom: $overlayHeadlineMargin;
|
||||
h4, .close{
|
||||
line-height: $overlayHeadline;
|
||||
}
|
||||
.close{
|
||||
height: $overlayHeadline;
|
||||
width: $overlayHeadline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
@include phone {
|
||||
$videoWidth: 300px;
|
||||
$videoHeight: 400px;
|
||||
|
||||
#interactive.viewport{
|
||||
width: $videoWidth;
|
||||
height: $videoWidth;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#interactive.viewport canvas, video{
|
||||
margin-top: ($videoWidth - $videoHeight)/2;
|
||||
width: $videoWidth;
|
||||
height: $videoHeight;
|
||||
&.drawingBuffer{
|
||||
margin-left: -$videoWidth;
|
||||
}
|
||||
}
|
||||
|
||||
#result_strip{
|
||||
margin-top: 5px;
|
||||
padding-top: 5px;
|
||||
ul.thumbnails{
|
||||
& > li{
|
||||
width: $videoWidth/2;
|
||||
.thumbnail{
|
||||
.imgWrapper{
|
||||
width: $videoWidth/2 - 20px;
|
||||
height: $videoWidth/2 - 20px;
|
||||
overflow: hidden;
|
||||
img{
|
||||
margin-top: (($videoWidth/2 - 20px) - ($videoHeight/2 - 20px))/2;
|
||||
width: $videoWidth/2 - 20px;
|
||||
height: $videoHeight/2 - 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
@import "compass/css3";
|
||||
@import "variables";
|
||||
@import "utility";
|
||||
|
||||
/* usual styles */
|
||||
|
||||
@import "fonts";
|
||||
@import "viewport";
|
||||
@import "overlay";
|
||||
@import "icons";
|
||||
|
||||
@import "tablet";
|
||||
@import "phone";
|
||||
@ -0,0 +1,56 @@
|
||||
@import "compass/css3";
|
||||
@import "variables";
|
||||
@import "utility";
|
||||
|
||||
/* usual styles */
|
||||
@import "colors";
|
||||
@import "fonts";
|
||||
@import "viewport";
|
||||
@import "overlay";
|
||||
@import "icons";
|
||||
|
||||
@import "tablet";
|
||||
@import "phone";
|
||||
|
||||
body{
|
||||
background-color: #FFF;
|
||||
margin: 0px;
|
||||
font-family: $text-font;
|
||||
color: #1e1e1e;
|
||||
font-weight: normal;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4 {
|
||||
font-family: $header-font;
|
||||
}
|
||||
|
||||
header {
|
||||
background: $color-primary-0;
|
||||
padding: 1em;
|
||||
.headline {
|
||||
width: 640px;
|
||||
margin: 0 auto;
|
||||
h1 {
|
||||
color: $color-primary-1;
|
||||
font-size: 3em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
background: $color-secondary-1-0;
|
||||
color: $color-secondary-1-1;
|
||||
padding: 1em 2em 2em;
|
||||
}
|
||||
|
||||
#container{
|
||||
width: 640px;
|
||||
margin: 20px auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
|
||||
<title>index</title>
|
||||
<meta name="description" content="" />
|
||||
<meta name="author" content="Christoph Oberhofer" />
|
||||
|
||||
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700,300' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" type="text/css" href="css/styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="headline">
|
||||
<h1>QuaggaJS</h1>
|
||||
<h2>An advanced barcode-scanner written in JavaScript</h2>
|
||||
</div>
|
||||
</header>
|
||||
<section id="container" class="container">
|
||||
<h3>Working with static images</h3>
|
||||
<p>This examples uses static image files as input which are loaded from the server on startup.
|
||||
The locating and decoding process takes place inside the browser.
|
||||
Hit the <strong>next</strong> button to try a different image</p>
|
||||
<div class="controls">
|
||||
<button class="next">Next</button>
|
||||
</div>
|
||||
<div id="result_strip">
|
||||
<ul class="thumbnails"></ul>
|
||||
</div>
|
||||
<div id="interactive" class="viewport"></div>
|
||||
</section>
|
||||
<footer>
|
||||
<p>
|
||||
© Copyright by Christoph Oberhofer
|
||||
</p>
|
||||
</footer>
|
||||
<script src="../src/vendor/jquery-1.9.0.min.js" type="text/javascript"></script>
|
||||
<script src="../dist/quagga.js" type="text/javascript"></script>
|
||||
<script src="static_images.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,28 @@
|
||||
$(function() {
|
||||
Quagga.init({
|
||||
inputStream: { name: "Test",
|
||||
type: "ImageStream",
|
||||
src: "/test/fixtures/code_128/",
|
||||
length: 10
|
||||
},
|
||||
decoder : {
|
||||
readers : ['code_128_reader']
|
||||
},
|
||||
readyFunc : function() {
|
||||
Quagga.start();
|
||||
}
|
||||
});
|
||||
|
||||
Quagga.onDetected(function(result) {
|
||||
var $node = null, canvas = Quagga.canvas.dom.image;
|
||||
|
||||
$node = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');
|
||||
$node.find("img").attr("src", canvas.toDataURL());
|
||||
$node.find("h4.code").html(result);
|
||||
$("#result_strip ul.thumbnails").prepend($node);
|
||||
});
|
||||
|
||||
$(".controls").on("click", "button.next", function(e) {
|
||||
Quagga.start();
|
||||
});
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 570 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 710 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 674 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 797 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 736 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 774 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 748 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 741 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 570 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 562 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 678 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 595 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 678 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 570 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 774 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 687 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 738 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 662 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 664 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 757 KiB |
Loading…
Reference in New Issue