Now that our project automatically logs data concerning the energy consumption on Google Docs, it's time to go back to the relay control. For now, we tested the relay by going into a web browser and typing the correct REST function with the name of the pin we want to change.
However, that's not very convenient. You don't want to type something in your web browser every time you want to turn a light on in your home. What we would like to have instead is a nice graphical interface with buttons that can be pressed to turn a light on or off. It would be even better if this interface could be accessed not only from a web browser on your computer but also from any smartphone or tablet in your home. That's exactly what we are going to build now.
We need several components to do so, and we will mix several programming languages to build the best graphical interface possible. We will use HTML for the main page that will host the on/off button, JavaScript to handle the actions of this button, and PHP to transmit the correct command to the Arduino server. We are also going to use some CSS to make the interface look much better and automatically adapt itself to the device you are using, such as a smartphone.
First, let's deal with the HTML code. We need to import the jQuery library and the file that will contain all the JavaScript code, as follows:
<script src="jquery-2.0.3.min.js"></script> <script src="script.js"></script>
Also, import the CSS style file, as follows:
<link rel="stylesheet" type="text/css" href="style.css">
The core of this HTML file is to create two buttons; one button to switch the relay on and the other to switch it off again. The following, for example, is the code for the On button:
<input type="button" id="on" class="commandButton" value="On" onClick="relayOn()"/>
Now, if you were to actually take this file as it is, it would look really bad as some default styles would be applied to the buttons. That's why we attached a CSS file to make the interface look a bit better. For example, I decided to center align the main form that contains the two buttons, as follows:
#relay {
text-align: center;
}I also gave some style to the buttons themselves, such as an orange background; I made them bigger and also put a nice black border around them, as shown in the following code:
.commandButton {
background-color: orange;
border: 1px solid black;
font-size: 40px;
cursor: pointer;
border-radius: 10px;
width: 300px;
height: 100px;
}Now the interface looks much better on your computer. But what if somebody opens it from a smartphone? It would not be adapted at all to the tiny screen of a smartphone. To automatically make the interface adapt to the device you are using, we will use a property from CSS3 called media queries. This feature of CSS3 can, for example, detect whether a smaller screen size is used to access the page. Then, when you have this information, you can use it to modify the style of the different elements accordingly, for example, we may want to make our buttons appear differently on the page.
In our case, we want to make the buttons take all the space available on the smaller screen. We also want to double the height of each button as well as double the font size so that they can be really readable on a small screen like on a smartphone. All of this is done by the following piece of code:
@media screen and (max-device-width: 400px) {
.commandButton {
width: 100%;
height: 200px;
border: 2px solid black;
font-size: 80px;
margin-bottom: 50px;
text-align: center;
background-color: orange;
}
}The JavaScript file simply makes the interface between the GUI we just designed and the PHP file that will actually connect to the Arduino Yún board. The following, for example, is the code called by one button:
function relayOn(){
$.get( "update_state.php", { command: "1"} );
}The command variable simply contains the state of the relay that we want to send to the Arduino Yún board and will set the value of the pin that the relay is connected to.
Now let's see the PHP file. The first line of the code gets the command variable from the JavaScript and builds the command that will be sent to the Yún, as follows:
$service_url = 'http://myarduinoyun.local/arduino/digital/8/' . $_GET["command"];
To actually send the command, we are going to use a PHP function named curl that we will use to call the REST API of the Yún. We first have to initialize this function with the URL we built earlier, as follows:
$curl = curl_init($service_url);
Finally, we actually execute this command with the following code:
curl_setopt($curl, CURLOPT_IPRESOLVE, CURL_IPRESOLVE_V4 ); $curl_response = curl_exec($curl); curl_close($curl);
The option with set in the first line of code is used simply to speed up access to the Arduino board. Before testing the interface, make sure that the web server on your computer is running and that all the files of the project are located at the root of the web server folder. The complete code for this part of the project is available at https://github.com/openhomeautomation/geeky-projects-yun/tree/master/chapter2/web_interface.
You should see the two buttons of the interface show up in your browser, as shown in the following screenshot:
You can now test this simple interface. Just click on a button and the PHP code should give the correct command on your Arduino Yún board, making the switch go on or off instantly.
You can also test the interface on a smartphone or tablet. I used my phone to do so. Just open your favorite browser, go to your computer's IP address or network name, and you should see the different files of your project being displayed. Just click on interface.html and the interface should open and scale to your phone's screen size, as shown in the following screenshot:
Just as for the interface on your computer, you can simply press a button and the light will switch on or off instantly. Now, you are able to command this light from wherever you are in your home; you just have to be connected to your local Wi-Fi network.