From b9153998f1373a050999bc8d056083d5f8c79dd5 Mon Sep 17 00:00:00 2001 From: Logan Date: Wed, 6 Nov 2024 23:28:38 -0600 Subject: [PATCH 1/3] Restricted camera in canvas --- static/canvas.html | 4 ++-- static/canvas.js | 18 +++++++++++++----- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/static/canvas.html b/static/canvas.html index 4d3135f..fcf2931 100644 --- a/static/canvas.html +++ b/static/canvas.html @@ -21,7 +21,7 @@ - +
@@ -39,4 +39,4 @@
- \ No newline at end of file + diff --git a/static/canvas.js b/static/canvas.js index ab521a2..8babd4b 100644 --- a/static/canvas.js +++ b/static/canvas.js @@ -20,6 +20,7 @@ window.addEventListener("load", async (e) => { for (let x = 0; x < DATA_SIZE * DATA_SIZE * 4; x++) { image.data[x] = 255; } + ctx.imageSmoothingEnabled = false; // Create drawable image, update it every half second await redraw(); setInterval(redraw, 500); @@ -41,9 +42,8 @@ function setPixel(data, x, y, color) { function draw() { ctx.fillStyle = "rgb(0 0 0 255)"; - ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillRect(0, 0, canvas.width, canvas.height); let drawScale = CANVAS_SIZE / DATA_SIZE * scale; - ctx.imageSmoothingEnabled = false; ctx.scale(drawScale, drawScale); ctx.drawImage(bitmap, offx, offy); ctx.setTransform(1, 0, 0, 1, 0, 0); @@ -57,20 +57,24 @@ function mousePosition(e) { return {x: cx, y: cy}; } +function moveOffset(x, y) { + offx = Math.min(Math.max(x, -10 - DATA_SIZE / 2), DATA_SIZE + 10); + offy = Math.min(Math.max(y, -10 - DATA_SIZE / 2), DATA_SIZE + 10); +} + canvas.addEventListener("wheel", async (e) => { let mouse = mousePosition(e); - console.log(mouse); let oldScale = scale; if (e.deltaY < 0) { scale += 0.1; } else if (e.deltaY > 0) { scale -= 0.1; } + scale = Math.min(Math.max(scale, 0.5), 10); let diff = (CANVAS_SIZE / oldScale) - (CANVAS_SIZE / scale); let ratiox = (mouse.x - (CANVAS_SIZE / 2)) / CANVAS_SIZE; let ratioy = (mouse.y - (CANVAS_SIZE / 2)) / CANVAS_SIZE; - offx += diff * ratiox; - offy += diff * ratioy; + moveOffset(diff * ratiox, diff* ratioy); draw(image); }); @@ -111,6 +115,10 @@ canvas.addEventListener("mousemove", async (e) => { if (e.buttons & 1) { offx += e.movementX * (1.0 / scale) * 0.45; offy += e.movementY * (1.0 / scale) * 0.45; + moveOffset( + offx + e.movementX * (1.0 / scale) * 0.45, + offy + e.movementY * (1.0 / scale) * 0.45 + ); draw(image); } }); From b85edc2ca1b5c2a9b833eb79a0f3ef5fc8d62f6f Mon Sep 17 00:00:00 2001 From: th3keyboard Date: Sun, 10 Nov 2024 11:02:11 -0600 Subject: [PATCH 2/3] fixed empty space at bottom of toolbar --- static/canvas.css | 40 ++++++++++++++++++++++++++++++++++------ static/canvas.html | 4 ++-- static/contact.css | 4 ++++ 3 files changed, 40 insertions(+), 8 deletions(-) diff --git a/static/canvas.css b/static/canvas.css index a2dd7a1..944c730 100644 --- a/static/canvas.css +++ b/static/canvas.css @@ -16,8 +16,8 @@ html, body { display: flex; flex-direction: column; justify-content: center; - align-items: center; background-color: var(--utsa-orange); + height: 100vh; } .navbarCont { @@ -25,7 +25,7 @@ html, body { background-color: var(--utsa-blue); width: 100%; text-align: center; - margin-bottom: 10px; + margin-bottom: 10vh; } .navbarCont a { @@ -33,7 +33,7 @@ html, body { text-align: center; padding: 12px; text-decoration: none; - color: #e67e22; + color: var(--utsa-orange); } .navbarCont a.icon { @@ -46,7 +46,6 @@ html, body { .navbarCont a.rightB { float: right; - display: inline-block; padding: 20px; margin: 0; color: #ecf0f1; @@ -77,7 +76,8 @@ html, body { border-top: solid black 1px; background-color: var(--utsa-blue); width: 100%; - height:auto; + height: auto; + margin-top: 11vh; } .toolbarItems { @@ -105,12 +105,40 @@ html, body { canvas { background-color: white; margin: 20px; + align-self: center; + height: 500px; + width: 500px; image-rendering: pixelated; } @media screen and (max-width: 600px) { + .navbarCont a.title { + font-size: 18.5px; + padding-left: 0px; + } + + .navbarCont img { + width: 80%; + } + + .navbarCont { + position: relative; + background-color: var(--utsa-blue); + width: 100%; + text-align: center; + margin-bottom: 11vh; + } + .navbarCont a { /* possible hamburger menu for moblie users*/ - position: absolute + font-size: 10px; } + + canvas { + background-color: white; + margin: 20px; + align-self: center; + height: 500px; + width: 500px; } +} \ No newline at end of file diff --git a/static/canvas.html b/static/canvas.html index fcf2931..b33881f 100644 --- a/static/canvas.html +++ b/static/canvas.html @@ -16,8 +16,8 @@ ThePlaceHolders Contact - Login - Settings + Login + Register
diff --git a/static/contact.css b/static/contact.css index 4106807..c86eefa 100644 --- a/static/contact.css +++ b/static/contact.css @@ -1,3 +1,7 @@ +:root { + --utsa-orange: #f15a22; + --utsa-blue: #0c2340; +} body { margin: 0; } From 51d48b69c36ae8329ba645b2adbdeca548aab791 Mon Sep 17 00:00:00 2001 From: th3keyboard Date: Tue, 12 Nov 2024 17:34:20 -0600 Subject: [PATCH 3/3] fixed navbar and toolbar (again) --- static/canvas.css | 19 ++++++++++++------- static/canvas.html | 4 ++-- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/static/canvas.css b/static/canvas.css index 944c730..f0e864c 100644 --- a/static/canvas.css +++ b/static/canvas.css @@ -21,16 +21,18 @@ html, body { } .navbarCont { - position: relative; background-color: var(--utsa-blue); width: 100%; text-align: center; - margin-bottom: 10vh; + position: fixed; + top: 0; } .navbarCont a { + display: flex; + flex-direction: row; float: left; - text-align: center; + justify-content: space-around; padding: 12px; text-decoration: none; color: var(--utsa-orange); @@ -77,7 +79,8 @@ html, body { background-color: var(--utsa-blue); width: 100%; height: auto; - margin-top: 11vh; + position: fixed; + bottom: 0; } .toolbarItems { @@ -122,11 +125,9 @@ canvas { } .navbarCont { - position: relative; background-color: var(--utsa-blue); width: 100%; text-align: center; - margin-bottom: 11vh; } .navbarCont a { @@ -140,5 +141,9 @@ canvas { align-self: center; height: 500px; width: 500px; - } + } + + .toolbar { + font-size: 80%; + } } \ No newline at end of file diff --git a/static/canvas.html b/static/canvas.html index b33881f..b488eb0 100644 --- a/static/canvas.html +++ b/static/canvas.html @@ -24,14 +24,14 @@
- +
- +