blob: 886cbb213132ca9fe3c71e0efc1d74bd58e5f5ff (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Copyright 2009-2010 (c) Jeff Brown <spadix@users.sourceforge.net>
All Rights Reserved
-->
<html>
<head>
<meta name="viewport" content="width=device-width, shrink-to-fit=YES">
<title>Barcode Reader Help</title>
<style type="text/css">
html, body { margin: 0; padding: 0; background: black; color: white; font-family: sans-serif; font-size: 16px }
h1 { margin: .5em 0; text-align: center; font-size: 28px }
h2 { font-size: 24px }
hr { margin: 1em 0; height: 0; border: none; border-top: solid 1px #666 }
.smaller { font-size: 85% }
p { margin: .5em }
a { color: #8af }
p.cen { text-align: center }
p.title { margin: 1em; clear: both; text-align: center }
div.col { width: 50% }
.clear { clear: both }
.iconlist { position: relative; clear: both; margin: 4px 0; padding: 1px 0 }
.icon { width: 64px; height: 64px; overflow: hidden; margin: 12px 16px; padding: 0; background: url("zbar-helpicons.png") no-repeat; font: bold 56px "Marker Felt"; text-align: center }
.sample { display: block; height: 96px; overflow: hidden; margin: 12px auto; padding: 0; background: url("zbar-samples.png") no-repeat; text-align: center}
.left { float: left }
.right { float: right }
.iconlist > p { margin: 10px }
.iconlist > h2 { margin: 10px }
</style>
</head>
<body>
<h1 id="title" style="color: #f88">Barcode Reader Help</h1>
<hr/>
<p class="title">Recognized barcodes should look like</p>
<div class="col left">
<a class="sample" style="width: 118px; background-position: -96px" href="http://wikipedia.org/wiki/EAN-13"></a>
<p class="cen"><a href="http://wikipedia.org/wiki/EAN-13">EAN/UPC<br/>Product Codes</a></p>
</div>
<div class="col right">
<a class="sample" style="width: 96px" href="http://wikipedia.org/wiki/QR_Code"></a>
<p class="cen"><a href="http://wikipedia.org/wiki/QR_Code">QR Codes</a></p>
</div>
<p class="clear cen smaller">Also recognized, but not shown:
<a href="http://wikipedia.org/wiki/Code_128">Code 128</a>,
<a href="http://wikipedia.org/wiki/DataBar">DataBar (RSS)</a>,
<a href="http://en.wikipedia.org/wiki/Code_93">Code 93</a>,
<a href="http://wikipedia.org/wiki/Code_39">Code 39</a> and
<a href="http://wikipedia.org/wiki/Codabar">Codabar</a> and
<a href="http://wikipedia.org/wiki/Interleaved_2_of_5">Interleaved 2 of 5</a></p>
<hr/>
<p class="clear title">Hints for successful scanning</p>
<div class="iconlist">
<div class="icon left"></div>
<p>Ensure there is plenty of</p>
<h2 style="color: #ff4">Light</h2>
</div>
<div class="iconlist">
<div class="icon left" style="background: none; color: #2d4">4"</div>
<h2 style="color: #4f6">Distance</h2>
<p>should be about 3 to 5 inches</p>
</div>
<div class="iconlist">
<div class="icon left" style="background-position: 0 -64px"></div>
<h2 style="color: #3ee">Shake</h2>
<p>to force the camera to focus</p>
</div>
<div class="iconlist">
<div class="icon left" style="background-position: 0 -128px"></div>
<h2 style="color: #59f">Wait</h2>
<p>for the autofocus to finish</p>
</div>
<div class="iconlist">
<div class="icon left" style="background-position: 0 -192px"></div>
<h2 style="color: #d5f">Hold Still</h2>
<p>while the barcode is scanned</p>
</div>
<script type="text/javascript">
function onZBarHelp(argv) {
var title;
switch(argv.reason) {
case "INFO": break;
case "FAIL": title = "No Barcode Detected"; break;
}
if(title) document.getElementById('title').textContent = title;
}
</script>
</body>
</html>
|
