Make ESP32-C3 0.42″ OLED Stopwatch – Visual Programming With Visuino

In this Visual Programming Visuino tutorial, we’ll use the ESP32-C3 development board with its built-in 0.42″ OLED display to create a compact and accurate digital stopwatch.

This project demonstrates how to build a fully functional stopwatch using only the ESP32-C3 board, making it ideal for learning timing concepts, quick prototypes, and compact embedded projects.

Note: No external display modules or timing components are required — the OLED is already built into the ESP32-C3 board.

🎬 Watch the Video!

Step 1: What You Will Need

1. ESP32 C3 OLED
2. Visuino program: Download Visuino

Step 2: Start Visuino, and Select the DIY More ESP32 C3 0.42" OLED Board Type

Start Visuino as shown in the first picture Click on the "Tools" button on the Arduino component (Picture 1) in Visuino When the dialog appears, select "DIY More ESP32 C3 0.42" OLED" as shown on Picture 2

Note: there are a few different ESP32 C3 OLED boards to choose, make sure that you select the one that fits your board

Step 3: In Visuino Add Components

1. Add "Debounce Button" component
2. Add "Toggle(T) Flip-Flop" component
3. Add "Detect Edge" component
4. Add "Pulse Generator" component
5. Add 2X "Counter" component
6. Add "Divide Integer By Value" component
7. Add "Formatted Text" component
8.  

Step 4: In Visuino Set Components

1. Select "PulseGenerator1" and in the properties window select "Enabled" and click on the pin icon and select "Boolean SinkPin"
2. Select "Counter2" and in the properties window set "Max" > "Value" to 59 and "Min">"Value" to 0
3. Select "DivideByValue1" and in the properties window set "Value" to 60
4. Double click on "FormattedText1" and in the "Elements" window drag 2X "Text Field" to the left side
5. Close the "Elements" window
6. Select "FormattedText1" and in the properties window set "Text" to %0:%1

Select DIY More ESP32 C3 0.42" OLED and in the editor Modules>Display>Elements, click on [...] button, so that "Elements" window will open.

1. "In the Elements Dialog drag "Draw Text" from the right side to the left and in the properties window set "Text" to Stopwatch
2. In the Elements Dialog drag 2X "Text Field" from the right side to the left
3. Select "Text Field2" and in the properties window set "Y" to 15, and "Size" to 2

Close the Elements Dialog

Step 5: In Visuino Connect Components

1. Connect "Arduino" > "Modules" > "Button" pin [Out] to "Button1" pin [In]
2. Connect "Button1" pin [Out] to "TFlipFlop1" pin [Clock]
3. Connect "TFlipFlop1" pin [Out] to "DetectEdge1" pin [In]
4. Connect "TFlipFlop1" pin [Out] to "PulseGenerator1" pin [Enabled]
5. Connect "DetectEdge1" pin [Out] to "Counter1" pin [Reset]
6. Connect "DetectEdge1" pin [Out] to "Counter2" pin [Reset]
7. Connect "PulseGenerator1" pin [Out] to "Counter1" pin [In]
8. Connect "PulseGenerator1" pin [Out] to "Counter2" pin [In]
9. Connect "Counter1" pin [Out] to "DivideByValue1" pin [In]
10. Connect "DivideByValue1" pin [Out] to "FormattedText1" > "TextElement1" pin [In]
11. Connect "Counter2" pin [Out] to "FormattedText1" > "TextElement2" pin [In]
12. Connect "FormattedText1" pin [Out] to "Arduino" > "Modules" > "Display" > "Text Field1" pin [In]

Step 6: Generate, Compile, and Upload the Code

In Visuino, at the bottom click on the "Build" Tab, make sure the correct port is selected, then click on the "Compile/Build and Upload" button.

Step 7: Play

Congratulations! You have completed your Internet Time project with Visuino. Also attached is the Visuino project, that I created for this Tutorial. You can download and open it in Visuino: https://www.visuino.eu