Today we will demonstrate how quickly and simply an example application of an IoT device can be implemented with Flowcode.
The example task is to be able to turn on or off any device via relay contacts controlled by a microcontroller connected via the internet. The interface will be a simple web page.
Pictured above is the final project as a stand-alone battery powered WiFi access point and web server. The IoT device has its latching relay output controlled from the web browser of a mobile phone. The on-board LED also indicates the status of the relay, shown here as on.
For the initial prototype we have chosen to construct this from Matrix TSL E-blocks due to their simple plug and play approach to fast prototyping and project construction.
Here we have used the EB006 multi-programmer board with a PIC16F1937 microcontroller, a WLAN board and a Sensor Motherboard and Relay fitted. Additional boards, such as LCD and LED are also included at the prototype stage such that we can output diagnostic and status information.
The software development is entirely using Flowcode and the included components that greatly simplify the code required. In this example we are using the ESP8226 WLAN component.
This component first requires some properties setting, as shown in the following Flowcode IDE screen shot.
This enables us to quickly setup a web server of two HTML pages, the contents of those pages are as follows, and will be explained later.
Here is the index.htm page:
<html><head><title>IoT Remote Control</title>
<style>
.On {
font-family: Arial;
font-size: 72px;
font-weight: bold;
background-color: lightgreen;
text-align:center;
}
.Off {
font-family: Arial;
font-size: 72px;
font-weight: bold;
background-color: red;
text-align:center;
}
</style></head>
<body class=’%2′>Output is %2<p><form action=’process.htm’
method=’get’><input type=’submit’ value=’Switch %3′>
<input type=’hidden’ name=’s’ value=’%1′></form>
</body></html>
Here is the process.htm page:
<html><head><title>IoT Remote Control</title>
<style>
.run {
font-family: Arial;
font-size: 72px;
font-weight: bold;
background-color: yellow;
text-align:center;
}
</style><script>
function reFresh()
{
location.href=’index.htm’
}
window.setInterval(‘reFresh()’,1000);
</script></head>
<body class=’run’>
Processing …
</body></html>
Our Flowcode flowchart program now simply needs to include code to initialise and setup the server. Here is the start-up code:
In order to process incoming browser requests and reply with the relevant page, all we need to do is to add a program loop that makes a call to CheckForPageRequests. This component macro does all the processing required for us.
The return value will be non-zero if a page request has been processed.
On our index.htm page we have a button, when this is pressed extra parameters are included in the GET request from the browser due to the FORM action. So our next code task is to find out if there were any parameters to the request. This is done by the GetInValue macro.
The index.htm page has one of two possible buttons, “Switch On” or “Switch Off”, our Switch On button sends a value of “1” and our Switch Off button sends a value of “0”, so we can simply test for either of these two values and switch our relay on or off.
We also dynamically change the “out” values for our web page so that if the relay is currently on, then our next status web page should indicate that the relay is on and also provide a “Switch Off” button.
This is done with the SetOutValue macro. You will notice that in our index.htm HTML page we have three unusual text items: %1, %2 and %3. When the page is returned from the Flowcode server component these text items are substituted with the values that have been loaded via the SetOutValue macro. So a call to SetOutValue(3,”Off”) will cause the “%3” text string to be changed to “Off”, hence changing our button to “Switch Off”.
And that’s the project done and working. Just connect to the WiFi access point with a browser!
Here’s a sneak peek of our possible future Matrix TSL IoT board, complete with WiFi and sensor module socket containing a latching relay module …
Top Comments