Maker.io main logo

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

90

2026-01-12 | By Ron Cutts

License: GNU Lesser General Public License Displays LED / Display Drivers LEDs / Discrete / Modules Real Time Clocks (RTCs) Arduino

In this Visual Programming Visuino tutorial, we’ll use an ESP32-C3 development board with a 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 this ESP32-C3 board.

🎬 Watch the Video!

Step 1: What You Will Need

What You Will Need

What You Will Need

  1. ESP32 C3 board with OLED

  2. Visuino program: Download Visuino

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

Start Visuino, and Select the DIY More ESP32 C3 0.42

Start Visuino, and Select the DIY More ESP32 C3 0.42

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 in Picture 2

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

Step 3: In Visuino, Add Components

In Visuino Add Components

In Visuino Add Components

In Visuino Add Components

In Visuino Add Components

In Visuino Add Components

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

Step 4: In Visuino Set Components

In Visuino Set Components

In Visuino Set Components

In Visuino Set Components

In Visuino Set Components

In Visuino Set Components

In Visuino Set Components

In Visuino Set Components

In Visuino Set Components

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

imageimage

  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

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

Download Visuino file: ESP32 C3 OLED Stopwatch.visuino

Have questions or comments? Continue the conversation on TechForum, DigiKey's online community and technical resource.