Introduction: Bluetooth LED Drawing Board and IOS App
In this tutorial, you will be able to create a Bluetooth LED board that can draw pictures from the iPhone app we create. In this app, the users will be able to create a Connect 4 game which will also be displayed on this gameboard. This will be a cheap but effective version so everyone can build and explore! In all, I will explain the basic concepts which can be changed but have the same effect. For example, my led board contains 88 LEDs. This number can be increased or decreased depending on preference, time, or size of the board.
Parts Required:
ws2812b led lights(or equivalent) - $21
5v 10 amp power adapter(my project draws around 5 amps if fully on) - $18
Foam Board(received mine at the dollar store) - $1
Any type of wood(received at Menards) - $10
Acrylic plexiglass(cloudy/white, also at Menards) - $10
Arduino Nano - $8
(eBay) Bluetooth Module HM-10 Device - $3 (Amazon) Bluetooth Module HM-10 Device - $10
Overall, from scratch, this project costs no more than $75 and can be fun for kids or a cool light show! I like to look at eBay for cheap parts, however, watch for scams or broken parts. Smaller versions can be made to save even more time. LED matrix is available to create small sizes of this board. Just remember to change how many LEDs that are being used in the Arduino code and the IOS app
Step 1: Decide Size and Cut
Things to consider for size is how many LEDs there are for the project, how much wood there is, and how large the squares are for each led.
Dimensions of Board:
Top facing board: 20" by 27"
Cut out in middle: 23" by 16"
Side: 0.75" tall + bottom face and top face thickness = 1.75" thick
The thickness of wood: 1/2"
The dimension of the foam board:
each square is 2"
The dimension of LEDs:
Width: 8 LEDs
Height: 11 LEDs
Total: 88 LEDs
Step 2: Wire LEDs
Cut each piece of LED and place it in the middle of each square. Strip wires according to the length needed to each LED. The data line will travel from column to column. Start with the first LED and solder to the next all the way until the 11th LED. Once at the top, strip a piece of wire that reaches all the way down to the next led to the right of the first one. When working with the positive and negative on the LED, continue soldering from each LED until you reach the last led in the column. I created two bus bars of wire, one positive, one negative, and attached it to each column. To connect them. I stripped the middle of the wire and soldered from there to the LED. The two positive and negative bus wires are connected to the gnd on the Arduino and the VIN pin on the Arduino which is also touching the power from the outlet. The first LED has a wire going to pin D3 on the Arduino Nano board. This can be changed according to preference.
I use hot glue to glue wires, LEDs, and foam down after I plugged in and saw everything working.
Step 3: Assemble Wood
Glue the wood pieces together using any type of wood glue or liquid nails. For extra support, I added small pieces of wood and glued them in the corners where the back meets each side. I bought two 12" brackets from Menards and screwed it in the top piece and side piece of the board so it opens like a door. I did this in case any LED malfunctions or I want to add more components later on.
Step 4: Add Arduino and Bluetooth
Add a DC Jack to the back of the board. The far back metal plate is positive while the middle plate is negative. This provides an easy way to plug in and unplug the board. I let the dc jack dangle a bit instead of making it secure in the box in case I wanted to hang this on the wall. Otherwise, the back would be sticking far out because of the cord that plugs in would be against the wall. The positive plugs into the VIN on the Arduino Nano while the negative goes to the ground. The LED's positive and negative will also be soldered to the VIN and ground.
I uploaded a diagram for the HM-10 module and the Arduino Nano. the HM10 TXD enters the RXD pin on the Nano while the RXD pin on the HM10 is connected to the TXD pin on the Arduino. This happens because the Nano is reading what the Bluetooth Module wrote and vice versa. Also, connect the VIN to the +5v on the Arduino and connect the grounds together.
Finally, the switch or button is optional between the Arduino RXD and the HM10 TXD. For some reason, many people cannot upload new code when they are connected so it makes it easy to disconnect them every time code is uploaded then switch them back together after the upload.
Once done, check to see if everything works. If so, hot glue all the wires down and make it look nice. Remember, there is no such thing as too much glue.
Step 5: Write the IPhone App
I will provide the Xcode project in the description. I have 3 Bluetooth classes that connect to the BLE Device and send it information. ScannerViewController searches for each available Bluetooth Low Energy device. BluetoothSerial describes each process of connecting/disconnecting from the selected device and can send the data. Finally, the SerialViewController is the main view of the app. I have a collectionView with a double array that contains each HSB value and stores it for later use if the user wants to return to the color they had.
The user can use the color wheel to select a color which can also be saved for later. The user then can draw with the color chosen. There is a fill button along with an undo.
In the connect 4 section, the user can choose between different game modes to challenge other players. Each move will send data to the Arduino Nano and HM-10 device which will be displayed on the screen. You can always edit these images since they look pretty bad.
Every time a cell is pressed, it sends the code (for example) "P; 15; 0.56; 0.81; 1\n". The P stands for "Play" which I set the Arduino to recognize and it will display colors for the 15th cell. The colors are the next 3 values that are sent. It is Hue, Saturation, and Brightness. It is important to add the \n at the end so the Bluetooth module knows when to stop reading the incoming data. To clear the display, I send the code "z\n". When receiving a "z" for the first letter, I set it to clear the board. And of course, I finish it with \n to let the HM10 device know when to stop reading the data.
If there are any questions, please feel free to leave it in the comments :)
Step 6: Arduino Code
I will provide the Arduino code that is to be uploaded to the Nano. This code receives each character individually and combines and stores it in an array. When using the array, each value(hue, saturation, brightness) that was sent to the array is split between the comma. This then changes the color of the necessary pixel on the board. The same concept goes with the connect 4 portion. Hue, Saturation, and Brightness are sent from the IOS app and delivered to the Arduino along with which pixel on the board that should be colored.
Again, if there are any questions about the code then let me know in the comments :)
Step 7: Customize to Your Style!
Remember, this project is for fun and can be personalized. Paint the wood or add designs. Make the LEDs react to music by adding a microphone and a small speaker. Add touch sensitive using IR sensors. Insert scrolling text in the Arduino or IOS App. Add a new game mode in the IOS app. Tetris is another option to add.
This project is basic in hopes to inspire others to create something big and innovative out of this. Thank you for the support!
Step 8: Arduino Code and IOS Code
Here is the link to the Swift and Arduino project on GitHub. If there are any troubles, please let me know.
Step 9: Whats New? + Recently Updated Code
In the newest update, users are able to fill the whole grid with one color instead of tapping all of them. There is an undo button in case there is an accident. Finally, the new Animations mode where the user can choose or add new animations to play for the board.
New Animations Include -
Fading Colors - Fades random colors periodically.
Breathing Rainbow - Moves colors of the rainbow around in one large horizontal line.
Animations work more on the Arduino side rather the phone side. When pressed, the phone sends a line of code for the Arduino to execute(for example) "A;0\n". "A" stands for Animation and the "0" is the first animation pressed which is Fade Colors. The Arduino reads the 0 and plays the fades color animation.