Raspberry Pi WebIOPi IOT Part 2 – Making a flashing LED button

Raspberry Pi WebIOPi IOT Part 2 – Making a flashing LED button

Raspberry Pi WebIOPi

Click here to read Part 1 of this series >

Raspberry Pi WebIOPi

In this 2nd tutorial of WebIOPi, we’ll use simple Python scripts and HTML/Javascript to create a button to control a light, which will be automatically turned on and off.

Please refer back to WebIOPi IOT Part 1 – Installation & LED Blinking for general information about WebIOPi.

Fortunately, the WebIOPi site already has tutorials and sample source code for making IoT apps.

Tutorial : Framework basis

First, let’s make a button that can turn an LED on and off following the tutorial.  Then, we’ll look at Python codes to read analog values.

 

Preparing the code

As previously stated, we’ll be making use of the sample code on the tutorial page as we proceed.

Since you can specify the file location in the WebIOPi configuration file, you should be able to put it anywhere you’d like without any problem.  For our purposes, I created a “webiopi_sample” folder under the /home/pi/ directory following the tutorial and specified that as the file location.

I copied the Python and HTML sample code and pasted it into the below files.

/home/pi/webiopi_sample/python/script.py

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

 

 

Wiring

Raspberry Pi WebIOPi

Figure 1

Wire up the LED to GPIO17 (pin 11) since that’s used in the sample code.

 

Editing the configuration file

The WebIOPi configuration file is in /etc/webiopi/config.

Since you have to have administrator permissions to edit the configuration file, you should do your editing from the command line if logged in as anyone other than root.  Since I’m logged in as the “pi” user, I did my editing in the nano editor.

sudo nano /etc/webiopi/config

We have to make edits in 2 places.

First, search for a heading called [SCRIPTS] around line 21.

/etc/webiopi/config (starting at line 21)

Add the following in a new line:

Set the path of “myproject” to the Python file that you just created.

The edits in the tutorial sample are limited to just “myproject”. I also set up “myscript” that was commented out in the tutorial code.  (I’m not too sure what the difference is.)

Next, look for [HTTP] around line 29.

/etc/webiopi/config (starting at line 29)

Like above, add the following in a new line:

Set the path of “doc-root” to the “html” directory. Unlike the previous case, note that you don’t put the file name here.  Also, use line 42 that is commented out in the sample code as a reference for your formatting.

For the purpose of running the code, these settings are sufficient.

The tutorial sets a [REST] value but since we’re just using the GPIO settings, we can leave the default as is.  If you’re going to build a robust application, you may adjust this value appropriately.

Ok, let’s do some debugging!

sudo webiopi -d -c /etc/webiopi/config

If you get an error after this command, WebIOPi may already be running.  If WebIOPi is set to autorun, you need to stop WebIOPi and then run again using the above command.  If it still doesn’t work, I would suggest temporarily removing the autorun setting.

Stop command
sudo /etc/init.d/webiopi stop

Command to remove autorun

sudo update-rc.d webiopi remove

When you start debugging, the console will automatically open.

Now, open up your browser and go to “http://raspberrypi:8000/”!

Raspberry Pi WebIOPi

Figure 2

A “Light” button is displayed.

When you click it, the display of the button changes.

Raspberry Pi WebIOPi

Figure 3

 

The LED lights up in the same way it does in this video!  (I used the IP address since I was accessing it from a smartphone)

Once we confirm that no errors occur, enter Ctrl+C in the LX Terminal and terminate debug mode.

Next time WebIOPi starts, it will start on this screen.  The same is true if the autorun is set.

 

Analyzing the Python code!

At this point, I’ve successfully run the sample program but I still don’t really understand what most of the code does.

I don’t know anything about Python but maybe I can learn something by reading the detailed comments provided on the sample code.

To do some preliminary study, I looked at the Python Wikipedia article.

A special characteristic of python syntax is that it uses indentation.  This attribute is rarely seen in other languages. So, please pay attention when you write codes.  

Now, let’s take a look at the Python sample code (script.py).

We’ll review the overall structure:

It’s divided into 3 main parts. The “def” statements in the header are keywords used in defining functions in Python.  The 3 functions defined in the Python program are shown below.  Here’s what the comments indicate about them.

setup() Function called automatically when WebIOPi starts
loop() Function called whenever WebIOPi has an iteration
destroy() Function called when WebIOPi closes

Basically, the three are a setup function, a loop function, and a shutdown function.  This is very similar to an Arduino program.

I want to check out the functions that start with “GPIO.”  I thought these looked like functions used for WebIOPi.  After poking around the WebIOPi site, I found some documentation! 

Let’s look at some of the the functions used in the sample code.

setFunction(channel, func)

Setup the given digital channel with the given function

channel (int) : digital channel number

func (int) : GPIO.IN or GPIO.OUT

REST API : Use setFunctionString instead.

In Line 14, the setFunction that appears in setup() sets the IN/OUT used for GPIO.  The “LIGHT” variable is stored in “17” which translates to the command “Set GPIO17 to OUT” in line 14.

 

digitalRead(channel)

Returns the value of the given digital channel.

REST API : GET /devices/name/channel/value

name (str) : device name from configuration file

channel (int) : digital channel number

digitalRead, used in conditional expressions in lines 30 and 35, is a function that reads values from GPIO.  Since it’s reading digital values, these can be either HIGH or LOW.

 

digitalWrite(channel, digit)

Write the value of the given digital channel.

REST API : POST /devices/name/channel/value/digit

name (str) : device name from configuration file

channel (int) : digital channel number

digit (int) : digital value (0 or 1)

Unlike digitalRead, digitalWrite in line 21 sets values.  It can set either GPIO.HIGH or GPIO.LOW.

The sample code uses this function to automatically turn the LED on and off.

In summary, the processing looks like the following:

・Between 08:00 and 18:00 turn on when started

・Turn on at 08:00

・Turn off at 18:00

・Turn off when WebIOPi terminates

Analyzing the HTML/Javascript!

As we continue, we’ll look at the HTML source code…but to be honest, there really isn’t much HTML.  Basically all of the parts related to WebIOPi are written in Javascript. The WebIOPi site also has documentation on Javascript functions.

Javascript Library

Luckily, there’s a link to it in the source code!

createGPIOButton

Returns a button that change the state of a GPIO at each click.

(int) gpio : GPIO number from 0 to 53

(string) label : label of the button

“createGPIOButton” which appears in line 10, as the name suggests, is a function that creates a button that changes the state of GPIO.  The first parameter is the pin number (e.g. It would be “17” if referring to pin 11 which is GPIO17).  The second parameter passes the character string used as the label displayed on the button.

 

The above HTML code displays the button. “id” is the pin number. “Class” corresponds to the GPIO state which can be set to LOW or HIGH. The color of the buttons can be changed using CSS.

 

The button created by createGPIOButton is displayed on the screen using jQuery on line 13.  The parts to be used by WebIOPi basically follow this process.

There is no documentation for the “refreshGPIO” function on line 17 but it appears that this is required for the button to work. (When I tried removing this line, the button became unclickable).

The HTML (Javascript) manages the on-screen operation while the Python manages the automated switching ON/OFF of the LED corresponding to the time.  It seems like the two sets of code are independent and are doing separate processings in regards to GPIO.  How are values passed between the two?  This important question will be addressed next time!

Conclusion

Rather than using the default screen like we did in the last article, making a program like this to run definitely feels like a progress.  When it comes to electronics, it’s important for your project to be useful and easy to make.

I had an opportunity to learn Python while doing this project. Thanks to the complete documentation on the WebIOPi site and the useful functions already defined in the sample code; even a Python novice like myself was able to do some programming.  The comments in the sample code in the tutorial were also very helpful. I can now call myself a total fan of WebIOPi!

Next time, we’ll implement few more functions to have WebIOPi receive input values from the browser. We’ll refer to the same WebIOPi tutorial.  We’ll be using “macros” and trying to write a program that will accept input from a smartphone!

Continue with Part 3 of this series >