Building an IoT App With LessCode

 

 

    IoT applications, on the hardware side, are complex : redundancy, connectivity, databases, different sensors, actuators, protocols, etc… A heterogeneous mix of different technologies and specifications.

Making sense of all that real-time data and visualizing it is also complicated.

 

In this article we will examine an IoT app and how LessCode makes the visualizing part simple.

 

The following illustration is a representation of an IoT device communicating with LessCode and updating a smart app. The API used is REST API.

The goal is to build a device which sends data to our server which in turn displays a visual representation of that data in a dashboard inside of a web browser.

 

        The Hardware / Arduino Code

 

    For the prototype, we used an ESP32, a low-cost but very capable microcontroller. We added as inputs a rotary encoder and two switches. A LED serves as an indicator which blinks when data is sent.

 

The following picture is what the prototype looks like.

The following image is the schematic of the prototype.

For programming it, I used the Arduino IDE.

The ESP32 has an integrated Wi-Fi chip which allows it to connect to any Wi-Fi network. The code I wrote reads the inputs periodically, checks if the inputs changed state, then sends that data in a HTTP GET request to the LessCode server located on my Wi-Fi network.

 

 

The following code is the setup.

This code only runs once when the microcontroller boots.

 

(1) The first thing to do is to connect the ESP32 to my Wi-Fi network.

 

(2) The last thing to do before finishing the setup is to initialize and start a timer.

This timer, every 1 ms, triggers an alarm which in turn calls a function which checks the state of the inputs connected to the rotary encoder.

The function called by the alarm reads the inputs of the rotary encoder to determine if it is being turned and if its rotation is clockwise or counterclockwise.

The data that is stored in the variables (rotary encoder count, the state of the switches) is only sent if they have been updated by user action. If it were a data logging app (Ex : a weather app) the data would have been sent to the server whether the values had changed or not.

        The App

 

    Building an smart app with LessCode is easy. The dashboard was built using our UI/UX editor.

The progress bar will be updated at each rotation of the encoder as will the indicators at each click of a switch (they will turn red). The progress bar is a LessCode component as are the containers, indicators, etc...

The app needs some code to receive the data from the device, process it in some way and drive the progress bar and the indicators.

I chose to code that part in Python but you could choose any of the languages included in LessCode

We start by initializing the variables and objects we will manipulate. Getting the HTML elements is not too different from JavaScript. The progress bar is a component so instead of manipulating an HTML element we need to get the object associated with that element, hence the slightly different syntax.

We finish the setup by creating a REST API object and add an event listener on it triggered by each HTTP request we receive from the device.

For each user action on the device, the method _on_rest_api is called.

The rest of the code is straightforward.

Two other methods, one for the rotary encoder, and another for the switches are implemented.

The indicators change color when the switches change state. The progress bar's value is updated for each turn of the rotary encoder.

 

The following video shows the device and the app in action.

Interacting with the device, clicking a switch, turning the rotary encoder updates the app in real-time.

That app is running inside a browser and is being updated in real-time by the IoT device.

 

Sources :

- Music in video

'Machina' by Scott Buckley - released under CC-BY 4.0. www.scottbuckley.com.au