We are now going to build the interface that you will use to control the project from your computer. Using this interface, you will be able to control the switch via WiFi just by pressing buttons.
The interface we are going to develop is based on Node.js that will basically run a web server on your computer. You don't need to have any experience with Node.js to make this project work: the code walkthrough that you will find in this section is only there to make you understand how the different pieces of the interface works together.
First, we are going to code the main file called app.js, which we will run later using the node command in a terminal. It starts by importing the required modules:
var express = require('express'); var path = require('path'); var arest = require('arest');
Then, we create our app based on the express framework, and the set the port to 3700:
var app = express(); var port = 3700;
app.use(express.static(path.join(__dirname, 'public'))); app.use(express.static(path.join(__dirname, 'views')));
app.get('/interface', function(req, res){ res.sendfile('views/interface.html') });
app.get("/send", function(req, res){ arest.send(req,res); });
app.listen(port); console.log("Listening on port " + port);
This was for the main server file. Now, we are going to build the interface itself. Let’s see the content of the HTML file first. This file is located in the /view folder of our project.
The file starts by importing the different JavaScript files that will handle the click on the interface, and send the correct commands to the Arduino board:
<script type="text/javascript" src="/js/jquery-2.0.3.min.js"></script> <script type="text/javascript" src="/js/interface.js"></script> <script type="text/javascript" src="/js/arest.js"></script>
We also include some css files to give a better look at our interface:
<LINK href="/css/interface.css" rel="stylesheet" type="text/css" /> <LINK href="/css/flat-ui.css" rel="stylesheet" type="text/css" />
<button class="btn btn-block btn-lg btn-primary" type="button" id="1" onClick="buttonClick(this.id)">On</button>
You can see that a click on this button is calling another function. We will define this function in the JavaScript file of this project that we will see in a moment.
Finally, we also need to create a text field to display an indicator to check that the project is online:
<div class="status" id="status">Offline</div>
If you used the code from the GitHub repository of this project, you can leave that
untouched. If you are using another name or using the IP address of the board, you need to change the address of the board here:
type = 'wifi'; address = 'arduino.local';
Then, we will define this function called buttonClick that is triggered whenever a button is clicked in the interface. Depending on which button is clicked (identified by the id of the button), we send a different command to the Arduino board. This is the complete code for this function:
function buttonClick(clicked_id){ if (clicked_id == "1"){ send(type, address, "/digital/8/1"); } if (clicked_id == "2"){ send(type, address, "/digital/8/0"); } }
Then, we will define this function called buttonClick that is triggered whenever a button is clicked in the interface. Depending on which button is clicked (identified by the id of the button), we send a different command to the Arduino board. This is the complete code for this function:
setInterval(function() {
To get the status of the board, we use the same function as before, by sending the /id command. However this time, we store the data in a variable:
json_data = send(type, address, '/id');
This JSON data contains some information of the status of the board. If the “connected” field is present, we set the status indicator to online, and set the color to green. If the data is not present or corrupted, we set it to offline and apply a red color to this indicator:
if (json_data.connected == 1){ $("#status").html("Device Online"); $("#status").css("color","green"); } else { $("#status").html("Device Offline"); $("#status").css("color","red"); }
}, 5000);
Note that you can find all the code for this part inside the GitHub repository of the project:
https://github.com/marcoschwartz/arduino-wifi-powerswitch
It’s now time to test the interface. Make sure that you download all the files from the GitHub repository, and update the code with your own data if necessary, like the Arduino board address. Also, make sure that the Arduino board is programmed with the code we saw earlier in this guide.
Then, go to the folder of the interface with a terminal, and type the following command to install the aREST module:
And also type the following command to install the express module:
Finally, you can start the Node.js server by typing:
You should be greeted with the following message in the terminal:
You can now go to the your web browser, and type:
You should see the interface being displayed inside your browser, with the buttons to control the switch. Don’t worry, when your first open the interface the project should appear as offline and the indicator should not display any data. After 5 seconds, the interface will make a query to the Arduino board and update the data accordingly:
You can now also test the different buttons of the interface. By default, the switch is turned off, so click on the “On” button to turn it on instantly. You should also hear the “click” coming from the relay.
Page last edited June 25, 2014
Text editor powered by tinymce.