[enh] There should be a preview for images uploaded

js/canvas.js

@@ -2,7 +2,7 @@
 $(document).ready(function(){
 
   var binary_level = 100
-  var url = document.URL
+  var url = document.location.origin
   var cropper = null
   var snap = null
   var width;
@@ -25,11 +25,9 @@ $(document).ready(function(){
     context.drawImage(video, 0, 0, width, height);
     snap =  context.createImageData(width, height); 
     snap.data.set( context.getImageData(0, 0, width, height).data )
-    console.log(snap)
-    console.log(context.getImageData(0, 0, width, height))
     binary(context)
     $("#result").show()
-    $('html, body').animate({scrollTop: $("#result").offset().top}, 2000);
+    //$('html, body').animate({scrollTop: $("#result").offset().top}, 2000);
 
     cropper = new Cropper(canvas,{
       viewMode: 3,
@@ -47,7 +45,54 @@ $(document).ready(function(){
     });
   }
 
+  // https://raw.githubusercontent.com/samdutton/simpl/gh-pages/getusermedia/sources/js/main.js
 
+  var videoElement = document.querySelector('video');
+  var videoSelect = document.querySelector('select#videoSource');
+  videoSelect.onchange = getStream;
+  getStream().then(getDevices).then(gotDevices);
+
+  function getDevices() {
+    // AFAICT in Safari this only gets default devices until gUM is called :/
+    return navigator.mediaDevices.enumerateDevices();
+  }
+
+  function gotDevices(deviceInfos) {
+    window.deviceInfos = deviceInfos; // make available to console
+    for (const deviceInfo of deviceInfos) {
+      const option = document.createElement('option');
+      option.value = deviceInfo.deviceId;
+      option.text = deviceInfo.label || `Camera ${videoSelect.length + 1}`;
+      videoSelect.appendChild(option);
+    }
+  }
+
+
+  function getStream() {
+    if (window.stream) {
+      window.stream.getTracks().forEach(track => {
+        track.stop();
+      });
+    }
+    const videoSource = videoSelect.value;
+    const constraints = {
+      video: {deviceId: videoSource ? {exact: videoSource} : undefined}
+    };
+    return navigator.mediaDevices.getUserMedia(constraints).
+      then(gotStream).catch(handleError);
+  }
+
+  function gotStream(stream) {
+    window.stream = stream; // make stream available to console
+    videoSelect.selectedIndex = [...videoSelect.options].
+      findIndex(option => option.text === stream.getVideoTracks()[0].label);
+    videoElement.srcObject = stream;
+  }
+
+  function handleError(error) {
+    console.error('Error: ', error);
+  }
+  // https://raw.githubusercontent.com/samdutton/simpl/gh-pages/getusermedia/sources/js/main.js
   function setCameraResolution( track ){
     width = track.getSettings().width
     height = track.getSettings().height
@@ -158,6 +203,7 @@ $(document).ready(function(){
           imageList = localStorage.getItem("imageList") ? JSON.parse(localStorage.getItem("imageList"))  : []
           imageList.push(d.hash_name)
           localStorage.setItem("imageList",JSON.stringify(imageList))
+          refreshImageList()
         })
       .fail(function(d,m,jq){
           $("#messages").html(`<div class="alert alert-danger" role="alert">Ooops... Something went wrong: ${jq}</div>`)
@@ -165,4 +211,83 @@ $(document).ready(function(){
         })
   })
 
+
+  var simuCanvas = document.getElementById("simuCanvas");
+  var ctx = simuCanvas.getContext("2d");
+  var lastpoint = { x: 0, y: 0, color: 0};
+  ctx.clearRect(0,0,400,400);
+  var zoom = 0.5;
+  //ctx.save
+
+  Point = function( l ){
+    return {
+      "x" : l[0],
+      "y" : l[1],
+      "color" : l[2]
+    }
+  }
+
+  // Draws every segment received, except black colored target ones
+  var drawSimu = function() {
+    pointsList = document.pointsList
+      if (pointsList.length > 0)
+      {
+        ctx.clearRect(0,0,400,400);
+        lastpoint = new Point(pointsList[0])
+        for (var i = 0; i < pointsList.length; i+=1)
+        {
+          point = new Point(pointsList[i])
+          // if the target is black, skip drawing
+          if( point.color != 0){
+            ctx.beginPath()
+            ctx.shadowBlur = 5;
+            ctx.shadowColor = 'rgba(255, 255, 255, 1)';
+            ctx.lineWidth = 2;
+            ctx.strokeStyle = "#"+(point.color + Math.pow(16, 6)).toString(16).slice(-6);
+            ctx.moveTo(lastpoint.x * zoom, lastpoint.y * zoom);
+            ctx.lineTo(point.x * zoom, point.y * zoom);
+            ctx.stroke();
+            ctx.closePath()
+          }
+          lastpoint = point
+        }
+      }
+  }
+  function refreshImageList(){
+    var imageList = localStorage.getItem("imageList") ? JSON.parse(localStorage.getItem("imageList"))  : []
+    html = ''
+    for( id in imageList){
+      hash_name = imageList[id]
+      html += `<li><a href="#${hash_name}" class="hash_name" rel="${hash_name}">${hash_name}</a></li>`
+    }
+    $("#imageList").html(`<ul>${html}</ul>`)
+
+  }
+  refreshImageList()
+
+  $("#imageList").on("click",function(e){
+    var el = e.target
+    var hash_name = $(el).attr("rel")
+    var u  = `${url}/hash_name/${hash_name}`
+    $.ajax({
+      url: `${url}/hash_name/${hash_name}`,
+      dataType: "json",
+
+    }).done(function(d,m,j){
+        if( d.errors ){
+          msg =  d.errors.join(" / ")
+          $("#messages").html(`<div class="alert alert-danger" role="alert">Something went wrong: ${msg}</div>`)
+          return
+        }
+        $("#messages").html("")
+        document.pointsList = d.points_list
+        drawSimu()
+      })
+    .fail(function(d,m,jq){
+        $("#messages").html(`<div class="alert alert-danger" role="alert">Ooops... Something went wrong: ${jq}</div>`)
+      })
+  })
+
+
+
 })