From 4868a374b68c9a61040fbc344006f9b26f131bb1 Mon Sep 17 00:00:00 2001
From: Ruben van de Ven <git@rubenvandeven.com>
Date: Tue, 15 Dec 2020 12:39:19 +0100
Subject: [PATCH] Initial drawing mode with rectangles

---
 cursor.svg |  78 ++++++++++++++++++++++++++++++++
 index.html | 130 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 208 insertions(+)
 create mode 100644 cursor.svg
 create mode 100644 index.html
diff --git a/cursor.svg b/cursor.svg
new file mode 100644
index 0000000..6fe2ef6
--- /dev/null
+++ b/cursor.svg
@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="30px"
+   height="30px"
+   viewBox="0 0 17.361561 17.361561"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
+   sodipodi:docname="cursor.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="-63.804742"
+     inkscape:cy="236.83295"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     inkscape:window-width="3830"
+     inkscape:window-height="2120"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-55.526548,-37.644545)">
+    <path
+       sodipodi:type="star"
+       style="fill:#000000;fill-opacity:0.00280121;stroke-width:3;stroke-dashoffset:0.755906"
+       id="path837"
+       sodipodi:sides="8"
+       sodipodi:cx="41.449741"
+       sodipodi:cy="90.504143"
+       sodipodi:r1="96.300034"
+       sodipodi:r2="48.150017"
+       sodipodi:arg1="0.75029607"
+       sodipodi:arg2="1.1429952"
+       inkscape:flatsided="false"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="M 111.89197,156.16684 61.425792,134.31489 44.82938,186.74485 24.596066,135.60822 -24.212953,160.94637 -2.3610054,110.48019 -54.79097,93.883781 -3.6543354,73.650467 -28.992484,24.841449 21.473691,46.693396 38.070103,-5.7365685 58.303417,45.400066 107.11244,20.061918 85.260488,70.528093 137.69045,87.124504 86.553818,107.35782 Z"
+       inkscape:transform-center-y="-1.1402097e-06" />
+    <circle
+       style="fill:none;fill-opacity:1;stroke:#f0e68c;stroke-width:3;stroke-dashoffset:0.755906"
+       id="path867"
+       cx="64.207329"
+       cy="46.325325"
+       r="7.1807804" />
+  </g>
+</svg>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..fbb561d
--- /dev/null
+++ b/index.html
@@ -0,0 +1,130 @@
+<!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>
\ No newline at end of file
