summaryrefslogtreecommitdiffstats
path: root/iphone/res/zbar-help.html
diff options
context:
space:
mode:
Diffstat (limited to 'iphone/res/zbar-help.html')
-rw-r--r--iphone/res/zbar-help.html90
1 files changed, 90 insertions, 0 deletions
diff --git a/iphone/res/zbar-help.html b/iphone/res/zbar-help.html
new file mode 100644
index 0000000..886cbb2
--- /dev/null
+++ b/iphone/res/zbar-help.html
@@ -0,0 +1,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>