<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>MT Request: draw over the image</title>
<style media="screen">
#sample, svg{
position:absolute;
top: 0;
left: 0;
bottom: 0;
right:0;
width:100%;
height:100%;
}
path {
fill: none;
stroke: red;
stroke-width: 2px;
}
body.submitted path{
stroke:darkgray;
}
body.submitted .buttons{
display:none;
}
#wrapper {
height: 600px;
width: 600px;
position: relative;
}
</style>
</head>
<body>
<div id='interface'>
<div id='wrapper'>
<img src="/latest.svg" id='sample'>
<svg id="canvas">
<path d="" id="stroke" />
</svg>
</div>
<div class='buttons'>
<button id='submit'>Submit</button>
<button id='reset'>Reset</button>
</div>
<div id='message'></div>
</div>
<script type="text/javascript">
let url = window.location.origin.replace('http', 'ws') +'/ws';
let svgEl = document.getElementById("canvas");
let strokeEl = document.getElementById('stroke');
let submitEl = document.getElementById('submit');
let resetEl = document.getElementById('reset');
let messageEl = document.getElementById('message');
let strokes = [];
let isDrawing = false;
let draw = function(e) {
let pos = svgEl.getBoundingClientRect()
let x = e.x - pos['left'];
let y = e.y - pos['top'];
strokes.push([x, y, 0]);
let d = strokes2D(strokes);
console.log(d);
strokeEl.setAttribute('d', d);
socket.send(JSON.stringify({
'action': 'move',
'direction': [x, y]
}));
};
let penup = function(e) {
if(!isDrawing) {
return;
}
isDrawing = false;
document.body.removeEventListener('mousemove', draw);
let pos = svgEl.getBoundingClientRect()
let x = e.x - pos['left'];
let y = e.y - pos['top'];
if(strokes.length > 0){
// mark point as last of stroke
strokes[strokes.length - 1][2] = 1;
}
socket.send(JSON.stringify({
'action': 'up',
'direction': [x, y]
}));
};
let strokes2D = function(strokes) {
// strokes to a d attribute for a path
let d = "";
let last_stroke = undefined;
let cmd = "";
for (let stroke of strokes) {
if(!last_stroke) {
d += `M${stroke[0]},${stroke[1]} `;
cmd = 'M';
} else {
if (last_stroke[2] == 1) {
d += " m";
cmd = 'm';
} else if (cmd != 'l') {
d+=' l ';
cmd = 'l';
}
let rel_stroke = [stroke[0] - last_stroke[0], stroke[1] - last_stroke[1]];
d += `${rel_stroke[0]},${rel_stroke[1]} `;
}
last_stroke = stroke;
}
return d;
}
let startDrawing = function(e){
isDrawing = true;
// start drawing
document.body.addEventListener('mousemove', draw);
};
let reset = function() {
strokes = [];
strokeEl.setAttribute('d', "");
socket.send(JSON.stringify({
'action': 'reset',
}));
}
let socket = new WebSocket(url);
socket.addEventListener('message', function(e){
let msg = JSON.parse(e.data);
console.log('receive', msg);
if(msg['action'] == 'submitted') {
document.body.classList.add('submitted');
messageEl.innerHTML = msg['msg'];
svgEl.removeEventListener('mousedown', startDrawing);
}
});
document.body.addEventListener('mouseup', penup);
svgEl.addEventListener('mousedown', startDrawing);
resetEl.addEventListener('click', reset);
submitEl.addEventListener('click', function(e){
if(!strokes.length){
alert('please draw before submitting');
return;
}
socket.send(JSON.stringify({
'action': 'submit'
}));
});
</script>
</body>
</html>