6 changed files with 163 additions and 213 deletions
--- a/index.html
+++ b/index.html
@ -13,7 +13,19 @@
    #canvas { display: block; }
    span.ui-slider-handle.ui-corner-all.ui-state-default {    background: dodgerblue;}
    canvas#simuCanvas {background: #333;}
-    .row {margin: 24px 0;}
+        div.select {
+            display: inline-block;
+            margin: 0 0 1em 0;
+        }
+
+        p.small {
+            font-size: 0.7em;
+        }
+
+        label {
+            width: 12em;
+            display: inline-block;
+        }
  </style>
  <link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="js/jquery-ui/jquery-ui.css" />
@ -25,38 +37,30 @@
 <div class="container-fluid container-md">

  <div class="row">
-    <div class="col-sm-7">
+    <div class="col-sm col-6">
      <video id="video" class="video_sized" autoplay></video>
    </div>
-    <div class="col-sm-5">
+    <div class="col-sm">
      <h1 class="text-primary">Convert your photos to laser images!</h1>
-      <p class="lead">Create something fresh by allowing the browser to use your camera.</p>
-      <p class="lead">Or pick an image from your phone and upload it. </p>
+      <p class="lead">Once you allow the browser to use your camera, you can start creating something new by taking a snapshot. </p>
      <p class="lead">If you're happy with the result, send it to see it converted to a laser-ready image! </p>
      <div class="select">
 	      <label for="videoSource">Change camera </label><select id="videoSource" class="custom-select"></select>
      </div>
-      <div class="row">
-        <div class="col-6">
-          <button class="snap btn btn-block btn-lg btn-primary">Take a snap</button>
-        </div>
-        <div class="col-6">
-          <button id="uploadBtn" class=" btn btn-block  btn-lg btn-primary">Upload a file</button>
-          <input id="uploadInput" type="file" multiple style="display: none"/>
-        </div>
-      </div>
+      <button class="snap btn btn-lg btn-primary">Take a snap</button>
    </div>
  </div>
-  <div class="row result" id="result" style="display:none">
-    <div class="col-sm-7">
-    	<div class="video_sized">
-    		<canvas id="canvas" class="video_sized"></canvas>
-      </div>
+  <div class="row" id="result">
+    <div class="col-sm col-6">
+	<div class="video_sized">
+		<canvas id="canvas" class="video_sized"></canvas>
+	</div>
    </div>
    <div class="col-sm">
-      <h2 class="text-primary">Not satisfied with contrast? </h2>
-      <p class="lead">Before sending your snap, feel free to modify the contrast by using the slider to reach the effect you desire.</p>
+      <h1 class="text-primary">Are you satisfied with the contrast? </h3>
+      <p>Before sending your snap, change the contrast using the slider to reach the effect you desire.</p><br/>
      <div id="slider"></div>
+      <br/>
      <div class="float-left">
 	      <button type="button" class="btn btn-secondary contrast" rel="-5">
 		      <span class="badge badge-light">+</span> white
@ -66,42 +70,27 @@
 	      <button type="button" class="btn btn-secondary contrast" rel="5">
 		      <span class="badge badge-light">+</span> black
 	      </button>
-      </div>
-      <div class="float-left">
-        <br />
-        <h2 class="text-primary">Not satisfied with frame?</h2>
-        <p class="lead">Before sending your snap, use the blue handles that appear over it to cut the edges. You can also zoom in.</p>
-      </div>
-    </div>
-  </div>
-  <div class="row result" style="display:none">
-    <div class="col-sm-7">
-      <h1 class="text-primary"> Got text?</h1>
+	</div><br>
+
+      <br/>
+      <h3>Ready to send? </h3>
      <p >If some text is visible on the image, type it before pushing the Send button.</p>
      <div class="form-group">
        <input id="text" type="text" class="form-control form-control-lg" placeholder="Type text here"/>
-      </div>
-    </div>
-    <div class="col-sm-5">
-      <h1 class="text-success">Ready to send? </h1>
-      <div class="form-group">
        <button id="send" class="form-control form-control-lg btn btn-lg btn-success btn-block">Send</button>
      </div>
-    </div>
-  </div>
-  <div class="row result" style="display:none">
-    <div class="col-sm">
+
      <div id="messages">
      </div>
    </div>
  </div>
  <div class="row" id="preview">
-    <div class="col-sm-7">
+    <div class="col-sm col-6">
      <canvas id="simuCanvas" class="video_sized"></canvas>
    </div>
-    <div class="col-sm-5" >
-      <h2 class="text-secondary">Preview your creations</h2>
-      <p class="lead">Now that your creation have been sent, you can check what they will look like on lasers using these links, sorted by oldest snaps last.</p>
+    <div class="col-sm" >
+      <h1 class="text-primary">Preview your creation</h1>
+      <p>Now that your creation have been sent, you can check what they will look like on lasers using these links, sorted by oldest snaps last.</p>

      <div id="imageList"></div>
    </div>
@ -109,12 +98,14 @@

 </div>

+</main>
+

  <script src="js/jquery-3.5.1.min.js"></script>
  <script src="js/cropper/cropper.min.js"></script>
  <script src="js/jquery-ui/jquery-ui.js"></script>
-  <script src="js/main.js"></script>
-  <script src="js/adapter-latest.js"></script>
-  <script src="js/camera.js" async></script>
+  <script src="js/canvas.js"></script>
+<script src="js/adapter-latest.js"></script>
+<script src="js/camera.js" async></script>
 </body>
 </html>
--- a/js/canvas.js
+++ b/js/canvas.js
@ -1,7 +1,10 @@

 $(document).ready(function(){

-
+  var binary_level = 100
+  var url = document.location.origin
+  var cropper = null
+  var snap = null

  Cropper.setDefaults({
      viewMode: 1,
@ -9,81 +12,66 @@ $(document).ready(function(){
  })

  // Grab elements, create settings, etc.
+  var canvas = document.getElementById('canvas');
+  var context = canvas.getContext('2d');
  var video = document.getElementById('video');
-  var snapCanvas = document.getElementById('canvas');
-  var snapContext = snapCanvas.getContext('2d');
-  var simuCanvas = document.getElementById("simuCanvas");
-  var simuContext = simuCanvas.getContext("2d");
-
-  var simuLastPoint = { x: 0, y: 0, color: 0};
-  var simuZoom = 1;
-  var binary_level = 100
-  var url = document.location.origin
-  var cropper = null
-  var snap = null
-
-
-  /*
-  Helpers
-  */
-
+  var mediaConfig =  { video: true };
  var errBack = function(e) {
    console.log('An error has occurred!', e)
  };

-  var Point = function( l ){
-    return {
-      "x" : l[0],
-      "y" : l[1],
-      "color" : l[2]
-    }
-  }
-
  /**
  Take a new snapshot from the camera and store it
  **/
-  function videoToSnap(){
-    showSnap(video, video.width, video.height)
-  }
-
-  function showSnap(src, width, height){
+  function doSnap(){
    cropper && cropper.destroy()
-    snapContext.drawImage(src, 0, 0, width, height);
-    snap =  snapContext.createImageData(width, height); 
-    snap.data.set( snapContext.getImageData(0, 0, width, height).data )
-    binary(snapContext)
-    $(".result").show()
-    cropper = new Cropper(snapCanvas);
+    let width = video.width
+    let height = video.height
+    context.drawImage(video, 0, 0, width, height);
+    snap =  context.createImageData(width, height); 
+    snap.data.set( context.getImageData(0, 0, width, height).data )
+    binary(context)
+    $("#result").show()
    // Animation removed: it was causing problems with the send button. Fix.
    //$('html, body').animate({scrollTop: $("#result").offset().top}, 2000);
+    cropper = new Cropper(canvas);
  }

  function doContrast(){
    let cropperData = {}
    if( cropper ){
-     	cropperData = cropper.getData() 
-    	cropper.destroy()
+ 	cropperData = cropper.getData() 
+	cropper.destroy()
    }
-    snapContext.putImageData(snap,0,0)
-    binary(snapContext)
-    cropper = new Cropper(snapCanvas);
+    context.putImageData(snap,0,0)
+    binary(context)
+    cropper = new Cropper(canvas);
    setTimeout( () => { cropper.setData(cropperData) ; },30)
  }

-
-  /*
-     To convert image into binary , we will threshold it.
-     Based upon the threshold value
-     thresh_red, thresh_blue, thresh_green ==> are the respective red, blue and green color threshold values. Any thing above this threshold value will be denoted by white color and anything below will be black
-   */
+  // Trigger photo take
+  $('.snap').on('click', function() {
+    doSnap()
+  });
  function binary(context){
+
+      /*
+         To convert image into binary , we will threshold it.
+         Based upon the threshold value
+         thresh_red, thresh_blue, thresh_green ==> are the respective red, blue and green color threshold values. Any thing above this threshold value will be denoted by white color and anything below will be black
+       */
+
      var image = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
+      var thresh_red = binary_level;
+      var thresh_green = binary_level;
+      var thresh_blue = binary_level;
+
      var channels = image.data.length/4;
      for(var i=0;i<channels;i++){
          var r = image.data[i*4 + 0];
          var g = image.data[i*4 + 1];
          var b = image.data[i*4 + 2];
-          if( r>= binary_level ){
+          if( r>= thresh_red && g>= thresh_green && b>=thresh_blue ){
              image.data[i*4 + 0] = 255;
              image.data[i*4 + 1] = 255;
              image.data[i*4 + 2] = 255;
@ -96,28 +84,65 @@ $(document).ready(function(){
      context.putImageData(image, 0,  0);

  }
+  $("#result").hide()

-
-  function processFiles(files) {
-    if(files && typeof FileReader !== "undefined") {
-      for(var i=0; i<files.length; i++) {
-        fileToSnap(files[i]);
+  var slider = $( "#slider" ).slider({
+    range: false,
+    value: 100,
+    animate: 300,
+    min : 0,
+    max : 255,
+    change: function(event,ui){
+        binary_level = ui.value
+	console.log(`binary_level:${binary_level}`)
+        doContrast()
      }
-    }
-  }
+  });
+  $("#send").on("click",function(){
+    var cropCanvas = cropper.getCroppedCanvas();
+    image_data = cropCanvas.toDataURL();
+    $("#messages").html('<div class="alert alert-primary" role="alert">Sending...</div>')

-  var fileToSnap = function(file) {
-    if( (/image/i).test(file.type) ) {
-      var reader = new FileReader();
-      reader.onload = function(e) {   
-        let base_image = new Image();
-        base_image.src = e.target.result;
-        base_image.width = 640;
-        base_image.onload = function(){
-          showSnap(base_image,640,480)
-        }
-      };             
-      reader.readAsDataURL(file);
+    $.ajax({
+	timeout: 3000,
+        url: url + "/image",
+        method:"POST",
+        dataType: "json",
+        data:{
+            image_data : image_data,
+            text : $("#text").val()
+          },
+
+      }).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(`<div class="alert alert-success" role="alert">OK, your image will be available in a few seconds as <a href="#${d.hash_name}" class="hash_name btn btn-sm btn-secondary">${d.hash_name}</a></div>`)
+          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>`)
+
+        })
+  })
+
+
+  var simuCanvas = document.getElementById("simuCanvas");
+  var ctx = simuCanvas.getContext("2d");
+  var lastpoint = { x: 0, y: 0, color: 0};
+  var zoom = 1;
+  //ctx.save
+
+  Point = function( l ){
+    return {
+      "x" : l[0],
+      "y" : l[1],
+      "color" : l[2]
    }
  }

@ -126,44 +151,45 @@ $(document).ready(function(){
    pointsList = document.pointsList
      if (pointsList.length > 0)
      {
-      	simuContext.clearRect(0,0,simuCanvas.width,simuCanvas.height);
-        simuLastPoint = new Point(pointsList[0])
+  	ctx.clearRect(0,0,simuCanvas.width,simuCanvas.height);
+        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){
-            simuContext.beginPath()
-            simuContext.shadowBlur = 5;
-            simuContext.shadowColor = 'rgba(255, 255, 255, 1)';
-            simuContext.lineWidth = 2;
-            simuContext.strokeStyle = "#"+(point.color + Math.pow(16, 6)).toString(16).slice(-6);
-            simuContext.moveTo(simuLastPoint.x * simuZoom, simuLastPoint.y * simuZoom);
-            simuContext.lineTo(point.x * simuZoom, point.y * simuZoom);
-            simuContext.stroke();
-            simuContext.closePath()
+            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()
          }
-          simuLastPoint = point
+          lastpoint = point
        }
      }
  }
-
  function refreshImageList(){
    var imageList = localStorage.getItem("imageList") ? JSON.parse(localStorage.getItem("imageList"))  : []
+
    if( 0 == imageList.length){
      $("#preview").hide()
      return
    }
    $("#preview").show()
+
    html = ''
    for( id in imageList.reverse()){
      hash_name = imageList[id]
      html += `<li class="list-group-item"><a href="#${hash_name}" class="hash_name btn-sm btn btn-secondary" rel="${hash_name}">${hash_name}</a></li>`
    }
    $("#imageList").html(`<ul class="list-group">${html}</ul>`)
+
  }
-
-
+  refreshImageList()

  var showImage  = function(e){
    var el = $(e.target)
@ -190,84 +216,19 @@ $(document).ready(function(){
      })
  }

-  // Trigger photo take
-  $('.snap').on('click', function() {
-    videoToSnap()
-  });
-
-  $( "#slider" ).slider({
-    range: false,
-    value: 100,
-    animate: 300,
-    min : 0,
-    max : 255,
-    change: function(event,ui){
-        binary_level = ui.value
-        doContrast()
-      }
-  });
+  $("#imageList").on("click", showImage)
+  $("#messages").on("click", showImage)

  $(".contrast").on("click",function(el){
    let btn = el.target
    let val = Number($(btn).attr("rel"))
    let new_binary_level = binary_level + val;
+    console.log(`new_binary_level:${new_binary_level}`)
    if( new_binary_level >= 0 && new_binary_level <= 255){
-      binary_level = new_binary_level
-      $("#slider").slider("option","value",binary_level)
+	binary_level = new_binary_level
+	$("#slider").slider("option","value",binary_level)
    }
+    
  })

-  
-  $("#imageList").on("click", showImage)
-  $("#messages").on("click", showImage)
-
-  $("#send").on("click",function(){
-    var cropCanvas = cropper.getCroppedCanvas();
-    image_data = cropCanvas.toDataURL();
-    $("#messages").html('<div class="alert alert-primary" role="alert">Sending...</div>')
-
-    $.ajax({
-  timeout: 3000,
-        url: url + "/image",
-        method:"POST",
-        dataType: "json",
-        data:{
-            image_data : image_data,
-            text : $("#text").val()
-          },
-
-      }).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(`<div class="alert alert-success" role="alert">OK, your image will be available in a few seconds as <a href="#${d.hash_name}" class="hash_name btn btn-sm btn-secondary" rel="${d.hash_name}">${d.hash_name}</a></div>`)
-          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>`)
-
-        })
-  })
-
-  $('#uploadBtn').on('click', function(e) {
-      e.stopPropagation();
-      e.preventDefault();
-      //trigger default file upload button
-      uploadInput.click();
-  });
-   
-  $('#uploadInput').on('change', function() {
-      //retrieve selected uploaded files data
-      var files = $(this)[0].files;
-      processFiles(files);    
-      return false;
-  });
-
-  refreshImageList()
-
 })
--- a/server/.env.template
+++ b/server/.env.template
@ -1,3 +0,0 @@
-DB_HOST="127.0.0.1"
-DB_PORT="6379"
-DEBUG=1
--- a/server/Dockerfile
+++ b/server/Dockerfile
@ -15,10 +15,10 @@ RUN rm -f /etc/nginx/sites-enabled/*
 RUN pip3 install flask numpy pillow redis
 RUN pip3 install pypotrace

-COPY ./server/files/nginx/sites-enabled/site.conf /etc/nginx/sites-enabled
+COPY ./files/nginx/sites-enabled/site.conf /etc/nginx/sites-enabled
 COPY . .

-COPY ./server/entrypoint.sh /usr/bin/
+COPY entrypoint.sh /usr/bin/
 RUN chmod +x /usr/bin/entrypoint.sh

 EXPOSE 80
--- a/server/docker-compose.yml
+++ b/server/docker-compose.yml
@ -16,13 +16,13 @@ services:

  app:
    env_file: .env
-    build: ../
+    build: .
    image: teamlaser/laser-app:latest
    ports:
      - "5000:5000"
    depends_on:
      - db
-    command: python /opt/server.py
+    command: python ./server.py

  assets:
    env_file: .env
@ -35,8 +35,9 @@ services:

  worker:
    env_file: .env
+    build: .
    image: teamlaser/laser-app:latest
    depends_on:
      - db
-    command:  bash -c "while true; do python /opt/worker.py; sleep 3; done"
+    command:  bash -c "while true; do python ./worker.py; sleep 3; done"

--- a/server/install.sh
+++ b/server/install.sh
@ -11,7 +11,7 @@ rm -f /etc/nginx/sites-enabled/*
 pip3 install flask numpy pillow redis
 pip3 install pypotrace
 cd /opt
-git clone https://git.interhacker.space/teamlaser/laser-app
-cp /opt/laser-app/server/files/nginx/sites-enabled/site.conf /etc/nginx/sites-enabled
+#git clone https://git.interhacker.space/teamlaser/laser-app
+cp /opt/teamlaser/laser-app/files/nginx/sites-enabled/site.conf /etc/nginx/sites-enabled