IoT Rapid Prototyping Hello World

Blinking LED prototype with wapp

This example to control a LED requires a Raspberry Pi, breadboard, some wires and a LED, and a computer with an Internet connection.

The steps here will show you all of the essential features of working with the Seluxit IoT Platform in Wappsto. Note that they are two separate products. You could certainly use one without the other. But here, we show you how well they can work together.

It should take you about a half an hour to complete

1

Register and log in: Wappsto

Go to wappsto.com, register and log in.

It’s free up to generous usage limits [pricing]

 
2

Install ‘IoT Network Manager’ wapp

(Wapps = Wappsto web apps)

Go to the menupoint ‘Store’, find the ‘IoT Network Manager’ wapp and install.

 
3

Install ‘IoT Rapid Prototyping’ wapp

Go to the menupoint ‘Store’, find the ‘IoT Rapid Prototyping’ wapp and install.

 
4

Open ‘IoT Rapid Prototyping’ wapp

Select the menu point ‘Installed Apps’ and click on ‘IoT Rapid Prototyping’ to open.

Note that the wapp will open in a new tab.

5

Register and Login: Seluxit IoT Platform

This wapp requires you to create an account in the Seluxit IoT Platform. Do that now and then sign in.

This is free too, up to generous usage limits [pricing].

 
 
6

Create a ‘Network’

You will now create a so-called Network on the Seluxit IoT Platform. We are calling ours ‘LED Pi’ in this example.

 
7

Create a ‘Device’

Inside the Network that we’ve just created, go in and create a new ‘Device’.

 

When you create a device, you’ll be promted to fill out a form. Answer the questions meaninfully, as it makes sense to you. But don’t sweat the small stuff – this is just a hello world after all.

8

Create a ‘Value’

In this case, our LED device only has one value – on or off. If you were using, for example, an RGB led, then you might have values for red, green and blue.

 

Here again there are some fields that will be less important to you. That the value is a number that can be either 0 or 1 are the essential features here.

9

Download Python Code

When you’ve finished modeling your Network > Device > Value, download the code and SSL certificates.

You’re also downloading a JSON file. Experienced programmers will recognize here that you could write a program in any given programming language on any device that supports these certificates to connect to the Seluxit IoT Platform.

10

Unzip and move to your Pi

We’re using WinSCP in this example and moving the code to our Pi as shown.

 
 
 
 
11

Wire up your Pi and LED

Refer to the diagram.

12

Modify ‘peripherals.py’

Here’s the code.

import time, sys
import RPi.GPIO as GPIO

ledPin = 11

class Peripherals:

    def __init__(self, sendQueue):
        GPIO.setmode(GPIO.BOARD)
        GPIO.setup(ledPin, GPIO.OUT)
        GPIO.output(ledPin, GPIO.LOW)

    def set_value_led__on_off(self, value):
        if value=='0':
            GPIO.output(ledPin, GPIO.LOW)
            print("Off")

        else:
            GPIO.output(ledPin, GPIO.HIGH)
            print("On")

    def get_value_led__on_off(self):
        return(GPIO.input(ledPin))
13

Bring your Seluxit IoT Network into Wappsto

Under ‘Installed Apps’ got to the ‘IoT Network Manager’ wapp, login with the credentials that you created in step 5.

 
14

Add Network from IoT Platform to Wappsto

Locate the ‘Network’ among your Networks on the Seluxit IoT Plaform and click ‘Add to Wappsto’. Allow access when prompted.

 
 
15

Test connection in Wappsto dashboard

Go to the menupoint ‘Networks and Data’ and locate the Network that you’ve just added to Wappsto and the device with the on / off value.

Open the device and toggle the on / off value. Your LED should respond.

16

Create New Wapp

Under the menu point ‘Installed Apps’ find the ‘App Creator’ wapp which will open in a new tab. Click create new and give the wapp a name, e.g. ‘LED wapp’.

 
 
17

Create file structure for your Wapp

Still in ‘App Creator’, click ‘Edit code’. You’ll have a blank canvas now. What you need to add is a file for index.html, index.js and myStyles.css. The first two are reserved file names, but name your styles whatever you’d like.

 
 

Notice the button ‘Create missing default files’ if you’d like to take a shortcut.

 
 
 
 
18

Code your wapp

Add the code for each of these files. Here’s the code.

index.html

<section id="buttonsArea">
  <p id="reportValue" class="spacey">loading report state</p>
  <button onclick="turnOn();" class="spacey on">On</button>
  <button onclick="turnOff();" class="spacey off">Off</button>
  <button onclick="blink();" class="spacey blink">Blink</button>
  <button onclick="stopBlinking();" class="spacey blink">Stop blinking</button>
</section>

index.js

/* Wappsto's data model Device > Value > State is used to describe the led. Device:Led, Value:on/off, State:'on' or 'off'. The report value tells us the actual status. The Control value is what we send. )*/

load("myStyles.css");

/* The Data object associated with the Network allows for sharing between foreground and background tasks */
var data = getData()[0];

/* the getDevice() function is Wappsto native and promts a popup where you match your device to the installation of this app */
var led = getDevice({
  "name": "LED"
})[0];

var ledOnOff = led.get("value").findWhere({
  "name": "On_OFF"
});

var ledReportState = ledOnOff.get("state").findWhere({
  "type": "Report"
});

var ledControlState = ledOnOff.get("state").findWhere({
  "type": "Control"
});

function turnOn(){
  saveControlValue('1');
}

function turnOff(){
  saveControlValue('0');
}

function blink(){
  data.save({"blink": true});
}

function stopBlinking(){
  data.save({"blink": false});
}

function saveControlValue(theValue){
  ledControlState.save({
    "data":theValue
  }, {
    wait: true,
    error: function(){
      displayReportValue('Error Will Robinson');
    }
  });
}

ledReportState.on("change", function(){
  displayReportValue(ledReportState.get("data"));
})

function displayReportValue(reportValueData){
  document.getElementById('reportValue').innerHTML = 'Your LED is: '+reportValueData;
}

displayReportValue(ledReportState.get("data"));

myStyles.css

#buttonsArea {
  padding:2em;
  margin:2em;
  background:#cccccc;
}

p#reportValue {
  font-family: sans-serif;
  font-size:0.9em;
}

.spacey {
  padding:1em;
  margin:1em 1em 3em 1em;
  display:block;
  width:60%;
}

.on {
  background:darkSeaGreen;
}

.off {
  background:lightCoral;
}

.blink {
  background:lightSlateGrey;
}
19

Create and code automated task (blinking)

You will at this point need to create a main.js file under the ‘Background Data’ section, as show in step 17.

main.js (background)

/* Note that some of this code is repeated from the foreground js file. Common instantiation of objects between the foreground and background is on the road map. */

var data = getData()[0];

var blinking;

var led = getDevice({
  "name": "LED"
})[0];

var ledOnOff = led.get("value").findWhere({
  "name": "On_OFF"
});

var ledControlState = ledOnOff.get("state").findWhere({
  "type": "Control"
});

function saveControlValue(theValue){
  ledControlState.save({
    "data":theValue
  }, {
    wait: true
  });
}

/* Here's the actual functionality */
data.on("stream:data", function(object){
  if(object["blink"]){
    blink();
  } else {
    stopBlinking();
  }
})

function blink(){
  if(!blinking){
    blinking = setInterval(function(){
      if(ledControlState.get("data") == "1"){
        saveControlValue("0");
      } else {
        saveControlValue("1");
      }
    }, 1000);
  }
}

function stopBlinking(){
  if(blinking){
    clearInterval(blinking);
    blinking = false;
  }
}
20

Run your new wapp, go tell your friends

Go to Installed Wapps, open the wapp you just created, which will open in a new tab. Your led should respond.

Please note that, for now, you will need to have your background program open in a tab in order for the blinking functionality to work. But you can close the front end wapp, and you will notice that the blinking functionality still works.

If you were to publish this wapp to Wappsto, the background task would run on our server. It is on our road map to emulate this functionality under development.

How can flashing a LED still be so satisfying? Of course, this is just the beginning.