ESP32-C3 LCD Kit – RGB LED Countdown Timer Using Visual Programming

In this Visuino project, you will learn how to use the ESP32-C3 LCD Kit to create a colorful Countdown Timer using a rotary encoder, an LCD display, and an RGB LED. Turn the encoder to set the countdown duration, press the button to start the timer, and watch the countdown update live on the LCD screen. During the countdown, the RGB LED glows green, and when the timer reaches zero, it instantly switches to red, clearly signaling that the time is up — all without writing a single line of code!

This tutorial is perfect for learning how to:

1. Use the rotary encoder to set and start a countdown timer
2. Display live countdown updates on the ESP32-C3 LCD screen
3. Control an RGB LED to show timer status (green for active, red for time-up)
4. Design interactive timing projects with Visuino Visual Programming

Bring your ESP32-C3 LCD Kit to life with this vibrant and practical RGB LED Countdown Timer project!

Download Project file at the bottom

Watch the Video!

1. ESP32-C3 LCD kit
2. Visuino program: Download Visuino

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 "ESP32-C3 LCD kit" as shown on Picture 2

1. Add "Debounce Button" component
2. Add "Digital (Boolean) Inverter (Not)" component
3. Add 2X "Digital Multi Source" component

1. Add "Toggle(T) Flip-Flop" component
2. Add "Pulse Generator" component
3. Add 3X "Integer Multi Source" component
4. Add "Integer Multi-Source Merger" component
5. Add "Up/Down Counter" component
6. Add "Divide Integer By Value" component
7. Add "Multiply Integer By Value" component
8. Add "Subtract Integer Value" component
9. Add "Formatted Text" component
10. Add "Compare Integer Value" component
11. Add 2X "Color Value" component
12. Add "Color Toggle Switch" component

1. Select "MultiSource1" and in the properties window set "Output Pins" to 3
2. Select "UpDownCounter1" and in the properties window select:"Initial Value" and set 10
3. and set "Max > Roll Over" to False and "Min > Roll Over" to False and Min Value to 0.
4. Select "PulseGenerator1" and in the properties window Select "Enabled" and click on the pin icon and select "Boolean SinkPin" and set "Enabled" to False
5. Select "MultiSource2" and in the properties window set "Output Pins" to 3

1. Select ESP32-C3 LCD kit > "Modules" "RotaryEncoderSensor1" and in the properties window select:"Initial Value" and set 10 and set "Max > Roll Over" to False and "Min > Roll Over" to False and Min Value to 0

Also set "Clock Mode" to Rising and "Debounce Interval (mS)" to 5

.

1. Select "DivideByValue1" and in the properties window set Value to 60
2. Select "MultiplyByValue1" and in the properties window set Value to 60
3. Select "SubtractValue1" and in the properties window select Value and click on the Pin Icon and select "Integer SinkPin"
4. Select "FormattedText1" and in the properties window set "Text" to: %0:%1
5. Double click on "FormattedText1" and in the Elements window drag 2X "Text Element" to the left side and for both in the Properties window set "Fill Character" to 0 and "Length" to 2
6. Select ESP32-C3 LCD kit > "Modules" >"Display" > "Elements" and click on the 3 dots button, and in the Elements window drag "Text Field" to the left side and in the properties window set "Size" to 6 "X" to 45 and "Y" to 100, "Color" to aclTurquoise
7. Select "ColorValue1" and set "Value" to ClRed
8. Select "ColorValue2" and set "Value" to ClGreen

1. Connect ESP32-C3 LCD kit > Rotary Encoder pin [Press] to "Button1" pin [In]
2. Connect ESP32-C3 LCD kit > Rotary Encoder pin [Out] to "MultiSource2" pin [In]

1. Connect "Button1" pin [Out] to "Inverter1" pin [In]
2. Connect "Inverter1" pin [Out] to "MultiSource1" pin [In]
3. Connect "MultiSource1" pin [Out][0] to "UpDownCounter1" pin [Reset]
4. Connect "MultiSource1" pin [Out][1] to "FormattedText1" pin [Clock]
5. Connect "MultiSource1" pin [Out][2] to "TFlipFlop1" pin [Clock]
6. Connect "DivideByValue1" pin [Out] to "IntegerMultiSource1" pin [In]
7. Connect "IntegerMultiSource1" pin [Out][0] to "FormattedText1" pin [Clock]
8. Connect "IntegerMultiSource1" pin [Out][0] to "FormattedText1" > "TextElement1" pin [In]
9. Connect "IntegerMultiSource1" pin [Out][1] to "MultiplyByValue1" pin [In]
10. Connect "MultiplyByValue1" pin [Out] to "SubtractValue1" pin [Value]
11. Connect "SubtractValue1" pin [Out] to "FormattedText1" pin [Clock]
12. Connect "SubtractValue1" pin [Out] to "FormattedText1" > "TextElement2" pin [In]
13. Connect "FormattedText1" pin [Out] to ESP32-C3 LCD kit > Modules.Display.Elements.Text Field1 pin [In]
14. Connect "FormattedText1" pin [Out] to ESP32-C3 LCD kit > Modules.Display.Elements.Text Field1 pin [Clock]
15. Connect "DisplayOLED1" pin [Out] to "Arduino" > "I2C" pin [In]
16. Connect "UpDownCounter1" pin [Out] to "IntegerMultiMerger1" pin [In][0]
17. Connect "IntegerMultiMerger1" pin [Out] to "IntegerMultiSource2" pin [In]
18. Connect "IntegerMultiSource2" pin [Out][0] to "DivideByValue1" pin [In]
19. Connect "IntegerMultiSource2" pin [Out][1] to "SubtractValue1" pin [In]
20. Connect "IntegerMultiSource2" pin [Out][2] to "CompareValue1" pin [In]
21. Connect "IntegerMultiSource2" pin [Out][3] to "FormattedText1" pin [Clock]
22. Connect "CompareValue1" pin [Out] to "ToggleSwitch1" pin [Select]
23. Connect "ColorValue1" pin [Out] to "ToggleSwitch1" pin [True]
24. Connect "ColorValue2" pin [Out] to "ToggleSwitch1" pin [False]
25. Connect "ToggleSwitch1" pin [Out] to Connect ESP32-C3 LCD kit > Modules.RGB LED pin [In]
26. Connect "PulseGenerator1" pin [Out] to "DigitalMultiSource1" pin [In]
27. Connect "DigitalMultiSource1" pin [Out][0] to "UpDownCounter1" pin [Down]
28. Connect "DigitalMultiSource1" pin [Out][1] to "FormattedText1" pin [Clock]
29. Connect "MultiSource2" pin [Out][0] to "IntegerMultiMerger1" pin [In][1]
30. Connect "MultiSource2" pin [Out][1] to "UpDownCounter1" pin [Reset]
31. Connect "MultiSource2" pin [Out][2] to "UpDownCounter1" pin [InitialValue]
32. Connect "TFlipFlop1" pin [Out] to "PulseGenerator1" pin [Enabled]
33. Connect "UpDownCounter1" pin [MinReached] to "TFlipFlop1" pin [Reset]

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.

When you power On the ESP32-Kit, the OLED display will show the default countdown time of 00:10.

You can easily adjust the countdown time by rotating the rotary encoder left or right. Once you've set your desired time, simply press the encoder button to start the countdown.

During the countdown, you can pause or resume at any time by pressing the button again.

When the countdown reaches zero, a red LED will turn ON to signal that the time is up.

During the countdown, the RGB LED glows green, and when the timer reaches zero, it instantly switches to red, clearly signaling that the time is up

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