Arduino LED
LED Message board app
What is Arduino LED?
This is a project I made over the course of 2 months for my girlfriend’s anniversary present. There are two LED message boards, one for her room and one for mine, and an app I made that allows you to draw or write messages on the other person’s board. So we could draw hearts, cute pictures of cats, or a nice message for eachother to see. I built everything from scratch, including a 3D-printed case I designed that housed the Arduino and ESP board for wifi, and the app on Xcode.
Development Process
I started the project by buying two 16*32 LED matrices online. I already had two Arduino Unos, so I used one to hook up the display and test it out using an online tutorial. I got the display working, but the Arduno Unos have so little memory that I had to upgrade to something better in order to run the LED screens. I already had some experience programming Arduino about 4 years ago, but I had mostly forgotten everything so I had to relearn it. The language used to program Arduinos is a mix of C/C++. The Metro M0 doesn’t have wifi capability out of the box, so I bought some ESP-2866s, which are little boards that can connect to wireless networks. I then hooked it up so the ESP board communicates to the Metro M0 over I2C. The LED Matrix needs to be powered by a 5v 3 Amp supply, so I bought two buck converters off Amazon that convert 12V DC from the standard 12V power cable to 5V, which can power both the Arduino and the LED matrix. I then used a wall adapter to power the buck converter.
The LED Board after I first got it running with the Arduino Uno
Arduino setup with the ESP Wifi board, matrix, and buck converter
After getting the display and boards working, I started on the app. I selected the firebase real-time database to allow communication between the LED board and the app since it's easy to set up and there was already a library for using it with ESPs. On the app I used a collection view of squares that change color when you tap them or swipe over them. This allows you to draw on the collection view. Each square represents a pixel on the LED Matrix. When you tap the send button after drawing something, it encodes the drawing into a string that contains the coordinates and 4 bit color of each pixel, which is then displayed on the LED matrix.
Drawing on the app and having it display on the LED matrix
Part of the code that encodes the pixels into a string to send to the display
The design plan I made for how the pixels would be encoded. My goal was to encode this in a low amount of characters to reduce lag.
My plan was to have each of the displays housed in a 3D-printed body. Since the display is very bright, I bought some acrylic that diffuses the light and makes it less glary. My friend then helped me cut the acrylic sheet into rectangles slightly larger than the display so that the 3D-printed box could have lips that overlaped the edges of the acrylic. I designed the 3D model on a program called FreeCAD, and made it fit the dimensions of the acrylic and LED matrix. I made it so that the acrylic would fit in the front, with the LED matrix behind it, and then the Arduino, ESP, and buck converter in the back. The whole thing has a backing plate that’s held in place by screws so that it can be removable.
Main body of the 3D print, with the backing plate in the rear
I also added a button and light sensor. The light sensor detects when it's dark and will lower the display brightness and show a less prominent animation when a new message is received. The button is used to progress through drawings you received if there are multiple in the queue. Finally, I super-glued the nuts into the 3D-printed casing and installed the acrylic through the back of the housing (bottom left). I then installed the button and light sensor at the top and put all the electronics in the case to figure out where it would go. Luckily, everything fit!
This is where the nut sits to secure the backing in place
Resisters and button soldered on to breadboard
After finishing the hardware, I worked the software for the app. I created a color selector for about 20 colors. I also added an undo, redo, and clear button so you can easily work on drawings. I created a separate view controller and layout for landscape mode (right image) that made the drawing space larger and compacted/hide some of the buttons.
When drawing, you can use the live preview button (red play button on landscape) to preview the drawing on your own display. This is useful because the colors can look different on the LED display than on the phone. The live preview will stay on and update your display when you make any changes on the app.
Drawing tab in landscape mode
Drawing tab in portrait mode
In portrait mode, you can tap the save button on the upper left to save a drawing for later. This saves the drawing locally on the device and will put it back on the canvas when you tap on it. This was difficult to do, as I had to convert the squares of the collection view to pixels in an image, and then increase the resolution to get rid of anti-aliasing (blurring) applied to the pixels. Holding on one of the images brings up the option to remove it.
There's an option on the lower right to change the message to be one-time or persistent. Persistent will show the drawing right away and stay up until the display's button is clicked. One-time will show a notification on the display and will show the drawing for 5 seconds once the button is clicked.
I also added a text tab that lets you easily type text to send as a message. You can choose to make the text scroll or make it fixed and rotate through the text (demo). The app allows you to change the scroll speed and text color.
Text tab in portrait mode
Finally, there's a log tab that shows the message history. I created this by using an inverted TableView so that you would scroll up to go back in time. Each cell shows what kind of message was sent, the date, and who sent it. I also added delivered and read receipts. The message won't deliver if the display is offline and it will only be marked as read when the other person presses the button on the display.
The image on the right shows a section of the database, which connects the phones and displays together.
Log tab
A portion of the realtime database for the project
Programmed with
Swift
C++
Utilizing
Xcode
Arduino IDE
Realtime Database
GitHub