Interface and Application Programming

May 4, 2024

Challenge

Group assignment:
- Compare as many tool options as possible.
- Document your work to the group work page and reflect on your individual page what you learned.
Individual assignment:
- Write an application that interfaces a user with an input and/or output device(s) on a board that you made.😴

Group Assignment:

As for this week assignment we will be creating a dashboard to monitor and control one of our microcontroller. For me this is not the first time to do so I have used multiple platforms to monitor and control systems (Thinger.io, thingsboard, and Blynk).

for more information please refer to this LINK.

Individual Assignment:

I will be using Thinger.io to visualize my data and build my dashboard.

Thinger.io

Thinger is a cloud IOT Platform that provides tools to prototype, scale, and manage connected products in a very simple way. the platform also have the ability to turn data into insight where you can store data on the platform and create dashboards with the ability to share it.

thinger is formed by two main products a backend (IOT Server) and a web-based frontend.

thinger main features

We have to create account on thinger.io first and then we can start linking the devices, as free account we will be able to have 2 device and 4 dashboards, 4 data bucket, and 4 end points.

free account statistic

Then I will be adding a device to my account, Doing this will give me the device ID and the Accreditation for the Hardware to connect to the socket.

Adding device

Then I Will add the protocol type I want to use in addition to the username and password for the device to have a line of communication to the platform.

Device Info

As for the Protocols there is 4 different types to use (IOTMP, HTTP, MQTT, and NB-IOT).

Protocols

IOTMP : Is a protocol made by thinger.io platform as a full duplex communication protocol. HTTP : Is an Application layer protocol used to communicate between server and client using TCP. MQTT : (Message Queuing Telemetry Transport) is a messaging protocol for restricted low-bandwidth networks and extremely high-latency IoT devices, this is also an Application layer protocol. NB-IOT : Narrowband IoT (NB-IoT) is a wireless internet of things (IoT) protocol that uses low-power wide area network (LPWAN) technology.

IOT Layers

For me I will use IOTMP protocol provided by THINGER.
Then I will give this device a username and a credentials for the device to access the platform.

Adding the device

As for the credentials and ID I have to keep them in a safe document in case I have lost them otherwise I will be in need to have this process again as this device wont be accessible {so I have to delete it and make a new one}.

Then we will have the device status page–> Where we can track the device status and the data transmission in addition to the location of the device.

Device status

Now we will jump to the coding of the MCU

Now we need to start by downloading the library for THINGER.

Download the thinger library

Then I will use one of the ready examples in the library and I will modify it to meet my needs.

Example to use

Example description

Now I will add the DHT library and setup my DHT22 to use it and monitor the temperature and the humidity from the Platform.


#define THINGER_SERIAL_DEBUG

#include <ThingerESP32.h>
#include "arduino_secrets.h"

#include <DHT.h>

// Where the DHT data pin is connected
#define PIN 8 
// DHT sensor Type.
#define TYPE DHT22 

DHT zaid(PIN,TYPE); // Constructor

ThingerESP32 thing(USERNAME, DEVICE_ID, DEVICE_CREDENTIAL);

float temp = 0;
float hum = 0; 

void setup() {
  // open serial for debugging
  Serial.begin(115200);

  zaid.begin();

  pinMode(10, OUTPUT);

  thing.add_wifi(SSID, SSID_PASSWORD);

  // digital pin control example (i.e. turning on/off a light, a relay, configuring a parameter, etc)
  thing["LED"] << digitalPin(10);

  // resource output example (i.e. reading a sensor value)
  thing["Temperature"] >> outputValue(temp);

  thing["Humidity"] >> outputValue(hum);

  // more details at http://docs.thinger.io/arduino/
}

void loop() {
  thing.handle();

  temp = zaid.readTemperature();
  hum= zaid.readHumidity();
}

Arduino Secret page


#define USERNAME "   " //your account username
#define DEVICE_ID "  "// your device ID 
#define DEVICE_CREDENTIAL "   "// your device credentials

#define SSID "   "//Your wifi SSID
#define SSID_PASSWORD "   "//your wifi password

Now I will just upload the code to the MCU and check if its connected to the internet.

Device connected and socket is open

Now On the status I should see the device is online and there is bucket of data in the line of communication.

Device state out after connection

Device status dashboard

On this dashboard I can only check the device status and the location of the device.

Now I will build a dashboard for the variables I want to monitor.

Device dashboard

Now I will press on add dashboard and I will modify it to meet my needs.

Device dashboard creation

Now I have created an empty dashboard then I will start editing it.

Edit dashboard

then I will press on add widget.

add widget

Then I will fill the widget details and the needed type of visualization.

widget details

widget type

Then after selecting the type of widget we need to edit the settings for this type of widget.

widget settings

Then selecting the source of data.

widget data source

I will select temperature then I will need to decide the interval of refreshing the data.
Then I will save and visualize my data.

widget data Done

Then I will repeat this again for the humidity.

Humidity widget data Done

Now I have the data streamed from the MCU to the platform.
I will now send an order from the platform to the MCU to change the LED status.

LED WIdgte

LED WIdgte data source

For this switch I can change its display settings.

LED WIdgte switch display settings

I will choose button style.

button Options

Here we go my dashboard is ready

Dashboard is ready

Reflection

Thinger.io is a very easy platform to use and the way of coding is very easy as the library will handle most of the work and I don’t have to add a lot of complication in order to fetch the data, In addition to this the platform is in the middle where it can provide great solutions for industrial and enthusiast makers.

Arduino Cloud

This is a platform where the main focus is the beginner level enthusiast where it support IOT devices with the minimal need for coding experience.

I will test this platform as I have done before with Thinger –> But it looks full of GUI and every thing can be done through buttons and choosing options.

Let’s go Ahead

I will start by creating an account on the platform and then start by adding the first device.

This Platform Allows the user to create as many device as needed with many dashboards but the limitations is the thing (Which is the connected device).

Arduino Home

Let me start by adding a device first.

Arduino adding device on the cloud

I will start setting up the device.

Setting up the device

For me the device is a third party device (esp32).

Esp32 third party device

After choosing (XIAO esp32c3) from the list –> I will press continue.
THen I will give my device a name.

Name the device

Now the platform will give my device an ID and a KEY which are unique for this device and cant be retrieve.

ID and KEY

Its better to save them.

Now my device is set and ready to be attached to one of my things.

Device set

Now this is the device page –> where I can track the device operation.

Device page

NOw I will connect my device to thing so I can create the code and then build the dashboard.

Create thing

Then this is the thing setup page.

thing setup page

I will start by attaching the device , then i will add the variables, then I can configure the network.

Attaching the device

Adding the variable.

Adding the temperature variable

The temperature variable is float and will be periodically change every 10 second.

Then I will do the same for the rest variables (Humidity and LED)

All variables are added

The LED is boolean type variable, and set to be change on demand.

Now I need to add my code.
So I will go to sketch tab –> I found that the platform have build the code for me and I will only need to add the code for my variables.

Sketch tab

I will copy all the code to my offline IDE and work there.

Now I will start by adding the WIFI details and the key of the device.

Things properties

Then I will add the code for the DHT and the LED.


/* 
  Sketch generated by the Arduino IoT Cloud Thing "Untitled"
  https://create.arduino.cc/cloud/things/f7341391-77e8-47d7-a854-e62d4bb847d4 

  Arduino IoT Cloud Variables description

  The following variables are automatically generated and updated when changes are made to the Thing

  float humidity;
  float temperature;
  bool lED;

  Variables which are marked as READ/WRITE in the Cloud Thing will also have functions
  which are called when their values are changed from the Dashboard.
  These functions are generated with the Thing and added at the end of this sketch.
*/

#include "thingProperties.h"
#include <DHT.h>

// Where the DHT data pin is connected
#define PIN 8 
// DHT sensor Type.
#define TYPE DHT22 

DHT zaid(PIN,TYPE); // Constructor

#define LPIN 10

void setup() {
  // Initialize serial and wait for port to open:
  Serial.begin(9600);
  // This delay gives the chance to wait for a Serial Monitor without blocking if none is found
  delay(1500); 

  zaid.begin(); // DHT sensor with zaid name started.

  pinMode(LPIN,OUTPUT);

  // Defined in thingProperties.h
  initProperties();

  // Connect to Arduino IoT Cloud
  ArduinoCloud.begin(ArduinoIoTPreferredConnection);
  
  /*
     The following function allows you to obtain more information
     related to the state of network and IoT Cloud connection and errors
     the higher number the more granular information you’ll get.
     The default is 0 (only errors).
     Maximum is 4
 */
  setDebugMessageLevel(2);
  ArduinoCloud.printDebugInfo();
}

void loop() {
  ArduinoCloud.update();
  // Your code here 
  onTemperatureChange();
  onHumidityChange();
  onLEDChange();
  
}



/*
  Since Temperature is READ_WRITE variable, onTemperatureChange() is
  executed every time a new value is received from IoT Cloud.
*/
void onTemperatureChange()  {
  // Add your code here to act upon Temperature change

  temperature=zaid.readTemperature();
}

/*
  Since Humidity is READ_WRITE variable, onHumidityChange() is
  executed every time a new value is received from IoT Cloud.
*/
void onHumidityChange()  {
  // Add your code here to act upon Humidity change

  humidity=zaid.readHumidity();
}

/*
  Since LED is READ_WRITE variable, onLEDChange() is
  executed every time a new value is received from IoT Cloud.
*/
void onLEDChange()  {
  // Add your code here to act upon LED change

  if(lED ==1){
    digitalWrite(LPIN,HIGH);

  }else{digitalWrite(LPIN,LOW);}
}

This is the main code.


// Code generated by Arduino IoT Cloud, DO NOT EDIT.

#include <ArduinoIoTCloud.h>
#include <Arduino_ConnectionHandler.h>

const char DEVICE_LOGIN_NAME[]  = "0e3ef791-b6c2-4b4b-8d9f-1386a75e679b";

const char SSID[]               = "";    // Network SSID (name)
const char PASS[]               = "";    // Network password (use for WPA, or use as key for WEP)
const char DEVICE_KEY[]  = "";    // Secret device password

void onHumidityChange();
void onTemperatureChange();
void onLEDChange();

float humidity;
float temperature;
bool lED;

void initProperties(){

  ArduinoCloud.setBoardId(DEVICE_LOGIN_NAME);
  ArduinoCloud.setSecretDeviceKey(DEVICE_KEY);
  ArduinoCloud.addProperty(humidity, READWRITE, 10 * SECONDS, onHumidityChange);
  ArduinoCloud.addProperty(temperature, READWRITE, 10 * SECONDS, onTemperatureChange);
  ArduinoCloud.addProperty(lED, READWRITE, ON_CHANGE, onLEDChange);

}

WiFiConnectionHandler ArduinoIoTPreferredConnection(SSID, PASS);

This is the properties file.

Now I will Upload the code to the microcontroller.

On the serial monitor we can check if the MCU is connected or not.

Connected

on the cloud also we can check the device status.

Connected on the cloud

Also from the device page we can check status of the device.

Device status page

Now After checking the device and its status I need to monitor the data so I have to build a dashboard.

Dashboard building

Now I will press on (+ Dashboard) then I will edit the dashboard by adding the widget needed.

Dashboard layout

Adding the widget

thing widget

Now I can select the type of widget I need.

thing widget

Now I will just press on create widget.

Dashboard Created

Here we go It works

Reflection

The most simplest platform to use there is zero complexity and everything is clear in addition to the wide range of information on the internet about it, In my opinion this platform is very useful for naive and mid range coders who know basic of coding as the platform builds all the needed code for the user.

In case I want to compare Arduino with Thinger I would recommend using thinger for the light library they are using compared to Arduino in addition to this the option of saving data within buckets and then retrieve it for visualization but In Arduino this feature is not available but it works within the variable it self as you can download the historic data but you can’t manipulate on the cloud.

In summary thinger is more professional way of using IOT platforms that can be used for both business and enthusiast but Arduino is more to enthusiast.