logo-mobile

ROHM

ROHM
Menu
  • Arduino –
  • Raspberry Pi –
  • Trending –
  • Others –
  • About –
  • Contact –

Raspberry Pi

Raspberry Pi WebIOPi IOT – Full-Color LED Christmas Decoration

Device Plus Editorial Team
Published by Device Plus Editorial Team at December 16, 2017
Categories
  • Raspberry Pi
Tags
  • christmas
  • IoT
  • led
  • raspberry pi
  • WebIOPi

led christmas decoration

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

led christmas decoration

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.

led christmas decoration

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.

led christmas decoration

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.

led christmas decoration

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

led christmas decoration

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

1
2
3
4
// 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!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>


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.

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.

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

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

led christmas decoration

Figure 6.

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

1 2
Device Plus Editorial Team
Device Plus Editorial Team
Device Plus is for everyone who loves electronics and mechatronics.

Check us out on Social Media

  • Facebook
  • Twitter

Recommended Posts

  • Let’s Make Arduino LED Holiday Lighting using Proximity SensorLet’s Make Arduino LED Holiday Lighting using Proximity Sensor
  • Raspberry Pi WebIOPi IOT Part 2 – Making a flashing LED buttonRaspberry Pi WebIOPi IOT Part 2 – Making a flashing LED button
  • Raspberry Pi WebIOPi IOT Part 3 – Programming Basics (Input/Output)Raspberry Pi WebIOPi IOT Part 3 – Programming Basics (Input/Output)
  • How to Add Siri Control to Your Raspberry Pi ProjectHow to Add Siri Control to Your Raspberry Pi Project
  • The Sense HAT Add-On Board For Raspberry Pi – Operating The LED DisplayThe Sense HAT Add-On Board For Raspberry Pi – Operating The LED Display
  • Make an LED Arduino Christmas Tree with ROHM Sensor KitMake an LED Arduino Christmas Tree with ROHM Sensor Kit
Receive update on new postsPrivacy Policy

Recommended Tutorials

  • How to integrate an RFID module with Raspberry Pi How to integrate an RFID module with Raspberry Pi
  • How to Use the NRF24l01+ Module with Arduino How to Use the NRF24l01+ Module with Arduino
  • How to Run Arduino Sketches on Raspberry Pi How to Run Arduino Sketches on Raspberry Pi
  • Setting Up Raspberry Pi as a Home Media Server Setting Up Raspberry Pi as a Home Media Server

Recommended Trends

  • SewBot Is Revolutionizing the Clothing Manufacturing Industry SewBot Is Revolutionizing the Clothing Manufacturing Industry
  • All About The Sumo Robot Competition And Technology All About The Sumo Robot Competition And Technology
  • 5 Interesting Tips to Calculating the Forward Kinematics of a Robot 5 Interesting Tips to Calculating the Forward Kinematics of a Robot
  • Go Inside the Drones That Are Changing Food Delivery Go Inside the Drones That Are Changing Food Delivery
Menu
  • Arduino –
    Arduino Beginner’s Guide
  • Raspberry Pi –
    Raspberry Pi Beginner's Guide
  • Trending –
    Updates on New Technologies
  • Others –
    Interviews / Events / Others

Check us out on Social Media

  • Facebook
  • Twitter
  • About
  • Company
  • Privacy Policy
  • Terms of Service
  • Contact
  • Japanese
  • 简体中文
  • 繁體中文
Don’t Forget to Follow Us!
© Copyright 2016-2023. Device Plus - Powered by ROHM
© 2023 Device Plus. All Rights Reserved. Muffin group

istanbul escort istanbul escort istanbul escort