Add a menu for loading images

5 years ago · 69628f40f8
--- a/xray.css
+++ b/xray.css
@@ -8,4 +8,16 @@ img {

 #overlay {
    z-index: 1;
 }

 #menu {
    display: flex;
    flex-direction: row;
    transition: 0.5s;
 }

 #menu.start input,
 #menu.start button,
 #menu.start label {
    font-size: 36pt;
 }
--- a/xray.html
+++ b/xray.html
@@ -13,6 +13,22 @@
 </head>

 <body>
    <div id="menu" class="start">
        <label>
            Base:
            <input type="text" id="base-url" placeholder="URL for base image">
        </label>
        <label>
            Overlay:
            <input type="text" id="overlay-url" placeholder="URL for overlay image">
        </label>
        <button id="load-button">Load</button>
        <label>
            Radius:
            <input type="number" id="radius" placeholder="200" value="200">
        </label>
    </div>
    
    <canvas id="overlay"></canvas>
    <canvas id="base"></canvas>
    <img id="overlay-img" src="overlay.png">
--- a/xray.js
+++ b/xray.js
@@ -1,31 +1,116 @@
 "use strict";

 let overlayLoaded = false;
 let baseLoaded = false;

 let radius = 200;

 document.addEventListener("DOMContentLoaded", e => {
    document.querySelector("#load-button").addEventListener("click", e => {
        console.log("Trying to load...");
        const baseInput = document.querySelector("#base-url").value;
        const overlayInput = document.querySelector("#overlay-url").value;
        
        try {
            let baseURL = new URL(baseInput)
            console.log(baseURL);
        } catch {
            document.querySelector("#base-url").value = "";
            document.querySelector("#base-url").placeholder = "Invalid URL...";
        }
        try {
            let overlayURL = new URL(overlayInput)
            console.log(overlayURL);
        } catch {
            document.querySelector("#overlay-url").value = "";
            document.querySelector("#overlay-url").placeholder = "Invalid URL...";
        }

        document.querySelector("#menu").classList.remove("start");

        const overlayImg = document.querySelector("#overlay-img");
        const baseImg = document.querySelector("#base-img");

        overlayImg.src = overlayInput;
        baseImg.src = baseInput;
        
        load();

        try {
            localStorage.setItem("base", baseInput);
            localStorage.setItem("overlay", overlayInput);
        } catch {
            console.error("Couldn't set something in local storage :(")
        }
    });
    
    const baseInput = document.querySelector("#base-url");
    const overlayInput = document.querySelector("#overlay-url");

    try {
        baseInput.value = localStorage.getItem("base");
        overlayInput.value = localStorage.getItem("overlay");
    } catch {
        console.error("Couldn't get something from local storage :(")
    }

    const overlay = document.querySelector("#overlay");
    
    overlay.addEventListener("mousemove", e => {
        let x = e.clientX - e.target.getBoundingClientRect().x;
        let y = e.clientY - e.target.getBoundingClientRect().y;
        updateOverlay([[x,y]]);
    });

    overlay.addEventListener("touchmove", e => {
        let offsetX = e.target.getBoundingClientRect().x;
        let offsetY = e.target.getBoundingClientRect().y;

        let touches = [];
        
        for (let i=0; i < e.touches.length; i++) {
            let x = e.touches[i].clientX - offsetX;
            let y = e.touches[i].clientY - offsetY;
            touches.push([x,y]);
        }
        updateOverlay(touches);
    });
    
    document.querySelector("#radius").addEventListener("change", e => {
        try {
            radius = parseInt(e.target.value);
        } catch {
            console.warn("That wasn't a valid radius: " + e.target.value);
        }
        
    });
 });

 function load() {
    const overlayImg = document.querySelector("#overlay-img");
    const baseImg = document.querySelector("#base-img");

    overlayImg.addEventListener("load", e => {
    overlayImg.addEventListener("load", function overlayLoad() {
        console.log("The overlay is loaded");
        overlayLoaded = true;

        if (overlayLoaded && baseLoaded) {
            setup();
        }

        overlayImg.removeEventListener("load", overlayLoad);
    })
    baseImg.addEventListener("load", e => {
    baseImg.addEventListener("load", function baseLoad() {
        console.log("The base is loaded");
        baseLoaded = true;

        if (overlayLoaded && baseLoaded) {
            setup();
        }
        
        baseImg.removeEventListener("load", baseLoad);
    })

 });
 }

 function setup() {
    const overlay = document.querySelector("#overlay");
@@ -46,34 +131,10 @@ function setup() {

    overlayCtx.canvas.width = overlayImg.width;
    overlayCtx.canvas.height = overlayImg.height;
    
    overlayCtx.drawImage(overlayImg, 0, 0);

    overlay.addEventListener("mousemove", e => {
        let x = e.clientX - e.target.getBoundingClientRect().x;
        let y = e.clientY - e.target.getBoundingClientRect().y;
        updateOverlay([[x,y]]);
    });

    overlay.addEventListener("touchmove", e => {
        let offsetX = e.target.getBoundingClientRect().x;
        let offsetY = e.target.getBoundingClientRect().y;

        let touches = [];
        
        for (let i=0; i < e.touches.length; i++) {
            let x = e.touches[i].clientX - offsetX;
            let y = e.touches[i].clientY - offsetY;
            touches.push([x,y]);
        }
        updateOverlay(touches);
    });

    console.log("Done");
 }

 function updateOverlay(points) {
    console.log("MOVE")

    /** @type {CanvasRenderingContext2D} */
    const overlayCtx = overlay.getContext("2d");