| <html lang="en">
|
| <head>
|
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
| <title>qrtime.com - a QR Code Clock</title>
|
| <meta name="generator" content="TextMate http://macromates.com/">
|
| <meta name="author" content="Brian Short">
|
|
|
| <script type="text/javascript" src="js/QRCode.js"></script>
|
| <style type="text/css" media="screen">
|
| td{
|
| font-family: helvetica, arial;
|
| font-weight: 800;
|
| font-size: 14px;
|
| }
|
| #control{
|
| position:absolute;
|
| bottom:10px;
|
| left:10px;
|
| display:none;
|
| }
|
| #what{
|
| position:absolute;
|
| bottom:10px;
|
| right:10px;
|
| font-family: helvetica, arial;
|
| text-align:center;
|
| line-height:1.5em;
|
| font-size:.9em;
|
| display:none;
|
| }
|
| a{
|
| text-decoration:none;
|
| border-bottom: solid black 1px;
|
| color:#000;
|
| font-size:1.1em;
|
| font-weight:800;
|
| }
|
| #open{
|
| position:absolute;
|
| bottom:10px;
|
| left:10px;
|
|
|
| }
|
| a.button{
|
| padding:6px;
|
| border:solid #999 1px;
|
| line-height:2em;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <script type="text/javascript">
|
| var i = 0;
|
| var iMax = 1000;
|
| var delay = 500;
|
| var size = 14;
|
| var correctionLevel = QRErrorCorrectLevel.M;
|
| var qrsize = 1;
|
| var qrmaxsize = 11;
|
| var qrminsize = 1;
|
| //alert("we made it");
|
| function zeroed(i)
|
| {
|
| if (i<10)
|
| {
|
| i="0" + i;
|
| }
|
| return i;
|
| }
|
|
|
|
|
| function draw(){
|
|
|
| var qr = new QRCode(qrsize, correctionLevel); //Possible Values: M , L , H , Q
|
|
|
| var start = new Date();
|
| var start = start.getTime();
|
|
|
|
|
| var myDate=new Date();
|
| /* var outputDate = "Time: " + myDate.toLocaleTimeString();*/
|
| var outputDate = myDate.toLocaleTimeString();
|
| var today=new Date();
|
| var h=today.getHours();
|
| var m=today.getMinutes();
|
| var s=today.getSeconds();
|
| // add a zero in front of numbers<10
|
| m=zeroed(m);
|
| s=zeroed(s);
|
| //outputDate = "Time:" + h+":"+m+":"+s;
|
| outputDate = h+":"+m+":"+s;
|
|
|
| // myDate.
|
| // alert("inside:" + buffer.getLengthInBits() + ":" + totalDataCount * 8);
|
| //alert(outputDate);
|
| qr.addData(outputDate);
|
| qr.make();
|
| var output = "";
|
| output = "<table style='border-width: 0px; border-style: none; border-color: #0000ff; border-collapse: collapse;'>";
|
|
|
| for (var r = 0; r < qr.getModuleCount(); r++) {
|
|
|
| output += "<tr>";
|
|
|
| for (var c = 0; c < qr.getModuleCount(); c++) {
|
|
|
| if (qr.isDark(r, c) ) {
|
| output += "<td style='border-width: 0px; border-style: none; border-color: #0000ff; border-collapse: collapse; padding: 0; margin: 0; width: " + size + "px; height: " + size + "px; background-color: #000000;'/>";
|
| } else {
|
| output += "<td style='border-width: 0px; border-style: none; border-color: #0000ff; border-collapse: collapse; padding: 0; margin: 0; width: " + size + "px; height: " + size + "px; background-color: #ffffff;'/>";
|
| }
|
|
|
| }
|
|
|
| output += "</tr>";
|
|
|
| }
|
|
|
| output += "</table>";
|
|
|
| document.getElementById('mydiv').innerHTML=output;
|
|
|
| var end = new Date();
|
| var end = end.getTime();
|
| var diff = end - start;
|
|
|
| document.getElementById('mydiv2').innerHTML = outputDate ;//+ "<br />difference:" + diff;
|
|
|
|
|
| if (i<iMax){
|
| setT=setTimeout('draw()',delay);
|
| i++;
|
| } else {
|
| clearTimeout(setT);
|
| i++;
|
| }
|
|
|
|
|
| }
|
|
|
| function restart(){
|
| i = 0;
|
| setT=setTimeout('draw()',delay);
|
|
|
| }
|
|
|
| function stop(){
|
| i = iMax;
|
|
|
| }
|
|
|
| function bigger(){
|
| size += 2;
|
| draw();
|
| }
|
| function smaller(){
|
| if (size > 2){
|
| size -= 2;
|
| draw();
|
| }
|
| }
|
| function open(){
|
| document.getElementById('control').style.display="block";
|
| document.getElementById('what').style.display="block";
|
| document.getElementById('open').style.display="none";
|
|
|
| }
|
|
|
| function close(){
|
| document.getElementById('control').style.display="none";
|
| document.getElementById('what').style.display="none";
|
| document.getElementById('open').style.display="block";
|
|
|
| }
|
| function more(){
|
| if (qrsize < qrmaxsize){
|
| qrsize++;
|
| size--;
|
| draw();
|
| }
|
| }
|
| function less(){
|
| if (qrsize > qrminsize){
|
| qrsize--;
|
| size++;
|
| draw();
|
| }
|
| }
|
| function old_more(){
|
| if (correctionLevel == QRErrorCorrectLevel.M){
|
| correctionLevel = QRErrorCorrectLevel.L;
|
| } else if (correctionLevel == QRErrorCorrectLevel.L){
|
| correctionLevel = QRErrorCorrectLevel.H;
|
| } else if (correctionLevel == QRErrorCorrectLevel.H){
|
| correctionLevel = QRErrorCorrectLevel.Q;
|
| }
|
| }
|
| function old_less(){
|
| if (correctionLevel == QRErrorCorrectLevel.L){
|
| correctionLevel = QRErrorCorrectLevel.M;
|
| } else if (correctionLevel == QRErrorCorrectLevel.H){
|
| correctionLevel = QRErrorCorrectLevel.L;
|
| } else if (correctionLevel == QRErrorCorrectLevel.Q){
|
| correctionLevel = QRErrorCorrectLevel.H;
|
| }
|
| }
|
| </script>
|
|
|
| <table width="100%" height="100%" style="border:white solid 10px;">
|
| <tr>
|
| <td align="center" valign="center" id="mydiv" ></td>
|
| </tr>
|
| </table>
|
| <div id="open"><a href="javascript:open();">+</a></div>
|
| <table id="control" cellspacing="8">
|
| <tr>
|
| <td align="center" valign="center" id="mydiv2" colspan="2"></td>
|
| </tr>
|
| <tr>
|
| <td align="right" ><a href="#" class="button" onclick="javascript:restart();">start</a></td><td align="left"><a href="#" class="button" onclick="javascript:stop();">stop</a></td>
|
| </tr>
|
| <tr>
|
| <td align="right" ><a href="#" onclick="javascript:more();" class="button">more</a></td><td align="left"><a href="#" onclick="javascript:less();" class="button">less</a></td>
|
| </tr>
|
| <tr>
|
| <td align="right" ><a href="#" onclick="javascript:bigger();" class="button">+</a></td><td align="left"><a href="#" onclick="javascript:smaller();" class="button">-</a></td>
|
| </tr>
|
| </table>
|
| <div id="what">A <a href="http://en.wikipedia.org/wiki/QR_Code">QR Code</a> Clock<br />by <a href="http://bshort.com">Brian Short</a></div>
|
| <script type="text/javascript">
|
| draw();
|
| </script>
|
| </body>
|
| </html>
|
| |