<html>
<head>
<style>
* {
color:#7F7F7F;
font-family:Arial,sans-serif;
font-size:12px;
font-weight:normal;
}
#config{
overflow: auto;
margin-bottom: 10px;
}
.config{
float: left;
width: 200px;
height: 250px;
border: 1px solid #000;
margin-left: 10px;
}
.config .title{
font-weight: bold;
text-align: center;
}
.config .barcode2D,
#miscCanvas{
display: none;
}
#submit{
clear: both;
}
#barcodeTarget,
#canvasTarget{
margin-top: 20px;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../jquery-barcode.js"></script>
<script type="text/javascript">
function generateBarcode(){
var value = $("#barcodeValue").val();
var btype = $("input[name=btype]:checked").val();
var renderer = $("input[name=renderer]:checked").val();
var quietZone = false;
if ($("#quietzone").is(':checked') || $("#quietzone").attr('checked')){
quietZone = true;
}
var settings = {
output:renderer,
bgColor: $("#bgColor").val(),
color: $("#color").val(),
barWidth: $("#barWidth").val(),
barHeight: $("#barHeight").val(),
moduleSize: $("#moduleSize").val(),
posX: $("#posX").val(),
posY: $("#posY").val(),
addQuietZone: $("#quietZoneSize").val()
};
if ($("#rectangular").is(':checked') || $("#rectangular").attr('checked')){
value = {code:value, rect: true};
}
if (renderer == 'canvas'){
clearCanvas();
$("#barcodeTarget").hide();
$("#canvasTarget").show().barcode(value, btype, settings);
} else {
$("#canvasTarget").hide();
$("#barcodeTarget").html("").show().barcode(value, btype, settings);
}
}
function showConfig1D(){
$('.config .barcode1D').show();
$('.config .barcode2D').hide();
}
function showConfig2D(){
$('.config .barcode1D').hide();
$('.config .barcode2D').show();
}
function clearCanvas(){
var canvas = $('#canvasTarget').get(0);
var ctx = canvas.getContext('2d');
ctx.lineWidth = 1;
ctx.lineCap = 'butt';
ctx.fillStyle = '#FFFFFF';
ctx.strokeStyle = '#000000';
ctx.clearRect (0, 0, canvas.width, canvas.height);
ctx.strokeRect (0, 0, canvas.width, canvas.height);
}
$(function(){
$('input[name=btype]').click(function(){
if ($(this).attr('id') == 'datamatrix') showConfig2D(); else showConfig1D();
});
$('input[name=renderer]').click(function(){
if ($(this).attr('id') == 'canvas') $('#miscCanvas').show(); else $('#miscCanvas').hide();
});
generateBarcode();
});
</script>
</head>
<body>
<div id="generator">
Please fill in the code : <input type="text" id="barcodeValue" value="12345670">
<div id="config">
<div class="config">
<div class="title">Type</div>
<input type="radio" name="btype" id="ean8" value="ean8" checked="checked"><label for="ean8">EAN 8</label><br />
<input type="radio" name="btype" id="ean13" value="ean13"><label for="ean13">EAN 13</label><br />
<input type="radio" name="btype" id="upc" value="upc"><label for="upc">UPC</label><br />
<input type="radio" name="btype" id="std25" value="std25"><label for="std25">standard 2 of 5 (industrial)</label><br />
<input type="radio" name="btype" id="int25" value="int25"><label for="int25">interleaved 2 of 5</label><br />
<input type="radio" name="btype" id="code11" value="code11"><label for="code11">code 11</label><br />
<input type="radio" name="btype" id="code39" value="code39"><label for="code39">code 39</label><br />
<input type="radio" name="btype" id="code93" value="code93"><label for="code93">code 93</label><br />
<input type="radio" name="btype" id="code128" value="code128"><label for="code128">code 128</label><br />
<input type="radio" name="btype" id="codabar" value="codabar"><label for="codabar">codabar</label><br />
<input type="radio" name="btype" id="msi" value="msi"><label for="msi">MSI</label><br />
<input type="radio" name="btype" id="datamatrix" value="datamatrix"><label for="datamatrix">Data Matrix</label><br /><br />
</div>
<div class="config">
<div class="title">Misc</div>
Background : <input type="text" id="bgColor" value="#FFFFFF" size="7"><br />
"1" Bars : <input type="text" id="color" value="#000000" size="7"><br />
<div class="barcode1D">
bar width: <input type="text" id="barWidth" value="1" size="3"><br />
bar height: <input type="text" id="barHeight" value="50" size="3"><br />
</div>
<div class="barcode2D">
Module Size: <input type="text" id="moduleSize" value="5" size="3"><br />
Quiet Zone Modules: <input type="text" id="quietZoneSize" value="1" size="3"><br />
Form: <input type="checkbox" name="rectangular" id="rectangular"><label for="rectangular">Rectangular</label><br />
</div>
<div id="miscCanvas">
x : <input type="text" id="posX" value="10" size="3"><br />
y : <input type="text" id="posY" value="20" size="3"><br />
</div>
</div>
<div class="config">
<div class="title">Format</div>
<input type="radio" id="css" name="renderer" value="css" checked="checked"><label for="css">CSS</label><br />
<input type="radio" id="bmp" name="renderer" value="bmp"><label for="bmp">BMP (not usable in IE)</label><br />
<input type="radio" id="svg" name="renderer" value="svg"><label for="svg">SVG (not usable in IE)</label><br />
<input type="radio" id="canvas" name="renderer" value="canvas"><label for="canvas">Canvas (not usable in IE)</label><br />
</div>
</div>
<div id="submit">
<input type="button" onclick="generateBarcode();" value=" Generate the barcode ">
</div>
</div>
<div id="barcodeTarget" class="barcodeTarget"></div>
<canvas id="canvasTarget" width="150" height="150"></canvas>
</body>
</html>