Battleship Computer With ESP32 / WS2812 LED Stripe

by cuci90 in Circuits > Microcontrollers

255 Views, 0 Favorites, 0 Comments

Battleship Computer With ESP32 / WS2812 LED Stripe

IMG_20240316_162912.jpg
IMG_20240309_075255.jpg
IMG_20240309_075202.jpg

Here you can build your very own battlehisp computer using ESP32-2432S028R (CYD).

WS2812 LED stripe is used to display the hits on the battlefield.

Supplies

  • 1x WS2812b LED Stripe 60 LED/M (Amazon) ~ 40€
  • 8x 21x22cm MDF 3mm panels (alternatively: 6x 3mm & 2x 6mm) ~ 5€
  • 2x 21x22cm acrylic glas opal (Hornbach) ~ 8€
  • 4x Elbow connector 40x40mm (Hornbach Winkelverbinder) ~ 4€
  • 8x 3x10mm screws with normal head (Hornbach) ~ 1€
  • 8x 3x10mm screws countersunk bolt (Hornbach) ~ 1€
  • 4x 3x12mm screws countersunk bolt ~ 1€
  • 12x 3mm nuts (Muttern) ~ 1€
  • 16x 3mm ring washer (Unterlegsscheibe) ~ 1€
  • 2x ESP32 Display (Aliexpress) ~ 35€
  • 2x Micro USB board ~ 1€
  • 2x 330 Ohm resistor ~ 1€
  • 1,25 mm JST 4 Pin cable ~ 1€


Miscellaneous

  • Some wires
  • 3D printed parts ~ 3€
  • Soldering iron

Total expenses: ~ 68€

Prepare the Parts

  1. Print all the 3D printed parts. You will need:
  2. 2x display_v6
  3. 2x grid-final2.1
  4. 2x MicroUSBHolder
  5. 2x each Seitenteil
  6. In case you have a lager wooden plate. Cut it into the mentioned dimensions.
  7. Cut the LED stripe into 20 pieces with each 10 LEDs.

Build the Battle Grid

LEDsripes.jpg
LEDs_with_grid.jpg
LEDgridComplete.jpg
grid_cutouts.jpg
top_grid_complete.jpg

Use the printed LED grid to draw refernce points on the wooden panel to see where to place the LED stripes. Just align the grid on the plate and draw with a pencil the inside square for each row on the left and on the right.

On the bottom there should be enough space, so the elbow connector can later be installed there.

Now use the double sided tape of the LED stripes to glue down the LED stripes onto the panel. They must be arranged in a snake pattern. Means Dout on the first row must be on the very right. Din of the second row must be also on the right. Its Dout must be on the very left and so on.

Solder all LED stripes in this snake pattern together like shown in the picture.

The wires connected to the first LED on the top left, should be long enough to reach at least the middle of the bottom plate (which will be installed later). Don't forget to solder the resistor somwhere in between the data cable.

When finished check where there are solder points within the LED stripes, where different stripes have been soldered together by the factory. See picture. Align the printed grid on the stripes and cut out a part of the 3D printed grid, so the grid is lying flat on the LED stripes.

Finally glue the grid down with some hot glue.

Build the Frame

glued_edges_top.jpg
IMG_20240304_074507.jpg
aligned_elbow_connectors.jpg
elbow_connectors.jpg
plates_connected.jpg

Glue 2 of the MDF plates together (2x). Preferrably with wood glue.

Glue all the 3d printed side parts to the edges of bottom and top MDF plates.

Align the elbow connector and drill holes on the bottom and top plate. I bent the elbow connectors a bit so the angle is a bit lager than 90°. Finally screw it down with the screws:

  • For the top plates use the normal head screws
  • For the bottom plates use the countersunk bolt screws
  • On the top of the elbow connector (where the screws come) out use some 3mm washers
  • Tigthen everything with the nuts

Align the USB port and drill 2 holes. Screw it down with the larger 12mm screws and nuts on the top.

Bottom Grid

bottom_plate_template.jpg
bottom_plate_drill.jpg
bottom_plate_complete.jpg

Print out the drill help and use tape so it will not move during drilling. Also set down the display temporarily to check if there is enough space for the display. Also leave some space a the top and left side so later the coorination grid can be put on.

Drill the holes and remove the drill help paper.

Drill one bigger hole where the display will sit.

Downloads

Prepare the Code and Display

Follow this Github instruction to upload the programs to the displays:

https://github.com/cuci90/battleship-ESP32



Wiring

wires.jpg
IMG_20240307_182414.jpg
  • Solder the 5V and GND wires coming from the LED grid to the wires from the USB port
  • Connect also 2 shorter wires to 5V and GND (this will be later connected to the display)
  • Use the JST cables to connect to the P1 connector of the display.
  • For the CN1 connector you can use JST cable already received with the display.
  • Connect VIN from the P1 to the 5V from the micro USB
  • Connect the GND from the P1 to the GND of the micro USB
  • Connect the IO22 from the CN1 to the data cable of the LED stripe

Corrdination Help Grid

FS4BDGNLTU3LJU2.jpg

Now you can decide if you want to print the coordinate grids or just leave it without.

Or send it to a foil plotting company like I did to get a perfect grid.

Final

F8TEHZ5LTIO2M08.jpg
IMG_20240306_085843.jpg

You can find the ships for the bottom grid here:

https://www.thingiverse.com/thing:6523652

Unfortunately I cannot share the aircraft carrier due to license, but you can use this model and drill the respective holes yourself: https://www.thingiverse.com/thing:889091

For the pins of the ships I used acrylic screws, glued it in and just cut the head. But you can use whatever you like which is 3mm wide.

Now plug it in and you have your own Battleship Game Computer!