Optical Plankton Counter GUI

Inspiration

So I (Ray) am going on a field trip in a week for marine science and I'm in the plankton group - which means a whole load of driving boats out across a lake with nets to count plankton in different areas/times. Our lecturer who has DefinitelyNotBeenDoingThisForWayTooLong expressed how cumbersome it was to process the data (because of course it's always data processing). As it turns out, the spreadsheet is an eldritch horror that takes the demonstrator a few hours to create, and the students even longer to understand.

So naturally, as all projects start, I made this my friends' problem as well and we resolved ourselves to making a GUI for the optical plankton counter (OPC), so that students can spend less time exploding their braincells over the excel spreadsheet, and more time actually doing things that matter.

What it does

The OPC (which I'm pretty sure is older than the oldest gen Z member 💀) spits out .C00s, which are just CSVs but with a funky extension name because this program is proprietary and literally runs on Windows XP. Our website reads in multiple .C00 of these files, has the user tag them according to what sample it is (e.g. was it sampled in shallow/deep water, the western/central zone, day/night). After they're done uploading everything, our program reads them in, filters them and spits out some useful graphs! Yay!

How we built it

Pure HTML, CSS and JS obviously to stick to the theme of old frameworks/technologies (/j). Our project's only a single page with a few functions, so React, NPM and even having a backend was overkill. We designed the UI Figma and then just shoved everything together in one index.html, one index.css and a few js files.

The existing libraries/assets we used were: lucide icon, chart.js & papaparse.

Challenges we ran into

Uni students try not to die from uni assignments mid hackathon challenge impossible
Reading in CSVs in JS 😭😭😭😭

Accomplishments that we're proud of

The frontend exists (sort of)
This was many of us' first hackathons!
Vibes. Silliness. 800+ messages sent in the group chat. Goated thai food on Saturday night. Collective deadline stress. yippee !

What we learned

You can make custom html elements in base HTML/JS (like components in React :o).

But on a more serious note, sometimes ppl get cooked and things don't get finished/bug out. That's so chill. Being able to work on something small and meaningful made this really awesome. Like yeah our website's not the flashiest thing there is but yk a hackathon is a hackathon and there'll be more time in the future! It's just nice to know that the things you make might actually have an impact, however small :)

What's next for Optical Plankton Counter GUI

There is a lot to improve here. To list a few things:

Getting the thing actually working
Biomass calculations; abundance isn't actually that helpful since plankton has different weights
Filtering for graphs
Editing/deleting uploaded files
Downloading averaged data csv
Adding previous year's data