Commercial smart plugs usually come with a nice interface, which you can use from your phone or computer to control the plug via Wi-Fi. In this section, we are going to do exactly the same: build a simple interface that we will use to control the device connected to the smart plug, and also visualize the current and power consumption of the device.

As the code for this part is quite similar to the code of the previous section, I will only highlight the differences here.

Inside the Node.js JavaScript file, we declare the public folder in which we will store the interface:

app.use(express.static('public'));

Then, we need to declare to which pin we connected the output of the smart plug:

var outputPin = 18;

Using Express, we can now define some routes. We define the main route of the application to redirect to the interface file:

app.get('/', function (req, res) {

  res.sendfile(__dirname + '/public/interface.html');

});

Then, as we saw in the previous chapter, we declare two routes to control the output of the project: one to switch the device on, and one to switch it off:

app.get('/on', function (req, res) {

  piREST.digitalWrite(outputPin, 1);

  // Answer
  answer = {
    status: 1
  };
  res.json(answer);

});

app.get('/off', function (req, res) {

  piREST.digitalWrite(outputPin, 0);

  // Answer
  answer = {
    status: 0
  };
  res.json(answer);

});

Let's now see the files for the interface. There will be one HTML file, which contains the elements of the interface, and one JavaScript file to make the link between the elements and the Node.js software.

Let's start with the HTML file. We need to define the two buttons that we will use to control the device:

<div class='row'>

    <div class='col-md-4'></div>
    <div class='col-md-2'>
      <button id='on' class='btn btn-block btn-primary'>On</button>
    </div>
    <div class='col-md-2'>
      <button id='off' class='btn btn-block btn-warning'>Off</button>
    </div>
    <div class='col-md-4'></div>

  </div>

Then, we also define two indicators, called current and power, which will contain the values measured by the project:

  <div class='row'>

    <div class='col-md-4'></div>
    <div class='col-md-4'>
      Current consumption: <span id='current'></span> A
    </div>
    <div class='col-md-4'></div>

  </div>

  <div class='row'>

    <div class='col-md-4'></div>
    <div class='col-md-4'>
      Power consumption: <span id='power'></span> W
    </div>
    <div class='col-md-4'></div>

  </div>

Let's now see the content of the JavaScript file. First we make the link between the buttons and the Node.js server by calling the correct action when a button is pressed:

$( "#on" ).click(function() {

    // Set lamp ON
    $.get('/on');

  });

  $( "#off" ).click(function() {

    // Set lamp OFF
    $.get('/off');

  });

Then, we define this loop to automatically grab the measurements from the Pi and update the indicators in the interface every second:

setInterval(function () {

    // Current
    $.get('/current', function(data) {
      $( "#current" ).text(data.current);
    });

    // Power
    $.get('/power', function(data) {
      $( "#power" ).text(data.power);
    });

  }, 1000);

It's now time to test the interface! If you followed the instructions from the previous section, you just need to go once more to the folder where you put the project files and type the following:

sudo node meter_interface.js

Now, using your favorite browser, go to the IP address of the Pi, for example:

http://192.168.0.105/

You should see the interface showing the current measurements taken by the board, which should be at zero, as you just started the software:

You can now click on the On button. You should immediately see the device connected to the project turning on and you should also see the current readings made by the smart plug:

Congratulations, you now have a nice interface that you can use to control your smart plug remotely! Of course, you could also use this interface from a phone or tablet that is connected to the same Wi-Fi network as your Pi.