Compare commits
3 Commits
c022aacf47
...
67a7eeef0b
| Author | SHA1 | Date | |
|---|---|---|---|
|
67a7eeef0b | ||
|
|
05d9c9de42 | ||
|
|
a88483796f |
@ -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') {
|
||||
|
||||
BIN
www/img/osc-clicker-thumb.webp
Normal file
BIN
www/img/osc-clicker-thumb.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
www/img/osc-clicker.png
Normal file
BIN
www/img/osc-clicker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 298 KiB |
BIN
www/img/osc-pairing-thumb.webp
Normal file
BIN
www/img/osc-pairing-thumb.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
www/img/osc-pairing.png
Normal file
BIN
www/img/osc-pairing.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 204 KiB |
@ -52,14 +52,66 @@
|
||||
</div>
|
||||
<div class="sub-section">
|
||||
<h3>Skills</h3>
|
||||
<p>Over the years I have gained experience in these languages:<br>Java, Python, C++, C, Bash, C#, Javascript, and PHP</p>
|
||||
<p>My experience includes, but is not limited to:<br>OOP, Functional Programming, Git, Android Studio, JSON, XML, and YAML</p>
|
||||
<p>Over the years I have gained experience in these languages:<br>Java, Python, C++, C, Bash, C#, Javascript, PHP, SQL</p>
|
||||
<p>My experience includes, but is not limited to:<br>Object Oriented Programming, Functional Programming, Docker, Git, Android Studio, JSON, XML, and YAML</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="projects-section text-section">
|
||||
<h2>Projects</h2>
|
||||
|
||||
<div class="project sub-section">
|
||||
<h3>Web Presentation Clicker <small>(2024)</small></h3>
|
||||
<small><a href="https://on-stage.click/" target="_blank">Website</a> - <a href="https://addons.mozilla.org/en-US/firefox/addon/web-presentation-clicker/" target="_blank">Download for Firefox</a> - <a href="https://chromewebstore.google.com/detail/web-presentation-clicker/mnkkbdgkehfhenamhggdljdmlpdpjmom/" target="_blank">Download for Chrome</a> - <a href="https://github.com/web-presentation-clicker" target="_blank">Github</a></small>
|
||||
<p>A browser extension that lets you control your slideshow presentation from your phone, in the simplest way possible.</p>
|
||||
<details title="the deets">
|
||||
<summary>More details</summary>
|
||||
<p>
|
||||
  Web Presentation Clicker is a browser extension that a fellow classmate and I worked on for the Web Applications course. It allows you to control your Google Slides or Office 365 slideshow presentation in your browser with your phone without having to download an app. The extension displays a QR code when opened, which both acts as a convenient link to the clicker webpage and contains the necessary pairing data. Once scanned, you are presented with two left and right arrow buttons that can be used to control your slideshow.
|
||||
</p>
|
||||
<p>
|
||||
  To relay the slide change events to the browser extension, a server is used. The extension opens a websocket connection with the server, and the clicker (currently) sends REST API calls to the server to switch slides. A websocket-based clicker API has been implemented in the server but I have yet to add it to the client. The actual "clicking" of the presentation is done by simulating the arrow keys with javascript in the browser window.
|
||||
</p>
|
||||
<p>
|
||||
  The server is written in python and consists of two components. A multiprocess uWSGI application that opens and maintains the websockets and accepts the REST API calls, and a multithreaded "session server" which keeps track of the presentations and routes the "click events" between the multiple uWSGI processes. The two communicate using unix domain socket connections, ensuring minimal overhead.
|
||||
</p>
|
||||
<p>
|
||||
  I worked on the server and the extension while my classmate David worked on the landing page and the project reports. You can view our work <a href="https://github.com/web-presentation-clicker" target="_blank">on the github org</a>. You can even host your own server if you want.
|
||||
</p>
|
||||
</details>
|
||||
<div class="screenshot-collection">
|
||||
<div class="project-image">
|
||||
<label for="oscp" class="thumbnail">
|
||||
<img src="/img/osc-pairing-thumb.webp" alt="Web Presentation Clicker extension showing the pairing QR code">
|
||||
</label>
|
||||
<input type="checkbox" id="oscp">
|
||||
<div class="modal">
|
||||
<label for="oscp" class="modal-bg"></label>
|
||||
<label for="oscp" class="close"></label>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="lazy-image" id="oscp-fr"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="project-image">
|
||||
<label for="oscc" class="thumbnail no-crop">
|
||||
<img src="/img/osc-clicker-thumb.webp" alt="Clicker interface, consisting of two buttons for next and previous slide.">
|
||||
</label>
|
||||
<input type="checkbox" id="oscc">
|
||||
<div class="modal">
|
||||
<label for="oscc" class="modal-bg"></label>
|
||||
<label for="oscc" class="close"></label>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="lazy-image" id="oscc-fr"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<small>click image to view in full resolution</small>
|
||||
</div>
|
||||
|
||||
<div class="project sub-section">
|
||||
<h3>PeerCord <small>(2023)</small></h3>
|
||||
<p>An end-to-end encrypted client/server messaging application.</p>
|
||||
@ -69,7 +121,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.
|
||||
</p>
|
||||
</details>
|
||||
<div class="double-screenshot">
|
||||
<div class="screenshot-collection">
|
||||
<div class="project-image">
|
||||
<label for="lpcl" class="thumbnail">
|
||||
<img src="/img/peercord-login-thumb.webp" alt="PeerCord login screen">
|
||||
@ -80,7 +132,7 @@
|
||||
<label for="lpcl" class="close"></label>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="lazy-image" style="background-image: url('/img/peercord-login.png')"></span>
|
||||
<span class="lazy-image" id="lpcl-fr"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -94,7 +146,7 @@
|
||||
<label for="lpcc" class="close"></label>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="lazy-image" style="background-image: url('/img/peercord-chat.png')"></span>
|
||||
<span class="lazy-image" id="lpcc-fr"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -117,7 +169,7 @@
|
||||
  I also took the time to make this project publicly available too. You can view the source code <a href="https://github.com/Benjamin-Wiegand/ilo_exporter" target="_blank">on GitHub</a> or <a href="https://git.wiegand.pw/ben/fast_ilo_exporter" target="_blank">my personal git server</a>.
|
||||
</p>
|
||||
</details>
|
||||
<div class="double-screenshot">
|
||||
<div class="screenshot-collection">
|
||||
<div class="project-image">
|
||||
<label for="lio" class="thumbnail">
|
||||
<img src="/img/ilo-overview-thumb.webp" alt="overview of my ILO dashboard in grafana">
|
||||
@ -128,7 +180,7 @@
|
||||
<label for="lio" class="close"></label>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="lazy-image" style="background-image: url('/img/ilo-overview.jpg');"></span>
|
||||
<span class="lazy-image" id="lio-fr"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -142,7 +194,7 @@
|
||||
<label for="lit" class="close"></label>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="lazy-image" style="background-image: url('/img/ilo-temperatures.jpg');"></span>
|
||||
<span class="lazy-image" id="lit-fr"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -156,7 +208,7 @@
|
||||
<label for="lid" class="close"></label>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="lazy-image" style="background-image: url('/img/ilo-drives.jpg');"></span>
|
||||
<span class="lazy-image" id="lid-fr"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -170,7 +222,7 @@
|
||||
<label for="lifci" class="close"></label>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="lazy-image" style="background-image: url('/img/ilo-fan-and-cpu-info.jpg');"></span>
|
||||
<span class="lazy-image" id="lifci-fr"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -193,7 +245,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.
|
||||
</p>
|
||||
</details>
|
||||
<div class="double-screenshot">
|
||||
<div class="screenshot-collection">
|
||||
<div class="project-image">
|
||||
<label for="sma" class="thumbnail">
|
||||
<img src="/img/smbus-mitm-arduino-thumb.webp" alt="the arduino leonardo that's attached to my battery, complete with small OLED display">
|
||||
@ -204,7 +256,7 @@
|
||||
<label for="sma" class="close"></label>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="lazy-image" style="background-image: url('/img/smbus-mitm-arduino.jpg');"></span>
|
||||
<span class="lazy-image" id="sma-fr"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -218,7 +270,7 @@
|
||||
<label for="smw" class="close"></label>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="lazy-image" style="background-image: url('/img/smbus-mitm-wiring.jpg');"></span>
|
||||
<span class="lazy-image" id="smw-fr"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -235,7 +287,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.
|
||||
</p>
|
||||
</details>
|
||||
<div class="double-screenshot">
|
||||
<div class="screenshot-collection">
|
||||
<div class="project-image">
|
||||
<label for="scst" class="thumbnail">
|
||||
<img src="/img/security-camera-stream-thumb.webp" alt="two phones, one streaming video to another over the network">
|
||||
@ -246,7 +298,7 @@
|
||||
<label for="scst" class="close"></label>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="lazy-image" style="background-image: url('/img/security-camera-stream.jpg');"></span>
|
||||
<span class="lazy-image" id="scst-fr"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -260,7 +312,7 @@
|
||||
<label for="scsc" class="close"></label>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="lazy-image" style="background-image: url('/img/security-camera-screenshot.png');"></span>
|
||||
<span class="lazy-image" id="scsc-fr"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -277,7 +329,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.
|
||||
</p>
|
||||
</details>
|
||||
<div class="double-screenshot">
|
||||
<div class="screenshot-collection">
|
||||
|
||||
<div class="project-image">
|
||||
<label for="r" class="thumbnail">
|
||||
@ -289,7 +341,7 @@
|
||||
<label for="r" class="close"></label>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="lazy-image" style="background-image: url('/img/roomba.jpg');"></span>
|
||||
<span class="lazy-image" id="r-fr"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@ -303,7 +355,7 @@
|
||||
<label for="rc" class="close"></label>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
<span class="lazy-image" style="background-image: url('/img/roomba-control.jpg');"></span>
|
||||
<span class="lazy-image" id="rc-fr"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
110
www/style.css
110
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,88 @@ body:has(.project-image > input:checked) {
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* full-res images */
|
||||
#oscp-fr {
|
||||
background-image: url(/img/osc-pairing.png);
|
||||
--width: 1260;
|
||||
--height: 798;
|
||||
}
|
||||
|
||||
#oscc-fr {
|
||||
background-image: url(/img/osc-clicker.png);
|
||||
--width: 1551;
|
||||
--height: 3284;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user