2019-09-11 18:16:33 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en" dir="ltr">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>MT Request: draw over the image</title>
|
|
|
|
|
<style media="screen">
|
2019-09-11 21:00:06 +02:00
|
|
|
#sample, svg{
|
|
|
|
|
position:absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
right:0;
|
|
|
|
|
width:100%;
|
|
|
|
|
height:100%;
|
2019-10-31 13:55:22 +01:00
|
|
|
font-family: sans-serif;
|
2019-09-11 18:16:33 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
path {
|
|
|
|
|
fill: none;
|
|
|
|
|
stroke: red;
|
|
|
|
|
stroke-width: 2px;
|
|
|
|
|
}
|
2019-09-11 21:00:06 +02:00
|
|
|
body.submitted path{
|
|
|
|
|
stroke:darkgray;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body.submitted .buttons{
|
|
|
|
|
display:none;
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-31 13:55:22 +01:00
|
|
|
/*#wrapper {
|
|
|
|
|
height: calc({DRAW_HEIGHT}/{HEIGHT} * 100%);
|
|
|
|
|
width: calc({DRAW_WIDTH}/{WIDTH} * 100%);
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: calc(({WIDTH} - {DRAW_WIDTH})/2/{WIDTH} * 100%);
|
|
|
|
|
top: calc(({HEIGHT} - {DRAW_HEIGHT})/2/{HEIGHT} * 100%);
|
|
|
|
|
background:none;
|
|
|
|
|
cursor: url(cursor.png) 6 6, auto;
|
|
|
|
|
}*/
|
2019-09-11 21:00:06 +02:00
|
|
|
#wrapper {
|
2019-10-31 13:55:22 +01:00
|
|
|
position:absolute;
|
|
|
|
|
top:0;
|
|
|
|
|
right:0;
|
|
|
|
|
bottom:0;
|
|
|
|
|
left:0;
|
|
|
|
|
background:none;
|
2019-10-23 22:33:37 +02:00
|
|
|
cursor: url(cursor.png) 6 6, auto;
|
2019-09-11 21:00:06 +02:00
|
|
|
}
|
2019-10-31 13:55:22 +01:00
|
|
|
.gray{
|
|
|
|
|
position:absolute;
|
|
|
|
|
background:rgba(255,255,255,0.7);
|
|
|
|
|
}
|
|
|
|
|
#gray_top{
|
|
|
|
|
left:0;
|
|
|
|
|
right:0;
|
|
|
|
|
top:0;
|
|
|
|
|
height:calc({TOP_PADDING}/{HEIGHT} * 100%);
|
|
|
|
|
}
|
|
|
|
|
#gray_bottom{
|
|
|
|
|
left:0;
|
|
|
|
|
right:0;
|
|
|
|
|
bottom:0;
|
|
|
|
|
height:calc(({HEIGHT} - {DRAW_HEIGHT} - {TOP_PADDING})/{HEIGHT} * 100%);
|
|
|
|
|
}
|
|
|
|
|
#gray_left{
|
|
|
|
|
left:0;
|
|
|
|
|
top:calc({TOP_PADDING}/{HEIGHT} * 100%);
|
|
|
|
|
height: calc({DRAW_HEIGHT}/{HEIGHT} * 100%);
|
|
|
|
|
width: calc({LEFT_PADDING}/{WIDTH} * 100%);
|
|
|
|
|
}
|
|
|
|
|
#gray_right{
|
|
|
|
|
right:0;
|
|
|
|
|
top:calc({TOP_PADDING}/{HEIGHT} * 100%);
|
|
|
|
|
height: calc({DRAW_HEIGHT}/{HEIGHT} * 100%);
|
|
|
|
|
width: calc(({WIDTH} - {DRAW_WIDTH} - {LEFT_PADDING})/{WIDTH} * 100%);
|
|
|
|
|
}
|
2019-10-15 12:42:59 +02:00
|
|
|
html, body{
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
2019-10-31 13:55:22 +01:00
|
|
|
margin:0;
|
|
|
|
|
background:gray;
|
|
|
|
|
}
|
|
|
|
|
#interface{
|
|
|
|
|
background:white;
|
|
|
|
|
height: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
padding-top: calc({HEIGHT}/{WIDTH} * 100%);
|
|
|
|
|
background: white;
|
|
|
|
|
position: relative;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
#innerface{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
2019-10-15 12:42:59 +02:00
|
|
|
}
|
2019-10-31 13:55:22 +01:00
|
|
|
@media (min-aspect-ratio: {WIDTH}/{HEIGHT}) {
|
|
|
|
|
#interface {
|
|
|
|
|
height: 100vh;
|
|
|
|
|
width: calc({WIDTH}/{HEIGHT} * 100vh);
|
|
|
|
|
padding-top:0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
#info{
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 5px;
|
|
|
|
|
width: 600px;
|
|
|
|
|
left: calc(50% - 250px);
|
|
|
|
|
z-index: 999;
|
|
|
|
|
}
|
|
|
|
|
.buttons{
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
2019-09-11 18:16:33 +02:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2019-10-31 13:55:22 +01:00
|
|
|
<div id='interface' style="background-image:url('{IMAGE_URL}')">
|
|
|
|
|
<div id='innerface'>
|
|
|
|
|
<div id='wrapper'>
|
|
|
|
|
<!-- <img src="{IMAGE_URL}" id='sample'>-->
|
|
|
|
|
<svg id="canvas" viewBox="0 0 {WIDTH}0 {HEIGHT}0" width="{WIDTH}mm" height="{HEIGHT}mm" preserveAspectRatio="none">
|
|
|
|
|
<path d="" id="stroke" />
|
|
|
|
|
</svg>
|
|
|
|
|
</div>
|
|
|
|
|
<div id='info'>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>Drag the mouse to trace the <strong>clearest lines</strong> drawing above</li>
|
|
|
|
|
<li>Follow the lines as precise as possible</li>
|
|
|
|
|
<li>Press submit when you're done.</li>
|
|
|
|
|
<li>You'll receive a submission token, to fill in at Mechanical Turk</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div class='buttons'>
|
|
|
|
|
<button id='submit'>Submit</button>
|
|
|
|
|
<!-- <button id='reset'>Reset</button>-->
|
|
|
|
|
</div>
|
|
|
|
|
<div id='message'></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class='gray' id='gray_top'></div>
|
|
|
|
|
<div class='gray' id='gray_bottom'></div>
|
|
|
|
|
<div class='gray' id='gray_left'></div>
|
|
|
|
|
<div class='gray' id='gray_right'></div>
|
|
|
|
|
</div>
|
2019-09-11 18:16:33 +02:00
|
|
|
</div>
|
|
|
|
|
<script type="text/javascript">
|
2019-10-23 22:33:37 +02:00
|
|
|
let url = window.location.origin.replace('http', 'ws') +'/ws?' + window.location.search.substring(1);
|
2019-09-11 18:16:33 +02:00
|
|
|
let svgEl = document.getElementById("canvas");
|
|
|
|
|
let strokeEl = document.getElementById('stroke');
|
|
|
|
|
let submitEl = document.getElementById('submit');
|
2019-09-11 21:00:06 +02:00
|
|
|
let resetEl = document.getElementById('reset');
|
|
|
|
|
let messageEl = document.getElementById('message');
|
2019-10-31 13:55:22 +01:00
|
|
|
let innerFaceEl = document.getElementById('innerface'); // wrapper within the interface
|
2019-09-11 21:00:06 +02:00
|
|
|
|
2019-10-31 13:55:22 +01:00
|
|
|
let svgWidth = {WIDTH};
|
|
|
|
|
let svgHeight = {HEIGHT};
|
|
|
|
|
let drawWidth = {DRAW_WIDTH};
|
|
|
|
|
let drawHeight = {DRAW_HEIGHT};
|
|
|
|
|
|
|
|
|
|
let xPadding = {LEFT_PADDING} / svgWidth;
|
|
|
|
|
let yPadding = {TOP_PADDING} / svgHeight;
|
|
|
|
|
let drawWidthFactor = drawWidth / svgWidth;
|
|
|
|
|
let drawHeightFactor = drawHeight / svgHeight;
|
2019-10-15 12:42:59 +02:00
|
|
|
|
2019-09-11 18:16:33 +02:00
|
|
|
let strokes = [];
|
|
|
|
|
let isDrawing = false;
|
2019-10-31 13:55:22 +01:00
|
|
|
let hasMouseDown = false;
|
2019-10-15 12:42:59 +02:00
|
|
|
let currentPoint = null;
|
|
|
|
|
|
2019-10-31 13:55:22 +01:00
|
|
|
let getCoordinates = function(e) {
|
|
|
|
|
// convert event coordinates into relative positions on x & y axis
|
|
|
|
|
let box = innerFaceEl.getBoundingClientRect();
|
|
|
|
|
let x = (e.x - box['left']) / box['width'];
|
|
|
|
|
let y = (e.y - box['top']) / box['height'];
|
|
|
|
|
return {'x': x, 'y': y};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let isInsideBounds = function(pos) {
|
|
|
|
|
return !(pos['x'] < 0 || pos['y'] < 0 || pos['x'] > 1 || pos['y'] > 1);
|
|
|
|
|
}
|
|
|
|
|
let isInsideDrawingBounds = function(pos) {
|
|
|
|
|
if(pos['x'] > xPadding && pos['x'] < (xPadding+drawWidthFactor) && pos['y'] > yPadding && pos['y'] < yPadding+drawHeightFactor) {
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
2019-09-11 18:16:33 +02:00
|
|
|
let draw = function(e) {
|
2019-10-31 13:55:22 +01:00
|
|
|
let pos = getCoordinates(e);
|
|
|
|
|
|
|
|
|
|
if(!isInsideBounds(pos)) {
|
|
|
|
|
// outside of bounds
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if(isDrawing && !isInsideDrawingBounds(pos)){
|
|
|
|
|
stopDrawing(pos);
|
|
|
|
|
}
|
|
|
|
|
if(!isDrawing && hasMouseDown && isInsideDrawingBounds(pos)){
|
|
|
|
|
isDrawing = true;
|
|
|
|
|
}
|
2019-10-23 22:33:37 +02:00
|
|
|
|
|
|
|
|
if(isDrawing) {
|
2019-10-31 13:55:22 +01:00
|
|
|
strokes.push([pos['x'], pos['y'], 0]);
|
2019-10-23 22:33:37 +02:00
|
|
|
let d = strokes2D(strokes);
|
|
|
|
|
strokeEl.setAttribute('d', d);
|
|
|
|
|
}
|
2019-09-11 18:16:33 +02:00
|
|
|
|
2019-10-31 13:55:22 +01:00
|
|
|
console.log([pos['x'], pos['y']], isDrawing);
|
|
|
|
|
socket.send(JSON.stringify({
|
2019-09-11 18:16:33 +02:00
|
|
|
'action': 'move',
|
2019-10-31 13:55:22 +01:00
|
|
|
'direction': [pos['x'], pos['y']],
|
2019-10-15 12:42:59 +02:00
|
|
|
'mouse': isDrawing,
|
2019-10-31 13:55:22 +01:00
|
|
|
}));
|
2019-09-11 18:16:33 +02:00
|
|
|
};
|
2019-10-15 12:42:59 +02:00
|
|
|
|
2019-10-31 13:55:22 +01:00
|
|
|
let stopDrawing = function(pos) {
|
|
|
|
|
if(!isDrawing) {
|
|
|
|
|
return;
|
2019-09-11 18:16:33 +02:00
|
|
|
}
|
|
|
|
|
isDrawing = false;
|
2019-10-15 12:42:59 +02:00
|
|
|
//document.body.removeEventListener('mousemove', draw);
|
2019-09-11 21:00:06 +02:00
|
|
|
|
2019-09-11 18:16:33 +02:00
|
|
|
|
|
|
|
|
if(strokes.length > 0){
|
|
|
|
|
// mark point as last of stroke
|
|
|
|
|
strokes[strokes.length - 1][2] = 1;
|
|
|
|
|
}
|
|
|
|
|
socket.send(JSON.stringify({
|
|
|
|
|
'action': 'up',
|
2019-10-31 13:55:22 +01:00
|
|
|
'direction': [pos['x'], pos['y']]
|
2019-09-11 18:16:33 +02:00
|
|
|
}));
|
2019-10-31 13:55:22 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let penup = function(e) {
|
|
|
|
|
if(!hasMouseDown) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
hasMouseDown = false;
|
|
|
|
|
|
|
|
|
|
let pos = getCoordinates(e);
|
|
|
|
|
stopDrawing(pos);
|
2019-09-11 18:16:33 +02:00
|
|
|
};
|
|
|
|
|
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) {
|
2019-10-31 13:55:22 +01:00
|
|
|
d += `M${stroke[0]*svgWidth*10},${stroke[1]*svgHeight*10} `;
|
2019-09-11 18:16:33 +02:00
|
|
|
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]];
|
2019-10-31 13:55:22 +01:00
|
|
|
d += `${rel_stroke[0]*svgWidth*10},${rel_stroke[1]*svgHeight*10} `;
|
2019-09-11 18:16:33 +02:00
|
|
|
}
|
|
|
|
|
last_stroke = stroke;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
return d;
|
|
|
|
|
}
|
2019-09-11 21:00:06 +02:00
|
|
|
|
|
|
|
|
let startDrawing = function(e){
|
2019-10-31 13:55:22 +01:00
|
|
|
hasMouseDown = true;
|
2019-09-11 21:00:06 +02:00
|
|
|
};
|
2019-10-31 13:55:22 +01:00
|
|
|
|
|
|
|
|
/*let reset = function() {
|
2019-09-11 21:00:06 +02:00
|
|
|
strokes = [];
|
|
|
|
|
strokeEl.setAttribute('d', "");
|
|
|
|
|
socket.send(JSON.stringify({
|
|
|
|
|
'action': 'reset',
|
|
|
|
|
}));
|
2019-10-31 13:55:22 +01:00
|
|
|
}*/
|
2019-09-11 18:16:33 +02:00
|
|
|
|
|
|
|
|
|
|
|
|
|
let socket = new WebSocket(url);
|
2019-10-15 12:42:59 +02:00
|
|
|
document.body.addEventListener('mousemove', draw);
|
|
|
|
|
document.body.addEventListener('mouseup', penup);
|
|
|
|
|
document.body.addEventListener('mousedown', startDrawing);
|
2019-09-11 18:16:33 +02:00
|
|
|
|
|
|
|
|
socket.addEventListener('message', function(e){
|
2019-09-11 21:00:06 +02:00
|
|
|
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);
|
2019-09-11 18:16:33 +02:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2019-10-31 13:55:22 +01:00
|
|
|
//resetEl.addEventListener('click', reset);
|
2019-09-11 18:16:33 +02:00
|
|
|
submitEl.addEventListener('click', function(e){
|
|
|
|
|
if(!strokes.length){
|
|
|
|
|
alert('please draw before submitting');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
socket.send(JSON.stringify({
|
|
|
|
|
'action': 'submit'
|
|
|
|
|
}));
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
