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]

Note that this is one of two accounts you will create in this tutorial.

 
2

Install ‘IoT Network Manager’ wapp

(Wapps = Wappsto web apps)

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

Note that Store now opens in a new window. Please be aware that several of the screenshots in this guide are outdated, so there may be some discrepancies.

 
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].

Note that this is the second of two accounts you will create in this tutorial.

 
 
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.

Please note that if you create your own names, you will have to change the code examples in this tutorial accordingly, so watch out for that!

This network is not related to, for example, your home WiFi network, but rather an independent feature of Wappsto.

 
7

Create a ‘Device’

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

We’re calling our device ‘LED’. Please use the same caution about naming that we noted in step 6.

 

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.

We’re calling our device ‘LED’. Please use the same caution about naming that we noted in step 6.

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.

We’re calling our value ‘On_OFF’. Please note the caution with naming mentioned in steps 6 and 7.

 

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.

We’re calling our value ‘On_OFF’. Please note the caution with naming mentioned in steps 6 and 7.

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. Keep in mind the cautions about naming given in steps 6, 7 and 8.

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))

When you’re done modifying run the main.py application using your console. We use PuTTY.

sudo python3 main.py
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 pre-installed wapp,’Networks and Data’, and locate the Network that you’ve just added to Wappsto and the device with the on / off value. (Please note discrepancy with screenshots).

 

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 ‘Wapp 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 ‘Wapp 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

<script src="index.js"></script>
<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){
  if (document.getElementById('reportValue')) {
    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.