in collaboration with Claire Chen, Arka Roy, and Lucas Moiseyev

After a few botched attempts at working together again for a hackathon, we finally coordinated to come together for TartanHacks 2018 a year later. Lucas, Arka, Claire, and I came together last week to brainstorm ideas for the hackathon, hoping to work with both hardware and software again. Several empty coffee cups and three location changes later, the group came up with a website building application. At the time, all of us were(on some level) coding our personal websites, despite having little to no experience with html, js, and css.

While brainstorming, we knew we didn’t want to just create stuff, rather we knew we wanted to create a project that could incite positive impact. We began to develop a plan of action: physical objects that would make up a tangible wireframe that corresponds with a desktop client.

Follow our 24-hour process

Our first step was to develop short-term, attainable goals for every couple hours, the first deadline at 10pm.

Decided to use the CMU CAM5 PIXY to recognize colors and objects, while returning positions

10:00pm We are beginning with solidifying the concept and developing a graphic user interface (GUI) for the tool. Additionally at this point we are trying to make all the classes for the general project model in html/css for positions and the objects for the rest of the client.

As for hardware, we’re thinking of a four piece arm that utilizes a c-clamp to fasten to the table (similar to that of a simple desk lamp). The arm allows for the housing of the CAM5 to be elevated directly above the “wireframes”.

MVP for 1am (realistically 2am): Connect Java w/ CAM5 Pixy; html/css positioning, concept visualization, rig in production, GUI working

GUI is still in the works, we can’t seem to get the tabs to be buttons. We tried to draw rectangles originally to contain the text editor and live preview of website. We opted for a j-button approach instead because we didn’t want to override the j-panel.

graphic user interface as of 2:11am

Html/css positioning is setup, but is waiting for communication between the CAM5 and Java. We decided to add in an Arduino UNO to better communicate serially because we are able to use arduino libraries. Hopefully, we’ll be able to communicate with Java easier with the help of the UNO.


goals for 4am: get the CAM5 Pixy communicating with Java (i.e. get the arduino library to talk to jserial), computer user interface


We’ve successfully connected Arduino with Java(CAM5 by proxy) using the jserial library. UI has been setup with both the text editor and preview windows. CAM5 Pixy works well, detects colors and outputs positions. There’s discussion of how we would handle color codes and how to deal with href links to different pages. So far the plan of action is to lasercut the physical components with slots to accommodate potential color codes that coordinate with different pages. Testing continues…

goals for breakfast: we need to parse the input, and setup the integration of GUI and add href. test color codes and have the pieces ready to lasercut by 8am,


So at this point it’s T-minus 5 hours till deadline, but we’d hopefully still like to leave room for making a video. Software is creating tests for connecting with the CAM5 Pixy and the GUI. We want to know if we can live preview and have active text. Hardware is making moves on the CAM5 Pixy stand as well as the wooden physical components. We tried to 3D print a housing for both the Arduino UNO and the CAM5, but it would take 5+ hours to print, thus we have opted for our own design.

click for samples of current code and GUI
sanded cut blocks

Goals for 2PM: get blocks completely finished, completely finish the rig for the CAM5 Pixy, successfully complete a couple tests with the GUI + Java + Arduino +CAM5.

2:51pm →Time is coming down to the wire and our rig is less than finished. We still need to run tests with the rig and the CAM5 Pixy.

design and execution of CAM5 Pixy rig

3:37pm We were met with some problems with the CAM5 Pixy rig, but after some rapid prototyping and some testing, we re-cut the frame and re-assembled the rig. At this point, we are now testing for the serial values that the Pixy is returning to the program. The GUI is ready for testing and at this point, each individual component is where it should be. Obviously, now the challenge is getting each piece to work together and coordinate. Yikes!

4:30pm We submit, but are still running tests and debugging.


bri{css} is a website making desktop kit that connects physical components with digital objects in real time to tangibly illustrate html/css theory. Inspired by Mozilla’s web dev tools for developers, we wanted to reach a younger audience and expose them to the concepts of html/css code.
Physical bricks correspond to objects in the program and help develop a tangible understanding of coding concepts and how elements interact in a webpage.
As the user moves the blocks around, the CAM5 Pixy detects the color and serial outputs values to send to arduino. We’ve taken those values from Arduino and returned them within a computer application that mocks up a website in real time.

Take a look at our code:

The team became rather passionate about the project as time went on and we were disappointed we weren’t able to deliver an MVP that communicated our idea well. The truth is that we began testing hardware with software way too late in the game. If we had maybe just 3 more hours, we perhaps could’ve delivered a more together digital UI. Debugging itself had the potential to take 5 hours when we only one. As a team, we had evolved so much in the past 24 hours in addition to the past year. The production value of what we were able to come up with was significantly higher than what we had produced last year. That being said, where quality was high, time management lacked and compromised our final product. We walked away a happy with our concept, but twinge disappointed with the execution. We’d like to give this project another try, perhaps in a future hackathon, because I don’t think any of us are done.

Collaborative Design and Technology

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store