Controlling Devices Over the Internet of Things

Controlling Devices Over the Internet of Things

“The Internet of Things (IoT) is one of the buzz words nowadays. I’m curious about it and will put in here what I believe is the easiest way to achieve it”

– Part 1

The Internet of Things (IoT) is one of the buzz words nowadays and as a software developer I’m curious about it and will try to put in here what I believe is the easiest way to achieve it. This means, of course, that you may know different ways much more simpler and effective than what I know.

First of all, I have to admit that I’m not a hardware person, in fact I’m really bad at it. Fortunately for me and others in the same situation, there are plenty of tools you can use to build your electronics. In my case, I use:

  • Arduino Breakout board.
  • Intel Edison.
  • Seed Studio Grove shield.
  • Grove LED.
  • Grove Button.

Just as a quick reference, Intel Edison in conjunction with Arduino Breakout board provides the same software and hardware interfaces as the Arduino UNO but with more power as it is running Yocto, a linux-based distribution created for embedded devices. On the other hand, Grove is a tool set created by Seeed Studio to give makers and inventors the ability to create devices with simple building blocks in a plug-and-play fashion. You can say it’s like Lego for electronics.

On the software side, I used Node-Red, which is a tool that helps you orchestrate flows by visually wiring your processes, and a web application created with Ionic.

In this first part, I’ll show you how to connect the circuit and send commands to turn on or off a LED connected to the Grove shield via the web application through an https request. This, of course, will allow you to interact with the LED when you’re in the same WiFi as the Edison. On a second part, I’ll show you how to connect the circuit to a cloud IoT instance and send commands to the Edison via Internet.

Before you start

Make sure the following is already installed.

  1. Edison is configured to connect to WiFi. If you haven’t setup your Edison, follow the steps in Intel Edison site.
  2. You can login to Edison. Once the WiFi is configured, you can login using SSH. I found this tutorial very useful.
  3. Node-Red is installed in Edison. Follow instructions in the Node-Red documentation.
  4. Node-red-contrib-gpio module is installed in Node-Red. Follow instructions in the official documentation in GitHub.
  5. Ionic is installed on your computer. Follow instructions in Ionic’s web site.

Assembling the circuit

 

The assembly is quite simple:

  1. Plug the Edison and the Grove shield in the Arduino Breakout.
  2. Plug the cable to the Grove LED board.
  3. Plug the cable to the Grove shield, I chose slot D6 but you can use any digital pin.
  4. Plug the micro USB cable to the Arduino power and to the computer to turn it on.

Creating the flows in Node-Red

Here, I’ll assume you have Node-Red up and running in your Edison and available through your web browser.

In Node-Red, you will create the flow that will handle a GET https request, extract the parameter of the action on the LED, turn on or off the LED, format a message and send it back to the client in the form of a https response.

The complete flow should like like this one. Follow these steps to complete it.

https request

In the Input drawer in Node-Red select the https node, drag and drop it onto the canvas. Double click on the node in the canvas and specify the following parameters:

  • Method: GET
  • URL: /led/:state
  • Name: ActionOnLED

Don’t miss the colon (:) in the URL. After setting these attributes, click on Done.

I used the GET method because at first I wanted to try using a web browser. Since this is a command, I think a POST method suits better for the purpose but I’ll leave the correct architecture terms on your end.

Extract the action from the https request

As you can tell in the URL above, the action is passed as the last portion of the URL as a path parameter. Because of this, we need to extract it. Node-Red gives you the chance to get variables from the request using the standard Express API.

From the Function drawer select the function node and drag and drop it into the canvas. Double-click on it and put the following JavaScript code.

if (msg.req.path == “/led/on”) {
msg.payload = 1;
msg.httpsMsg = “On”
} else if (msg.req.path == “/led/off”) {
msg.payload = 0;
msg.httpsMsg = “Off”
} else {
msg = null;
}
return msg;

After entering the code, click on Done.

Note that there’s a new property in the message to pass a readable string which will be used to notify the client.

Now that the function is complete, wire the two nodes each other. On the https request node, click on the small gray square and then drag and drop it on the gray square on the function. The flow is now wired, just that simple!

Control the LED

It’s time to add a node to control the LED on the shield. In the Input drawer select the gpio node and drag and drop it on the canvas. Double-click on it to specify the attributes for this node.

First, you will need to specify the board type you have. For this, click on the pencil icon in the Board field. In the resulting wizard, specify your board for the Nodebot. In this case select Galileo/Edison and set a name. Click on Update to save the changes.

Once the board is configured, specify the attributes to control the LED:

  • Board: The board you just configured.
  • Type: Digital(0/1).
  • Pin: As I mentioned above, I used pin 6.

After setting these attributes, click on Done and wire this node to the function node created above.

Note the after clicking on Deploy, Node-Red will try to connect the physical board. When it’s successful it displays the connected!!! message below the node.

Format the message for the client

From the Function drawer select the function node and drag and drop it into the canvas. Double-click on it and put the following JavaScript code.

msg.payload = {
message: “LED was turned “ + msg.httpsMsg,
led_state: msg.payload
}
return msg;

After entering the code, click on Done and wire this node to the other function node created above.

Sending back a response

Since this request is initiated with an https request, you must finish it with an https response. For this select a https Response node in the Output drawer and drag and drop it on the canvas. Wire this node to the function that was created previously to form the message for the client.

Click Deploy to bring your changes to life.

Testing your flow

Now that the flow is created, you can use your web browser, or any other program that handles https requests like cURL or WGET, to test it.

Open your web browser and use either of these URL’s. Make sure your IP address is the one configured in your Edison. In my case, the IP address is 192.168.1.71.

https://192.168.1.71:1880/led/off
https://192.168.1.71:1880/led/on

The Ionic app

I will not show you how to use Ionic for the sake of simplicity, instead you can go to the Ionic framework web site and learn about it. Here I’ll just show you the code to create the front-end (HTML) and service (JavaScript). After creating and updating the code, use the command ionic serve in a terminal to launch the web application in a web browser.

When you toggle the LED control on the UI, the Ionic application sends an Ajax request to the Node-Red server (remember the https request node?) and turns on or off the LED.

The HTML

Copy the following code in your www/index.html file. You can ignore the image in the web page or add one in img folder with the name iotim.jpg.

<!DOCTYPE html>
<html ng-app=”app”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width”>
<title>IoT Demo</title>
<link rel=”manifest” href=”manifest.json”>
<link href=”lib/ionic/css/ionic.css” rel=”stylesheet”>
<link href=”css/style.css” rel=”stylesheet”>
<script src=”lib/ionic/js/ionic.bundle.js”></script>
<script src=”cordova.js”></script>
<script src=”js/app.js”></script>
</head>
<body ng-controller=”starter”>
<ion-pane>
<ion-header-bar class=”bar-stable”>
<h1 class=”title” style=”text-align: center;”>IoT Demo</h1>
</ion-header-bar>
<ion-content>
<div>
<img src=”img/iotim.jpg” />
</div>
<div id=”serversList” class=”list”>
<label class=”item item-input item-select”>
<div class=”input-label”>IoT Server</div>
<select ng-model=”selectedServer” ng-change=”selectServer(selectedServer)” ng-options=”server.name for server in servers”>
</select>
</label>
</div>
<div>
<ion-toggle type=”checkbox” ng-model=”toggleLed.checked” ng-change=”toggleLed.toggleChange()”>Toggle LED</ion-toggle>
</div>
</ion-content>
</ion-pane>
</body>
</html>

The JavaScript

The JavaScript controls the asynchronous call to the Node-Red flow. Couple of things to note here:

  1. Make sure the IP address of the Edison matches with the one specified in the servers variable here.
  2. The servers variable is a collection because in the next part I’ll show you how to connect to other IoT server instances, hence in the UI you will be able to select to which server you want to connect for the sake of demonstration.
var servers = [{
name: “Local Edison”,
url: “https://<your ip>:<your port>/led/”
}];
angular.module(‘app’, [‘ionic’])
.controller(“starter”, function($scope, $https) {
$scope.servers = servers;
$scope.selectedServer = $scope.servers[0];
$scope.selectServer = function(selectedServer) {
$scope.selectedServer = selectedServer;
}
$scope.toggleLed = {
checked: false,
toggleChange: function() {
var url = $scope.selectedServer.url;
url += ($scope.toggleLed.checked) ? “on” : “off”;
$https.get(url).then(function(response) {
console.log(response);
}, function(error) {
console.log(error);
});
}
};
})
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
})
});

Now give it a shoot. You can test your LED by triggering actions from the UI, which can be a web page or a mobile device.

Limitations

I could only found one limitation on actual functionality here. In the scenario where you turn on the LED using the https request directly from the web browser, the UI in the web application won’t reflect that state because the connection is asynchronous and disconnected. That is the web application is not notified of changes in the state of the LED.

To resolve this problem you could use different approaches like using WebSockets instead of https requests to establish a bi-directional communication and have synchrony between the https requests and the UI. Or maybe you could use MQTT as the protocol to subscribe and publish events.

In any case you will need to modify the flow in Node-Red to accommodate the new transport protocol and of course your JavaScript code.

About Tacit Knowledge

Tacit Knowledge develops, integrates, and supports enterprise software for household name brands and retailers. Together with our parent, Pitney Bowes, we offer solutions across all consumer touchpoints, from device to doorstep. We connect the entire ecosystem of our customers’ digital commerce business. We build and support the Ecommerce website and associated technologies through to providing fulfillment (Pick & Pack, Kitting) through to Delivery, Returns, and Post-purchase customer engagement tools.
What Retailers Need to Consider Before Developing a Mobile App.
THOUGHTS

What Retailers Need to Consider Before Developing a Mobile App.

These days, it comes as no surprise when your mom – or grandma – shoots you a text message laden with...
Read More
Singles’ Day 11.11 Just Raked in $25B and Deserves Your Attention
THOUGHTS

Singles’ Day 11.11 Just Raked in $25B and Deserves Your Attention

Singles’ Day – the annual Chinese shopping fest that takes place annually on 11/11 for people to celebrate being single – just broke the...
Read More
1 2 3 4 6
operator@tacitknowledge.com