ESP32 - LED - Fade

In this tutorial, we are going to learn:

Hardware Required

1×ESP-WROOM-32 Dev Module
1×Micro USB Cable
1×LED
1×220 ohm resistor
1×Breadboard
2×Jumper Wires
Please note: These are affiliate links. If you buy the components through these links, We may get a commission at no extra cost to you. We appreciate it.

About LED

Pinout

LED includes two pins:

  • Cathode(-) pin needs to be connected to GND (0V)
  • Anode(+) pin is used to control LED's state
  • LED Pinout

How It Works

After connecting the cathode(-) to GND:

  • If connecting GND to the anode(+), LED is OFF.
  • If connecting VCC to the anode(+), LED is ON.
  • If generating a PWM signal to the anode(+), the brightness of LED is changed according to PWM value. PWM value varies from 0 to 255. The bigger PWM value is, the brighter LED is. The smaller PWM value is, the darker LED is.
    • If PWM value is 0, it is equivalent to GND, therefore, LED is OFF
    • If PWM value is 255, it is equivalent to VCC, therefore, LED is fully ON
    • How LED Works

※ NOTE THAT:

For most of LED, it needs to use a resistor between the anode(+) and VCC. The value of the resistor depends on the specification of LED.

ESP32 - fade LED

Some of ESP32 pins can be programmed to generate PWM signal. We can fade LED by connecting LED's anode(+) pin to an ESP32's pin, LED's cathode(-) to GND, and programming generate PWM on the ESP32's pin.

Wiring Diagram

ESP32 LED Wiring Diagram

Image is developed using Fritzing. Click to enlarge image

How To Program

  • Configure an ESP32's pin to the digital output mode by using pinMode() function. For example, pin GIOP18:
pinMode(18, OUTPUT);
  • Set brightness of LED by generating the corresponding PWM signal by using analogWrite() function:
analogWrite(18, brightness);

Where brightness is a value from 0 to 255.

ESP32 Code - Simple Fade Example

Quick Steps

  • If this is the first time you use ESP32, see how to setup environment for ESP32 on Arduino IDE
  • Connect the ESP32 board to your PC via a micro USB cable
  • Open Arduino IDE, select the right ESP32 board and COM port
  • Copy the below code and open with Arduino IDE
/* * Created by esp32io.com * * This example code is in the public domain * * Tutorial page: https://esp32io.com/tutorials/esp32-led-fade */ const int LED_PIN = 18; // GIOP18 pin connected to LED int brightness = 0; // how bright the LED is int fadeAmount = 5; // how many points to fade the LED by // the setup routine runs once when you press reset: void setup() { // declare pin GIOP18 to be an output: pinMode(LED_PIN, OUTPUT); } // the loop routine runs over and over again forever: void loop() { // set the brightness of pin GIOP18: analogWrite(LED_PIN, brightness); // change the brightness for next time through the loop: brightness = brightness + fadeAmount; // reverse the direction of the fading at the ends of the fade: if (brightness <= 0 || brightness >= 255) { fadeAmount = -fadeAmount; } // wait for 30 milliseconds to see the dimming effect delay(30); }
  • Click Upload button on Arduino IDE to compile and upload code to ESP32 board
  • Arduino IDE Upload Code
  • See the brightness of LED

Code Explanation

Read the line-by-line explanation in comment lines of code!

※ NOTE THAT:

The above example uses the delay() function to fade-in and fade-out. The delay() function makes the LED fade unsmoothly and blocks other code. In the next parts, we will learn how to fade-in and fade-out smoothly without blocking other code by using millis() function

How to fade-in LED in a period without using delay()

/* * Created by esp32io.com * * This example code is in the public domain * * Tutorial page: https://esp32io.com/tutorials/esp32-led-fade */ const int LED_PIN = 18; // GIOP18 pin connected to LED unsigned long FADE_PEDIOD = 3000; // fade time is 3 seconds unsigned long fadeStartTime; // the setup routine runs once when you press reset void setup() { pinMode(LED_PIN, OUTPUT); // declare pin GIOP18 to be an output fadeStartTime = millis(); } // fade-in in loop, and restart after finishing void loop() { unsigned long progress = millis() - fadeStartTime; if (progress <= FADE_PEDIOD) { long brightness = map(progress, 0, FADE_PEDIOD, 0, 255); analogWrite(LED_PIN, brightness); } else { fadeStartTime = millis(); // restart fade again } }

How to fade-out LED in a period without using delay()

/* * Created by esp32io.com * * This example code is in the public domain * * Tutorial page: https://esp32io.com/tutorials/esp32-led-fade */ const int LED_PIN = 18; // GIOP18 pin connected to LED unsigned long FADE_PEDIOD = 3000; // fade time is 3 seconds unsigned long fadeStartTime; // the setup routine runs once when you press reset void setup() { pinMode(LED_PIN, OUTPUT); // declare pin GIOP18 to be an output fadeStartTime = millis(); } // fade-out in loop, and restart after finishing void loop() { unsigned long progress = millis() - fadeStartTime; if (progress <= FADE_PEDIOD) { long brightness = 255 - map(progress, 0, FADE_PEDIOD, 0, 255); analogWrite(LED_PIN, brightness); } else { fadeStartTime = millis(); // restart fade again } }

Video Tutorial

We are considering to make the video tutorials. If you think the video tutorials are essential, please subscribe to our YouTube channel to give us motivation for making the videos.

Challenge Yourself

Change the brightness of LED using potentiometer . Hint: Refer to ESP32 - Potentiometer.

Additional Knowledge

  • PWM signal generated by analogWrite() function fades a LED. That is because it's high-frequency PWM. If we create a customized function (required advanced knowledge), which generates low-frequency PWM signal, LED will be blinked instead of faded.
  • Summary: PWM signal can be used in ESP32 to: control servo motor, control DC motor, make sound using a piezo buzzer, fade LED, blink LED ...

LED on Commercial Products

Small LEDs usually are used to indicate the status of devices. For examples:

Big LEDs usually are used for lighting. They can be combined into groups. For examples:

Function References

※ NOTE THAT:

Note that this tutorial is incomplete. We will post on our Facebook Page when the tutorial is complete. Like it to get updated.

※ NOTICES

  • We are AVAILABLE for HIRE. See how to hire us to do your project
  • If this tutorial is useful for you, please support us to make more tutorials.
  • We spent a lot of time and effort to create the content for this tutorial, please respect our work! Please do not copy the content to share on other websites. Howerver, please feel free to share the link of this tutorial anywhere