commit 0eefc7a1d4199e3665fbdcde202c73287ca7d757 Author: Fen Dweller Date: Thu Jun 11 11:03:15 2020 -0400 Set up the x-ray viewer diff --git a/server.py b/server.py new file mode 100644 index 0000000..0528f79 --- /dev/null +++ b/server.py @@ -0,0 +1,17 @@ +# just for testing locally + +import http.server + +class MyHTTPRequestHandler(http.server.SimpleHTTPRequestHandler): + def end_headers(self): + self.send_my_headers() + http.server.SimpleHTTPRequestHandler.end_headers(self) + + def send_my_headers(self): + self.send_header("Cache-Control", "no-cache") + self.send_header("Pragma", "no-cache") + self.send_header("Expires", "0") + + +if __name__ == '__main__': + http.server.test(HandlerClass=MyHTTPRequestHandler) \ No newline at end of file diff --git a/xray.css b/xray.css new file mode 100644 index 0000000..269d0bb --- /dev/null +++ b/xray.css @@ -0,0 +1,11 @@ +canvas { + position: absolute; +} + +img { + display: none; +} + +#overlay { + z-index: 1; +} \ No newline at end of file diff --git a/xray.html b/xray.html new file mode 100644 index 0000000..dc18f08 --- /dev/null +++ b/xray.html @@ -0,0 +1,20 @@ + + + + + + X-ray Viewer + + + + + + + + + + + + + + \ No newline at end of file diff --git a/xray.js b/xray.js new file mode 100644 index 0000000..4646a49 --- /dev/null +++ b/xray.js @@ -0,0 +1,93 @@ +let overlayLoaded = false; +let baseLoaded = false; + +let radius = 200; + +document.addEventListener("DOMContentLoaded", e => { + + const overlayImg = document.querySelector("#overlay-img"); + const baseImg = document.querySelector("#base-img"); + + overlayImg.addEventListener("load", e => { + console.log("The overlay is loaded"); + overlayLoaded = true; + + if (overlayLoaded && baseLoaded) { + setup(); + } + }) + baseImg.addEventListener("load", e => { + console.log("The base is loaded"); + baseLoaded = true; + + if (overlayLoaded && baseLoaded) { + setup(); + } + }) + +}); + +function setup() { + const overlay = document.querySelector("#overlay"); + const base = document.querySelector("#base"); + + const overlayImg = document.querySelector("#overlay-img"); + const baseImg = document.querySelector("#base-img"); + + /** @type {CanvasRenderingContext2D} */ + const overlayCtx = overlay.getContext("2d"); + /** @type {CanvasRenderingContext2D} */ + const baseCtx = base.getContext("2d"); + + baseCtx.canvas.width = baseImg.width; + baseCtx.canvas.height = baseImg.height; + + baseCtx.drawImage(baseImg, 0, 0); + + 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); + }); + + console.log("Done"); +} + +function updateOverlay(x, y) { + console.log("MOVE") + + /** @type {CanvasRenderingContext2D} */ + const overlayCtx = overlay.getContext("2d"); + + const overlayImg = document.querySelector("#overlay-img"); + + const w = overlayCtx.canvas.width; + const h = overlayCtx.canvas.height; + + + overlayCtx.save(); + + overlayCtx.globalCompositeOperation = "source-over"; + overlayCtx.clearRect(0, 0, w, h); + + overlayCtx.beginPath(); + overlayCtx.ellipse(x, y, radius, radius, 0, 0, 2 * Math.PI); + + const gradient = overlayCtx.createRadialGradient(x, y, 0, x, y, radius); + gradient.addColorStop(0.75, '#000000FF'); + gradient.addColorStop(1, '#00000000'); + overlayCtx.fillStyle = gradient; + + overlayCtx.fill(); + + overlayCtx.globalCompositeOperation = "source-in"; + + overlayCtx.drawImage(overlayImg, 0, 0); + + overlayCtx.restore(); +} \ No newline at end of file