ESP32-C3 LCD Kit - RGB LED Brightness & Random Color Using Visual Progra

2026-04-14 | By Ron Cutts

License: GNU Lesser General Public License Bluetooth / BLE I2C / TWI LED Strips Microcontrollers Arduino ESP32

In this Visuino project, you will learn how to use the ESP32-C3 LCD kit to control an RGB LED’s brightness with a rotary encoder. Turning the encoder adjusts the brightness in steps from 0 to 1 with 0.1 increments, and the current brightness level is shown directly on the LCD. Pressing the encoder’s button instantly sets a random LED color, making the project both fun and interactive.

This tutorial is perfect for learning how to:

Configure and Use the Rotary Encoder on ESP32-C3
Display live brightness values on the LCD screen
Randomize LED colors with a simple button press
Use Visuino Visual Programming to quickly design interactive IoT projects

Bring your ESP32-C3 LCD kit to life with this engaging RGB LED brightness controller!

Watch the Video!

Learn more about Visuino: What is Visuino

What You Will Need

ESP32-C3 LCD kit
Visuino program: Download Visuino

What You Will Need

What You Will Need photo 2

Start Visuino, and Select the ESP32-C3 LCD Kit 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 "ESP32-C3 LCD kit" as shown in Picture 2

Start Visuino, and Select the ESP32-C3 LCD Kit Board Type

Start Visuino, and Select the ESP32-C3 LCD Kit Board Type photo 2

In Visuino, Add Components

Add an Integer To Analog component

Add Analog Multi Source component

Add Color Value component

Add Random Color component

Add Debounce Button component

In Visuino Add Components

In Visuino Add Components photo 2

In Visuino Add Components photo 3

In Visuino Add Components photo 4

In Visuino Add Components photo 5

In Visuino Set Components

Select "IntegerToAnalog1" and in the properties set "Scale" to 0.1
Double click on the "Color Value" and in the Elements window add:
Set Value
Add another Set Value and in the properties window select "Color", click on the pin icon and select "Color SinkPin"

Select "ESP32-C3 LCD kit" board and in the properties window select "Modules" > "RGB LED" > "Brightness" , click on the pin icon and select "Float SinkPin"
Select "ESP32-C3 LCD kit" board and in the properties window select "Modules" > "Display" > "Elements" , 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 5, "X" to 60 and "Y" to 100
Select "ESP32-C3 LCD kit" board and in the properties window set "Rotary Encoder" > "Max" > "Value" to 10 and "Roll Over" to False, and "Min" > "Value" to 0 and "Roll Over" to False.

In Visuino Set Components

In Visuino Set Components photo 2

In Visuino Set Components photo 3

In Visuino Set Components photo 4

In Visuino Set Components photo 5

In Visuino Set Components photo 6

In Visuino Set Components photo 7

In Visuino Connect Components

Connect "ESP32-C3 LCD kit" > "Rotary Encoder" Pin [Out] to "IntegerToAnalog1" Pin [In]
Connect "IntegerToAnalog1" Pin [Out] to "MultiSource1" Pin [In]
Connect "MultiSource1" Pin [0] to "ESP32-C3 LCD kit" > "RGB LED" Pin [Brightness]
Connect "MultiSource1" Pin [0] to "ESP32-C3 LCD kit" > "Display" > "Text Field1" Pin [In]
Connect "ESP32-C3 LCD kit" > "Rotary Encoder" Pin [Press] to "Button1" Pin [In]
Connect "Button1" pin [Out] "RandomColor1" Pin [Clock]
Connect "RandomColor1" Pin [Out] "ColorValue1" > "Set Value2" Pin [Value]
Connect "RandomColor1" Pin [Out] "ColorValue1" > "Set Value2" Pin [In]
Connect "RandomColor1" Pin [Out] "ColorValue1" > "Set Value1" Pin [In]
Connect "ESP32-C3 LCD kit" > "Rotary Encoder" Pin [Up] to "ColorValue1" > "Set Value1" Pin [In]
Connect "ESP32-C3 LCD kit" > "Rotary Encoder" Pin [Down] to "ColorValue1" > "Set Value1" Pin [In]
Connect "ESP32-C3 LCD kit" > "Rotary Encoder" Pin [Up] to "ColorValue1" > "Set Value2" Pin [In]
Connect "ESP32-C3 LCD kit" > "Rotary Encoder" Pin [Down] to "ColorValue1" > "Set Value2" Pin [In]
Connect "ColorValue1" Pin [Out] to "ESP32-C3 LCD kit" > "RGB LED" Pin [In]

In Visuino Connect Components

In Visuino Connect Components photo 2

In Visuino Connect Components photo 3

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.

Generate, Compile, and Upload the Code

Play

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