Split Flap Display - (3D Printed, Modular, Compact & Enclosed, With Web Interface)

Here lies the instructions to build, assemble and program a compact, modular and fully enclosed 3D printed split flap display. I have always wanted one of these for my desk, but the majority of designs online are either too large, or leave electronics exposed, making the end result feel a bit too "DIY" for my liking.

So I just designed my own, the display consists of "modules" with 37 characters each. The modules are as small as I could realistically make them, given my motor choice. With each module being approx 40mm wide and 80mm tall, the full 8 module device comes out at only 320mm long, it doesn't look too big at all next to the scaling banana. The modules are designed to fit together easily, with only a 4 pin connector between each module, and the whole thing is powered through a USB-C power adaptor.

The display is controlled through a web interface which you can access if you are connected to the same network as the device. There are several different modes for operation, including custom text, date and time printing.

Hopefully i'll do a decent job of explaining how to build one of these, buckle up and enjoy.

You'll need a few bits and bobs for this project, here's the comprehensive list.

Tools

1. Soldering Iron
2. Wire Snips
3. 3D Printer
4. Pliers
5. Allen Keys

Electronics

1. ESP32 C3 SuperMini (1x Per Display)
2. 28BYJ-48 Stepper Motor (1x Per Character)
3. ULN2003 Stepper Motor Driver Board (1x Per Character)
4. PCF8575 IO Expander Module (1x Per Character)
5. 5V 3A USB Type C Power Adaptor (1x Per Display)
6. Circular USB C Panel Mount Power Connector (USB-C with two wires coming out) (1x Per Display)
7. A3144 Unipolar Hall Effect Sensor (1x Per Character)

Hardware

1. 2.5mm Pitch Prototyping Board
2. Some lengths of wire.
3. 2.0mm 4 Pin JST Connector Cables (Male and Female), with at least 60mm wire length (1x Pair Per Character)
4. 3mm Diameter x 1mm Thickness Neodymium Magnet
5. M3 X 30mm Countersunk Machine Screws (4x Per Character)
6. M3 x 8mm Countersink Machine Screws (4x Per Display)
7. M3 Nuts (4x Per Character + 8 for the display)
8. M3 x 4mm Depth x 5mm Width Heat In Brass Inserts (4x Per Display)
9. M3 Threaded Bar, length depending on number of characters (4x Per Display)
10. Black and White PLA Filament

Mechanical Design

The whole display is simply an bunch of character modules joined together. The motor is attached to a simple gear system in order to centre the output shaft and minimise the size of the character drum. Electonics can be slid into the module enclosure from any side, and a small plastic tab holds the hall effect sensor in place. M3 threaded shaft runs through all the modules and clamps the modules together. Endplates are mounted with 2 screws each and give the display a clean look, hiding all the screws. The character drum has a magnet placed at a specific location, which when detected by the hall effect sensor, allows us to accuractly control the position of the motor.

Electronics

Each module consists of:

1. 1x 28BYJ-48 Motor
2. 1x ULN2003 Motor Driver
3. 1x A3144 Hall Effect Sensor
4. 1x PCF8575 I2C GPIO Expander

The leftmost module, or "master" module, also contains

1. 1x ESP32 C3
2. 1x USB C Power Connector

The master module communicates with all the other module using an I2C bus. Each module has a different address on the bus, which is pre-set by soldering contacts on the back of the PCF8575.

Wiring

Wiring is relatively straightforward, but becomes more complex when you consider the small volume we need to pack everything into.

Download the print files and print as many modules as you need for your display.

Each module consists of these 3D Printed parts:

1. 1x Enclosure
2. 1x Motor Gear Plate
3. 1x Character Drum
4. 37x Flaps
5. 1x Motor Gear
6. 1x Centre Gear
7. 1x Wire Retainer

The files can be found here

You will need to remove support material for the enclosure and motor gear plate before assembly.

Note for printing flaps

I used a 0.2mm nozzle for printing the flaps for super crisp details, but 0.4mm will still work. I used a Bambu Lab A1 Mini without AMS, but with modified filament chance gcode in order to pause and manually change filament when required. Due to my small nozzle size, I was able to print at 0.1mm layer height, giving two layers for each characters white portion.

You can bend the flaps until they fit into the holes on the character drum. It helps to organize the flaps before assembly. It is important that the flaps around the magnet are the blank flaps, and that the next flap is the letter A. Follow the images for guidance.

Use a small dab of superglue to fix the magnet in position. You can use something flat to ensure the magnet is correctly seated.

IMPORTANT NOTE FOR INSTALLING MAGNETS

The hall effect sensors are unipolar, meaning they will only detect the magnet if it is in the correct orientation. You will need to build a module/test for yourself on a breadboard which magnet direction is correct.

1 . Remove LEDS from ULN2003 Motor Driver (Optional But Recommended)

Removing the LEDS can easily be done with pliers, no need to even use the soldering iron. This stops any light from seeping between the enclosure gaps and also allows us to route the motor cable without risk of it being snagged by the led pins.

2 . Bend Pins

Packaging requires that the black plastic base piece for the ULN2003 motor driver be removed, and then the pins bent so that the PCF8575 is at the correct angle inside the enclosure. The two power pins for the ULN2003 should also be bent so that the protoboard fits correctly as shown in the photos.

3 . Create Protoyping Board

Snap yourself a prototyping board with an area of 4x3 holes, as in the photos. This allows us to easily wire multiple connections in parallel to the board, to supply 5v to the motor driver, PCF8575 IO expander and ESP32 (master module only). The protoboard is also where the power wires of the 4 pin JST connectors are wired into.

Cut the connector wires so that there is approx 60-70mm of wire left after the connector, this will be the correct length for the enclosure.

You need to run two wires from the prototyping board to the PCF8575, for 5V power, before soldering the PCF8575 to the ULN2003

It is recommended to solder the protoyping board up before wiring to the ULN2003. Follow the photos is you are stuck.

3.1 (Master Module Only) - Solder Wires for ESP32 and Power Connector

The ESP32 and power connector have two wires each that need to be connected to the protoboard, this is only needed for the master module. The ESP32 also has two wires (SDA and SCL) which need to go to the PCF8575

4 . Solder I2C Communication Wires

Solder the white wires to SCL, and the yellow wires to SDA. You will need to strip and twist the wires together as there is only one hole for these on the PCF8575.

5 . Set Module I2C Address

Solder the pins on the back of the PCF8575 (A0,A1,A2) to set the address of the module.

6 . Solder PCF8575 to ULN2003

Directly solder the bent pins of the ULN2003 to pins PO1 to PO4 on the PCF8575, this is the neatest method I could come up with for wiring.

7 . Solder the Prototyping Board to the ULN2003

Make sure the 5V side of the board goes to the 5v pin on the ULN2003, if this is wrong, you will probably damage the ULN2003 (I know because I did it!) Do not use the photos as reference because this is the one that broke. :D

8 . Solder the Hall Effect Sensor

The sensor needs 5V, Gnd and a signal pin to run to P17 on the PCF8575.

9 . Attach Motor to Enclosure

Insert the motor and route the cable, the ears of the motor need to be bent so that they don't hit the character drum.

10 . Slide the Electronics Into the Enclosure

At this point, slide the completed electronics board into the module enclosure. Be careful of the hall effect sensor wires, these will need to be tucked under the threaded bar hole.

11 . Assemble the Module

Place the motor gear plate onto the motor, route the cable nicely and place the wire retainer in place, with the hall effect sensor also in its little slot. The M3x30mm screws can now be inserted. Use captive nuts on the gear plate to tighten the assembly together. Add the gears, with a little grease if assembling for final, followed by the assembled character drum.

1 . Download Code and Setup

Head to the project github, download the src repo and open with Arduino IDE 2.

You will need to install the following packages and plugins:

1. ESPAsyncWebServer & AsyncTCP - Installed Through IDE
2. LittleFS Plugin (For Uploading Files) Find Here

2 . Upload Web Server Files to ESP32 Flash

Press Cntr + Shift + P in the IDE, and select Upload LittleFS to ....

This will upload the HTML, CSS and JS for the web server onto the flash memory of the esp32.

3 . Configure and Upload Code

Enter the file "SplitFlapDisplay.cpp"

Change the numModules variable to reflect how many characters you have in your display

Ensure that the moduleAddresses variable correctly shows your module address, in order.

Compile and upload the code to the ESP32.

4 . Wifi Setup

Since the ESP32 does not initially know your wifi credentials, it will host it's own open WiFi network "Split Flap Display" which you can connect to to setup the device.

1. Connect to the network "Split Flap Display"
2. Open your browser and visit "splitflap.local" (This should bring you to the config page)
3. Go to settings, and enter the correct wifi credentials
4. The ESP32 will then attempt to connect, if fail, it will host it's own network again. If successful, the esp32 will connect to your network and stop hosting it's own access point.
5. After setup, the esp32 will remember the last used wifi credentials, so it should connect automatically.

At this point you should have a fully working, but floppy, split flap display.

Cut some M3 threaded rod. The formula for rod length is (Number of Modules*37.9) + 11mm

Use the sandwich plates to squash the modules together. Do not tighten the lower front screw too tight or it will jam the system.

Use a soldering iron to place heat-in inserts into the sandwich plates and mount the endplates. Push the USB-C connector through the endplate hole so it is still visable.

Showcase your Split Flap Display! Enjoy the Envy