Introduction: ESP32 Based TalkTimer for Conferences With Large 7-segment Displays and Web-interface

By
About: Arduino enthousiast

A friend that is hosting conferences complained it was always a struggle to get the speakers to end their talk in the right time. Waving paper signs with the remaining time didn't always get noticed. So to the rescue with some 3d printed displays, ws1812 addressable led strips and an esp32

Supplies

Materials :

  • esp32 wroom
  • ws2812 led strip 60 leds/meter, 108 led's are used for my version of this project
  • Wire that can handle the current for all the led's to be lit at maximum power
  • power supply that can handle the current for all the led's to be lit at maximum power (warning : USB charger will not cope)
  • Window tinting foil; I used the cheapest available from a dollar store equivalent
  • Black filament if you print the segments
  • White filament if you print the segments


  • Some wood for building an enclosure if you prefer
  • Plexiglas for a front
  • Screws
  • Hot glue


Tools :

  • 3d Printer if you print the display segments
  • Wire cutter and stripper
  • Soldering iron
  • Woodworking equipment to build the enclosure and plexiglass front
  • Knife to trim the led strip and tinting foil

Step 1: 3d-print the Needed 7-segment Displays

For this project I wanted to be able to let the clock count down a maximum of 1 digit for hours. Some talks take more then an hour, most take up to an hour, but never more than 9 hours. So I printed 5 7-segment displays and 2 segments with the dividing dots to be able display the remaining time in hours, minutes and seconds. I cannot find the exact design for this display anymore, but any design will suffice if the number of led's per segment is the same or you are willing to tweak some settings in the code.

I built an enclosure for the segments from some wood to increase the rigidity and to be able to put a handle on top for easy transportation.

Step 2: Connection the LED Strips

All the led strips are connected in a chain for every led to be individually addressable by the ESP32. I started on the left and used the following diagram to connect every strip :

    3  4  5            26 27 28      47 48 49          70 71 72      91 92 93
  2          6       25        29  46        50      69        73  90        94
  1          7  21   24        30  45        51  65  68        74  89        95
  0          8       23        31  44        52      67        75  88        96
    11 10  9           34 33 32      55 54 53          78 77 76      99 98 97
  12        20       35        43  56        64      79        87  100       108
  13        19  22   36        42  57        63  66  80        86  101       107
  14        18       37        41  58        62      81        85  102       106
    15 16 17           38 39 40      59 60 61          82 83 84     103 104 105

Be sure to wire the + and - of the strip to separate wires that go to the power supply, do not attach them to the ESP32for power as this will release the magic smoke from from it! Only the ground and data line are attached to the ESP32.

In my code the data pin of the led strip is connected to pin 22 of the ESP32

Step 3: Testing the Strip

After the strip was connected I loaded some example code to the ESP32 to test if every led was working correctly. I used the strandtest example from the library for this.


Step 4: Program the Clock and the Web-interface for Controlling the Clock

Now came the hardest part; programming the clock and the web-interface for controlling the clock.

The clock itself isn't always visible to the clock operator, so I set myself to display the same time the clock was displaying on a webpage for the operator who is also able stop stop the clock and set the end time. I hadn't used the web server on the ESP32 for something like this before to this was quite the learning challenge. In the end I used some static pages for the framework and JavaScript and JSON data to update certain elements in the page dynamically on every half second.

The clock uses a WIFI network to get the NTP time from internet and uses that to calculate the remaining time according to the timezone that is set in the config webpage of the clock. Here you also choose whether clock should count down to zero and stop there, or if it should continue to count the time past the end time. The wifi is set-up via a captive portal that will show if no known network is found.

The clock starts in a white display color, when there are 10 minutes left till the end time the clock color turns yellow, with 5 minutes left it will turn orange and at the end time it will turn red.


See the code on github for programming the ESP32, the sources to the used libraries are linked in the code

https://github.com/WRusman/ArduinoProjects/tree/master/TalkTimer

Step 5: Finishing Touches

After some testing I found the contrast between a lit and unlit segments sometimes hard to see, that is why I put some plexiglass with the window tinting foil in front of the segments. This helped a lot!.