A WiFi Connected Display on My Grad Cap! 3D Printing and ESP32

I graduated! I was a student at Branham Highschool and I'll be attending Berkeley in the fall. I didn't want to graduate in just any hat, so I did my best to channel my maker skills and do something cool.

I put an ESP32 and LED Matrix Display inside a 3D-printed casing and displayed messages on top of my hat. From the ESP32, I hosted a website that my friends could connect to and submit messages to be displayed. I created a password-protected webpage where I could view and approve submitted messages. And, I added a few extra decorations to make it extra awesome!

• 8x32 LED Matrix
• ESP32 DevKit Module
• USB Battery Pack
• Graduation Rubber Ducks
• Velcro Strips
• 3D Printer and Filament
• Female To Female Connectors
• Double Sided Tape
• Yellow and Blue Paint

Design Goal

I chose to use an ESP32 because of its compactness and ability to host web servers. I used a standard USB portable battery because I needed 5V power for the LED matrix and it's easily swappable. My casing needed to hide these components and their wiring. I also wanted to minimize size, weight, and printability while maintaining symmetry and a sleek aesthetic.

Preparation

I found the best arrangement of the electronics would be to place the battery between the pins of the ESP32. I used the shortest micro USB cable I had to minimize volume. Finally, I used calipers to measure exactly how much space I'd need in the case.

Concept

I created rectangle with a rounded section on each side for my front face. This allowed me to minimize the bezels on the top and bottom of the matrix display. The rounded sides allowed room for the wires coming out of the side of the matrix display and for the battery. A small ledge in the front keeps the display from falling out and tight tolerances prevent it from slipping backwards. A flat backing attached with velcro hides all the electronics and makes replacing the battery simple.

My Fusion 360 design consists of two components, the casing and the back plate.

I created the overall case shape in a sketch using a "center rectangle" and a "fit point spline" on each side. I moved the handles of the spline onto the rectangle's edges to they'd connect smoothly. I extruded the sketch to create the front wall.

Then, I created and extruded a second sketch creating the small bottom notch and space to include the electronics. I added a slot along the left side to fit the matrix display wires which allows the display to be flush with the front of the case.

Finally, I created the backplate. To make the backplate, I projected the geometry of the case onto a new sketch in a new component. Then, I created a .3mm offset along the inside to account for printing tolerances and extruded an inner piece all the way around to help keep the backplate in place. The final design prints without supports and took around 7 hours to print on my Ender3 S1 Pro. Aesthetically, I think it does a good job not appearing too bulky or out of place on the hat. If I were using a different board I might have concerns about cooling, but the ESP32 is designed to run hot. Through many hours of testing, even in the sun, I never had any overheating issues.

• VIN connects to VCC
• GND connects to GND
• D23 connects to DIN
• D5 connects to CS
• D18 connects to CLK

Note that because the matrix runs on 5V we use VIN and not the 3v3 pin.

Install the MD_Parola library through the Arduino IDE library manager.

Download my code and place in folder called "GradHatDNS".

Code on Github: https://github.com/Apgoldberg1/GradHatDNS/

(Instructables gave "Failed Upload" message when I tried attaching my .h files)

Upload the code to your ESP32 Devkit Module and messages should immediately appear on the matrix display.

HTML.h contains the HTML which is served to users and can be modified to change the UI to your liking!

Display.h holds the functions relevant to modifying the display and approving messages. The maximum message length and maximum number of messages before messages start overwriting can also be modified in this file.

   Display.displayScroll(messages[curMessage], PA_RIGHT, PA_SCROLL_LEFT, 150);

The 150 can be modified to increase or decrease the text scroll speed.

GradHatDNS.ino holds the setup and loop methods for the program. If you modify the code, ensure refresh is still frequently being called in loop() or else the display won't update.

The code sets up the ESP32 as a WiFi access point called "AndrewsHat" with password "SuperSecret" (the password can be deleted). This will show up to other devices just like any WiFi network would. It also sets up a mDNS server which will allow any URL to be used. For example, visiting Andrew.com, Instructables.com, or any other URL (without arguments or parameters) will always direct to the submit message page. On Apple phones, the user will usually be auto directed to the submit messages page the first time they connect, but on Android phones users must go into a web browser.

Within the setup function I've included default messages which are added when the program starts. These should be changed to things relevant to you!

At the the URL without arguments users will be given the submit messages page where they can add messages. These will only be displayed after they are approved by the owner.

At /proctoring is a password prompt for the owner. The default password is "DuckySecret". Inputting the correct password will redirect to another page where messages can be approved or unapproved. All submitted messages shown in a numbered list. Typing the corresponding number will approve or disapprove that message. A "1" to the right of a message indicates it's approved, while a "0" indicates it's not yet approved. Only approved messages will be displayed.

Note that this is not a secure login or program and there exists vulnerabilities.

/resume is an example of how you can add additional webpages yourself if you'd like.

I also created a printable star design

First, I created a sketch with two circles and placed a point on the outer circle. Then, I drew lines from the point onto the inner circle and added tangent constraints. Finally, I used the circular pattern tool to get 5 points.

I've included the Fusion360 files here. The "Parameterized Star.f3d" file can be modified using Fusion 360's "user parameters" under the modify menu. This allows specific dimensions to be given to the inner and outer circles. The "Draggable Star.f3d" file can be modified by editing the sketch and dragging the circles as desired.

To create the 23 I created a sketch, found a font I liked, and used Fusion 360's text. After extruding the sketch, I added fillets to smooth out the corners of the numbers and printed.

I painted two graduation rubber duckies for the front of the cap. I used a toothpick to draw the small stars and text.

I made the yellow Cal logo on the hat by cutting and painting cardstock. The bottom triangles are also cut from cardstock, and the bear is a sticker.

I put velcro on the hat and along the bottom of the case, so I could take off the electronics before I threw my hat. I also placed thin strips of velcro around the edge of the case and case backing. I also used velcro for the ducks since they need to be removed to access the battery.

I attached the triangles, stars, numbers, and Cal logo using double sided tape.

Then, it was ready to go!

The final product had around a 90-minute battery life, just long enough to make it through our whole grad ceremony! While the screen does get a bit faded in sunlight, it's still visible from far away. The server does occasionally go down (fortunately this only happened to me in testing), but I found this was infrequent and the display continues to work even if the server isn't running. It's possible to use a QR code to connect to the WiFi which could be a fun feature to use, but I chose not to. Because of the battery, the hat is heavy. I tested a lot of velcro placements so I could find one where the weight would rest directly on my head and the hat wouldn't tip over. It ended up being stable and wasn't an issue to walk in or wear for a long period. The velcro is also strong enough to support the hat upside down without issue.

I'm happy to say the hat was a big hit at graduation and I'm looking forward to making more projects in college!