diff --git a/docker-compose.yml b/docker-compose.yml
index 6b4fe67..5446cbc 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -13,6 +13,8 @@ services:
- "6379:6379"
volumes:
- laserrdb:/var/lib/redis
+ command: ["redis-server", "--appendonly", "yes"]
+
app:
env_file: .env
diff --git a/index.html b/index.html
index bbea976..a25fdc7 100644
--- a/index.html
+++ b/index.html
@@ -20,15 +20,18 @@
-
+
-
Send shots to the laser!
+
+
+
+
+
Send shots to the laser!
@@ -64,7 +67,15 @@ window.ORIGINAL_JSON=window.JSON;
-
+
diff --git a/js/canvas.js b/js/canvas.js
index d80b438..9bd113d 100644
--- a/js/canvas.js
+++ b/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(`Ooops... Something went wrong: ${jq}
`)
@@ -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 += `${hash_name}`
+ }
+ $("#imageList").html(``)
+
+ }
+ 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(`Something went wrong: ${msg}
`)
+ return
+ }
+ $("#messages").html("")
+ document.pointsList = d.points_list
+ drawSimu()
+ })
+ .fail(function(d,m,jq){
+ $("#messages").html(`Ooops... Something went wrong: ${jq}
`)
+ })
+ })
+
+
+
})
diff --git a/server.py b/server.py
index 9f6a3c7..e0c2c33 100644
--- a/server.py
+++ b/server.py
@@ -61,6 +61,22 @@ def image():
print("woah",e)
return( json.dumps( {"errors":[ str(e)]}))
+@app.route('/hash_name/',methods = ['GET'])
+def hash_name(hash_name):
+ try:
+
+ item = json.loads(r.hget("images",hash_name))
+ if not item:
+ raise Exception("This image is not available now. You might need to wait a bit more?")
+ return( json.dumps({
+ "message":"ok",
+ "points_list":item["points_list"]
+ }) )
+
+ except Exception as e:
+ print("woah",e)
+ return( json.dumps( {"errors":[ str(e)]}))
+
# Run Flask
if __name__ == '__main__':
app.run(host= '0.0.0.0',debug = True)