From 05d9c9de426767cce662cb8b694d9ed9a88725a9 Mon Sep 17 00:00:00 2001 From: Benjamin Wiegand Date: Mon, 23 Dec 2024 16:29:22 -0800 Subject: [PATCH] improve image modals --- www/image-modal.js | 30 -------------- www/index.html | 34 ++++++++-------- www/style.css | 98 +++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 106 insertions(+), 56 deletions(-) diff --git a/www/image-modal.js b/www/image-modal.js index 328b302..0a4dc24 100644 --- a/www/image-modal.js +++ b/www/image-modal.js @@ -5,7 +5,6 @@ for (const image of images) { const lazy_image = image.querySelector('.lazy-image') const zoom = modal.querySelector('input') const open = image.querySelector('input'); - const thumbnail = image.querySelector('img'); // for pan let grabbed = false; @@ -17,24 +16,6 @@ for (const image of images) { let clickY = 0; let initW = lazy_image.clientWidth; let initH = lazy_image.clientHeight; - - // for aspect - function fixAspectRatio() { - let img_aspect = thumbnail.clientWidth / thumbnail.clientHeight - let window_aspect = window.innerWidth / window.innerHeight; - let base = zoom.checked ? 200 : 90; - - if (img_aspect > window_aspect) { - // img wider than window - lazy_image.style['min-width'] = base + 'vw'; - lazy_image.style['min-height'] = (base * thumbnail.clientHeight / thumbnail.clientWidth) + 'vw'; - } else { - // window wider than img - lazy_image.style['min-width'] = (base * img_aspect) + 'vh'; - lazy_image.style['min-height'] = base + 'vh'; - } - } - thumbnail.addEventListener('load', fixAspectRatio); // pan the image lazy_image.addEventListener('mouseleave', () => {grabbed = false;}); @@ -65,7 +46,6 @@ for (const image of images) { // zoom to click target zoom.addEventListener('change', e => { - fixAspectRatio(); if (zoom.checked) { zoom_factor = Math.max( lazy_image.clientWidth / initW, @@ -78,16 +58,6 @@ for (const image of images) { } }); - // resize image plane to match image aspect ratio - open.addEventListener('change', e => { - if (open.checked) { - fixAspectRatio(); - window.addEventListener('resize', fixAspectRatio); - } else { - window.removeEventListener('resize', fixAspectRatio); - } - }); - // close image on escape key document.addEventListener('keydown', e => { if (e.key == 'Escape') { diff --git a/www/index.html b/www/index.html index b62217d..236ba6b 100644 --- a/www/index.html +++ b/www/index.html @@ -69,7 +69,7 @@   PeerCord is a project I worked on during freshman year with my fellow classmates at University of The Pacific for the Application Design course. It is an end-to-end alternative to the popular chat app known as Discord. It has a similar server/client model, but the key advantage over Discord is that the messages are end-to-end encrypted keeping them private from even the server that hosts Peercord, or any data breaches. It is written 100% in Java, per the course requirements. It was a very large project and my key role was to write the entire server application. I also wrote the code to connect the client to the server. We completed the project and did very well.

-
+
@@ -94,7 +94,7 @@
@@ -117,7 +117,7 @@   I also took the time to make this project publicly available too. You can view the source code on GitHub or my personal git server.

-
+
@@ -142,7 +142,7 @@
@@ -156,7 +156,7 @@ @@ -170,7 +170,7 @@ @@ -193,7 +193,7 @@   Using this knowledge, I added an Arduino which captures and relays the data sent between the laptop and the BMS. The Arduino also requests and captures some extra information intended for the laptop's EC (embedded controller). This information includes cell voltages, temperature, instant pack voltage, instant current draw, charge/discharge cycle count, alarms, and more, some of which is very useful for verifying the health, age, and balance of my custom battery pack. Finally, I added a small OLED display and a button to show all this info without needing a USB serial cable.

-
+
@@ -218,7 +218,7 @@
@@ -235,7 +235,7 @@   This is a project I worked on for my AP Computer Programming course in highschool. I wrote an Android app in Java which turns any Android smartphone into a security camera. It syncs with a server (also written in Java) over an encrypted TCP connection to store recordings and motion events. The cameras can also be viewed live by another phone over an encrypted UDP connection. This differs from many readily-available solutions as the server is on your local network, ensuring the likely very personal footage can only be viewed by you. Additionally, the recordings still happen even if the network drops out, unlike with traditional IP cameras.

-
+
@@ -260,7 +260,7 @@
@@ -277,7 +277,7 @@   This is a personal project I worked on in middle school where I wanted to remotely control my Roomba from my laptop with a video feed. I connected an Arduino to the Roomba's diagnostic port, paired with a Raspberry pi running an Apache2 web server with PHP and a motion video server. The pi hosts a website over Wi-Fi which allows any modern web browser to view the video feed and send serial commands to the Arduino. The Arduino then sends its own commands outlined in iRobot's SCI specification to carry out control of the Roomba. The Arduino also receives and parses data from the Roomba for safety features such as cliff detection.

-
+
@@ -303,7 +303,7 @@
diff --git a/www/style.css b/www/style.css index 3affe99..1885f98 100644 --- a/www/style.css +++ b/www/style.css @@ -180,14 +180,18 @@ h3 { min-height: 90vh; } -.double-screenshot { +.screenshot-collection { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } -.double-screenshot .thumbnail { +.screenshot-collection input { + display: none; +} + +.project-image .thumbnail { display: flex; align-items: center; justify-content: center; @@ -199,11 +203,10 @@ h3 { cursor: pointer; } -.double-screenshot .thumbnail img { +.screenshot-collection .thumbnail img { min-width: calc(min(450px,calc(100vw - 100px))); - min-height: calc(min(450px,calc(100vw - 100px)) * 0.5625); } -.double-screenshot .no-crop img { +.screenshot-collection .no-crop img { min-width: auto; max-width: calc(min(450px,calc(100vw - 100px))); min-height: auto; @@ -238,8 +241,10 @@ input:checked + .modal { .lazy-image { display: block; - min-width: 90vw; - min-height: 90vh; + --ratioH: calc(var(--height) / var(--width)); + --ratioW: calc(var(--width) / var(--height)); + width: calc(min(90vw, 90vh * var(--ratioW))); + height: calc(min(90vh, 90vw * var(--ratioH))); background-size: contain; background-repeat: no-repeat; background-position: center; @@ -248,8 +253,10 @@ input:checked + .modal { input:checked + .lazy-image { cursor: zoom-out; - min-width: 200vw; - min-height: 200vh; + --zwidth: calc(min(200vw, 200vh * var(--ratioW))*2); + --zheight: calc(min(200vh, 200vw * var(--ratioH))*2); + width: var(--zwidth); + height: var(--zheight); scroll-snap-align: center; } @@ -399,3 +406,76 @@ body:has(.project-image > input:checked) { } + +/* full-res images */ +#lpcl-fr { + background-image: url(/img/peercord-login.png); + --width: 2004; + --height: 1262; +} + +#lpcc-fr { + background-image: url(/img/peercord-chat.png); + --width: 2004; + --height: 1262; +} + +#lio-fr { + background-image: url(/img/ilo-overview.jpg); + --width: 1913; + --height: 921; +} + +#lit-fr { + background-image: url(/img/ilo-temperatures.jpg); + --width: 1907; + --height: 923; +} + +#lid-fr { + background-image: url(/img/ilo-drives.jpg); + --width: 1916; + --height: 917; +} + +#lifci-fr { + background-image: url(/img/ilo-fan-and-cpu-info.jpg); + --width: 1188; + --height: 823; +} + +#sma-fr { + background-image: url(/img/smbus-mitm-arduino.jpg); + --width: 1920; + --height: 1440; +} + +#smw-fr { + background-image: url(/img/smbus-mitm-wiring.jpg); + --width: 1920; + --height: 1440; +} + +#scst-fr { + background-image: url(/img/security-camera-stream.jpg); + --width: 1764; + --height: 1004; +} + +#scsc-fr { + background-image: url(/img/security-camera-screenshot.png); + --width: 1440; + --height: 3120; +} + +#r-fr { + background-image: url(/img/roomba.jpg); + --width: 1233; + --height: 925; +} + +#rc-fr { + background-image: url(/img/roomba-control.jpg); + --width: 1185; + --height: 655; +}