LED 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

Here are all the steps you need to cover

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.
step1 blank image

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.
Step2 blank image

Install 'IoT Rapid Prototyping' wapp

Go to the menupoint 'Store', find the 'IoT Rapid Prototyping' wapp and install.
Step3 blank image

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.
Step4 blank image

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.
Step5 blank image

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.
Step6 blank image

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.
Step7 blank image

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.
Step8 blank image

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.
Step9 blank image

Unzip and move to your Pi

We're using WinSCP in this example and moving the code to our Pi as shown.
Step10 blank image

Wire up your Pi and LED

Refer to the diagram.
Step11 blank image

Modify 'peripherals.py'

Here's the code. Keep in mind the cautions about naming given in steps 6, 7 and 8. When you're done modifying run the main.py application using your console. We use PuTTY. sudo python3 main.py
Step12 blank image

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.
Step13 blank image

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.
Step14 blank image

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.
Step15 blank image

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'.
Step16 blank image

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.
Step17 blank image

Code your wapp

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

index.html

loading report state

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; }

Step18 blank image

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; } }
Step19 blank image

Run your new wapp

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.
Step20 blank image