Since Christmas is just around the corner, we wanted to make a cute LED Christmas decoration! Using full-color LED and WebIOPi, we can change the decoration’s lights between red, blue, and green wirelessly.
About full-color LED
Figure 1. RGB full color 5mm LED
This RGB full color 5mm LED has three primary colors: red, green and blue. It’s possible to express full color by mixing these colors. You can use any clear RGB LEDs. You can buy these from Sparkfun, Amazon, etc.
To control three colors, there are 4 pins (3 colors + GND). The size of the LED is larger than general monochromatic LED.
The direction of the LED is decided by the length of the pin. The shortest pin becomes ① on the left in Figure 2. Three primary colors of light are assigned to each pin: ①green; ②blue and ④ red. ③ “Common Cathode” refers to a collection of cathodes. In this case, it corresponds to the minus side, so we need to connect this to GND.
Figure 3. Wiring full-color LED to Raspberry Pi 2
Wiring here is pretty simple. This time, we connected green to pin 11 (GPIO 17), blue to pin 13 (GPIO 27), red to pin 15 (GPIO 22). It’s easy to understand by using three side-by-side GPIOs according to the LED pins.
Now let’s light the full-color LED! I tried operating from the “GPIO Header” on the WebIOPi default screen. (If you are using WebIOPi, you can display the WebIOPi default screen by restoring the setting to the original state. Comment out the myproject of [SCRIPTS] and doc-root of [HTTP].
Light is quite strong as shown in the video, so be careful not to stare at it directly! If you use LED light diffuser (e.g. rubber cap, etc.), you can tone down lighting. Also, there are individual differences in the intensity of light of full-color LEDs, so let’s adjust by changing the resistance value.
Since Raspberry Pi’s GPIO is a digital output, the value is either 0 or 1 (ON / OFF). Since it’s 2 patterns × 3 colors, except for the off state, 7 colors can be expressed as shown in Figure 4.
Pulse Width Modulation, or PWM, is a technique for getting analog results with digital means. Digital control is used to create a square wave, a signal switched between on and off. This on-off pattern can simulate voltages in between full on (5 Volts) and off (0 Volts) by changing the portion of the time the signal spends on versus the time that the signal spends off. The duration of “on time” is called the pulse width. To get varying analog values, you change, or modulate, that pulse width. If you repeat this on-off pattern fast enough with an LED for example, the result is as if the signal is a steady voltage between 0 and 5v controlling the brightness of the LED.
In digital signals, only two types of ON and OFF can be expressed. By using the ratio (duty ratio) between ON time and OFF time in one cycle, it’s able to handle values between 0 to 100%.
Returns a slider that send its value as a PWM duty cycle ratio
(int) gpio: GPIO number from 0 to 53
(float) ratio: slider’s init value
To use the function, just specify the GPIO number as the first argument! In the document, it’s stated that the initial value can be specified for the second argument, but it seems that this value is not reflected in the current version (If interested, please see the line 504 in webiopi.js).
Now let’s create a HTML file for full color LED!
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">