<!doctype html>
<html>
<head>
<title>client side test for node-qrcode</title>
<!--[if ie]><script type="text/javascript" src="vendors/excanvas/excanvas.js"></script><![endif]-->
<script src="/build/qrcode.js"></script>
<style>.b{display:block;}</style>
</head>
<body>
<canvas id="test"></canvas>
<label for="test-text" class="b">type here and watch it update!:</label>
<textarea id="test-text" class="b"></textarea>
<small style="color:#d4d4d4;" class="b">* i did not include jquery on purpose</small>
<script>
if(!window.console) window.console = {log:function(){},warn:function(){}};
var qrcodedraw = new qrcodelib.qrcodedraw();
//triggered errors will throw
qrcodedraw.errorBehavior.length = false;
var drawQR = function(text){
qrcodedraw.draw(document.getElementById('test'),text,function(error,canvas){
if(error) {
if(window.console && window.console.warn) {
console.warn(error);
} else {
alert(error);
}
}
});
}
var ta = document.getElementById('test-text'),last=0,lastTime = 1;
ta.addEventListener('keyup',function(){
var l = Date.now(),z = this;
last = l;
setTimeout(function(){
//this will kinda lock the browsers event loop for a sec.
//it could have some setTimeout within processing to make it more client side friendly. or web workers...
if(l == last) {
var s=Date.now();
drawQR(z.value);
lastTime = Date.now()-s;
}
},lastTime+(lastTime/2));
},false);
ta.value = 'i work client side too?';
drawQR('i work client side too?');
</script>
</body>
</html>