Raspberry Pi WebIOPi IOT – Full-Color LED Christmas Decoration

Published by Device Plus Editorial Team at December 16, 2017

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.

Figure 2. From OSTA5131A data sheet

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.

Figure 4. Additive colors

Seven kinds of colors could be expressed, but with this alone, it’s wasteful. So, programming of WebIOPi comes in. We can program it so that you can adjust it to your favorite color(s).

About PWM

To control full-color LEDs from WebIOPi, use the method called pulse-width modulation (PWM).

PWM – Arduino

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%.

Figure 5. Duty ratio

The above figure regarding the duty ratio is easy to understand. Again, the wave at 5V is OV and at 0V OFF. This ratio is obtained with 1 set as one cycle.

Now let’s turn to WebIOPi and take a look at some of its convenient functions.

Create HTML file

Let’s start with HTML file. In WebIOPi, slider parts for PWM control are prepared.

Javascript Library

// Only for Chrome and Safari, create a slider that pulse out 
a 0-100% duty cycle ratio on GPIO 8
button = webiopi().createRatioSlider(8);
content.append(button);

// Only for Chrome and Safari, create a slider that pulse out

a 0-100% duty cycle ratio on GPIO 8

button = webiopi().createRatioSlider(8);

content.append(button);

It’s introduced in line 51 to 53 of the sample source. The comment text says “only Chrome and Safari”, but it also worked on browsers such as Windows Internet Explorer, Opera, and Firefox.

WebIOPi.createRatioSlider

WebIOPi.createRatioSlider (gpio, ratio)

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!

/home/pi/webiopi_sample/html/index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content = "height = device-height, width = 420, user-scalable = no" />
    <title>WebIOPi | Demo</title>
    <script type="text/javascript" src="/webiopi.js"></script>
    <script type="text/javascript">
    webiopi().ready(function() {
        var parts;
        // red
        parts = webiopi().createRatioSlider(22);
        $("#red").append(parts);
        // green
        parts = webiopi().createRatioSlider(17);
        $("#green").append(parts);
        // blue
        parts = webiopi().createRatioSlider(27);
        $("#blue").append(parts);
        //specify initial value
            $("#ratio22").val(0);
    $("#ratio17").val(0);
        $("#ratio27").val(0);
    });
    </script>
    <style type="text/css">
        input[type="range"] {
            display: block;
            width: 160px;
            height: 45px;
        }
    </style>
</head>
<body>
<div id="content" align="center">
    <div id="red"><label>red</label></div>
    <div id="green"><label>green</label></div>
    <div id="blue"><label>blue</label></div>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>WebIOPi | Demo</title>

webiopi().ready(function() {

var parts;

// red

parts = webiopi().createRatioSlider(22);

$("#red").append(parts);

// green

parts = webiopi().createRatioSlider(17);

$("#green").append(parts);

// blue

parts = webiopi().createRatioSlider(27);

$("#blue").append(parts);

//specify initial value

$("#ratio22").val(0);

$("#ratio17").val(0);

$("#ratio27").val(0);

});

</script>

input[type="range"] {

display: block;

width: 160px;

height: 45px;

}

</style>

</head>

<body>

<div id="green"><label>green</label></div>

</div>

</body>

</html>

We made three slide bars so that we can set the value of each of RGB. The HTML output using the createRatioSlider function is as follows.

<input type="range" step="0.01" max="1.0" min="0.0" id="ratio17">

1	<input type="range" step="0.01" max="1.0" min="0.0" id="ratio17">

It can be moved in increments of 0.01 from 0.0 to 1.0 (0 to 100%).

Since id is allocated, if you want to set the initial value, as shown in lines 21 to 23, you can set the value with jQuery.

$("#ratio17").val(0);

1	$("#ratio17").val(0);

When you display it in the browser, it will show a screen like below:

Figure 6.

In order to link with the LED, it’s necessary to perform initial setting on Python side.

Device Plus Editorial Team

Device Plus is for everyone who loves electronics and mechatronics.

Device Plus Editorial Team

Recommended Posts

Check us out on Social Media

Raspberry Pi WebIOPi IOT – Full-Color LED Christmas Decoration

About full-color LED

About PWM

Create HTML file

Device Plus Editorial Team

Check us out on Social Media

Recommended Posts

Recommended Tutorials

Recommended Trends

Check us out on Social Media