diff options
| author | Sebastian Reichel <sre@ring0.de> | 2012-11-05 18:52:39 +0100 |
|---|---|---|
| committer | Sebastian Reichel <sre@ring0.de> | 2012-11-05 18:52:39 +0100 |
| commit | dabb96d7851625680dc24dc2fc2408652e37f91a (patch) | |
| tree | 6acf79237596b466674a431b60d73ae2b4be66e9 /templates | |
| parent | 4d8b321665378d82f3fd6e29e11f45ac25c79d83 (diff) | |
| download | serial-barcode-scanner-dabb96d7851625680dc24dc2fc2408652e37f91a.tar.bz2 | |
show barcode in user profile
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/base.html | 1 | ||||
| -rw-r--r-- | templates/js/code39.js | 148 | ||||
| -rw-r--r-- | templates/users/entry.html | 12 |
3 files changed, 161 insertions, 0 deletions
diff --git a/templates/base.html b/templates/base.html index 67f89cb..1870d0f 100644 --- a/templates/base.html +++ b/templates/base.html @@ -13,6 +13,7 @@ <script type="text/javascript" src="/js/jquery.flot.navigate.js"></script> <script type="text/javascript" src="/js/jquery.flot.pie.js"></script> <script type="text/javascript" src="/js/bootstrap.js"></script> + <script type="text/javascript" src="/js/code39.js"></script> </head> <body> <div class="navbar navbar-fixed-top"> diff --git a/templates/js/code39.js b/templates/js/code39.js new file mode 100644 index 0000000..6028854 --- /dev/null +++ b/templates/js/code39.js @@ -0,0 +1,148 @@ +var encodings = { + '0':'bwbWBwBwb', + '1':'BwbWbwbwB', + '2':'bwBWbwbwB', + '3':'BwBWbwbwb', + '4':'bwbWBwbwB', + '5':'BwbWBwbwb', + '6':'bwBWBwbwb', + '7':'bwbWbwBwB', + '8':'BwbWbwBwb', + '9':'bwBWbwBwb', + 'A':'BwbwbWbwB', + 'B':'bwBwbWbwB', + 'C':'BwBwbWbwb', + 'D':'bwbwBWbwB', + 'E':'BwbwBWbwb', + 'F':'bwBwBWbwb', + 'G':'bwbwbWBwB', + 'H':'BwbwbWBwb', + 'I':'bwBwbWBwb', + 'J':'bwbwBWBwb', + 'K':'BwbwbwbWB', + 'L':'bwBwbwbWB', + 'M':'BwBwbwbWb', + 'N':'bwbwBwbWB', + 'O':'BwbwBwbWb', + 'P':'bwBwBwbWb', + 'Q':'bwbwbwBWB', + 'R':'BwbwbwBWb', + 'S':'bwBwbwBWb', + 'T':'bwbwBwBWb', + 'U':'BWbwbwbwB', + 'V':'bWBwbwbwB', + 'W':'BWBwbwbwb', + 'X':'bWbwBwbwB', + 'Y':'BWbwBwbwb', + 'Z':'bWBwBwbwb', + '-':'bWbwbwBwB', + '.':'BWbwbwBwb', + ' ':'bWBwbwBwb', + '$':'bWbWbWbwb', + '/':'bWbWbwbWb', + '+':'bWbwbWbWb', + '%':'bwbWbWbWb', + '*':'bWbwBwBwb' +} + +var height = 100; +var paintText = true; +var canvas; +var ctx; + +var code39_init = function() { + canvas = $('#barcode')[0]; + ctx = canvas.getContext("2d"); +} + +var code39_checksum = function(barcode) { + var charset = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ-. $/+%"; + var subtotal = 0; + var c; + + for (c in barcode) { + subtotal += charset.indexOf(barcode[c]); + } + + return charset[subtotal%43]; +} + +var code39_draw = function(text, add_checksum) { + var showtext = text; + + if(add_checksum) { + text += code39_checksum(text); + showtext += " "; + } + + text = "*" + text + "*"; + showtext = " " + showtext + " "; + + var txtLength = text.length; + var totalWidth = txtLength*15 +txtLength - 1; + cwidth = totalWidth+30; + + ctx.clearRect(0,0,canvas.width,canvas.height); + + canvas.style.height = canvas.height = height; + canvas.style.width = canvas.width = cwidth ; + ctx.fillStyle = "rgb(255,255,255)"; + ctx.fillRect(0,0,canvas.width,canvas.height); + + var i,j; + + /* Rounding to prevent antialising */ + var currentx = Math.round(cwidth/2-totalWidth/2), currenty = 20; + + /* wides are 3x width of narrow */ + var widewidth = 3; + + var barheight = 80; + + if(paintText) { + barheight -= 20; + } + + for(i=0;i<text.length;i++) { + var code = encodings[text[i]]; + if (!code) { + code = encodings['-']; + } + + for(j=0;j<code.length;j++) { + if (j%2==0) { + /* black */ + ctx.fillStyle = "rgb(0,0,0)"; + } else { + /* white */ + ctx.fillStyle = "rgb(255,255,255)"; + } + + if (code.charCodeAt(j)<91) { + /* wide */ + ctx.fillRect (currentx, currenty, widewidth, barheight); + currentx += 3; + } else { + /* narrow */ + ctx.fillRect (currentx, currenty, 1, barheight); + currentx += 1; + } + + if (paintText && (j==5) && (typeof ctx.fillText == 'function')) { + ctx.fillStyle = "rgb(0,0,0)"; + ctx.fillText(showtext[i], currentx, 90); + } + } + + if (i!=text.length-1) { + /* draw narrow white as divider */ + ctx.fillStyle = "rgb(255,255,255)"; + ctx.fillRect (currentx, currenty, 1, barheight); + currentx += 1; + } + } +} + +var code39_url = function() { + return canvas.toDataURL(); +} diff --git a/templates/users/entry.html b/templates/users/entry.html index 8a72860..740804e 100644 --- a/templates/users/entry.html +++ b/templates/users/entry.html @@ -5,6 +5,13 @@ <form method="POST" enctype="multipart/form-data" action="#"> <table class="table table-bordered table-nonfluid"> <tr><th>ID</th><td>{{{UID}}}</td></tr> + <tr> + <th>Barcode</th> + <td> + <canvas id="barcode"></canvas><br> + <a href="#" onclick="window.open(code39_url());">Download</a> + </td> + </tr> <tr><th>Firstname</th><td>{{{FIRSTNAME}}}</td></tr> <tr><th>Lastname</th><td>{{{LASTNAME}}}</td></tr> <tr><th>E-Mail</th><td>{{{EMAIL}}}</td></tr> @@ -20,3 +27,8 @@ <tr><td><input type="submit" value="Change Password" /></td></tr> </table> </form> + +<script language="JavaScript"> + code39_init(); + code39_draw("USER {{{UID}}}", true); +</script> |