Automação residencial controlada pela Web – (Parte 11/12)

Web-controlled home automation – (Part 11/12)

June 9, 2024 Roberto Magalhães

This article focuses on techniques to make a Raspberry Pi as a web server that controls home appliances. It includes graphical user interface on the web server side and electronics that are used to control the electrical system.

Here is a simple example of four LEDs controlled by web interface used using apache web server with PHP and JAVA encodings for GUI and the electronics are managed by WiringPI library.

Web Controlled LED Connection Diagram

Prerequisites and equipment:

You will need the following:

A Raspberry Pi Model B or higher.
A USB WiFi adapter (Edimax – 802.11b/g/n wireless nano USB adapter is used here).
An SD card updated with the Raspbian operating system (here's a guide if you need it)
Access to Raspberry via keyboard and monitor or remotely.

Installing Pi Wiring:

The Wiring Pi project is used here to switch the GPIO pins between high and low. Run the following commands to download Wiring Pi and install.

sudo apt-get install git-core

git clone git://git.drogon.net/wiringPi

CDPi wiring

./ramp up

Figure 2: Download Pi Wiring to Raspberry Pi

Fig. 3: Installing Pi Wiring on Raspberry Pi

Let's discuss about using the WiringPi library to turn on and off the first LED (wiring pin 0). First you need to define the pin as output. Use the “gpio mode 0 out” command to do this. “0” is the wiring pin number and “out” is for output. Now you can use the “gpio write 0 1” command to turn on your LED. “0” is again the pin number and “1” is the status (1 for ON and 0 for OFF). If everything is fine, you should see your LED glowing. Using the command “gpio write 0 0” you can turn it off.

If you want to use the actual PIN number (GPIO-17) instead of the Wiring Pi number (0 corresponds to GPIO-17), use the -g flag in your command. Ex: “gpio -g write 17 1” instead of “gpio write 0 1”.

“GPIO read” can be used to read PIN status. It allows you to be sure of the pin status when you cannot see the output. Using it is as simple as before, just type “gpio read 0” where “0” is the wiring pin number. The command returns the pin status (again 1 for ON and 0 for OFF).

Starting the Apache web server:

Apache web server installation and configuration has been well discussed in previous articles. Starting the server is simple, just copy the server files to the Apache folder. Download the files from the web server and extract them to the Raspberry Pi home folder using the Samba web server and FTP clients.

Copy these files to the apache web server folder which is /var/www and restart the web server. Now that our website is live, you can navigate to it by entering the IP address of the Raspberry Pi.

Controlling LEDs with PHP:

Now we have our apache web server and a Wiring Pi library. PHP stands for “PHP: Hypertext Preprocessor” which will act as a bridge between them, and is a server-side scripting language. This means that the PHP code is executed once (each time the page is requested) by the server and cannot be seen by the client. Executing system commands with PHP code can be done with two different functions: exec (to execute) and system. Firstly, the “system” function. Two parameters are required: “system (string $command, int $return_var)”. With this function you can execute commands “gpio mode 0 out” or “gpio write 0 1”.

Example:

system (“gpio mode 0 out”);

system (“gpio write 0 1”);

So, the “exec” function. This function does exactly the same job as “system”, but reads and stores what the command printed. Three parameters are required: “exec (string $command, array $output, int $return_var)”, again $command and $return_var are the same parameters and the only difference is the $output array. So you can use this function if you need how the command is printed with the “ read from gpio 0 ” command.

Example:

exec(“gpio reading 0”, $status);

print_r($status);

Building Graphical Interface:

We can now control our Raspberry Pi with simple PHP scripts, but user interaction is pending. This can be done by combining Java script and HTML. Each image/bulb corresponds to its LED, if you click on one of them, the corresponding LED will be turned on/off and the image will also change accordingly. The page skeleton will be made in HTML, the server interactions with PHP and finally JavaScript to manage interactions between the user and the page animation. JavaScript is a client-side language that is continuously executed by our browser. That's why we can change the appearance of the page without reloading it. First we need an “index.php” file (the extension is .php and not .html as we will be using PHP code, it commands the browser that there is PHP to execute before sending the page). This main page contains 4 buttons with Bulb Picture. These buttons are first generated with an “exec ( “gpio read “.$i, $output );” and a for loop to replicate. To detect the user clicking on any of these buttons, Java script is used which is in a separate file called “script.js”, although it is still included in index.php. The script consists of adding an event listener to all four buttons and when one of them is pressed, it uses a function that calls gpio.php, receiving the response and returning to JavaScript that changes the button to ON or OFF. You can download the full codes directly here.