130 lines
4.3 KiB
HTML
130 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Auto accept</title>
|
|
<style type='text/css'>
|
|
body{
|
|
margin:0;
|
|
overflow: hidden;
|
|
cursor: url('./cursor.svg') 15 15, crosshair;
|
|
}
|
|
svg{
|
|
width:100vw;
|
|
height:100vh;
|
|
}
|
|
svg rect{
|
|
stroke: red;
|
|
stroke-width: .2cm;
|
|
fill: none;
|
|
transition: stroke .5s;
|
|
}
|
|
|
|
svg rect.locked{
|
|
stroke:blue;
|
|
opacity: 1;
|
|
transition: opacity .5s;
|
|
}
|
|
|
|
svg rect.hide{
|
|
opacity:0;
|
|
}
|
|
|
|
#crosshair line{
|
|
stroke: gray;
|
|
stroke-dasharray: 5px 5px;
|
|
}
|
|
|
|
#video_background{
|
|
position: absolute;
|
|
top:0;
|
|
left:0;
|
|
bottom:0;
|
|
right:0;
|
|
z-index: -1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<svg id='canvas' viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
|
|
<g id='crosshair'>
|
|
<line id='crosshair_x' x1="0" y1="0" x2="0" y2="100%" />
|
|
<line id='crosshair_y' x1="0" y1="0" x2="100%" y2="0" />
|
|
</g>
|
|
</svg>
|
|
<video id="video_background" autoplay loop>
|
|
<source src="Blue_Sky_and_Clouds_Timelapse_0892__Videvo.mov">
|
|
</video>
|
|
<script>
|
|
let svgEl = document.getElementById('canvas');
|
|
let crosshairXEl = document.getElementById('crosshair_x');
|
|
let crosshairYEl = document.getElementById('crosshair_y');
|
|
|
|
|
|
// canvas position relative to mouse/screen
|
|
// TODO: update on resize:
|
|
svgEl.setAttribute('viewBox', '0 0 '+window.innerWidth+' '+window.innerHeight);
|
|
let rect = svgEl.getBoundingClientRect();
|
|
let cx = rect.left + rect.width/2;
|
|
let cy = rect.top + rect.height/2;
|
|
let center = {'x': cx, 'y': cy};
|
|
|
|
// move crosshairs
|
|
window.addEventListener('mousemove', function(mousemoveEv){
|
|
let x = mousemoveEv.clientX - rect.left;
|
|
let y = mousemoveEv.clientY - rect.top;
|
|
|
|
crosshairXEl.setAttribute('x1', x)
|
|
crosshairXEl.setAttribute('x2', x)
|
|
crosshairYEl.setAttribute('y1', y)
|
|
crosshairYEl.setAttribute('y2', y)
|
|
});
|
|
|
|
svgEl.addEventListener('mousedown', function(mousedownEv){
|
|
|
|
|
|
let shapeEl = document.createElementNS('http://www.w3.org/2000/svg','rect');
|
|
shapeEl.classList.add('rect');
|
|
let p1 = {'x': mousedownEv.clientX - rect.left, 'y': mousedownEv.clientY - rect.top}
|
|
shapeEl.setAttribute('x', p1.x);
|
|
shapeEl.setAttribute('y', p1.y);
|
|
|
|
shapeEl.setAttribute('width', 0);
|
|
shapeEl.setAttribute('height', 0);
|
|
|
|
svgEl.appendChild(shapeEl);
|
|
|
|
let mouseMoveEv = function(mousemoveEv) {
|
|
let p2 = {'x': mousemoveEv.clientX - rect.left, 'y': mousemoveEv.clientY - rect.top}
|
|
// draw inbetween p1 & p2.
|
|
let minx = Math.min(p1.x, p2.x);
|
|
let miny = Math.min(p1.y, p2.y);
|
|
let maxx = Math.max(p1.x, p2.x);
|
|
let maxy = Math.max(p1.y, p2.y);
|
|
|
|
shapeEl.setAttribute('x', minx);
|
|
shapeEl.setAttribute('y', miny);
|
|
shapeEl.setAttribute('width', maxx - minx);
|
|
shapeEl.setAttribute('height', maxy - miny);
|
|
};
|
|
let mouseUpEv = function() {
|
|
console.log('up');
|
|
window.removeEventListener('mousemove', mouseMoveEv); // remove itself.
|
|
window.removeEventListener('mouseup', mouseUpEv); // remove itself.
|
|
shapeEl.classList.add('locked');
|
|
//TODO: calculate points
|
|
|
|
setTimeout(function(){
|
|
shapeEl.classList.add('hide');
|
|
setTimeout(function(){
|
|
shapeEl.parentNode.removeChild(shapeEl);
|
|
},1000);
|
|
}, 1000);
|
|
};
|
|
window.addEventListener('mousemove', mouseMoveEv);
|
|
window.addEventListener('mouseup', mouseUpEv);
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |