Twitter-Enabled Graduation Cap

With graduation looming, I knew I wanted to do something creative with my graduation cap. And I knew I wanted to steer clear of something like this:

cc1b9407b4055a2d7ae3788fa176def2--graduation-sayings-graduation-cap-designs

Barf.

My first thought was to attach a robotic arm on the top that automatically grabs the tassel and moves it to the other side during the appropriate time during the ceremony, but was put off by the fact that it would only be active for a four second action. It would also have a relatively low chance of successfully working given the uncertainty of the precise location of the tassel.

My second idea was to incorporate a screen into the cap that displayed a live feed of tweets with a certain hashtag. This would allow people to live tweet to my head during graduation and display whatever they wanted to Gampel Pavilion. I liked the idea of allowing anyone to write anything (or post any picture) they wanted to, and it would be displayed at a UConn event through a medium that UConn had no moderation of.

I decided to go the Raspberry Pi route for implementation. I totally could have just put my spare Kindle Fire in the cap and it would have worked fine, but what fun is that? If I wanted to change what the cap did after I’ve built out the hardware, I’d have more freedom with Linux. I also wanted a Linux shell and git to work on projects and RPi Minecraft in case the ceremony got boring.

IMG_0122

I measured the dimensions of my cap, and made a model in Fusion 360 of the enclosure for the electronics. I used a 7″ Adafruit HDMI display for the screen, a Raspberry Pi Zero for the computer, a USB hub, WiFi dongle, 5v battery pack, and necessary cables.

Fifteen hours later (and three too few top layers), the massive, bed-encompassing print had finished. Thank god for the Taz 5’s build volume.

I plugged everything in, screwed in the screen, and booted up the Pi with vanilla Raspbian.

After a quick paint job to comply with UConn’s rules about being allowed to walk at Commencement, I was ready to look into getting tweets to display.

The first thing I had to figure out was HOW I wanted the tweets to display. The screen was pretty small for something attempting to broadcast to an entire stadium, so I wanted the tweets to be as big as possible. I started to look into websites that essentially pull tweets with a certain hashtag and display them in a cleaner and more streamlined format for TVs in lobbys and whatnot. I tried Tweetwally, which was totally free but didn’t do a fantastic job of displaying the tweets very large. They came in in a “waterfall” format, keeping multiple tweets on the screen at the same time, decreasing their size.

I tested a few other free or freemium services, and eventually settled on Walls.io. Walls.io gave the option of displaying in a “billboard” format, posting one tweet at a time in large text, then switching to the next tweet after a specified amount of time. After all the new tweets have been shown, Walls.io cycles through old tweets, so there’s always activity on the screen. It also made the background of the page the image attached to the tweet, if there was one. Clean and concise, but…

Screen Shot 2017-05-10 at 11.08.19 AM

That infuriating yellow bar at the top will only go away if you pay €175 a MONTH. It looked even worse on the Raspberry Pi, taking up almost one third of the screen. Luckily, there’s an option in Raspbian’s native web browser to create a custom CSS file that modifies pages as they load. Selecting this option opens “user-stylesheet.css” in a text editor. After using the “inspect” feature in Chrome on my Mac to identify some classes associated with that bar (and other notifications I wanted to eliminate), I wrote three simple lines that hid the horrendous thing for good:

.wall-notification-visible{
    opacity:0;
}

And that was it. Pure, unadulterated feed of thoughts from my fellow peers. I was a little nervous about what people would write, but mostly I was excited to stir up some controversy and get people talking about it.

workingAtGraduation

It ended up being 95% congratulatory statements, and 5% memes; so much for controversy. Regardless, it was a total blast to build and have people get stoked to see their tweet on my head during graduation! It even got picked up by the news the night before graduation:

Leave a Reply

Your email address will not be published. Required fields are marked *