[enh] There should be a preview for images uploaded
This commit is contained in:
alban
parent
30e9a5a5cd
commit
c1b9f42c4a
@ -13,6 +13,8 @@ services:
|
||||
- "6379:6379"
|
||||
volumes:
|
||||
- laserrdb:/var/lib/redis
|
||||
command: ["redis-server", "--appendonly", "yes"]
|
||||
|
||||
|
||||
app:
|
||||
env_file: .env
|
||||
|
||||
19
index.html
19
index.html
@ -20,14 +20,17 @@
|
||||
<script src="js/canvas.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
window.ORIGINAL_JSON=window.JSON;
|
||||
</script>
|
||||
|
||||
|
||||
<div class="container-fluid container-md">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="select">
|
||||
<label for="videoSource">Video source: </label>
|
||||
<select id="videoSource">
|
||||
</select>
|
||||
</div>
|
||||
<h1 class="text-primary">Send shots to the laser!</h1>
|
||||
</div>
|
||||
</div>
|
||||
@ -64,7 +67,15 @@ window.ORIGINAL_JSON=window.JSON;
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="result">
|
||||
<div class="col-sm">
|
||||
<canvas id="simuCanvas" width="640" height="480"></canvas>
|
||||
</div>
|
||||
<div class="col-sm" >
|
||||
<h3>Your images</h3>
|
||||
<div id="imageList"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
133
js/canvas.js
133
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>`)
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
})
|
||||
|
||||
16
server.py
16
server.py
@ -61,6 +61,22 @@ def image():
|
||||
print("woah",e)
|
||||
return( json.dumps( {"errors":[ str(e)]}))
|
||||
|
||||
@app.route('/hash_name/<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)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user