Cleaner demo page

cozmo · Dec 13, 2017 · bdf11a0 · bdf11a0
1 parent 9dc8a10
commit bdf11a0
Showing 1 changed file with 60 additions and 82 deletions.
diff --git a/examples/demo.html b/examples/demo.html
@@ -1,7 +1,7 @@
 <html>
 <head>
-  <meta charset="UTF-8">
-  <title>jsQR Demo</title>
+  <meta charset="utf-8">
+  <title>jsQR</title>
   <script src="../dist/jsQR.js"></script>
   <link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet">
   <style>
@@ -17,82 +17,59 @@
       font-size: 40px;
     }
 
-    #videoContainer {
-      position: relative;
-      width:640px;
-      height:480px;
-      margin: 0 auto;
-      background: #eee;
-    }
-
-    #message {
-      position:absolute;
-      top: 50%;
-      margin-top: -8px;
+    #loadingMessage {
       text-align: center;
-      width: 100%;
+      padding: 40px;
+      background-color: #eee;
     }
 
-    #video {
-      border: 10px solid #eee;
+    #canvas {
       width: 100%;
-      box-sizing: border-box;
-      left: 0;
-      top: 0;
-      position: absolute;
     }
 
     #output {
       margin-top: 20px;
-      padding: 10px;
       background: #eee;
+      padding: 10px;
+      padding-bottom: 0;
+    }
+
+    #output div {
+      padding-bottom: 10px;
+      word-wrap: break-word;
     }
 
-    #encodingType {
-      margin-bottom: 10px;
+    #noQRFound {
+      text-align: center;
     }
   </style>
 </head>
 <body>
   <h1>jsQR</h1>
-  <div id="videoContainer">
-    <div id="message">🎥 Unable to access video stream (please make sure you have a webcam enabled)</div>
-    <video id="video" hidden></video>
-    <canvas id="canvas" width=640 height=480 style="left: 0; top: 0; position: absolute; width: 640; height: 480;"></canvas>
-  </div>
-  <div id="output">
-    <div id="encodingType" hidden><b>Encoding Type:</b> TODO</div>
-    <div id="QRData" hidden><b>Data:</b> https://wikimedia.com</div>
-    <div id="noCodeFound">No QR code found.</div>
+  <div id="loadingMessage">🎥 Unable to access video stream (please make sure you have a webcam enabled)</div>
+  <canvas id="canvas" hidden></canvas>
+  <div id="output" hidden>
+    <div id="outputMessage">No QR code detected.</div>
+    <div hidden><b>Encoding Type:</b> <span id="outputEncoding"></span></div>
+    <div hidden><b>Data:</b> <span id="outputData"></span></div>
   </div>
   <script>
-    var message = document.getElementById("message");
-    var video = document.getElementById("video");
-    var framebuffer = document.createElement("canvas");
-
-    var outputNoCodeFound = document.getElementById("noCodeFound");
-    var outputEncodingType = document.getElementById("encodingType");
-    var outputData = document.getElementById("QRData");
-
-    framebuffer.width = 640;
-    framebuffer.height = 480;
-    var canvas = document.getElementById("canvas");
-    var context = canvas.getContext("2d");
+    var video = document.createElement("video");
+    var canvasElement = document.getElementById("canvas");
+    var canvas = canvasElement.getContext("2d");
+    var loadingMessage = document.getElementById("loadingMessage");
+    var outputContainer = document.getElementById("output");
+    var outputMessage = document.getElementById("outputMessage");
+    var outputEncoding = document.getElementById("outputEncoding");
+    var outputData = document.getElementById("outputData");
 
     function drawLine(begin, end, color) {
-      context.beginPath();
-      context.moveTo(begin.x, begin.y);
-      context.lineTo(end.x, end.y);
-      context.lineWidth = 4;
-      context.strokeStyle = color;
-      context.stroke();
-    }
-
-    function drawPoint(point, color, radius) {
-      context.beginPath();
-      context.arc(point.x, point.y, radius, 0, 2 * Math.PI, false);
-      context.fillStyle = color;
-      context.fill();
+      canvas.beginPath();
+      canvas.moveTo(begin.x, begin.y);
+      canvas.lineTo(end.x, end.y);
+      canvas.lineWidth = 4;
+      canvas.strokeStyle = color;
+      canvas.stroke();
     }
 
     navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
@@ -102,33 +79,34 @@ <h1>jsQR</h1>
     });
 
     function tick() {
-      message.innerText = "⌛ Loading video..."
+      loadingMessage.innerText = "⌛ Loading video..."
       if (video.readyState === video.HAVE_ENOUGH_DATA) {
-        video.hidden = false;
-        message.innerText = ""
-      }
-      context.clearRect(0, 0, 640, 480)
-      requestAnimationFrame(tick);
-      var framebufferContext = framebuffer.getContext("2d");
-      framebufferContext.drawImage(video, 0, 0, 640, 480);
-      var imageData = framebufferContext.getImageData(0, 0, 640, 480);
-      var code = jsQR.readQR(imageData.data, imageData.width, imageData.height);
-      if (code) {
-        drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
-        drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
-        drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
-        drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
+        loadingMessage.hidden = true;
+        canvasElement.hidden = false;
+        outputContainer.hidden = false;
 
-        outputNoCodeFound.hidden = true;
-        outputData.hidden = false;
-        outputData.innerText = code.text;
-        outputEncodingType.hidden = false;
-        outputEncodingType.innerText = code.encodingType;
-      } else {
-        outputNoCodeFound.hidden = false;
-        outputData.hidden = true;
-        outputEncodingType.hidden = true;
+        canvasElement.height = video.videoHeight;
+        canvasElement.width = video.videoWidth;
+        canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
+        var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
+        var code = jsQR.readQR(imageData.data, imageData.width, imageData.height);
+        if (code) {
+          drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
+          drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
+          drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
+          drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
+          outputMessage.hidden = true;
+          outputEncoding.parentElement.hidden = false;
+          outputEncoding.innerText = code.encodingType;
+          outputData.parentElement.hidden = false;
+          outputData.innerText = code.text;
+        } else {
+          outputMessage.hidden = false;
+          outputEncoding.parentElement.hidden = true;
+          outputData.parentElement.hidden = true;
+        }
       }
+      requestAnimationFrame(tick);
     }
   </script>
 </body>