Week 14 - Interface and application programming

Assignments of the Week

Group Assignment

  Write an application that interfaces a user with an
     input &/or output device that you made

Individual Assignment:

  Compare as many tool options as possible

This week's assignment is to use the Xiao ESP32 C3 to control the WS2812 LED strip and interact with it using Processing and the Xiao ESP32 C3 to achieve different lighting effects.

Introduction to WS2812

WS2812 is an intelligent control LED light source that integrates a control circuit and an RGB chip into a single 5050 package component. Technical Specifications:

Integrated Design: The control circuit and RGB chip are integrated into the same package. Signal Reshaping Circuit: Built-in signal reshaping circuit ensures that the waveform does not accumulate distortion when transmitted to the next driver. Power Loss Reset Circuit: Built-in power loss reset circuit ensures the light resets correctly in case of power failure. Color and Brightness: Each pixel can achieve 256 levels of brightness control in three primary colors, displaying a total of 16,777,216 colors, with a scanning frequency of no less than 400Hz/s. Serial Signal Transmission: Signals are transmitted through a single-wire serial port. When the distance between any two points exceeds 5 meters, no additional circuitry is required for signal transmission. Refresh Rate: At a refresh rate of 30fps, the number of LEDs in series is no less than 512 in low-speed mode and no less than 1024 in high-speed mode. Data Transmission Rate: Data is transmitted at a rate of 800Kbps. Electrical Characteristics: The power supply voltage is 6.0~7.0V. The red, green, and blue LEDs operate at voltages of 1.8-2.2V, 3.0-3.2V, and 3.2-3.4V, respectively. Communication Method: Uses a single NZR (Non-Return-to-Zero) communication mode. Below are the mechanical dimensions, pin configuration, and pin functions of the WS2812.

If you want to light up the WS2812 LED strip, you need to use the FastLED library. Here is an introduction to using the FastLED library:

Color Representation

RGB Colors

Using RGB values to represent colors:

CRGB RGBcolorName(rVal, gVal, bVal);
// rVal – Red value
// gVal – Green value
// bVal – Blue value

Using RGB color names to represent colors: CRGB::Red

RGB color value table:

CRGB::AliceBlue
CRGB::Amethyst
CRGB::AntiqueWhite
CRGB::Aqua
CRGB::Aquamarine
CRGB::Azure
CRGB::Beige
CRGB::Bisque
CRGB::Black
CRGB::BlanchedAlmond
CRGB::Blue
CRGB::BlueViolet
CRGB::Brown
CRGB::BurlyWood
CRGB::CadetBlue
CRGB::Chartreuse
CRGB::Chocolate
CRGB::Coral
CRGB::CornflowerBlue
CRGB::Cornsilk
CRGB::Crimson
CRGB::Cyan
CRGB::DarkBlue
CRGB::DarkCyan
CRGB::DarkGoldenrod
CRGB::DarkGray
CRGB::DarkGreen
CRGB::DarkKhaki
CRGB::DarkMagenta
CRGB::DarkOliveGreen
CRGB::DarkOrange
CRGB::DarkOrchid
CRGB::DarkRed
CRGB::DarkSalmon
CRGB::DarkSeaGreen
CRGB::DarkSlateBlue
CRGB::DarkSlateGray
CRGB::DarkTurquoise
CRGB::DarkViolet
CRGB::DeepPink
CRGB::DeepSkyBlue
CRGB::DimGray
CRGB::DodgerBlue
CRGB::FireBrick
CRGB::FloralWhite
CRGB::ForestGreen
CRGB::Fuchsia
CRGB::Gainsboro
CRGB::GhostWhite
CRGB::Gold
CRGB::Goldenrod
CRGB::Gray
CRGB::Green
CRGB::GreenYellow
CRGB::Honeydew
CRGB::HotPink
CRGB::IndianRed
CRGB::Indigo
CRGB::Ivory
CRGB::Khaki
CRGB::Lavender
CRGB::LavenderBlush
CRGB::LawnGreen
CRGB::LemonChiffon
CRGB::LightBlue
CRGB::LightCoral
CRGB::LightCyan
CRGB::LightGoldenrodYellow
CRGB::LightGreen
CRGB::LightGrey
CRGB::LightPink
CRGB::LightSalmon
CRGB::LightSeaGreen
CRGB::LightSkyBlue
CRGB::LightSlateGray
CRGB::LightSteelBlue
CRGB::LightYellow
CRGB::Lime
CRGB::LimeGreen
CRGB::Linen
CRGB::Magenta
CRGB::Maroon
CRGB::MediumAquamarine
CRGB::MediumBlue
CRGB::MediumOrchid
CRGB::MediumPurple
CRGB::MediumSeaGreen
CRGB::MediumSlateBlue
CRGB::MediumSpringGreen
CRGB::MediumTurquoise
CRGB::MediumVioletRed
CRGB::MidnightBlue
CRGB::MintCream
CRGB::MistyRose
CRGB::Moccasin
CRGB::NavajoWhite
CRGB::Navy
CRGB::OldLace
CRGB::Olive
CRGB::OliveDrab
CRGB::Orange
CRGB::OrangeRed
CRGB::Orchid
CRGB::PaleGoldenrod
CRGB::PaleGreen
CRGB::PaleTurquoise
CRGB::PaleVioletRed
CRGB::PapayaWhip
CRGB::PeachPuff
CRGB::Peru
CRGB::Pink
CRGB::Plaid
CRGB::Plum
CRGB::PowderBlue
CRGB::Purple
CRGB::Red
CRGB::RosyBrown
CRGB::RoyalBlue
CRGB::SaddleBrown
CRGB::Salmon
CRGB::SandyBrown
CRGB::SeaGreen
CRGB::Seashell
CRGB::Sienna
CRGB::Silver
CRGB::SkyBlue
CRGB::SlateBlue
CRGB::SlateGray
CRGB::Snow
CRGB::SpringGreen
CRGB::SteelBlue
CRGB::Tan
CRGB::Teal
CRGB::Thistle
CRGB::Tomato
CRGB::Turquoise
CRGB::Violet
CRGB::Wheat
CRGB::White
CRGB::WhiteSmoke
CRGB::Yellow
CRGB::YellowGreen

HSV Colors

HSV (Hue, Saturation, Value) is a method that includes three parameters:

Hue (H): The range of hue values is 0~255.

Saturation (S): Saturation represents how close the color is to a spectral color. The higher the value, the more saturated the color (closer to its true color). The lower the value, the closer the color is to white. When the value is zero, the color is white.
Brightness (V): Brightness represents the intensity of the color. The higher the value, the brighter the LED strip. The lower the value, the dimmer the LED strip. When the value is zero, the LED strip is completely off.

CHSV HSVcolorName(hVal, sVal, vVal)
// hVal – Hue value
// sVal – Saturation value
// vVal – Brightness value

Palette Color Sets

The FastLED library provides 8 preset palettes:

CloudColors_p          
LavaColors_p            
OceanColors_p          
ForestColors_p          
RainbowColors_p         
RainbowStripeColors_p
PartyColors_p         
HeatColors_p

Common Functions

FastLED.show();   // Update the LED display.

FastLED.clear();  // Turn off all LEDs.

FastLED.setBrightness(30);   // Set the brightness of the LED strip, with a maximum value of 255.

fill_solid(leds, 30, CRGB::Red);   // Set the LED strip to a single color.
// leds: LED object.
// 30: Number of LEDs to fill (starting from the beginning).
// CRGB::Red: Set the color value to red.

fill_rainbow(leds, 30, beginHue, deltaHue);  // Set the LED strip to a rainbow gradient.
// leds: LED object.
// 30: Number of LEDs.
// beginHue: Starting hue value for the rainbow, maximum is 255.
// deltaHue: Hue difference between adjacent LEDs, maximum is 255.

fill_gradient_RGB(leds, 0, CRGB::Red, 30, CRGB::Blue);   // Set the LED strip to a gradient color.
// leds: LED object.
// 0: Starting LED index.
// CRGB::Red: Starting color.
// 30: Ending LED index.
// CRGB::Blue: Ending color.

fill_palette(leds, 30, 0, 8, OceanColors_p, 255, LINEARBLEND);   // Fill the LED strip using a color palette.
// leds: LED object.
// 30: Number of LEDs to fill.
// 0: Starting color index in the palette.
// 8: Color index difference between adjacent LEDs.
// OceanColors_p: Preset color palette.
// 255: Maximum brightness.
// LINEARBLEND: Linear blending effect.

fill_gradient(leds, 0, CHSV(50, 255, 255), 29, CHSV(150, 255, 255), SHORTEST_HUES/LONGEST_HUES);   // Set the LED strip to a gradient using HSV colors.
// CHSV(50, 255, 255): Starting color in HSV format.
// CHSV(150, 255, 255): Ending color in HSV format.
// SHORTEST_HUES: Shortest hue transition between two colors.
// LONGEST_HUES: Longest hue transition between two colors.
// Note: When using SHORTEST_HUES or LONGEST_HUES, the CHSV format must be used.

ColorFromPalette(RainbowColors_p, 0, 128, LINEARBLEND);   // Get a specific color from a palette.
// RainbowColors_p: Color palette to use.
// 0: Color index in the palette.
// 128: Brightness.
// LINEARBLEND: Linear blending effect.

fadeToBlackBy(leds, 30, 10);  // Gradually fade out the LED strip.
// leds: LED object.
// 30: Number of LEDs.
// 10: Fade intensity.

Function Usage Examples

Different functions correspond to different lighting effects, such as a running light example.

FastLED.show();   // Update the LED display.

FastLED.clear();  // Turn off all LEDs.

FastLED.setBrightness(30);   // Set the brightness of the LED strip, with a maximum value of 255.

fill_solid(leds, 30, CRGB::Red);   // Set the LED strip to a single color.
// leds: LED object.
// 30: Number of LEDs to fill (starting from the beginning).
// CRGB::Red: Set the color value to red.

fill_rainbow(leds, 30, beginHue, deltaHue);  // Set the LED strip to a rainbow gradient.
// leds: LED object.
// 30: Number of LEDs.
// beginHue: Starting hue value for the rainbow, maximum is 255.
// deltaHue: Hue difference between adjacent LEDs, maximum is 255.

fill_gradient_RGB(leds, 0, CRGB::Red, 30, CRGB::Blue);   // Set the LED strip to a gradient color.
// leds: LED object.
// 0: Starting LED index.
// CRGB::Red: Starting color.
// 30: Ending LED index.
// CRGB::Blue: Ending color.

fill_palette(leds, 30, 0, 8, OceanColors_p, 255, LINEARBLEND);   // Fill the LED strip using a color palette.
// leds: LED object.
// 30: Number of LEDs to fill.
// 0: Starting color index in the palette.
// 8: Color index difference between adjacent LEDs.
// OceanColors_p: Preset color palette.
// 255: Maximum brightness.
// LINEARBLEND: Linear blending effect.

fill_gradient(leds, 0, CHSV(50, 255, 255), 29, CHSV(150, 255, 255), SHORTEST_HUES/LONGEST_HUES);   // Set the LED strip to a gradient using HSV colors.
// CHSV(50, 255, 255): Starting color in HSV format.
// CHSV(150, 255, 255): Ending color in HSV format.
// SHORTEST_HUES: Shortest hue transition between two colors.
// LONGEST_HUES: Longest hue transition between two colors.
// Note: When using SHORTEST_HUES or LONGEST_HUES, the CHSV format must be used.

ColorFromPalette(RainbowColors_p, 0, 128, LINEARBLEND);   // Get a specific color from a palette.
// RainbowColors_p: Color palette to use.
// 0: Color index in the palette.
// 128: Brightness.
// LINEARBLEND: Linear blending effect.

fadeToBlackBy(leds, 30, 10);  // Gradually fade out the LED strip.
// leds: LED object.
// 30: Number of LEDs.
// 10: Fade intensity.

Code Example 1

Interaction between Processing and Xiao ESP32 C3: Input numbers 1~4 in Processing, and different numbers correspond to different colors on the LED strip. Hardware Requirements:

Xiao ESP32 C3
WS2812 LED strip Software Requirements:
Arduino IDE
Processing

Arduino Code:

#include <FastLED.h>

#define LED_PIN     8    // Signal pin
#define NUM_LEDS    18   // Number of LEDs
#define BRIGHTNESS  128  // LED strip brightness

CRGB leds[NUM_LEDS];  

int command = 0;         // Store the command from Processing

void setup() {
  FastLED.addLeds<WS2812, LED_PIN, GRB>(leds, NUM_LEDS);  // Initialize the LED strip
  FastLED.setBrightness(BRIGHTNESS);                      // Set brightness
  FastLED.clear();
  FastLED.show();
  Serial.begin(9600); 
}

void loop() {
  if (Serial.available()) {
    command = Serial.read();  // Get the command sent from Processing
    setColor(command);        // Set the LED strip color based on the command
  }
}

void setColor(int cmd) {
  switch (cmd) {
    case '1':  // Red
      fill_solid(leds, 30, CRGB::Red);
      FastLED.show();
      break;
    case '2':  // Rainbow gradient
      fill_rainbow(leds, 30, 15, 10);
      FastLED.show();
      break;
    case '3':  // Gradient color using RGB
      fill_gradient_RGB(leds, 0, CRGB::Red, 29, CRGB::Blue); 
      FastLED.show();
      break;
    case '4':  // Use OceanColors_p palette
      fill_palette (leds, 30, 0, 8, OceanColors_p, 255, LINEARBLEND);
      FastLED.show();
      break;
    default:
      break;
  }
}

Week 14 - Interface and application programming ​

Assignments of the Week ​

Group Assignment ​

Individual Assignment: ​

Introduction to WS2812 ​

Color Representation ​

RGB Colors ​

HSV Colors ​

Palette Color Sets ​

Common Functions ​

Function Usage Examples ​

Code Example 1 ​