Raspberry Pi WebIOPi IOT Part 3 – Programming Basics (Input/Output)

Raspberry Pi WebIOPi IOT Part 3 – Programming Basics (Input/Output)

Raspberry Pi WebIOPi

Click here to read Part 2 of this series >

Raspberry Pi WebIOPi

In this 3rd tutorial of our Raspberry Pi WebIOPi series, we’re going to add more functionality, such as a function to process input by passing values to WebIOPi from a browser, to the LED Button Screen we created last time in WebIOPi IOT Part 2 – Making a flashing LED button.

Now that I have some experience programming for WebIOPi, I’m going to take it a step further to challenge myself and customize both CSS and Python using the tutorial source code as a foundation. The more I practice and write code on my own, the better I become!

 

Adding input processing

Tutorial: Using macros

This tutorial is a continuation of the Framework basis tutorial we covered in Part 2. We were introduced to customization that let us automatically turn the LED on or off from the browser. We’ll go through the same wiring process. Let’s go ahead and wire up the LED to GPIO17 (Pin 11).

Raspberry Pi WebIOPi

Figure 1

The source code is the same as the last time, so I’m going to only list the additional (new) parts. You can overwrite the previous file inWebIOPi IOT Part 2 – Making a flashing LED button and you’ll still be able to use the following codes. If you want to change the file name, however, make sure you also change the path of the configuration file (/etc/webiopi/config).

First let’s go ahead and run the code! The complete source code that includes the changes is available below. We’ll go over the changes soon after.

index.html

 

Turn On at : Turn Off at:

 

 

When you’re ready, enter run command. You can use the normal run command, but I recommend running in debug mode the first time to make sure that you don’t get any errors.

 

Command to run in debug mode:

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

Raspberry Pi WebIOPi

Figure 2

After running the code, go to http://raspberrypi:8000 (or your IP address), and you’ll see a screen shown in Figure 2. As you can see, 2 text boxes and a “Send” button have been added to the screen. In the previous tutorial, we automatically turned on the LED at 8 am and off at 6 pm. This time, we made modification so we can manually set turn on/off time.

“Turn On at” and “Turn Off at” indicate the time the LED turns on or off, respectively. Therefore, the LED will turn on at 8am and it will turn off at 6pm. You can change the setting of the turn-on/off time by clicking the “Send” button.

The “minute” and “second” values have been hardcoded to 0 in the source code.

 

Python code

Let’s look at the Python source code. The following 10 lines are the additional parts to the source code:

One thing to note here is the “@webiopi.macro” in line 1 and line 5. In Python, a line beginning with “@” is called a “decorator”.

Decorator (@) – Real Python

[A] decorator is a function that takes another function and extends the behavior of the latter function

In order to create a function that can be called from a browser, a function is placed after this “@webiopi.macro”. These two functions, “getLightHours” and “setLightHours,” are defined here. Both process the values stored in “HOUR_ON” and “HOUR_OFF.”

“setLightHours” in line 6 is a function that sets the values for “HOUR_ON” and “HOUR_OFF.” They’re declared as “global” in line 7.

Global variables (global) – Python Course

The values (on, off) passed as arguments to “setLightHours” are assigned to the variables “HOUR_ON” and “HOUR_OFF.” The function “getLightHours” in Line 2 is called.

“getLightHours” in line 2 returns the two values “HOUR_ON” and “HOUR_OFF.” These two values are passed with a semicolon (separator) between them.

We’ll discuss this more later but this function passes these variables to HTML.

 

HTML and JavaScript

Next, we’re going to look at the contents of the HTML file that calls the following functions:

In reference to the first block of HTML, the two new text boxes added to the screen in this tutorial are used when you input the values of “HOUR_ON” and “HOUR_OFF.”

Now the JavaScript. The following source code has been added.

Just like last time, let’s review WebIOPi JavaScript documentation.

First, let’s look at the “createButton” function in line 17.

createButton

WebIOPi.createButton(id, label[, mousedown[, mouseup]])

Returns a simple button without predefined behavior.

(string) id : id of the button to create

(string) label : label of the button

(function) mousedown (optional) : function called on mousedown/click event

(function) mouseup (optional) : function called on mouseup event

We can create a button using the createButton function. Unlike createGPIOButton in line 28, it’s a button that can define event on its own.

The first argument is the button ID and the second is the text in the button label. The actual HTML generated by this code is as follows:

The third argument, the event of clicking the button (mouse down), can be configured as a function. This “Send’ button is called inside the function in line 21 as the Python function “setLightHours.”

callMacro

WebIOPi.callMacro(macro, [args[, callback]])

Call a macro on the server.

(string) macro : name of the macro to call

(string) arg (optional) : array containing arguments

(function) callback (optional) : function called when result received from the server

The first argument is the function name in the Python file. The second argument is the array of arguments passed to the Python function. The third argument is the JavaScript “callback” function.

As mentioned above, the Python “setLightHours” function sets the values for “HOUR_ON” and “HOUR_OFF.” When “getLightHours” is called at the end of “setLightHours,” the current values for “HOUR_ON” and “HOUR_OFF” are returned. When these values are passed to the JavaScript, they are passed to the callback function “updateLightHours.”

“updateLightHours”, the callback function described in the callMacro documentation above, takes 3 arguments. The first and the second arguments are the first two arguments passed from the caller function “callMacro”. They are passed to updateLightHours as is. The third argument contains the value returned by the response function (setLightHours in this case).

 

Raspberry Pi WebIOPi

Figure 3

Above is a simple diagram of the flow of the code. createButton creates a button that already has this event defined.

 

Customize!

Since you can only set the hour for LED turn on/off time in the sample program, I tried to customize it so you can also include minutes. Please refer to this page for details on Python date manipulation.

script.py

For HTML, we can use the tutorial file without making any modifications.

As shown in the video, I set the time for “Turn Out at” to 19:38 and pressed Send button. You can see that LED turns off a few seconds before the time hits 19:38. As soon as LED turns off, the color of the “LIGHT” button changes from blue to black. The variance appears to be due to the fact that WebIOPi is using Raspberry Pi’s internal clock to track time. There was about 5 second deviation.

Raspberry Pi WebIOPi

Figure 4

I also tried modified CSS to change the look of the page.

It’s not declared in the HTML file but in a CSS file called “webiopi.css” which loads automatically. Please note that each component has an id called “#update” available in addition to its attributes.

For components written in JavaScript, I was able to use the addClass function to assign a class. However, the button created by “createGPIOButton” was an exception since the class values are overwritten each time it switches between ON/OFF, I wasn’t able to apply a style to it.

The CSS file can be externalized. Just like the HTML file, it just needs to be placed in the document root folder declared in the configuration file.

In the next tutorial, we’re going to further expand the concept of input/out and work on a very fun Christmas project! Taking advantage of what we’ve learned so far, we’re going to explore full-color LED control in WebIOPi.