Embedded Laboratory

Install Mosquitto MQTT Broker on Raspberry Pi 5

noreply@blogger.com (Embedded Laboratory) — Sun, 10 Mar 2024 07:57:00 +0000

Hello Everyone, In this post I will show you guys how to install, test, and configure the Moqsuitto MQTT for MQTT communication on the newly launched Raspberry Pi 5 board.

This post will be the foundation for my upcoming Home Automation projects based on ESP32, Raspberry Pi, InfluxDB, and Grafana.

In this post the Mosquitto broker will run on the Raspberry Pi 5, which means that the devices connected on the same network can publish and subscribe, if you are looking for a Mosquitto broker that can be accessed globally over the internet then you need to look for options such as Cloud MQTT, Hive MQTT, Digital Ocean and others.

As one of the most experienced PCB manufacturers in the World, PCBWay prides itself on being your best business partner as well as a good friend in every aspect of your PCB needs.

MQTT Basic Concepts

MQTT stands for Message Queuing Telemetry Transport. MQTT is a simple messaging protocol, designed for constrained devices with low bandwidth. So, it is the perfect solution to exchange data between multiple IoT devices.
MQTT communication works as a publish and subscribe system. Devices publish messages on a specific topic. All devices that are subscribed to that topic, will receive the message.

In MQTT there are a few basic concepts that we need to understand, and they are as below.

Publish/Subscribe
Messages
Topics
Broker

MQTT Publish/Subscribe

In a publish and subscribe system, a device can publish a message on a topic, or it can be subscribed to a particular topic to receive messages.

The above picture illustrates the simple publish and subscribe, here "Device-1" publishes on a topic, while "Device-2" is subscribed to the same topic that "Device-1" is publishing in, so "Device-2" will receive the message.

MQTT Messages

Messages are the information that we want to exchange between the devices, it can be a message like a command, to turn on or off a relay, or data like sensor readings.

MQTT Topics

Topics are the way we register interest in incoming messages or how we specify where we want to publish the messages. Topics are represented with strings, and topics can be nested also with the forward slash.

For example "MainTopic/SubTopic-1".

Please keep in mind that the topics are case-sensitive.

MQTT Broker

The MQTT broker is responsible for receiving all messages, filtering them, deciding which device is interested in them, and publishing the message to all subscribed clients. There are several brokers available in the market, but we will be using the Mosquitto MQTT broker.

The Mosquitto MQTT broker can be installed on any PC with all major operating systems, but Raspberry Pi 5 is a very convenient choice, as normally we can't keep our PC on always but this is not the problem with the Raspberry Pi, make sure to observe the temperature of the Raspberry Pi to avoid any damage, I will prepare an upcoming tutorial on this, and update links here once it is ready.

Prerequisites

Before continuing with this tutorial, you should be familiar with the Raspberry Pi board and its operating system, and you need the following hardware.

Raspberry Pi Board
Micro SD Card
Raspberry Pi Power Supply

Installing Mosquitto Broker on Raspberry Pi OS

Installing Mosquitto Broker is very simple, but before installing the Mosquitto first make sure that your Linux distribution is updated with the latest available version, and this can be done using the following commands.

sudo apt update
sudo apt upgrade

These commands will update the Linux to the latest available version, and could take some time, but don't worry about this time.

Now use the following command to install the Mosquitto Broker and Clients.

sudo apt install -y mosquitto mosquitto-clients

Once the installation is completed, to make the Mosquitto auto starts when the Raspberry Pi boots, you need to run the following command.

sudo systemctl enable mosquitto.service

Now type the following command to start the Mosquitto broker.

mosquitto -v

Mosquitto Broker Running

This command will start the Mosquitto broker, and now we are good to proceed ahead with testing the "Publish" and "Subscription" of topics.

The above command also returns the version of the Mosquitto broker and will also prompt the message "Starting in local mode. Connections will only be possible from clients running on this machine. Create a configuration file that defines a listener to allow remote access".

This is normal, this means that by default we can't communicate with the Mosquitto broker from other devices, this means that if you want an external device, for example, ESP32 to publish some message to the Raspberry Pi, then it is not possible with the default configuration, we need to update the configuration to allow this, and we will see this in the upcoming section. But before proceeding further let's check the "Publish" and "Subscription" of the messages.

The following is the command to subscribe to the topics.

mosquitto_sub -h "localhost" -p 1883 -t "topic"

Here, I am using the hostname "localhost" and port number 1883, which is the default port for Mosquitto MQTT, and the topic that I am subscribing to is the name "topic", so whenever someone publishes some message with the topic name as "topic", we see the message.

Similarly the following is the command to publish the message.

mosquitto_pub -h "localhost" -p 1883 -t "topic" -m "Hello World from Raspberry Pi 5"
mosquitto_pub -h "localhost" -p 1883 -t "topic" -m "Once Again, Hello World from Raspberry Pi 5"

Here I am publishing the two messages, the following screenshot illustrates this whole transaction.

Publish and Subscription

Enabling Remote Access

As mentioned above also, with the above setup other devices can't publish to the broker running on the Raspberry Pi unless we update the "MQTT Configuration" file. In this tutorial, we will cover only the "No Authentication" configuration, in the future I will either update or create a new tutorial with "User Based Authentication" which is a more practical scenario.

So as mentioned above we need to update the Mosquitto Broker "MQTT Configuration" file, which is usually present under the following path.

/etc/mosquitto/mosquitto.conf

To open this file we will use the "nano" in-build text editor, and the command will look as follows.

sudo nano /etc/mosquitto/mosquitto.conf

After opening the file, the content looks like this.

MQTT Global Configuration File

As you can see in this file, it is advised to create a local configuration file in the folder "conf.d", so I will close this file by using "Ctrl+X" and then create a new MQTT configuration file using the following command.

sudo nano /etc/mosquitto/conf.d/mosquitto.conf

And this command will create a new file with the name "mosquitto.conf" inside the folder "conf.d", inside this file we will specify the MQTT port number as 1883, and we will set the "allow_anonymous" setting to true, and after setting this, all devices shall be able to publish and subscribe to Mosquitto broker running on the Raspberry Pi.

listener 1883
allow_anonymous true

Creating Mosquitto Configuration File

Mosquitto Configuration File Creation Completed

Once this file is created, we need to restart the "Mosquitto" so that it takes the latest configuration settings available from this newly created configuration file, and this can be done using the following command.

sudo systemctl restart mosquitto.service

Ideally, this command should work out of the box, but for me, it doesn't work, as you can see in the following image.

Error while Restarting Mosquitto Service

To fix this problem there are multiple ways, the first is to restart the Raspberry Pi, after booting up it should work automatically, but sometimes it is not a good choice to restart the Raspberry Pi, in that case, I did is to first stop the service, and then disable the service, and then enable the service and then started the Mosquitto again, and for this, I have to use the following commands back to back.

sudo systemctl stop mosquitto.service
sudo systemctl disable mosquitto.service
sudo systemctl enable mosquitto.service
mosquitto -v

Stopping and Starting Mosquitto

Once this is done the Mosquitto will start again, as shown below.

Mosquitto Running Again

And now it is possible to access the Mosquitto Broker running on Raspberry Pi, from other devices on the same network, but if this is still not working, then I would suggest you guys restart the Raspberry Pi. In my case, this also doesn't work, but after restarting the Raspberry Pi 5, it started working.

Now to test, I will test using my Windows 11 laptop, which also has Mosquitto installed and running, I will use my Windows 11 command prompt to send a message over a topic named "topic", to see if this is working.

Publishing Using Windows 11 to Raspberry Pi 5

I used the same Publish and Subscribe commands, but instead of using the "localhost" name I used the IP address assigned to the Raspberry Pi, to find the IP address assigned you can check your router setting or type "hostname -I" to find this out. As you can see both publish and subscription works fine.

Conclusion

We learned how to install the Mosquitto broker on the Raspberry Pi and also learned how to Publish and Subscribe topics on the local host and also from external devices such as Windows.

We will use this knowledge to build home automation projects for our needs in the future.

Get Sensor Data and Controlling Devices Using ESP32 and Android Application over MQTT

noreply@blogger.com (Embedded Laboratory) — Tue, 27 Feb 2024 06:37:00 +0000

Hello everyone, In this post I will explain the working of my project based on the ESP32 microcontroller. In this project, I will show you, how to control the devices and get sensor data using ESP32 microcontroller and MQTT.
The following is a demo animation of this project.

Project Demo

As you can see in the above animated image the ESP32 is connected with the DHT11 sensor to sense the temperature and humidity data and it is also connected with the TFT display, which is used to display the temperature and humidity values.

You can see on the display there are 2 LEDs, one is a normal Red LED and one is a RGB LED. I didn’t use the physical LEDs instead I am simulating the LEDs using the LVGL graphics library. There is a switch, which is used to control the single-color LED state.

As one of the most experienced PCB manufacturers in the World, PCBWay prides itself on being your best business partner as well as a good friend in every aspect of your PCB needs.

I will use this block diagram to explain what is happening inside the system, as the first step the ESP32 will connect to the Wi-Fi router, and after the connection is successful, it will connect with the MQTT broker, once the connection is successful, it will start publishing the Sensor data to the broker.

Block Diagram

On the other hand, the application developed using the QT framework, will subscribe to this data, and display this on its application, similarly, we can control the LEDs from the application, using a normal switch which is used to control the red LED and also by using the sliders, with sliders we can generate a color, and the same color will be displayed on the ESP32 TFT screen.

QT Android Application

The above image illustrates the user interface of the application is developed, this application is intentionally developed using the QT framework, so that it can run on all major operating systems like Windows, Android, Linux, and others, without any modifications, as QT is cross-platform.

COMPONENTS NEEDED:

ESP32 Development Board
ILI9341 TFT Display
Breadboard and Jumper Wires
WiFi Router with which ESP32 can connect

Connection Diagram

From the above picture, the pinout is not visible properly, so you use the below-mentioned table for the connections.

ILI9341 Connection with ESP32

SOFTWARE REQUIREMENTS:

ESP-IDF (Espressif IoT Development Framework)
Time synchronization component from ESP-IDF
ILI9341 Display Driver (Click Here)

What is MQTT

MQTT (Message Queuing Telemetry Transport) is a lightweight messaging protocol designed for small-footprint devices with limited resources, such as sensors, microcontrollers, and mobile devices, to communicate over networks with varying levels of reliability.
Here are some key features of MQTT:

Lightweight: MQTT is designed to be lightweight and efficient, making it ideal for use in resource-constrained environments. The protocol uses a publish/subscribe messaging pattern that minimizes network bandwidth and device processing requirements.
Publish/Subscribe Model: MQTT follows a publish/subscribe messaging model, where devices (publishers) publish messages to topics, and other devices (subscribers) subscribe to topics to receive messages. This decoupling of publishers and subscribers enables flexible and scalable communication patterns.
Quality of Service (QoS): MQTT supports three levels of Quality of Service (QoS) to ensure message delivery reliability:

QoS 0 (At most once): The message is delivered at most once, without any acknowledgment or guarantee of delivery.
QoS 1 (At least once): The message is guaranteed to be delivered at least once, but duplicates may occur.
QoS 2 (Exactly once): The message is guaranteed to be delivered exactly once by using a two-step handshake mechanism.

Retained Messages: MQTT supports retained messages, which are special messages that are stored on the broker and delivered to new subscribers when they subscribe to a topic. Retained messages are useful for transmitting the most recent state or configuration information to new subscribers.
Last Will and Testament (LWT): MQTT allows clients to specify a Last Will and Testament message, which is published by the broker if a client unexpectedly disconnects. LWT messages are useful for detecting and handling client failures or disconnections.
Session Persistence: MQTT brokers can optionally support session persistence, which allows clients to resume their previous sessions and receive missed messages when they reconnect. Session persistence ensures reliable message delivery even in the presence of network interruptions or client disconnects.
Security: MQTT supports various security mechanisms, including username/password authentication, SSL/TLS encryption, and client certificates, to ensure secure communication between clients and brokers.

MQTT is widely used in Internet of Things (IoT) applications, home automation systems, industrial monitoring and control systems, and other distributed systems where lightweight and reliable messaging is required. Its simplicity, efficiency, and flexibility make it a popular choice for IoT communication protocols.

Project Explanation

The following video demonstrates the complete working of the project.

At power-up ESP32 will connect to the WiFi router and then it will connect with the MQTT broker, here I am using the free MQTT broker, for hobby based project the free MQTT broker such as "test.mosquitto.org" is sufficient, but keep in mind to not send any sensitive data.
Clicking on the "connect" button will connect the application to the MQTT broker and clicking on the "disconnect" button will disconnect it from the MQTT broker.
Moving the switch button to the "On" position in the application or on the TFT screen will turn on the LED on the ESP32, and moving the switch button to the "Off" position in the application or on the TFT position will turn it off.
The switch button in the application is synchronized with the switch button on the TFT display, which means if we change the state of the switch button on the TFT display, the state is adjusted in the application also.
Now coming to the sliders, there are three sliders to control the Red, Green, and Blue colors of the LED, as we change the slider, the colors are changed, and the same colors are displayed on the TFT screen, this feature can be used to control the RGB LED bulbs, a Home Automation project.
Moving the sliders to 0, 0, 0 position means LED off, which is represented as black color, similarly setting the value 255, 255, 255 will represent the full white color.
Sometimes you might feel that the color generated on the application does not exactly match the color on display, but this is due to the camera recording, with naked eyes this looks exactly similar.
Since we are using the QT framework the same application works the same on Windows, Android, and Linux platforms, I have tested this on Windows and Android, but I am very sure that it will work on other platforms also without any modification.

Conclusion

This is a small project made by using ESP32, DHT11, and ILI9341 display controllers, the project can be extended to make a full home automation project, where sensor data from several devices can be published and displayed on the applications, in future my plan is to visualize this whole data on Grafana as a dashboard, similar to this project.

Weather Monitoring System Using ESP32 and InfluxDB

The code for this project can be downloaded from the following links.

Analog Clock Using ESP32 with SNTP Time Synchronization

noreply@blogger.com (Embedded Laboratory) — Fri, 16 Feb 2024 21:28:00 +0000

Analog clocks have a timeless appeal, and adding internet-based time synchronization can make them even more fascinating.

In this tutorial, we'll utilize the ESP-IDF framework and an ILI9341 display controller to create a simple analog clock synchronized with accurate time obtained via SNTP, for this post I am using India's time zone, but this can be easily changed to any other time zone. I am using the LVGL graphics library, some image assets for the background, and some images for displaying the hours, minutes, and seconds dials.

The following image illustrates the demo of this small project, as you can see the ESP32 automatically synchronizes the time in India using the NTP servers.

Demo Application

This post is sponsored by PCBWay, with more than a decade in the field of PCB prototype and fabrication, PCBWay is committed to meeting the needs of their customers from different industries in terms of quality, delivery, cost-effectiveness, and any other demanding requests.
As one of the most experienced PCB manufacturers in the World, PCBWay prides itself on being your best business partner as well as a good friend in every aspect of your PCB needs.

The following is the video of this project on YouTube.

Understanding SNTP and NTP Servers:

NTP (Network Time Protocol) and SNTP (Simple Network Time Protocol) are protocols used for synchronizing clocks over a computer network. They allow devices to obtain accurate time information from designated time servers.

NTP Servers:

NTP servers are computers equipped with highly precise atomic clocks or GPS receivers. These servers are responsible for maintaining accurate time and distributing it to clients over a network. NTP servers form a hierarchical structure, with higher-stratum servers synchronizing with lower-stratum servers to ensure accuracy and reliability.

Stratum Levels: NTP servers are categorized into strata, with Stratum 0 being the most accurate time source (e.g., atomic clocks or GPS satellites) and Stratum 15 being the least accurate. Stratum 1 servers directly synchronize with Stratum 0 sources, while lower-stratum servers synchronize with higher-stratum servers in a hierarchical manner.

Public NTP Servers: Public NTP servers are maintained by organizations and institutions worldwide, offering free access to accurate time information. These servers are commonly used by devices connected to the internet for time synchronization. In this post, I will be using one of the public NTP servers.

Private NTP Servers: Organizations may deploy private NTP servers within their networks for internal time synchronization. These servers can synchronize with public NTP servers or higher-stratum servers within the organization's network. These types of servers are used by companies.

SNTP Servers:

SNTP (Simple Network Time Protocol) is a lightweight version of NTP designed for simpler systems or applications where high accuracy is not critical. SNTP clients are capable of synchronizing their clocks with SNTP servers using a simplified subset of NTP functionality.

Synchronization Process: SNTP clients periodically query SNTP servers for time updates. The servers respond with the current time information, allowing clients to adjust their clocks accordingly. Unlike NTP, SNTP does not perform complex clock synchronization algorithms and does not maintain strict synchronization accuracy.

Usage: SNTP is commonly used in embedded systems, IoT devices, and applications where lightweight time synchronization is sufficient. While it may not provide the same level of accuracy as NTP, it is suitable for many practical scenarios.

Components Needed:

ESP32 Development Board
ILI9341 TFT Display
Breadboard and Jumper Wires
WiFi Router with which ESP32 can connect

Software Requirements:

ESP-IDF (Espressif IoT Development Framework)
Time synchronization component from ESP-IDF
ILI9341 Display Driver (Click Here)

Software Development

If you are following my blog and YouTube videos, you can use any of the following posts to reuse the existing modules, such as code to connect with the WiFi router, ILI9341 drivers, and the LVGL integration.

Visualizing Temperature and Humidity Data on Display and ThingSpeak using ESP-IDF

Building a Weather Station Web Server with OTA Updates Using ESP32 and ESP-IDF Framework

Temperature and Humidity Graph Using ESP32 ILI9341 DHT11 and LVGL

I prepared a simple activity diagram to depict what is happening inside the software.

Activity Diagram

The project is divided into three tasks, the first is the "Main Task" that triggers the other two tasks i.e. "SNTP" task and the "GUI Manager" task.

Main Task

The main task is very simple in nature, it starts the GUI manager task, which in turn displays the busy indicator animation, that the ESP32 is trying to connect with the WiFi router. Once the router is connected, it triggers an event to the GUI manager to task, to update the labels and indicate that now we are trying to connect with the SNTP server, and here we trigger the SNTP task.

The following is the source for the "Main" task.

void app_main(void)
{
  // Disable default gpio logging messages
  esp_log_level_set("gpio", ESP_LOG_NONE);
  // disable default wifi logging messages
  esp_log_level_set("wifi", ESP_LOG_NONE);

  esp_err_t ret = nvs_flash_init();
  if (ret == ESP_ERR_NVS_NO_FREE_PAGES || ret == ESP_ERR_NVS_NEW_VERSION_FOUND)
  {
    ESP_ERROR_CHECK(nvs_flash_erase());
    ret = nvs_flash_init();
  }
  ESP_ERROR_CHECK(ret);

  // start the GUI manager
  gui_start();

  while (true)
  {
    if( wifi_connect_status == false )
    {
      // wifi not connected, connect with WiFi (it will take some time)
      app_connect_wifi();
      if( wifi_connect_status )
      {
        gui_send_event(GUI_MNG_EV_WIFI_CONNECTED, (uint8_t*)&time_info );
        ESP_LOGI(TAG, "WiFi connected, now synchronizing with NTP server.");

        // connection establish, start the SNTP task
        sntp_time_sync_start();
      }
    }
    else
    {
      // check if synchronization with NTP server is cone or not
      if( first_time_sync == false )
      {
        sntp_time_sync_get_time_tm( &time_info );
        if( time_info.tm_year > (2016-1900) )
        {
          gui_send_event(GUI_MNG_EV_SNTP_SYNC, NULL);
          ESP_LOGI(TAG, "Time Synchronization done move to next screen.");
          first_time_sync = true;
          // now start a periodic timer to update the clock every second
          // Tod Update timer
          const esp_timer_create_args_t tod_increment_timer_args =
          {
            .callback = &tod_increment,
            .name = "ToD Increment"
          };
          esp_timer_handle_t tod_increment_timer;
          ESP_ERROR_CHECK(esp_timer_create(&tod_increment_timer_args, &tod_increment_timer));
          ESP_ERROR_CHECK(esp_timer_start_periodic(tod_increment_timer, TOD_INCREMENT_PERIOD_MS * 1000));  // here time is in micro seconds
        }
        else
        {
          ESP_LOGI(TAG, "Time not synchronize, will try again..");
        }
      }
      else
      {
        time_sync_counter++;
        if( time_sync_counter > SNTP_TIME_SYNC )
        {
          time_sync_counter = 0;
          ESP_LOGI(TAG, "Synchronizing Time");
          sntp_time_sync_get_time_tm( &time_info );
        }
      }
      // common delay for both scenarios
      vTaskDelay(MAIN_TASK_TIME/portTICK_PERIOD_MS);
    }
  }
}

The following are the key points from the above program.

Connect with the Wi-Fi router
Once the connection is successful send the event to the GUI Manager task to update the graphics
Once the connection is successful start the SNTP task.
Once the connection with the NTP server is established and we get the valid date and time, post another event to the GUI manager task to update the graphics and display the analog clock
Start a 1-second timer, using the ESP-IDF timer software module, this timer module will increment the time by one second, and post the event to the graphical module to update the Analog clock.
In the main task itself, after every 1 minute, the time is synchronized with the NTP server.

SNTP Task

In the SNTP task, we configure the SNTP software module to synchronize India's time, and then we try to obtain the time every 1 minute.

The following is the code for the "SNTP" task.

/**
 * @brief SNTP Time Sync Task
 * @param pvParameter 
 */
static void sntp_time_sync_task( void *pvParameter )
{
  while(1)
  {
    sntp_time_sync_obtain_time();
    vTaskDelay(1000/portTICK_PERIOD_MS);
  }
  vTaskDelete(NULL);
}

In the SNTP task function, we do the following things.

Every 10 seconds (this can be variable also, my recommendation is to use 1 minute, as in the Main task we are getting the time after every minute), and we try to get the time information from the NTP server.
But at power-up the time is not correct this can be checked by getting the value year value.
If the year values are out-of-range, we initialize the SNTP software mode in polling mode and update the server name as "pool.ntp.org", this is a free public NTP server, which we mentioned above, and once this is done, initialize the SNTP module by calling the function "sntp_init".
Once the above step is done, we will set the India time zone as shown below.
// set the local time zone (this is the Indian Time Zone)
setenv("TZ", "IST-5:30", 1);
tzset();
Once this is done, we will try again to obtain the time, and since the connection is established, we will get the correct time from the NTP server.

GUI Task

The Graphical task is similar to the previous projects, here one of the important things is to develop the graphics, like the background, and dials for the clock, which can be done in tools like "Inkscape" etc, unfortunately this is not my expertise area, so I downloaded these graphics from online, there are several websites which provide free graphics. The following are the graphics that I used to make the analog clock.

Background for Analog Clock

Dial for Hour Hand of Analog Clock

Dial for Minute Hand of Analog Clock

Dial for Second Hand of Analog Clock

Then all of these three dials are combined together and every second is updated, using the following code.

static void gui_update_time( uint8_t *pData )
{
  struct tm *time_info;
  time_info = (struct tm*)pData;
  // one second increment is equals to 6 degrees, full round is 360 and total
  // seconds is 60, hence 360/60 = 6 and then for LVGL * 10
  int16_t seconds_angle = (int16_t)(time_info->tm_sec * 60);
  // same as seconds for minutes
  int16_t minute_angle =  (int16_t)(time_info->tm_min * 60);
  // one hour increment is equal to 30 degrees, full round is 360 degree & total
  // hours is 12, hence 360/12 = 30 degrees, and then for LVGL x 10
  // also compensate for minute changes also, hour angle = hour*30 + (minute/60)*30 and then for LVGL multiply by 10
  // hour angle = (hour*30 + (minute*30/60))*10 => this 10 is for LVGL
  // simplified as = hour*30*10 + minute*300/60
  // further simplified as = hour*300 + minute*5
  int16_t hour_angle = (int16_t)((time_info->tm_hour * 300) + (time_info->tm_min*5) );
  ESP_LOGI(TAG, "Time Values: %d:%d:%d", time_info->tm_hour, time_info->tm_min, time_info->tm_sec);
  ESP_LOGI(TAG, "Time Angles: %d, %d, %d", hour_angle, minute_angle, seconds_angle );
  lv_img_set_angle(ui_imgSecond, seconds_angle);
  lv_img_set_angle(ui_imgSecDot, seconds_angle);
  lv_img_set_angle(ui_imgMinute, minute_angle);
  lv_img_set_angle(ui_imgHour, hour_angle);
}

The above code is executed every second because an event is triggered from the "Main" task every second to update the display, as shown below.

/**
 * @brief Increment Time of Day every second
 *        In this function second value is updated and event is posted to gui
 *        manager, so that it can update seconds dial
 * @param arg 
 */
static void tod_increment( void *arg )
{
  time_info.tm_sec++;
  // this is temporary alignment, in actual this will be updated with ntp sync
  if( time_info.tm_sec >= 60 )
  {
    time_info.tm_sec = 0;
    time_info.tm_min++;
  }
  if( time_info.tm_min >= 60 )
  {
    time_info.tm_min = 0;
    time_info.tm_hour++;
  }
  if( time_info.tm_hour >= 24 )
  {
    time_info.tm_hour = 0;
  }
  gui_send_event(GUI_MNG_EV_TIME_UPDATE, (uint8_t*)&time_info );
  ESP_LOGI(TAG, "1sec Event to update display");
}

Conclusion

You can download the complete code from the GitHub page by clicking here.

So with this project, you have now synchronized the time just like the smartphones from the NTP servers.

This project can be further updated to synchronize and display the time of various locations by setting the respective time zone, and also a digital clock shall be added, in case someone wants to view the time using a digital clock.

In case you have some doubts or comments regarding this project, feel free to use the comment section.

Visualizing Temperature and Humidity Data on Display and ThingSpeak using ESP-IDF

noreply@blogger.com (Embedded Laboratory) — Sat, 10 Feb 2024 08:11:00 +0000

In this post, I will demonstrate how we can use the ESP32 module to sense the temperature and humidity data from the DHT11 sensor and then display this data on the ILI9341-based display module and also send this data to ThingSpeak cloud for visualization.

For visualization on the display, I am using the LVGL library, and to send data to the ThingSpeak cloud, I am using the ESP-IDF IOT Framework, not the Arduino.

Temperature and Humidity Data Visualization on ThingSpeak

Temperature and Humidity Data Visualization on TFT

You can watch the below video or read the post.

As one of the most experienced PCB manufacturers in the World, PCBWay prides itself on being your best business partner as well as a good friend in every aspect of your PCB needs.

Prerequisite for this Tutorial

ESP32 Board
DHT11 Sensor
ILI9341 Based Display
Some Cables

If you are interested in Arduino-based tutorials, then there are some available on the blog itself, you can get help from it to build your project using Arduino, but this post uses the ESP-IDF and is written in "Embedded-C" programming language.

The following is the connection diagram.

Connection Diagram

The following is the Activity Diagram illustrating the software module arrangements.

Activity Diagram

What is ThingSpeak?

ThingSpeak is an IoT platform for data collection and analytics that serves as a bridge connecting edge node devices such as temperature, humidity, pressure, etc. sensors to collect data and data exploratory analysis software to analyze data.
ThingSpeak serves as the data collector which collects data from edge node devices (ESP32 in this case) and also enables the data to be pulled into a software environment for historical data analysis.

The primary element of ThingSpeak activity is the channel, which contains data fields, location fields, and a status field. After you create a ThingSpeak channel, you can write data to the channel, process and view the data with MATLAB code (which is not the scope of this post), and react to the data with tweets and other alerts.
The typical ThingSpeak workflow lets you:

Create a Channel and collect data
Analyze and Visualize the data
Act on the data using any of several Apps.

I am not going to tell you how to create an account on ThingSpeak, it's a very trivial process, and you just need to create an account using your email ID, and then create a channel with two fields, here I created two fields, one for temperature and another for humidity, in case you are using some other sensor, you can update the fields accordingly.

So in the post, we will measure the temperature and humidity values using a DHT11 sensor with the help of an ESP32 module and then send these values to the ThingSpeak channel, by doing this you can see the temperature and humidity values of your home from any corner of the world using ThingSpeak.

Locally we will also display the temperature and humidity data in the form of labels and graphs on TFT display.

Interfacing with DHT11 Sensor

As a first step, we will use the ESP32 to capture the temperature and humidity information from the DHT11 temperature sensor. So, for this I have created a software library "dht11", you can use this, or alternatively you can use any other software library, and update the software accordingly.

The library prepared is very straightforward to use, the following are the functions to initialize and get the temperature and humidity information.

// initialize dht sensor library
dht11_init(DHT11_PIN, false);
// Get DHT11 Temperature and Humidity Values, when the status is DHT11_OK
dht11_read().status
dht11_read().humidity;    // Get Temperature
dht11_read().temperature; // Get Humidity

Initializing the Display SW Module

The next step is to initialize the display module, which is very well handled by using multiple software modules such as "display_mng", "ili9341", "xpt2046" and "gui_mng".

Here the idea of creating multiple modules is to make software modular in nature, from the application point of view, we just need to update the "gui_mng" module to get something displayed on the TFT screen, the rest of the files are used to achieve the modularity. The following lines explain the purpose of each software module.

ILI9341: This module contains the drivers for the ILI9341 display controller, if your project doesn't use this display controller then you have to update your drivers accordingly.
XPT2046: This module contains the drivers for the XPT2046 resistive touch controller, as of now this is not used in our project, but it is functional, and in my upcoming posts, I will show you some examples that use this also.
Display Manager: This module contains the actual code to send data to the ILI9341 controller and XPT2046 controller, this module implements the SPI communication interface and configures the LVGL graphics library display drivers and input drivers, and then this module also starts the GUI manager task.
GUI Manager: This is a software module that is exposed to the application code, all the graphics-related things will be implemented and handled here. For example, if we want to update some screen, we will handle this in this module only, by doing this we will make our code modular and easy to handle, and this is done using FreeRTOS Queues, so whenever we want to update something, we will just post an event from the main application code, and GUI manager will update the corresponding screen accordingly.

The following are the important functions of the GUI manager module.

// start the gui task, this handles all the display related stuff
  gui_start();

// trigger event to display temperature and humidity
gui_send_event(GUI_MNG_EV_TEMP_HUMID, NULL );

Initializing the ThingSpeak SW Module

The ThingSpeak software module is used to send the data to the ThingSpeak cloud, this module is very simple and it uses the ESP-IDF IOT framework libraries to send HTTP Client GET requests with the temperature and humidity values, which are then received by ThingSpeak cloud and visualized on the dashboard.

To use this module, we have to first get connected with the WiFi router so that we can access the internet, if our connection is successful, then the ThingSpeak start API is called, which then starts the ThingSpeak task. To make our software development modular, just like in the GUI manager task, here also we used a queue to send events to the ThingSpeak module, and whenever the event is posted the ThingSpeak task, based on the event received, sends the data to the ThingSpeak cloud, this is done to make things modular and scalable for future updates.

The two important public APIs are as below.

void thingspeak_start( void );
BaseType_t thingspeak_send_event( thingspeak_event_t event, uint8_t *pData );

The first API i.e. the start API is used to create a FreeRTOS queue and start the ThingSpeak task, and the send event API is used to send the event to the ThingSpeak task.

Whenever the event is received, the ThingSpeak task parses the received event and then takes action based on the received event. In our case, we are sending the event to send the Temperature and Humidity data to the ThingSpeak cloud, as shown below.

// if wifi is connected, trigger the event to send data to ThingSpeak
if( wifi_connect_status )
{
  thingspeak_send_event(THING_SPEAK_EV_TEMP_HUMID, NULL);
}

And then how the event is received from the Queue is shown below.

static void thingspeak_task( void *pvParameters )
{
  thingspeak_q_msg_t msg;

  while( 1 )
  {
    // Wait for events posted in Queue
    if( xQueueReceive(thingspeak_event, &msg, portMAX_DELAY) )
    {
      // the below is the code to handle the state machine
      if( THING_SPEAK_EV_NONE != msg.event_id )
      {
        switch( msg.event_id )
        {
          case THING_SPEAK_EV_TEMP_HUMID:
            thingspeak_send_temp_humidity();
            break;
          default:
            break;
        } // switch case end
      }   // if event received in limit end
    }     // xQueueReceive end
  }
}

As you can see we are calling the function "thingspeak_send_temp_humidity" function, and this function contains the actual implementation of sending the temperature and humidity data to the ThingSpeak cloud, and its implementation is as below.

/**
 * @brief Send Temperature and Humidity data to ThingSpeak cloud
 * @param  none
 */
static void thingspeak_send_temp_humidity(void)
{
  esp_err_t err;
  uint8_t temperature = 0;
  uint8_t humidity = 0;
  char thingspeak_url[200];

  sensor_data_t *sensor_data = get_temperature_humidity();
  size_t idx = sensor_data->sensor_idx;
  if( (idx > 0) && (idx <= SENSOR_BUFF_SIZE) )
  {
    // before posting the event we have incremented the index and hence to get
    // the last sensor data we have to use - 1
    idx = (idx - 1);
    temperature = sensor_data->temperature[idx];
    humidity = sensor_data->humidity[idx];
  }
  else if( idx == 0 )
  {
    temperature = sensor_data->temperature[SENSOR_BUFF_SIZE-1];
    humidity = sensor_data->humidity[SENSOR_BUFF_SIZE-1];
  }

  snprintf( thingspeak_url, sizeof(thingspeak_url), "https://api.thingspeak.com/update?api_key=%s&field1=%u&field2=%u", THINGSPEAK_KEY, temperature, humidity);
  esp_http_client_config_t config =
  {
    .url = thingspeak_url,
    .method = HTTP_METHOD_GET,
    // todo: maybe for future
    // .transport_type = HTTP_TRANSPORT_OVER_SSL,   // Specify transport type
    // .crt_bundle_attach = esp_crt_bundle_attach,  // Attach the certificate bundle
  };

  esp_http_client_handle_t client = esp_http_client_init( &config );
  // set header
  esp_http_client_set_header( client, CLIENT_KEY, CLIENT_VALUE );
  ESP_LOGI(TAG, "ThingSpeak URL = %s", thingspeak_url);  
  // perform the request
  err = esp_http_client_perform(client);
  if (err == ESP_OK)
  {
    int status_code = esp_http_client_get_status_code(client);
    if( status_code == 200 )
    {
      ESP_LOGI(TAG, "Message Sent Successfully.");
    }
    else
    {
      ESP_LOGE(TAG, "Message Sending Failed.");
    }
  }
  esp_http_client_cleanup(client);
}

As can be seen from the above code, first we get the temperature and humidity data from the buffers and then send this data using an HTTP Client GET request.

The code is designed in such a way that it can handle multiple events and send multiple data to the ThingSpeak cloud.

To not face any problems, please make sure that in the SDK Config, then in the "ESP-TLS" setting, the "Allow potentially insecure options" and "Skip server certificate verification by default" are checked, as shown below.

SDK Config (ESP-TLS Setting)

Final

Now, let's see the main program or let's say the main task, which handles the connection with the WiFi router, getting the temperature and humidity data from the sensor, and then posting the events to the GUI manager and the ThingSpeak module, so that the GUI manager can update the labels with the latest available values, and the ThingSpeak module can send this data to the ThingSpeak cloud.

The source code for this module is as below.

#include <stdio.h>
#include <stdbool.h>
#include <unistd.h>
#include "driver/gpio.h"

#include "freertos/FreeRTOS.h"
#include "freertos/event_groups.h"
#include "freertos/task.h"

#include "nvs_flash.h"
#include "esp_event.h"
#include "esp_netif.h"
#include "esp_system.h"
#include "esp_log.h"
#include "esp_wifi.h"

#include "main.h"
#include "dht11.h"
#include "gui_mng.h"
#include "thingspeak.h"

// macros
#define DHT11_PIN                           (GPIO_NUM_12)
#define MAIN_TASK_PERIOD                    (60000)
#define APP_WIFI_SSID                       "Enter SSID Here"
#define APP_WIFI_PSWD                       "Enter Password Here"
#define WIFI_MAX_RETRY                      (5)
#define WIFI_CONNECT_DELAY                  (500)     // Initial delay in milliseconds
#define WIFI_MAX_DELAY                      (60000)   // Maximum delay in milliseconds
// The following are the bits/flags for event group
#define WIFI_CONNECTED_BIT                  BIT0      // connected to the access point with an IP
#define WIFI_FAIL_BIT                       BIT1      // failed to connect after the max. amount of retries

// Private Variables
static const char *TAG = "APP";
/* WiFi Connection Related Variables */
static EventGroupHandle_t wifi_event_group;           // FreeRTOS event group to signal when we are connected
static uint8_t wifi_connect_retry = 0;
static bool wifi_connect_status = false;
/* Sensor Related Variables */
static sensor_data_t sensor_data = { .sensor_idx = 0 };

// Private Function Declarations
static void app_connect_wifi( void );
static void wifi_event_handler( void *arg, esp_event_base_t event_base, int32_t event_id, void * event_data );

void app_main(void)
{
  // Disable default gpio logging messages
  esp_log_level_set("gpio", ESP_LOG_NONE);
  // disable default wifi logging messages
  esp_log_level_set("wifi", ESP_LOG_NONE);

  esp_err_t ret = nvs_flash_init();
  if (ret == ESP_ERR_NVS_NO_FREE_PAGES || ret == ESP_ERR_NVS_NEW_VERSION_FOUND)
  {
    ESP_ERROR_CHECK(nvs_flash_erase());
    ret = nvs_flash_init();
  }
  ESP_ERROR_CHECK(ret);

  // connect with WiFi (it will take some time)
  app_connect_wifi();
  if( wifi_connect_status )
  {
    thingspeak_start();
  }

  // initialize dht sensor library
  dht11_init(DHT11_PIN, false);

  // start the gui task, this handles all the display related stuff
  gui_start();

  while (true)
  {
    // Get DHT11 Temperature and Humidity Values
    if( dht11_read().status == DHT11_OK )
    {
      uint8_t temp = (uint8_t)dht11_read().humidity;
      // humidity can't be greater than 100%, that means invalid data
      if( temp < 100 )
      {
        if( sensor_data.sensor_idx < SENSOR_BUFF_SIZE )
        {
          sensor_data.humidity[sensor_data.sensor_idx] = temp;
          temp = (uint8_t)dht11_read().temperature;
          sensor_data.temperature[sensor_data.sensor_idx] = temp;
          ESP_LOGI(TAG, "Temperature: %d", sensor_data.temperature[sensor_data.sensor_idx]);
          ESP_LOGI(TAG, "Humidity: %d", sensor_data.humidity[sensor_data.sensor_idx]);
          sensor_data.sensor_idx++;
          // trigger event to display temperature and humidity
          gui_send_event(GUI_MNG_EV_TEMP_HUMID, NULL );
          // if wifi is connected, trigger event to send data to ThingSpeak
          if( wifi_connect_status )
          {
            thingspeak_send_event(THING_SPEAK_EV_TEMP_HUMID, NULL);
          }
          // reset the index
          if( sensor_data.sensor_idx >= SENSOR_BUFF_SIZE )
          {
            sensor_data.sensor_idx = 0;
          }
        }
      }
      else
      {
        ESP_LOGE(TAG, "In-correct data received from DHT11 -> %u", temp);
      }
    }
    else
    {
      ESP_LOGE(TAG, "Unable to Read DHT11 Status");
    }
    // Wait before next measurement
    vTaskDelay(MAIN_TASK_PERIOD / portTICK_PERIOD_MS);
  }
}

// Public Function Definitions

/**
 * @brief Get the Pointer to the Sensor Data Structure to get the temperature 
 *        and Humidity values
 * @param  None
 * @return sensor_data data structure pointer
 */
sensor_data_t * get_temperature_humidity( void )
{
  return &sensor_data;
}

// Private Function Definitions
/**
 * @brief Connect with the WiFi Router
 * @note  in future this function can be moved to a commom place.
 * @param  none
 */
static void app_connect_wifi( void )
{
  wifi_event_group = xEventGroupCreate();

  ESP_ERROR_CHECK( esp_netif_init() );

  ESP_ERROR_CHECK( esp_event_loop_create_default() );
  esp_netif_create_default_wifi_sta();

  wifi_init_config_t cfg = WIFI_INIT_CONFIG_DEFAULT();

  ESP_ERROR_CHECK( esp_wifi_init(&cfg) );

  esp_event_handler_instance_t instance_any_id;
  esp_event_handler_instance_t instance_got_ip;
  ESP_ERROR_CHECK( esp_event_handler_instance_register( WIFI_EVENT,           \
                                                        ESP_EVENT_ANY_ID,     \
                                                        &wifi_event_handler,  \
                                                        NULL,                 \
                                                        &instance_any_id) );
  ESP_ERROR_CHECK( esp_event_handler_instance_register( IP_EVENT,             \
                                                        IP_EVENT_STA_GOT_IP,  \
                                                        &wifi_event_handler,  \
                                                        NULL,                 \
                                                        &instance_got_ip) );

  wifi_config_t wifi_config =
  {
    .sta =
    {
      .ssid = APP_WIFI_SSID,
      .password = APP_WIFI_PSWD,
      .threshold.authmode = WIFI_AUTH_WPA2_PSK,
    },
  };

  ESP_ERROR_CHECK( esp_wifi_set_mode(WIFI_MODE_STA) );
  ESP_ERROR_CHECK( esp_wifi_set_config(WIFI_IF_STA, &wifi_config) );
  ESP_ERROR_CHECK( esp_wifi_start() );

  ESP_LOGI(TAG, "WiFi Initialized in Station Mode Finished.");

  /*
   * Wait until either the connection is established (WIFI_CONNECTED_BIT) or
   * connection failed for the maximum number of re-tries (WIFI_FAIL_BIT).
   * The bits are set by event_handler() (see above) */
  EventBits_t bits = xEventGroupWaitBits( wifi_event_group,                   \
                                          WIFI_CONNECTED_BIT | WIFI_FAIL_BIT, \
                                          pdFALSE,                            \
                                          pdFALSE,                            \
                                          portMAX_DELAY);

  /* xEventGroupWaitBits() returns the bits before the call returned, hence we
   * can test which event actually happened. */
  if( bits & WIFI_CONNECTED_BIT )
  {
    ESP_LOGI(TAG, "Connected to Access Point %s", APP_WIFI_SSID );
  }
  else if( bits & WIFI_FAIL_BIT )
  {
    ESP_LOGE(TAG, "Failed to Connect to Access Point %s", APP_WIFI_SSID );
  }
  else
  {
    ESP_LOGE(TAG, "Unexpected Event" );
  }
  vEventGroupDelete(wifi_event_group);
}

/**
 * @brief WiFi Event Handler Function
 * @param arg 
 * @param event_base Event Base whether WIFI Event or IP Event
 * @param event_id   Event ID 
 * @param event_data Data with Event
 */
static void wifi_event_handler( void *arg, esp_event_base_t event_base, int32_t event_id, void * event_data )
{
  if( WIFI_EVENT == event_base )
  {
    if( WIFI_EVENT_STA_START == event_id )
    {
      esp_wifi_connect();
    }
    else if( WIFI_EVENT_STA_DISCONNECTED == event_id )
    {
      if( wifi_connect_retry < WIFI_MAX_RETRY )
      {
        uint32_t delay = (1 << wifi_connect_retry) * WIFI_CONNECT_DELAY;
        delay = (delay > WIFI_MAX_DELAY) ? WIFI_MAX_DELAY : delay;
        // waiting for some time before retrying again
        vTaskDelay(delay / portTICK_PERIOD_MS);
        esp_wifi_connect();
        wifi_connect_retry++;
        ESP_LOGI(TAG, "Retry Wi-Fi connection (%d/%d)...", wifi_connect_retry, WIFI_MAX_RETRY);
      }
      else
      {
        wifi_connect_status = false;
        xEventGroupSetBits(wifi_event_group, WIFI_FAIL_BIT);
        ESP_LOGE(TAG, "Failed to connect to Access Point.");
      }
    }
  } // if( WIFI_EVENT = event_base )
  else if( IP_EVENT == event_base )
  {
    ip_event_got_ip_t *event = (ip_event_got_ip_t *)event_data;
    ESP_LOGI(TAG, "Got IP:" IPSTR, IP2STR(&event->ip_info.ip));
    wifi_connect_retry = 0;
    wifi_connect_status = true;
    xEventGroupSetBits(wifi_event_group, WIFI_CONNECTED_BIT);
  }
}

The code is very simple and straightforward to understand, the following are the steps that how the program works.

WiFi and GPIO logs are disabled, else the Serial Terminal will be filled with the internal logs, which I don't want, in case you want to debug, it's a good option.
The next step is to initialize the NVS partition, and if this fails, erase the flash and try again.
The next step is to try to connect with the router using the function "app_connect_wifi", and if the connection is successful then call the "thingspeak_start" function, which will create the "ThingSpeak Task"
The next step is to initialize the DHT11 sensor library.
The next step is to call the function "gui_start", this will do a lot of work, by calling multiple modules, from "display_mng", "ili9341" and "xpt2046" modules, this module configures the "LVGL" display drivers and input drivers, and then it starts the "GUI" task, which in turn will display the user interface, that we have designed using Square Line Studio.
Now finally we will wait in a while loop, and read the DHT11 sensor data periodically, whenever the data is read, we check if this is valid if is valid, store it in the buffer, and also trigger events to the "GUI" manager module and "ThingSpeak" module, which in turn will update the display and send data to the ThingSpeak cloud.

The completed code can be downloaded from our GitHub page by clicking here.

In case you have some comments or questions, feel free to contact us by using the comment section, or using the "Contact Us" page.

Building a Weather Station Web Server with OTA Updates Using ESP32 and ESP-IDF Framework

noreply@blogger.com (Embedded Laboratory) — Sat, 26 Aug 2023 21:13:00 +0000

In this tutorial, we'll guide you through the process of creating a Weather Station Web Server using the ESP32 microcontroller, the ESP-IDF (Espressif IoT Development Framework), and incorporating OTA (Over-The-Air) updates. This project will allow you to measure temperature and humidity, display the data on a web server, and remotely update the firmware over Wi-Fi.

Project Demo With OTA Updates

This post is sponsored by PCBWay, with more than a decade in the field of PCB prototype and fabrication, PCBWay is committed to meeting the needs of their customers from different industries in terms of quality, delivery, cost-effectiveness and any other demanding requests.
As one of the most experienced PCB manufacturers in the World, PCBWay prides itself on being your best business partner as well as a good friend in every aspect of your PCB needs.

Pre-Requisites

Before you start, make sure you have the following:

ESP32 Development Board: A popular and powerful microcontroller board for IoT projects.
ESP-IDF Installed: Set up the ESP-IDF development framework on your computer. You can find installation instructions in the ESP-IDF documentation.
DHT11 Sensor: A sensor that measures temperature and humidity.

We should also have an idea of what we are going to develop, and this is illustrated with the help of a Use Case Diagram as shown below.

Use Case Diagram Weather Station Web Server

Step 1: Setting up the Hardware

Connect the DHT11 sensor to the ESP32 board. Connect the VCC pin to 3.3V, GND to ground, and DATA to a GPIO pin of your choice (e.g., GPIO19).

Step 2: Creating the Project

This is a very basic topic and I am not going to cover that, you can use Eclipse-based ESP-IDF IDE or VS Code or even the command line version.

Step 3: Writing the Code

The project is divided into several modules and each module handles the individual tasks.

The first module is the "DHT11" sensor module, this module is used to get the temperature and humidity values from the "DHT11" sensor module. The source code for this module can be downloaded from the links given at the bottom of this page, but a brief overview is given here.

/* Private Variables */
static gpio_num_t dht_gpio;
static int64_t last_read_time = -2000000;
static dht11_reading_t last_read;

/* Private Function Prototypes */
static int dht11_wait_or_timeout(uint16_t useconds, int level);
static dht11_status_e dht11_check_checksum(uint8_t data[]);
static void dht11_send_start_signal( void );
static int dht11_check_response( void );
static dht11_reading_t dht11_timeout_error( void );
static dht11_reading_t dht11_crc_error( void );


/* Public Function Definitions */
void dht11_init(gpio_num_t gpio_num)
{
  /* Wait for some seconds to make the device pass its initial unstable status */
  vTaskDelay(DHT11_INITIAL_WAKEUP_DELAY / portTICK_PERIOD_MS);
  dht_gpio = gpio_num;
}

dht11_reading_t dht11_read( void )
{
  /* DHT11 sensor can take up-to 2 seconds for updated values, hence if some one
   * call this function too early, then we should return the old value
   * */
  if( (esp_timer_get_time() - DHT11_READING_WAIT_DELAY) < last_read_time)
  {
    return last_read;
  }

  last_read_time = esp_timer_get_time();

  uint8_t data[5] = {0,0,0,0,0};

  /* trigger the start signal */
  dht11_send_start_signal();

  /* Check for DHT11 Host Signal, here DHT11 should pull the line low for 80us
   * and then pull the line high for 80 us
   */
  if( dht11_check_response() == DHT11_TIMEOUT_ERROR )
  {
    return last_read = dht11_timeout_error();
  }

  /* Now DHT11 will send 40 bits of data, each bit transmission begins with the
   * low-voltage level that last around 50us, the following high-voltage level
   * signal length decides whether the bit is "1" or "0"
   */
  for(int i = 0; i < 40; i++)
  {
    /* Initial low signal, should be around 50 us, if more than that it is a
    timeout error. */
    if(dht11_wait_or_timeout(50, 0) == DHT11_TIMEOUT_ERROR)
    {
      return last_read = dht11_timeout_error();
    }

    /* Now the high signal length will determine whether it is a bit 1 or 0, here
    we check maximum for 70 us second, but if pin gets low and the micro ticks
    are greater than 28 us seconds, then it means bit is 1 else bit is 0 */
    if(dht11_wait_or_timeout(70, 1) > 28)
    {
      /* Bit received is a 1 */
      data[i/8] |= (1 << (7-(i%8)));
    }
  }

  /* last step is to validate the received data by checking the checksum */
  if(dht11_check_checksum(data) != DHT11_CHECKSUM_ERROR)
  {
    last_read.status = DHT11_OK;
    last_read.temperature = data[2];
    last_read.humidity = data[0];
  }
  else
  {
    last_read = dht11_crc_error();
  }

  return last_read;
}

/* Private Function Definitions */
static int dht11_wait_or_timeout(uint16_t useconds, int level)
{
  int micros_ticks = 0;
  while(gpio_get_level(dht_gpio) == level)
  {
    if(micros_ticks++ > useconds)
    {
      return DHT11_TIMEOUT_ERROR;
    }
    ets_delay_us(1);
  }
  return micros_ticks;
}

static dht11_status_e dht11_check_checksum( uint8_t data[] )
{
  dht11_status_e dht_status = DHT11_CHECKSUM_ERROR;
  if(data[4] == (data[0] + data[1] + data[2] + data[3]))
  {
    dht_status = DHT11_OK;
  }
  return dht_status;
}

static void dht11_send_start_signal( void )
{
  /* Request Stage:
   * To make the DHT11 send the sensor readings we have to send a request.
   * The Request is to pull down the bus for more than 18ms, in order to give
   * DHT11 time to understand it and then pull it up for 40 micro-seconds
   */
  gpio_set_direction(dht_gpio, GPIO_MODE_OUTPUT);
  gpio_set_level(dht_gpio, 0);
  ets_delay_us(DHT11_START_SIGNAL_PULL_DOWN_DELAY);   // 20ms delay
  gpio_set_level(dht_gpio, 1);
  ets_delay_us(DHT11_START_SIGNAL_PULL_UP_DELAY);     // 40us delay
  gpio_set_direction(dht_gpio, GPIO_MODE_INPUT);
}

static int dht11_check_response( void )
{
  /* Wait for next step ~80us*/
  if(dht11_wait_or_timeout(80, 0) == DHT11_TIMEOUT_ERROR)
    return DHT11_TIMEOUT_ERROR;

  /* Wait for next step ~80us*/
  if(dht11_wait_or_timeout(80, 1) == DHT11_TIMEOUT_ERROR)
    return DHT11_TIMEOUT_ERROR;

  return DHT11_OK;
}

static dht11_reading_t dht11_timeout_error()
{
  dht11_reading_t timeout_error = { DHT11_TIMEOUT_ERROR, -1, -1 };
  return timeout_error;
}

static dht11_reading_t dht11_crc_error()
{
  dht11_reading_t crc_error = { DHT11_CHECKSUM_ERROR, -1, -1 };
  return crc_error;
}

This module takes the help of the timing details provided by the esp timer module to generate exact timing signals needed by the DHT11 sensor module.

The next module is the main module, we can also call this module as main task module, this is the starting point of the project and this module will initialize the DHT11 sensor module and also the WiFi Application module (which in turn will start the ESP32 in WiFi Access Point Mode).

void app_main(void)
{
  dht11_reading_t dht11_value;

  // Initialize NVS
  esp_err_t ret = nvs_flash_init();
  if (ret == ESP_ERR_NVS_NO_FREE_PAGES || ret == ESP_ERR_NVS_NEW_VERSION_FOUND)
  {
    ESP_ERROR_CHECK(nvs_flash_erase());
    ret = nvs_flash_init();
  }
  ESP_ERROR_CHECK(ret);

  // initialize led manager module
  led_init();

  // initialize the dht11 module
  dht11_init(DHT11_GPIO_NUM);

  // Start WiFi
  wifi_app_start();

  while (true)
  {
    // read the data from dht11 sensor
    dht11_value = dht11_read();
    // If reading is valid then only print
    if( dht11_value.status == DHT11_OK )
    {
      temperature = (uint8_t)dht11_value.temperature;
      humidity = (uint8_t)dht11_value.humidity;
      ESP_LOGI(TAG, "Temperature: %d, Humidity: %d", temperature, humidity);
    }
    vTaskDelay(MAIN_TASK_PERIOD / portTICK_PERIOD_MS);
  }
}

This module also measures the temperature and humidity values from the DHT11 sensor and stores them in module-specific global variables, which can be used to display the temperature and humidity values on the web server page.

The next module is the "WiFi Application" module, this module is triggered from the main module, the purpose of this module is to configure the WiFi Settings such as SSID, Password, IP Address, Net Mask, Gateway, Number of Allowed Connection etc. This all is done inside a FreeRTOS task, which is used to initialize all the default configurations and the WiFi is started using the function "esp_wifi_start". This module will trigger the "HTTP Server" module which is one of the most important modules for this project.

The following is a high-level overview diagram of this WiFi Application Module.

Simplified Overview of WiFi Application Software Module

The following is the simplified version of the Activity Diagram of this WiFi Application SW Module.

Activity Diagram WiFi Application SW Module

/*
 * Sends a message to the queue.
 * @param msg_id message from wifi_app_msg_e enum
 * @return pdTRUE if an item was successfully sent to the queue, otherwise pdFALSE
 */
BaseType_t wifi_app_send_msg( wifi_app_msg_e msg_id )
{
  wifi_app_q_msg_t msg;
  msg.msg_id = msg_id;
  return xQueueSend(wifi_app_q_handle, &msg, portMAX_DELAY);
}

/*
 * Starts the WiFi RTOS Task
 */
void wifi_app_start( void )
{
  ESP_LOGI(TAG,"Starting WiFi Application");

  // Start the WiFi Led
  LED_WIFI_APP_STARTED();

  // Disable default wifi logging messages
  esp_log_level_set("wifi", ESP_LOG_NONE);

  // Create Message Queue with length 3
  wifi_app_q_handle = xQueueCreate( 3, sizeof(wifi_app_q_msg_t));

  // Start the WiFi Application Task
  xTaskCreate(&wifi_app_task, "wifi_app_task", WIFI_APP_TASK_STACK_SIZE, NULL, WIFI_APP_TASK_PRIORITY, NULL);
}

/*
 * Main task for the WiFi Application
 */
static void wifi_app_task(void *pvParameter)
{
  wifi_app_q_msg_t msg;

  // Initialize the Event Handler
  wifi_app_event_handler_init();

  // Initialize the TCP/IP stack and WiFi Configuration
  wifi_app_default_wifi_init();

  // Soft AP Configuration
  wifi_app_soft_ap_config();

  // Start WiFi
  ESP_ERROR_CHECK(esp_wifi_start());

  // Send First Event Message
  wifi_app_send_msg(WIFI_APP_MSG_START_HTTP_SERVER);

  for(;;)
  {
    if(xQueueReceive(wifi_app_q_handle, &msg, portMAX_DELAY))
    {
      switch( msg.msg_id)
      {
        case WIFI_APP_MSG_START_HTTP_SERVER:
          ESP_LOGI(TAG,"WIFI_APP_MSG_START_HTTP_SERVER");
          http_server_start();
          LED_WIFI_HTTP_SERVER_STARTED();
          break;
        case WIFI_APP_MSG_CONNECTING_FROM_HTTP_SERVER:
          ESP_LOGI(TAG,"WIFI_APP_MSG_CONNECTING_FROM_HTTP_SERVER");
          break;
        case WIFI_APP_MSG_STA_CONNECTED_GOT_IP:
          ESP_LOGI(TAG,"WIFI_APP_MSG_STA_CONNECTED_GOT_IP");
          LED_WIFI_CONNECTED();
          break;
        default:
          break;
      }
    }
  }
}

The next software module is the HTTP Server module, which is the key component of this Wireless LAN Application and also supports the Web Page Functionality. The implementation overview of this module is as follows.

The HTTP Server will support the web pages (HTML, CSS and JavaScript files)
It will also support OTA (Over the Air) Firmware Updates
It will also support the temperature and humidity sensor readings displayed on the web pages.

This module has some web pages files as shown in the below image.

Web Pages Files

index.html

HTML markup that will display the temperature and humidity reading, and also provide the buttons and dialog to update the ESP32 firmware.

app.css

This is used to style the index.html document

app.js

This is the JavaScript program that will be used for interactions.

favicon.ico

The icon that gets displayed in the address bar of the browser

jquery-3.3.1.min.js

JavaScript Library

The following piece of code is the abstract from the HTTP Server Software module.

/*
 * Starts the HTTP Server
 */
void http_server_start(void)
{
  if( http_server_handle == NULL )
  {
    http_server_handle = http_server_configure();
  }
}

/*
 * Stops the HTTP Server
 */
void http_server_stop(void)
{
  if( http_server_handle )
  {
    httpd_stop(http_server_handle);
    ESP_LOGI(TAG, "http_server_stop: stopping HTTP Server");
    http_server_handle = NULL;
  }

  if( task_http_server_monitor )
  {
    vTaskDelete(task_http_server_monitor);
    ESP_LOGI(TAG,"http_server_stop: stopping HTTP server monitor");
    task_http_server_monitor = NULL;
  }
}

/*
 * Timer Callback function which calls esp_restart function upon successful
 * firmware update
 */
void http_server_fw_update_reset_cb(void *arg)
{
  ESP_LOGI(TAG, "http_fw_update_reset_cb: Timer timed-out, restarting the device");
  esp_restart();
}

/*
 * Sends a message to the Queue
 * @param msg_id Message ID from the http_server_msg_e enum
 * @return pdTRUE if an item was successfully sent to the queue, otherwise pdFALSE
 */
BaseType_t http_server_monitor_send_msg(http_server_msg_e msg_id)
{
  http_server_q_msg_t msg;
  msg.msg_id = msg_id;
  return xQueueSend(http_server_monitor_q_handle, &msg, portMAX_DELAY );
}


// Private Function Definitions
/*
 * HTTP Server Monitor Task used to track events of the HTTP Server.
 * @param pvParameter parameters which can be passed to the task
 * @return http server instance handle if successful, NULL otherwise
 */
static void http_server_monitor( void *pvParameter )
{
  http_server_q_msg_t msg;
  for( ;; )
  {
    if( xQueueReceive(http_server_monitor_q_handle, &msg, portMAX_DELAY) )
    {
      switch (msg.msg_id)
      {
      case HTTP_MSG_WIFI_CONNECT_INIT:
        ESP_LOGI( TAG, "HTTP_MSG_WIFI_CONNECT_INIT");
        break;
      case HTTP_MSG_WIFI_CONNECT_SUCCESS:
        ESP_LOGI( TAG, "HTTP_MSG_WIFI_CONNECT_SUCCESS");
        break;
      case HTTP_MSG_WIFI_CONNECT_FAIL:
        ESP_LOGI( TAG, "HTTP_MSG_WIFI_CONNECT_FAIL");
        break;
      case HTTP_MSG_WIFI_OTA_UPDATE_SUCCESSFUL:
        ESP_LOGI( TAG, "HTTP_MSG_OTA_UPDATE_SUCCESSFUL");
        fw_update_status = OTA_UPDATE_SUCCESSFUL;
        http_server_fw_update_reset_timer();
        break;
      case HTTP_MSG_WIFI_OTA_UPDATE_FAILED:
        ESP_LOGI( TAG, "HTTP_MSG_OTA_UPDATE_FAILED");
        fw_update_status = OTA_UPDATE_FAILED;
        break;
      default:
        break;
      }
    }
  }
}

This module configures the HTTP Server and also creates an HTTP Monitoring Task, and when the HTTP Server is started we register some URIs's as shown below.

/*
 * Sets up the default httpd server configuration
 * @return http server instance handle if successful, NULL otherwise
 */
static httpd_handle_t http_server_configure(void)
{
  // Generate the default configuration
  httpd_config_t config = HTTPD_DEFAULT_CONFIG();

  // create HTTP Server Monitor Task
  xTaskCreate(&http_server_monitor, "http_server_monitor", \
              HTTP_SERVER_MONITOR_STACK_SIZE, NULL, \
              HTTP_SERVER_MONITOR_PRIORITY, &task_http_server_monitor);

  // create a message queue
  http_server_monitor_q_handle = xQueueCreate(HTTP_SERVER_MONITOR_QUEUE_LEN,\
                                              sizeof(http_server_q_msg_t));

  // No need to specify the core id as this is esp32s2 with single core

  // Adjust the default priority to 1 less than the wifi application task
  config.task_priority = HTTP_SERVER_TASK_PRIORITY;

  // Specify the Stack Size (default is 4096)
  config.stack_size = HTTP_SERVER_TASK_STACK_SIZE;

  // Increase our URI Handlers
  config.max_uri_handlers = HTTP_SERVER_MAX_URI_HANDLERS;

  // Increase the timeout limits
  config.recv_wait_timeout = HTTP_SERVER_RECEIVE_WAIT_TIMEOUT;
  config.send_wait_timeout = HTTP_SERVER_SEND_WAIT_TIMEOUT;

  ESP_LOGI(TAG,
           "http_server_configure: Starting Server on port: '%d' with task priority: '%d'",
           config.server_port, config.task_priority);

  // Start the httpd server port
  if( httpd_start(&http_server_handle, &config) == ESP_OK )
  {
    ESP_LOGI(TAG, "http_server_configure: Registering URI Handlers");
    // Register jQuery handler
    httpd_uri_t jquery_js =
    {
      .uri       = "/jquery-3.3.1.min.js",
      .method    = HTTP_GET,
      .handler   = http_server_j_query_handler,
      .user_ctx  = NULL
    };
    // Register index.html handler
    httpd_uri_t index_html =
    {
      .uri       = "/",
      .method    = HTTP_GET,
      .handler   = http_server_index_html_handler,
      .user_ctx  = NULL
    };
    // Register app.css handler
    httpd_uri_t app_css =
    {
      .uri       = "/app.css",
      .method    = HTTP_GET,
      .handler   = http_server_app_css_handler,
      .user_ctx  = NULL
    };
    // Register app.js handler
    httpd_uri_t app_js =
    {
      .uri       = "/app.js",
      .method    = HTTP_GET,
      .handler   = http_server_app_js_handler,
      .user_ctx  = NULL
    };
    // Register favicon.ico handler
    httpd_uri_t favicon_ico =
    {
      .uri       = "/favicon.ico",
      .method    = HTTP_GET,
      .handler   = http_server_favicon_handler,
      .user_ctx  = NULL
    };
    // Register OTA Update Handler
    httpd_uri_t ota_update =
    {
      .uri       = "/OTAupdate",
      .method    = HTTP_POST,
      .handler   = http_server_ota_update_handler,
      .user_ctx  = NULL
    };

    // Register OTA Status Handler
    httpd_uri_t ota_status =
    {
      .uri       = "/OTAstatus",
      .method    = HTTP_POST,
      .handler   = http_server_ota_status_handler,
      .user_ctx  = NULL
    };

    // Register Sensor.json handler
    httpd_uri_t sensor_json =
    {
      .uri = "/Sensor",
      .method    = HTTP_GET,
      .handler   = http_server_sensor_value_handler,
      .user_ctx  = NULL
    };
    // Register Query Handler
    httpd_register_uri_handler(http_server_handle, &jquery_js);
    httpd_register_uri_handler(http_server_handle, &index_html);
    httpd_register_uri_handler(http_server_handle, &app_css);
    httpd_register_uri_handler(http_server_handle, &app_js);
    httpd_register_uri_handler(http_server_handle, &favicon_ico);
    httpd_register_uri_handler(http_server_handle, &ota_update);
    httpd_register_uri_handler(http_server_handle, &ota_status);
    httpd_register_uri_handler(http_server_handle, &sensor_json);
    return http_server_handle;
  }

  ESP_LOGI(TAG, "http_server_configure: Error starting server!");
  return NULL;
}

This URIs callback function handles all the requests from and to the web page. For example, the below-mentioned function is called from the web page every 5 seconds to request the temperature and humidity values to be displayed on the web page.

/*
 * Sensor Readings JSON handler responds with the Sensor Data
 * @param req HTTP request for which the URI needs to be handled
 * @return ESP_OK
 */
static esp_err_t http_server_sensor_value_handler(httpd_req_t *req)
{
  char sensor_JSON[100];
  ESP_LOGI(TAG, "Sensor Readings Requested");
  sprintf(sensor_JSON, "{\"temp\":%d,\"humidity\":\"%d\"}", get_temperature(), get_humidity() );

  httpd_resp_set_type(req, "application/json");
  httpd_resp_send(req, sensor_JSON, strlen(sensor_JSON));

  return ESP_OK;
}

Similarly, the following callback function is called when we try to upload a file from the web page into the ESP32 controller. This function is actually huge, but I have commented on the code very properly so that it can be understandable by anyone.

/**
 * @brief Receives the *.bin file via the web page and handles the firmware update
 * @param req HTTP request for which the uri needs to be handled
 * @return ESP_OK, other ESP_FAIL if timeout occurs and the update canot be started
 */
static esp_err_t http_server_ota_update_handler(httpd_req_t *req)

Download Link

The code is available in my ESP32 repository on GitHub, click on this link. This repository contains many projects, so to get only this project you guys have to still clone everything, and to avoid this I am also providing you guys with the Google Drive link to download this project.

Conclusion

Congratulations! You've created a Weather Station Web Server with OTA update functionality using ESP32 and ESP-IDF. This project showcases the power of ESP32 in IoT applications, enabling remote updates to ensure your devices are always up to date.

You can further refine the project by enhancing security for OTA updates, implementing version control, and adding additional sensors or features. Remember to consult the ESP-IDF documentation for deeper insights and advanced features.

Happy building and experimenting with your IoT project!

Accelerometer Data Visualization on Desktop and Android using Qt

noreply@blogger.com (Embedded Laboratory) — Fri, 04 Aug 2023 20:49:00 +0000

The MPU6050 is a popular and widely used accelerometer and gyroscope sensor that can measure motion and orientation. In this tutorial, we will learn how to interface the MPU6050 with the ESP32, a powerful microcontroller board, to obtain motion data and then use this data to visualize a cube using Qt, and since we are using Qt which is a cross-platform framework, we can easily develop an application for the Desktop environment and also for Android. The following image illustrates the Accelerometer Visualization on Windows Applications and on Android Phones.

Working Demo

Note: ESP32 is sending data to Windows using Serial Communication, while ESP32 is sending data to Android Phones using Bluetooth connection.

Requirements:

ESP32 development board (If you don't have an ESP32 board then you can use any Arduino-based board, but just make sure to remove the Bluetooth prints from the code)
MPU6050 sensor module
Breadboard and jumper wires
Arduino IDE (or you can use ESP-IDF also but I am not covering that)

As one of the most experienced PCB manufacturers in the World, PCBWay prides itself to be your best business partner as well as a good friend in every aspect of your PCB needs.

Step 1: Wiring the MPU6050 to ESP32:

Start by connecting the MPU6050 sensor to the ESP32 development board. The MPU6050 communicates using the I2C protocol, so we will connect it as follows:

Connect VCC to 3.3V (or 5V if your MPU6050 module supports it).
Connect GND to the ground pin on the ESP32.
Connect SDA to GPIO 21 on the ESP32.
Connect SCL to GPIO 22 on the ESP32.

ESP32 MPU6050 Connection

Step 2: Installing the Required Libraries:

To communicate with the MPU6050 and access its data, we need to install the necessary libraries. As we are using the Arduino IDE, open the Library Manager and search for "MPU6050." Install the library named "MPU6050_Light". This is not a hard requirement, you can use any other library of your choice, the ultimate aim is to send the "Roll" and "Pitch" values to the Serial Port and over Bluetooth, which will be used by Qt to visualize a cube 3D object.

Install MPU6050_Light Library

Step 3: Setting up the Code:

Create a new sketch in the Arduino IDE. Begin by including the required libraries for the MPU6050 and I2C communication. Then, initialize the I2C interface and the MPU6050 sensor.

Step 4: Reading Data from MPU6050:

In the main loop of your code, read data from the MPU6050 sensor. You can obtain the accelerometer and gyroscope values in three axes (X, Y, Z) using appropriate functions from the MPU6050 library.

As shown in the below-mentioned code, I am just getting "Roll" and "Pitch" values and then transmitting these values to the PC using Serial Communication, and also sending the same value over Bluetooth communication, if your device doesn't support Bluetooth, you can skip this part.

To get the "Roll" the function "mpu.getAngleX()" is used and similarly to get the value of "Pitch" the function "mpu.getAngleY()" is used.

#include "Wire.h"
#include "BluetoothSerial.h"
#include <MPU6050_light.h>

#if !defined(CONFIG_BT_ENABLED) || !defined(CONFIG_BLUEDROID_ENABLED)
#error Bluetooth is not enabled! Please run `make menuconfig` to and enable it
#endif

// Private Objects and Variables
MPU6050 mpu(Wire);
BluetoothSerial SerialBT;
unsigned long timer = 0;

void setup() 
{
  Serial.begin(115200);
  // Bluetooth Device Name
  SerialBT.begin("ESP32-Blue");
  Wire.begin();
  
  byte status = mpu.begin();
  
  while(status!=0){ } // stop everything if could not connect to MPU6050
  delay(1000);
  // mpu.upsideDownMounting = true; // uncomment this line if the MPU6050 is mounted upside-down
  mpu.calcOffsets(); // gyro and accelero
}

void loop() 
{
  mpu.update();
  if( (millis()-timer) > 100 )
  {
    timer = millis();
    /*
    Serial.print("X : ");
    Serial.print(mpu.getAngleX());
    Serial.print("\tY : ");
    Serial.print(mpu.getAngleY());
    Serial.print("\tZ : ");
    Serial.println(mpu.getAngleZ());
    */
    // Printing Data as per our Qt PC Application format
    Serial.print(mpu.getAngleX());
    Serial.print(",");
    Serial.println(mpu.getAngleY());
    // Sending Data as per our Qt Android format
    SerialBT.print(mpu.getAngleX());
    SerialBT.print(",");
    SerialBT.println(mpu.getAngleY());
  }
}

Step 5: Receiving this data with Qt and visualizing the MPU6050 sensor position with Qt (Windows)

This is a complex topic to explain here in a post, so that's why I have prepared a video to explain the whole steps, you can watch the above-mentioned video.

Step 6: Receiving this data with Qt and visualizing the MPU6050 sensor position with Qt (Android)

Again this is a complex topic to explain here, so that's why I have prepared a video to explain some basic steps, plus most of the steps are already in the above mentioned video.

Code Download

Get the ESP32 Arduino Code.

Get the Qt Code for Windows Application.

Get the Qt Code for Android Application.

Some Other Project Ideas:

Now that you have successfully interfaced the MPU6050 with the ESP32, you can use the motion data in various exciting projects. Here are a few ideas to get you started:

Create a motion-controlled robot or vehicle.
Build a gesture-based controller for your computer or smart home devices.
Develop a stabilizing platform for a camera or a quadcopter.

Conclusion:

Interfacing the MPU6050 with the ESP32 opens up a world of possibilities for motion-sensing projects. You can now accurately measure acceleration and rotation, enabling you to create a wide range of applications, from robotics to virtual reality. Experiment with the data, explore new ideas, and have fun building your projects!

Sensor Less Weather Station using ESP32 Open Weather Map Website and LVGL

noreply@blogger.com (Embedded Laboratory) — Thu, 13 Jul 2023 16:57:00 +0000

Hello Everyone, In this post I will show you guys, how to make a Sensorless Weather Station using Open Weather Map website and display the temperature, humidity and pressure values on the LCD along with the city image and name, as shown in the below images.

Delhi Weather Information

Leh Weather Information

Shimla Weather Information

Jaipur Weather Information

As one of the most experienced PCB manufacturers in the World, PCBWay prides itself to be your best business partner as well as a good friend in every aspect of your PCB needs.

In the past, I had done a similar project but using Arduino Mega connected to ESP8266 (with AT command firmware), to get similar data and display it using OLED or on a TFT screen, links are given below.

Weather Station using Arduino and ESP8266 with Open Weather API using AT Command - Embedded Laboratory

In this project, I will just use the ESP32 connected to 3.2 inch LCD, to make the connections a little less complex, I am using ESP32 Kaluga Development Kit. This is a low-cost development kit with an onboard 3.2-inch LCD, audio support, camera support etc.

You can watch the following video to understand or read the below-mentioned post.

Open Weather Map

OpenWeatherMap is an online service, owned by OpenWeather Ltd, that provides global weather data via API, including current weather data, forecasts, nowcasts and historical weather data for any geographical location.

The company provides a minute-by-minute hyperlocal precipitation forecast for any location. The convolutional machine learning model is used to utilise meteorological broadcast services and data from airport weather stations, on-ground radar stations, weather satellites, remote sensing satellites, METAR and automated weather stations.

The company has more than 2 million customers, ranging from independent developers to Fortune 500 companies.

I am not going to share how to create an account on the "OpenWeatherMap" website, but in case you want to have some more information, you can read the above-mentioned post and also have a look at the mentioned videos in that post.

Let's say you wanted to get the weather information of the "Leh" city in India, you can simply type the following line in your web browser and you get the JSON data, as shown below.

http://api.openweathermap.org/data/2.5/weather?q=leh&appid={API_KEY}=metric

{
  "coord":{"lon":77.5833,"lat":34.1667},
  "weather":
  [
    {"id":804,"main":"Clouds","description":"overcast clouds","icon":"04n"}
  ],
  "base":"stations",
  "main":{"temp":9.05,"feels_like":8.67,"temp_min":9.05,"temp_max":9.05,"pressure":1016,"humidity":91,"sea_level":1016,"grnd_level":676},
  "visibility":9138,
  "wind":{"speed":1.41,"deg":226,"gust":1.33},
  "clouds":{"all":100},"dt":1688915861,
  "sys":{"country":"IN","sunrise":1688859900,"sunset":1688911451},
  "timezone":19800,"id":1264976,"name":"Leh","cod":200
}

And then using a JSON parser we can decode this data to extract the "temperature", "humidity" and pressure information, which can be displayed on the 3.2-inch LCD using the LVGL graphics library.

Software Architecture

The software is written using the ESP-IDF framework and is available on my GitHub page free of charge.

Main Code Flow

The above Activity Diagram is used to explain the steps of this small project.

The first step is to connect with the router so that ESP32 can be connected to the internet to get the data from the "OpenWeatherMap" website.
In the second step, the "OpenWeatherMap" software module is initialized, which doesn't do much, it will just initialize the names of the city (this also can be configured, but I have kept them hard-coded inside the module)
In the third step, the "Display" software module is initialized, it will initialize the 3.2 Inch LCD and also initialize the LVGL Graphics Library, in the background a FreeRTOS task is created and this task keeps on refreshing the display by calling the LVGL functions.
So now only two FreeRTOS tasks running, one is "app_main" which is also known as the main task and another task is the "LVGL" task which is hidden from us directly, ideally we can create another task also dedicated to "Open Weather Map" but I avoided to do so, as of now.

Main Code:

// Main Program Starts from Here
void app_main(void)
{
  int64_t current_time = 0;
  esp_err_t ret = nvs_flash_init();
  if (ret == ESP_ERR_NVS_NO_FREE_PAGES || ret == ESP_ERR_NVS_NEW_VERSION_FOUND)
  {
    ESP_ERROR_CHECK(nvs_flash_erase());
    ret = nvs_flash_init();
  }
  ESP_ERROR_CHECK(ret);

  // Connect to Wireless Access Point
  ret = connect_wifi();
  if( ret == WIFI_SUCCESS )
  {
    // Initialize the OpenWeatherMap module
    openweathermap_init();
    // Initialize the Display Manager
    display_init();
    openweathermap_timestamp = esp_timer_get_time();
    display_timestamp = esp_timer_get_time();

    while( true )
    {
      current_time = esp_timer_get_time();

      // OpenWeatherMap Management
      if( (current_time - openweathermap_timestamp) > OPENWEATHERMAP_MNG_EXEC_RATE )
      {
        openweathermap_timestamp = current_time;
        openweathermap_mng();
      }

      // Display Management
      if( (current_time - display_timestamp) > DISPLAY_MNG_EXEC_RATE )
      {
       display_timestamp = current_time;
       display_mng();
      }
      vTaskDelay(MAIN_TASK_EXEC_RATE / portTICK_PERIOD_MS);
    }
  }
}

Open Weather Map HTTP Client Request

The above Activity Diagram shows how the "OpenWeather Map" software module us handling the different cases to send the HTTP GET requests and get the data from the "Open Weather Map" website using API calls.

And once the data is received which is in JSON format, the "cJSON" inbuilt library is used to extract the "Temperature", "Pressure" and "Humidity" data from it, and saved in the global structures.

Open Weather Map Module:

void openweathermap_init(void)
{
  // Initialize the City Names
  strcpy(city_weather[0].city_name, "delhi");
  strcpy(city_weather[1].city_name, "shimla");
  strcpy(city_weather[2].city_name, "jaipur");
  strcpy(city_weather[3].city_name, "leh");
}

// OpenWeatherMap Manager
void openweathermap_mng(void)
{
  if( request_in_process == false )
  {
    request_in_process = true;
    openweathermap_send_request();
  }
}

// OpenWeatherMap Task (optional, if we don't want to use above two functions manually)
void openweathermap_task(void *pvParameters)
{
  openweathermap_init();
  for(;;)
  {
    openweathermap_mng();
    vTaskDelay(HTTP_REQ_EXEC_RATE/portTICK_PERIOD_MS);

  }
  vTaskDelete(NULL);
}

// Private Function Definitions
static void openweathermap_send_request(void)
{
  char openweathermap_url[200];
  snprintf( openweathermap_url, sizeof(openweathermap_url), \
            "%s%s%s", CLIENT_REQ_PRE, city_weather[city_weather_index].city_name, CLIENT_REQ_POST);

  esp_http_client_config_t config =
  {
    .url = openweathermap_url,
    .method = HTTP_METHOD_GET,
    .event_handler = openweathermap_event_handler,
  };

  // ESP_LOGI(TAG, "URL:%s", openweathermap_url);
  ESP_LOGI(TAG, "Free Heap: %lu", esp_get_free_heap_size() );

  esp_http_client_handle_t client = esp_http_client_init(&config);
  esp_http_client_set_header(client, CLIENT_KEY, CLIENT_VALUE);
  esp_err_t err = esp_http_client_perform(client);
  if( err == ESP_OK )
  {
    int status = esp_http_client_get_status_code(client);
    if(status == 200)
    {
      ESP_LOGI(TAG, "Message Sent Successfully");
    }
    else
    {
      ESP_LOGI(TAG, "Message Sent Failed");
    }
  }
  else
  {
    ESP_LOGI(TAG, "Message Sent Failed");
  }
  esp_http_client_cleanup(client);
}

static esp_err_t openweathermap_event_handler(esp_http_client_event_t *event)
{
  switch(event->event_id)
  {
    case HTTP_EVENT_ON_DATA:
      // Copy the Data to response_data buffer
      memcpy(response_data+response_data_idx, event->data, event->data_len);
      // Update the Length
      response_data_idx += event->data_len;
      break;
    case HTTP_EVENT_ON_FINISH:
      // Decode/Parse the weather data from the response data
      openweathermap_get_weather(response_data, &city_weather[city_weather_index]);
      // reset the response buffer and also the length to initial state
      openweathermap_reset_buffer();
      ESP_LOGI( TAG, "City=%s, Temp=%d, Pressure=%d, Humidity=%d", \
                city_weather[city_weather_index].city_name,   \
                city_weather[city_weather_index].temperature, \
                city_weather[city_weather_index].pressure,    \
                city_weather[city_weather_index].humidity);
      city_weather_index++;
      // Reset back to Initial Position
      if( city_weather_index >= NUM_OF_CITIES )
      {
        city_weather_index = 0;
      }
      // Free the system for next requests
      request_in_process = false;
      break;
    case HTTP_EVENT_ERROR:
      // In case of Error, exit
      openweathermap_reset_buffer();
      // Free the system for next requests
      request_in_process = false;
      break;
    default:
      break;
  }
  return ESP_OK;
}

static void openweathermap_get_weather(const char *json_string, weather_data_t *weather_data)
{
  cJSON *root = cJSON_Parse(json_string);
  cJSON *obj = cJSON_GetObjectItemCaseSensitive(root, "main");
  weather_data->temperature = cJSON_GetObjectItemCaseSensitive(obj, "temp")->valueint;
  weather_data->pressure = cJSON_GetObjectItemCaseSensitive(obj, "pressure")->valueint;
  weather_data->humidity = cJSON_GetObjectItemCaseSensitive(obj, "humidity")->valueint;
  cJSON_Delete(root);
}

Display Refreshing Logic

And then in another function "display_mng" is used to update the "Temperature", "Pressure", "Humidity" and "City Name" with the city image on the display using LVGL functions.

The code snippet attached above is just for reference, click here to get the code from GitHub.

Thanks

Temperature Controlled Switch without Microcontroller

noreply@blogger.com (Embedded Laboratory) — Sun, 28 May 2023 11:53:00 +0000

Hello Everyone, in this post I will share with you guys a simple circuit without a microcontroller, which can be used to control or switch an external load based on the temperature information.

Temperature Controlled Switch

The temperature-controlled switch triggers automatically when the ambient temperature goes beyond the set temperature (in the above-mentioned circuit it is set to 50 degree Celsius but can be changed easily to any other value with the help of a potentiometer).

The circuit has three main parts.

The Temperature Sensor LM35
The Main Control Unit (Simple Circuit based on OP-AMP)
Relay (used to control the external load, here it is used to control the Lamp)

Circuit and Working

The circuit comprises a step-down transformer, a bridge rectifier and a voltage regulator 7805 integrated circuit chip, a temperature sensor integrated circuit chip LM35, an Operation Amplifier LM35, and a changeover 5V relay, apart from this we have used some simple components like resistor, capacitor, diodes and LEDs.

The IC LM35, the heart of the circuit, is a 3-pin device like a transistor with pins for VCC, GND, and

OUTPUT. It gives variable voltage at the output based on temperature up to 150 degrees Celsius. This popular and inexpensive temperature sensor is generally used in digital thermometers.

For every one-degree centigrade rise in temperature, there is a 10mV increase in voltage at the output pin. Let us say, at 0°C the output of the sensor is 0V. When the temperature rises to 10°C the output will become 100mV; at 25°C it will become 250mV.

Temperature sensor LM35 senses the temperature and gives the signal to the controller built around IC
LM358. The data received by the controller is then given to the relay driver circuit built around the driver transistor and changeover relay. On receiving the signal from the controller, the relay is turned on/off. This process repeats forever.

Calibration of the LM35 sensor should be done as we have used opamp LM358 to compare the output voltage of LM35 with the reference voltage. Since the circuit has been set for the threshold voltage of 50°C,
to trigger the op-amp we need to set the reference voltage to 0.5V, as at 50°C the output of LM35 will be 0.5V. The reference voltage is at pin 2 of LM358.

The working of the circuit is simple. When power is switched on, the LED glows and the circuit is ready to use. As soon as some heat is provided near the LM35 sensor, the voltage at pin 3 of the Operational Amplifier goes higher than the reference voltage at pin 2, so the output of the op-amp at pin 1 goes high and relay energies. As a result, the light bulb gets connected to the 230V AC supply and switches on.
When the temperature at pin 3 of the op-amp goes lower than the reference voltage at pin 2, the output of the op-amp at its pin 1 goes low and the relay de-energises. As a result, the light bulb gets disconnected from the 230V AC and switches off.

The bulb can be replaced with any other appliance, such as a fan or an air cooler, which will switch
on automatically when the room temperature goes beyond a limit. The circuit can also be used as a fire
alarm circuit by setting the reference temperature very high, like 100°C, and connecting an electric bell or siren as the load. After using a higher current rating relay, the circuit can be designed to automatically switch on even an air-conditioner when the room temperature becomes high.

Click Here to download the Proteus Simulation File

Real Time Temperature and Humidity Plot Using QML and QCharts

noreply@blogger.com (Embedded Laboratory) — Sat, 29 Apr 2023 10:48:00 +0000

Hello! In this post, I will show you how to plot the data in real-time using QML and QCharts Library.

QML Application

In this post, I am using the sensor BME280 which can give us temperature, humidity and pressure data, and we will only use the temperature and humidity for this post. This data is transmitted over Serial Port with the help of Arduino UNO. Then this data is received by Qt using the QSerialPort library and then plotted in real-time using QCharts Library.

I will not explain the BME280 sensor part, as this is very basic and can be found in several other posts on the internet, but I will share the connection diagram and the code I am using for Arduino UNO.

Arduino UNO Connection with BME280 Sensor Module

The Arduino IDE source code which I am using is as below, note in order to make this code work you guys have to install Adafruit BME280 Sensor Library.

#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>

#define SEALEVELPRESSURE_HPA (1013.25)

Adafruit_BME280 bme;            // I2C
unsigned long delayTime;
#define BUFFER_SIZE         (20u)
char buffer[BUFFER_SIZE];

void printValues()
{
  uint8_t temperature = (uint8_t)bme.readTemperature();
  uint8_t humidity = (uint8_t)bme.readHumidity();
  int n = snprintf(buffer, BUFFER_SIZE, "%.2d,%.2d\r\n", temperature, humidity);
  Serial.print( buffer );
}

void setup()
{
  Serial.begin(9600);
  delay(100);

  unsigned status;
  
  // default settings
  status = bme.begin();  
  // You can also pass in a Wire library object like &Wire2
  // status = bme.begin(0x76, &Wire2)
  if (!status)
  {
    Serial.println("Could not find a valid BME280 sensor, check wiring, address, sensor ID!");
    Serial.print("SensorID was: 0x"); Serial.println(bme.sensorID(),16);
    Serial.print("        ID of 0xFF probably means a bad address, a BMP 180 or BMP 085\n");
    Serial.print("   ID of 0x56-0x58 represents a BMP 280,\n");
    Serial.print("        ID of 0x60 represents a BME 280.\n");
    Serial.print("        ID of 0x61 represents a BME 680.\n");
    while (1) delay(10);
  }
  delayTime = 1000;
}


void loop() 
{
  printValues();
  delay(delayTime);
}

Writing Qt Program

The Qt Program can be divided into multiple steps, and they are mentioned below.

Get the list of available COM ports available on the Computer
Updating the Combo Box with the list of available serial ports
Updating the data in line series
Scrolling the plot when the configured time frame is reached

Get the List of the available COM Ports

TODO steps in the coming days.

Get the code from GitHub.

Download the Code Directly.

Real-Time Temperature Plot using Qt and QCustomPlot

noreply@blogger.com (Embedded Laboratory) — Mon, 10 Apr 2023 13:53:00 +0000

Hello! Everyone, in this post I will show you how to plot the data in real-time using Qt and QCustomPlot library.

Temperature Real-Time Plot using Qt and QCustomPlot

In this post, I am using a temperature sensor LM35 which is connected to Arduino UNO, and the Arduino UNO is converting the analog values received from the sensor into a corresponding digital value, which is then transmitted over Serial Terminal, and this data is then received by Qt using QSerialPort library, and then plotted using QCustomPlot library.

I am not going to explain the LM35 sensor part, as this is very basic and can be found in several other posts on my blog post itself, one such blog post is available below.

Real-Time Temperature Monitoring using MATLAB & Python - Embedded Laboratory

QtCharts vs QCustomPlot

QtCharts is the charting library provided by Qt company while the QCustomPlot library is from some another vendor, now the questions might be asked why I am using the QCustomPlot library instead of QtCharts, and the reason is I don't know 😊.
What I have read on several Qt forums is that the QtChart library is poorly designed, but to be very honest with you guys I am not an expert so I don't know if this is true or not, I will try to share my personal experience, initially, I started using the QtCharts library, and simple things were working fine, but then I moved to a complex part of updating the data in real-time, and unfortunately I couldn't make it work, I spent several hours on finding a fix, but nothing works, I am 100% that I am doing something wrong but I don't have a solution and just as a random try I started with the QCustomPlot library, and I am really liking this, and this is the reason that this blog post I am using the QCustomPlot library.

Challenges Faced

I would like to list down the challenges I faced while developing this small project, and they are as below.

The first challenge was using the QCustomPlot library with Qt6 as a CMake project, for some of you this might be not a must, but these days I switched to CMake and hence it was quite shocking for me why I am not able to use the QCustomPlot library in my Qt CMake project. But then thanks to "Leger Charlie" a GitHub user, who has already solved this problem and has a repository for this, I used his library as a git submodule project for my development.

leger50/QCustomPlot-library (github.com)

Another problem I was facing was setting the ticker properly for X-axis, and the reason was also very simple, here I was using the class "QCPAxisTickerTime", the problem was my time was in seconds since Epoch time, while this class only considers the pure time, and the solution was to use the class "QCPAxisTickerDateTime" to format my ticker on X-Axis.

Source Code

I prepared a temperature viewer class which is handling all the things from getting the data from the serial port and plotting the data.

The following is the content of the main.cpp file.

#include "temperatureviewer.h"
#include <QApplication>

int main(int argc, char *argv[])
{
  QApplication a(argc, argv);
  TemperatureViewer w;

  w.show();
  return a.exec();
}

This is very simple, we created an application and just showed this application, and all the things are happening inside the application class instance.

The following is the content of the temperatureviewer.h file.

#ifndef TEMPERATUREVIEWER_H
#define TEMPERATUREVIEWER_H

#include <QMainWindow>
#include <QDebug>
#include <QTimer>
#include <QSerialPort>
#include <QSerialPortInfo>


QT_BEGIN_NAMESPACE
namespace Ui { class TemperatureViewer; }
QT_END_NAMESPACE

class TemperatureViewer : public QMainWindow

{
  Q_OBJECT

public:
  TemperatureViewer(QWidget *parent = nullptr);
  ~TemperatureViewer();

private slots:
  void on_btn_ConnectDisconnect_clicked();

public slots:
  void read_data( void );

private:
  Ui::TemperatureViewer *ui;
  bool connect_status = false;
  QSerialPort m_serial;
  void refreshGraph( void );
};

#endif // TEMPERATUREVIEWER_H

I will try to explain the usage of all members and methods of this class.

"connect_status": this member is used to track the status of the QSerialPort connection status, if the connection is successful its value is true else false.
"m_serial": this member is a "QSerialPort" object, and we will communicate with the actual serial port using this object.
"refreshGraph": this method is used to update/refresh the graph every second.

The following is the content of the temperatureviewer.cpp file.

#include "temperatureviewer.h"
#include "./ui_temperatureviewer.h"
#include <QDateTime>

const qint8 SECONDS_SHOW_ON_GRAPH = 120;  // Display 120 seconds on the graph
QList<double> time_axis;
QList<double> temperature_axis;
static qint64 temp_data_idx = 0;   // to be used later for x-axis range setting
static qint64 startTime;

TemperatureViewer::TemperatureViewer(QWidget *parent) : QMainWindow(parent) , ui(new Ui::TemperatureViewer)
{
  ui->setupUi(this);

  qDebug() << "Detecting Available Serial Ports";

  QList<QSerialPortInfo> serial_port_infos = QSerialPortInfo::availablePorts();
  for (const QSerialPortInfo &port_info : serial_port_infos )
  {
    qDebug() << "Port:" << port_info.portName();
    // Add these found com ports to the combo box
    ui->cb_COMP->addItem(port_info.portName());
  }

  // Plotting Stuff
  // Create graph and assign data to it
  ui->customPlot->addGraph();
  // give axis some labels
  ui->customPlot->xAxis->setLabel("Time");
  ui->customPlot->yAxis->setLabel("Temperature");
  QColor color(40, 110, 255);
  ui->customPlot->graph(0)->setLineStyle( QCPGraph::lsLine );
  ui->customPlot->graph(0)->setPen( QPen(color.lighter(30)) );
  ui->customPlot->graph(0)->setBrush( QBrush(color) );

  // configure bottom axis to show date instead of number:
  QSharedPointer<QCPAxisTickerDateTime> date_time_ticker(new QCPAxisTickerDateTime);
  date_time_ticker->setDateTimeFormat("hh:mm:ss");
  ui->customPlot->xAxis->setTicker(date_time_ticker);

  // make left and bottom axes transfer their ranges to right and top axes:
  connect(ui->customPlot->xAxis, SIGNAL(rangeChanged(QCPRange)), ui->customPlot->xAxis2, SLOT(setRange(QCPRange)));
  connect(ui->customPlot->yAxis, SIGNAL(rangeChanged(QCPRange)), ui->customPlot->yAxis2, SLOT(setRange(QCPRange)));

  // Allow user to drag axis ranges with mouse, zoom with mouse wheel and select graphs by clicking:
  ui->customPlot->setInteractions(QCP::iRangeDrag | QCP::iRangeZoom | QCP::iSelectPlottables);

  // first we create and prepare a text layout element:
  QCPTextElement *title = new QCPTextElement(ui->customPlot);
  title->setText("Temperature Real-Time Plot");
  title->setFont(QFont("sans", 12, QFont::Bold));
  // then we add it to the main plot layout:
  // insert an empty row above the axis rect
  ui->customPlot->plotLayout()->insertRow(0);
  // place the title in the empty cell we've just created
  ui->customPlot->plotLayout()->addElement(0, 0, title);

  // Start Timer to Refresh the graph
  QTimer *timer = new QTimer(this);
  connect(timer, &QTimer::timeout, this, &TemperatureViewer::refreshGraph );
  // Start Timer @ 1 second
  timer->start(1000);
}

TemperatureViewer::~TemperatureViewer()
{
  if( m_serial.isOpen() )
  {
    // if serial port is open close it
    m_serial.close();
  }
  delete ui;
}


void TemperatureViewer::on_btn_ConnectDisconnect_clicked( void )
{
  double now;
  // if false, we have to connect, else disconnect
  if( connect_status == false )
  {
    qInfo() << "Connecting...";
    m_serial.setBaudRate( QSerialPort::Baud9600 );
    m_serial.setDataBits( QSerialPort::Data8 );
    m_serial.setParity( QSerialPort::NoParity );
    m_serial.setStopBits( QSerialPort::OneStop );
    m_serial.setFlowControl( QSerialPort::NoFlowControl );
    // Select the COM Port from Combo Box
    m_serial.setPortName( ui->cb_COMP->currentText() );;
    if( m_serial.open( QIODevice::ReadWrite ) )
    {
      qDebug() << "Serial Port Opened Successfully";
      m_serial.write("Hello World from Qt\r\n");
      connect_status = true;
      ui->btn_ConnectDisconnect->setText("Disconnect");
      // disable the combo box
      ui->cb_COMP->setEnabled(false);
      // Connect Signal and Slots
      connect(&m_serial, SIGNAL( readyRead() ), this, SLOT(read_data() ) );

      startTime = QDateTime::currentSecsSinceEpoch();
      now = startTime;
      // set axes ranges, so we see all data:
      ui->customPlot->xAxis->setRange( now, now+SECONDS_SHOW_ON_GRAPH);
      ui->customPlot->yAxis->setRange(0, 60);
    }
    else
    {
      qDebug() << "Unable to open the Selected Serial Port" << m_serial.error();
    }
  }
  else
  {
    qInfo() << "Disconnecting...";
    // close the serial port
    m_serial.close();
    connect_status = false;
    ui->btn_ConnectDisconnect->setText("Connect");
    // Enable the combo box
    ui->cb_COMP->setEnabled(true);
  }
}

void TemperatureViewer::read_data()
{
  char data;
  float temp_value;
  double now = QDateTime::currentSecsSinceEpoch();

  while( m_serial.bytesAvailable() )
  {
    // Read one byte at a time
    m_serial.read(&data, 1);
    if( (data != '\r') && (data != '\n') )
    {
      // convert adc counts back to the temperature value
      // temperature = (adc counts * VCC in mV/ADC Resolution)/10mV
      temp_value = (data * 500.0 / 1023.0);
      time_axis.append(now);
      temperature_axis.append(temp_value);
      temp_data_idx++;
      qDebug() << temp_data_idx << temp_value;
    }
  }
}

void TemperatureViewer::refreshGraph( void )
{
  double now = QDateTime::currentSecsSinceEpoch();
  if( connect_status )
  {
    ui->customPlot->graph()->setData( time_axis, temperature_axis);
    // if time has elapsed then only start shifting the graph
    if( ((qint64)(now) - startTime) > SECONDS_SHOW_ON_GRAPH )
    {
      // If SECONDS_SHOW_GRAPH
      ui->customPlot->xAxis->setRange(now, SECONDS_SHOW_ON_GRAPH, Qt::AlignRight);
    }
    ui->customPlot->replot();
  }
}

In the constructor code of this class we are doing the following things:

With the help of the "QSerialPortInfo" class, we are getting the information on the available serial ports, and these port names are added to the combo box so that they can be selected by the user.
A graph is added, where labels for the x and y axis are specified, and some other configuration is done like line color and brush
Then the x-axis ticker is updated in an hour, minute and seconds format.
Interactions are also added to the graph for dragging, zooming and scrolling.
A title is specified in the graph.

In the destructor part of the code, we are closing the serial port if open and deleting the UI object.

Then we have a button named as connect button, and whenever this button is clicked a signal is emitted internally, and we have mapped a slot for this clicked event, and hence the "on_btn_ConnectDisiconnect_clicked" function is called. In this function, if the connection status is false, we are configuring the serial port and opening it, and also changing the name of the connect button to disconnect, as next time the same button will be used for disconnecting from the com port.

Then the "read_data" function is called whenever we receive some data over the serial port, and once this data is received it is decoded and converted into the temperature value, and then these values are updated in the list along with the timestamp.

Plotting of this data in real-time is done using the function "refreshGraph" function here graph is updated periodically, here a timer is configured to update the graph every second.

NOTE: I am not a C++ programmer, I have mostly used C in my life and now started learning C++, so it might be possible I made some silly mistakes that can be avoided by some expert, any feedback is welcomed.

The code is available on my GitHub Repository and can also be downloaded by clicking here.

Getting Started with MQTT using Qt

noreply@blogger.com (Embedded Laboratory) — Sun, 29 Jan 2023 10:48:00 +0000

Qt is a cross-platform framework written in C++ for creating graphical user interfaces as well as cross-platform applications that run on various software and hardware platforms such as Linux, Windows, macOS, Android, or embedded systems with little or no change in the underlying code base while still being a native application with native capabilities and speed.

MQTT is a lightweight, publish-subscribe, machine-to-machine network protocol for message queue/message queuing service. It is designed for connections with remote locations that have devices with resource constraints or limited network bandwidth.

In this post, I will show you how to get started quickly with MQTT using Qt. Qt already provides the QTMQTT library but unfortunately for the open-source version of Qt, we have to build the QtMQTT source code to generate the library, and this is the main motive behind this post.

If you are interested in watching the video, please watch the below-mentioned video, or else continue reading this post.

The above-mentioned video is for Linux Users and the below-mentioned video is for Windows.

This post is sponsored by PCBWay, with more than a decade in the field of PCB prototype and fabrication, PCBWay is committed to meeting the needs of their customers from different industries in terms of quality, delivery, cost-effectiveness and any other demanding requests.
As one of the most experienced PCB manufacturers in the World, PCBWay prides itself to be your best business partner as well as a good friend in every aspect of your PCB needs.

Cloning Qt's MQTT Library

If we do a simple google search with the keyword "Qt MQTT Repository" we will land on the following link.

https://code.qt.io/cgit/qt/qtmqtt.git/

And on this page, we can see various development branches, and now as a first step we have to clone the repository based on the Qt installed on our laptop, in my case the Qt version installed is "6.2.4", hence I will clone the same branch from the above page, and the command to do this is given below.

git clone -b 6.2.4 git://code.qt.io/qt/qtmqtt.git

In the above command "6.2.4" is the Qt version, you have to replace it with the version which is installed on your computer.

The above command will clone the Qt MQTT Source Code on our computer and the next step is to compile the source code to generate the Qt MQTT Library.

Compiling the Qt MQTT Source

Compiling the source files to generate the library is the most important step. Since we will be compiling the Qt MQTT Source files from the command line terminal hence it is desirable to have proper environment variables set while building Qt projects from the command line.

Here we will make a script file on our computer with all the relevant environment variables, and let's name this file "Qt_Environment.sh", and the content of this file is shown below.

export QT_VERSION="6.2.4"

export QT_INSTALL_DIR="/opt/Qt"
export CMAKE_BIN_DIR="${QT_INSTALL_DIR}/Tools/CMake/bin"
export QMAKE_BIN_DIR="${QT_INSTALL_DIR}/${QT_VERSION}/gcc_64/bin"
export CMAKE_PREFIX_PATH="${QT_INSTALL_DIR}/${QT_VERSION}/gcc_64/"
export NINJA_DIR="${QT_INSTALL_DIR}/Tools/Ninja"
export PATH="${PATH}:${CMAKE_BIN_DIR}:${QMAKE_BIN_DIR}:${NINJA_DIR}"

Update "QT_VERSION" and "QT_INSTALL_DIR" as per your computer installation, in my case the Qt is installed inside the "opt" folder and its version is "6.2.4".

Note: Make Sure there are no spaces in the above file else it will not work and gives you a lot of errors.

Now, the next step is to load these environment variables, and this can be done with the help of the below command.

source QT_Environment.sh

This above command will load the environment variables for only one session of the terminal, and if the terminal is closed, we need to execute the same command again. But in case you wanted to avoid this step, you can load this script at power-up, but for me this is fine, so I will not do this.

The next step is to generate the build environment, build the source files and install the library, and all this can be done using the below mentioned commands.

cd qtmqtt
mkdir build
cd build
/opt/Qt/6.2.4/gcc_64/bin/qt-configure-module ..
/opt/Qt/Tools/CMake/bin/cmake --build .
/opt/Qt/Tools/CMake/bin/cmake --install . --verbose

The first command is "cd qtmqtt", here "qtmqtt" is the name of the directory where we cloned the repository, if your directory name is different, please use that, the main idea is to just go inside this directory.

The second command is "mkdir build", the purpose of this command is to create a directory named "build", which contains all the build-related information.

The third command is "cd build", the purpose of this command is to go inside the empty directory build, and from here we will run our main commands.

The fourth command is "/opt/Qt/6.2.4/gcc_64/bin/qt-configure-module ..", this command will change according to your Qt installation path, this command will basically generate the build environment, you can always check in the directory explorer where your "qt-configure-module" is present, and update this command accordingly.

The fifth command is "/opt/Qt/Tools/CMake/bin/cmake --build .", this command will build the project and generate the Qt MQTT library.

And then the sixth and last step is to install the Qt MQTT Library, and this can be done by using the command "/opt/Qt/Tools/CMake/bin/cmake --install . --verbose", this command will install the Qt MQTT library and then it can be accessed directly from the Qt Creator. Sometimes this command can give error, if your Qt is installed in some special location, like in my case it is installed inside the "/opt/" folder, and in this case we have to execute this command as "sudo".

Now, the library is installed the next step is to test the library.

Testing Qt MQTT Project

The repository which we have cloned contains several example projects and we will use one of these projects to test the Qt MQTT's library.

Qt MQTT Example Projects

I will be using the "simple client" project from these example projects. The following is the user interface of this project.

Simple Client Qt MQTT project

As can be seen in the above image, we can specify the Host Name, Port, Topic, and Message, and then there are Connect, Publish and Subscribe buttons.

In my case, I am running an MQTT broker on my local machine, and hence in Host Name I have specified "localhost", and in the port name, I have specified 1883.

The following animation file will show how it works, whenever publish button is pressed, the topic message is received on the terminal which is subscribing to the topic.

Project Demo

That's all from this tutorial, the reason why I created this post is that in the future I am working on a simple project where we can control the devices and get the status of some sensors using ESP32, and all this is done using the "MQTT" protocol, and this all is done using the Android application, and to develop that Android application, I will be using the Qt, hence this is needed to get started.

NOTE:

I did the same thing under Windows, open the Qt Creator and opened the "MQTT" project, and compiled the project for Windows and Android. After this, I used the following command to install the library for Windows and Android, from their respective build folders.

c:\Qt\Tools\CMake_64\bin\cmake.exe --install . --verbose

For Windows, the library is installed in the proper place, but for Android, it gets installed inside the "C" drive and "Program Files" folder, and then I have to copy them manually inside the Android library folders.

I don't know why this happen, I am not an expert on CMake, in case someone knows please let me know in the comment section.

Temperature and Humidity Graph Using ESP32 ILI9341 DHT11 and LVGL

noreply@blogger.com (Embedded Laboratory) — Tue, 03 Jan 2023 22:05:00 +0000

In this post, I will tell you, how to interface ILI9341 with ESP32, and then I will use the DHT11 sensor to get the temperature and humidity data and plot this data on the ILI9341 display, but for plotting I will be using "lv_chart" objects provided by LVGL, LVGL stands for Light and Versatile Embedded Graphics Library, this is the most popular free and open-source embedded graphics library to create beautiful UIs for any MCU, MPU and display type.

Temperature and Humidity Graph using ESP32 and ILI9341

In one of my previous posts, I showed you guys how to use LVGL with STM32F4 and STM32F7 Discovery Boards, so this post is basically an extension of that post.

We will do the same thing which we have done in the post on STM32 and LVGL integration, and if you compare both the code you can see that basically there is very less difference. So, in this project, we will do the following.

Display VIBGYOR Colors for 4 seconds
Display Red, Green, and Blue Sliders, and by changing the value of these sliders, the rectangle color is updated
Once all slider value reaches 255 value the software switches to the next screen.
In this screen, the temperature and humidity values taken from the DHT11 sensor are plotted on the graph using the "lv_chart" object.
The difference between the previous post and this post is that here I will be plotting temperature and humidity data, while in the previous post, I was just plotting the temperature value.

Project Setup

For this project, I will be using Arduino framework for ESP32, but instead of using Arduino IDE, I will be using PlatformIO with Visual Studio Code, as it has more advantages as compared to Arduino IDE, and for me, the following are some of the main advantages.

PlatformIO with Visual Studio Code Extension is much faster in compiling the code as compared to the Arduino IDE (I don't the exact reason, but I read somewhere that PlatformIO utilizes all cores of our processor, I don't know how true this statement is, but for me, it is absolutely much faster)
The auto-Completion feature is missing in Arduino IDE
Libraries are added to individual projects rather than to all projects.

In PlatformIO whenever we add a library it is added to only that project, and all the changes done to our project are specific to our project, while for Arduino IDE, if we have to customize something we have to do that in the libraries folder and that usually creates a mess in most of the cases, this project is also an example of this, because here also we have to modify some of the library files.

We can see the content of the Library just inside the Visual Studio Code, which is not available on Arduino IDE

The schematic diagram or connection diagram for this project is as below.

Connection Diagram

From the above picture, the pinout is not visible properly, so you use the below-mentioned table for the connections.

ESP32 ILI9341 DHT11 Pin Out

After doing this, we have to install three libraries, one is for the DHT11 sensor, the second is for SPI communication and the other one is the LVGL library, this can be done by going into the PlatformIO libraries section.

Install DHT11 Sensor Library.

Installing DHT11 Sensor Library

Install the TFT_eSPI library by Bodmer.

Install LVGL Library by LVGL.

Install LVGL Library

Once all three libraries are installed the "platformio.ini" file will look something like this.

[env:esp32doit-devkit-v1]
platform = espressif32
board = esp32doit-devkit-v1
framework = arduino
lib_deps = 
  lvgl/lvgl@^8.3.4
  bodmer/TFT_eSPI@^2.4.79
  adafruit/Adafruit Unified Sensor@^1.1.7
  adafruit/DHT sensor library@^1.4.4
monitor_speed = 115200

Configuring SPI

The "TFT_eSPI" library is a generic library, and we have to configure this library for our project as per the connections.

If PlatformIO is used, then this library is present inside the "*.pio" folder as shown in the below image.

TFT_eSPI Library with PlatformIO

And if Arduino IDE is used then this library is usually installed under the "Arduino\libraries\TFT_eSPI" path, as shown in the below image.

TFT_eSPI Library with Arduino IDE

In both cases, we have to modify the "User_Setup.h" file, as shown below.

First select the correct driver, in my case it is "ILI9341_DRIVER"

// Only define one driver, the other ones must be commented out
#define ILI9341_DRIVER       // Generic driver for common displays
//#define ILI9341_2_DRIVER     // Alternative ILI9341 driver, see https://github.com/Bodmer/TFT_eSPI/issues/1172
//#define ST7735_DRIVER      // Define additional parameters below for this display
//#define ILI9163_DRIVER     // Define additional parameters below for this display
//#define S6D02A1_DRIVER

The second step is to configure the SPI pins, as shown below.

#define TFT_MISO 19
#define TFT_MOSI 23
#define TFT_SCLK 18
#define TFT_CS   5  // Chip select control pin
#define TFT_DC   0  // Data Command control pin
//#define TFT_RST   4  // Reset pin (could connect to RST pin)
#define TFT_RST  -1  // Set TFT_RST to -1 if display RESET is connected to ESP32 board RST

If on the hardware, if you have connected the "TFT_RST" with some ESP32 pin, then specify that pin here, else specify "-1" as I have done in my case.

The next step is to specify the Touch Chip Select pin, which in my case is "2" pin.

#define TOUCH_CS 2     // Chip select pin (T_CS) of touch screen

Note: You can change "TFT_CS" which is the chip select pin, "TFT_DC" pin which is TFT Data or Command Mode control signal pin, "TFT_RST" pin which is the reset pin, and "TOUCH_CS" which is Touch Chip Select Pin, but for SPI pins always select the pins specified here.

Make sure this piece of code is also like this.

#define LOAD_GLCD   // Font 1. Original Adafruit 8 pixel font needs ~1820 bytes in FLASH
#define LOAD_FONT2  // Font 2. Small 16 pixel high font, needs ~3534 bytes in FLASH, 96 characters
#define LOAD_FONT4  // Font 4. Medium 26 pixel high font, needs ~5848 bytes in FLASH, 96 characters
#define LOAD_FONT6  // Font 6. Large 48 pixel font, needs ~2666 bytes in FLASH, only characters 1234567890:-.apm
#define LOAD_FONT7  // Font 7. 7 segment 48 pixel font, needs ~2438 bytes in FLASH, only characters 1234567890:-.
#define LOAD_FONT8  // Font 8. Large 75 pixel font needs ~3256 bytes in FLASH, only characters 1234567890:-.
//#define LOAD_FONT8N // Font 8. Alternative to Font 8 above, slightly narrower, so 3 digits fit a 160 pixel TFT
#define LOAD_GFXFF  // FreeFonts. Include access to the 48 Adafruit_GFX free fonts FF1 to FF48 and custom fonts

// Comment out the #define below to stop the SPIFFS filing system and smooth font code being loaded
// this will save ~20kbytes of FLASH
#define SMOOTH_FONT

And then configure the SPI Frequency to be used, for TFT I am using 40MHz, for Reading 20MHz and for Touch 25MHz, as shown below.

// Define the SPI clock frequency, this affects the graphics rendering speed. Too
// fast and the TFT driver will not keep up and display corruption appears.
// With an ILI9341 display 40MHz works OK, 80MHz sometimes fails
// With a ST7735 display more than 27MHz may not work (spurious pixels and lines)
// With an ILI9163 display 27 MHz works OK.

// #define SPI_FREQUENCY   1000000
// #define SPI_FREQUENCY   5000000
// #define SPI_FREQUENCY  10000000
// #define SPI_FREQUENCY  20000000
// #define SPI_FREQUENCY  27000000
#define SPI_FREQUENCY  40000000
// #define SPI_FREQUENCY  55000000 // STM32 SPI1 only (SPI2 maximum is 27MHz)
// #define SPI_FREQUENCY  80000000

// Optional reduced SPI frequency for reading TFT
#define SPI_READ_FREQUENCY  20000000

// The XPT2046 requires a lower SPI clock rate of 2.5MHz so we define that here:
#define SPI_TOUCH_FREQUENCY  2500000

Calibrating Touch

Once the above step is done, the next step is to get the calibration data for the Touch Screen, which can be get easily by using the Example Sketch. The path of this example sketch is as follows.

Examples\TFT_eSPI\Generic\Touch_calibrate

And the touch calibration project is as below.

/*
  Sketch to generate the setup() calibration values, these are reported
  to the Serial Monitor.

  The sketch has been tested on the ESP8266 and screen with XPT2046 driver.
*/

#include <SPI.h>
#include <TFT_eSPI.h>      // Hardware-specific library

TFT_eSPI tft = TFT_eSPI(); // Invoke custom library

//------------------------------------------------------------------------------------------

void setup() {
  // Use serial port
  Serial.begin(115200);

  // Initialise the TFT screen
  tft.init();

  // Set the rotation to the orientation you wish to use in your project before calibration
  // (the touch coordinates returned then correspond to that rotation only)
  tft.setRotation(1);

  // Calibrate the touch screen and retrieve the scaling factors
  touch_calibrate();

/*
  // Replace above line with the code sent to Serial Monitor
  // once calibration is complete, e.g.:
  uint16_t calData[5] = { 286, 3534, 283, 3600, 6 };
  tft.setTouch(calData);
*/

  // Clear the screen
  tft.fillScreen(TFT_BLACK);
  tft.drawCentreString("Touch screen to test!",tft.width()/2, tft.height()/2, 2);
}

//------------------------------------------------------------------------------------------

void loop(void) {
  uint16_t x = 0, y = 0; // To store the touch coordinates

  // Pressed will be set true is there is a valid touch on the screen
  bool pressed = tft.getTouch(&x, &y);

  // Draw a white spot at the detected coordinates
  if (pressed) {
    tft.fillCircle(x, y, 2, TFT_WHITE);
    //Serial.print("x,y = ");
    //Serial.print(x);
    //Serial.print(",");
    //Serial.println(y);
  }
}

//------------------------------------------------------------------------------------------

// Code to run a screen calibration, not needed when calibration values set in setup()
void touch_calibrate()
{
  uint16_t calData[5];
  uint8_t calDataOK = 0;

  // Calibrate
  tft.fillScreen(TFT_BLACK);
  tft.setCursor(20, 0);
  tft.setTextFont(2);
  tft.setTextSize(1);
  tft.setTextColor(TFT_WHITE, TFT_BLACK);

  tft.println("Touch corners as indicated");

  tft.setTextFont(1);
  tft.println();

  tft.calibrateTouch(calData, TFT_MAGENTA, TFT_BLACK, 15);

  Serial.println(); Serial.println();
  Serial.println("// Use this calibration code in setup():");
  Serial.print("  uint16_t calData[5] = ");
  Serial.print("{ ");

  for (uint8_t i = 0; i < 5; i++)
  {
    Serial.print(calData[i]);
    if (i < 4) Serial.print(", ");
  }

  Serial.println(" };");
  Serial.print("  tft.setTouch(calData);");
  Serial.println(); Serial.println();

  tft.fillScreen(TFT_BLACK);
  
  tft.setTextColor(TFT_GREEN, TFT_BLACK);
  tft.println("Calibration complete!");
  tft.println("Calibration code sent to Serial port.");

  delay(4000);
}

Once you run this project, after following all the instructions you will get something like this on Serial Terminal.

  // Replace above line with the code sent to Serial Monitor
  // once calibration is complete, e.g.:
  uint16_t calData[5] = { 286, 3534, 283, 3600, 6 };
  tft.setTouch(calData);

These are the calibration values and we have to use these calibration values in our project, or else touch might not work properly.

Configuring LVGL

The LVGL is a generic library that can be used with any display, with just some basic configuration.

If PlatformIO is used the library is present inside the ".pio" folder with the name "lvgl" as shown below.

LVGL Library with PlatformIO

Here there is a file "lv_conf_template.h", we have to copy this file outside the "lvgl" folder and rename this file to "lv_conf.h".

And we have to enable the code/configuration present inside this file to 1, from 0, as shown below.

#if 1 /*Set it to "1" to enable content*/

#ifndef LV_CONF_H
#define LV_CONF_H

#include <stdint.h>

The next, step is to make sure that the color dept is 16, for RGB565 color format, and SWAP is set "0", as shown below.

/*Color depth: 1 (1 byte per pixel), 8 (RGB332), 16 (RGB565), 32 (ARGB8888)*/
#define LV_COLOR_DEPTH 16

/*Swap the 2 bytes of RGB565 color. Useful if the display has an 8-bit interface (e.g. SPI)*/
#define LV_COLOR_16_SWAP 0

/*Enable features to draw on transparent background.
 *It's required if opa, and transform_* style properties are used.
 *Can be also used if the UI is above another layer, e.g. an OSD menu or video player.*/
#define LV_COLOR_SCREEN_TRANSP 0

/* Adjust color mix functions rounding. GPUs might calculate color mix (blending) differently.
 * 0: round down, 64: round up from x.75, 128: round up from half, 192: round up from x.25, 254: round up */
#define LV_COLOR_MIX_ROUND_OFS 0

/*Images pixels with this color will not be drawn if they are chroma keyed)*/
#define LV_COLOR_CHROMA_KEY lv_color_hex(0x00ff00)         /*pure green*/

Then we can configure the memory allocated to lvgl, which should be greater than 2 kilobytes as shown below it is set to 48 kilobytes.

/*1: use custom malloc/free, 0: use the built-in `lv_mem_alloc()` and `lv_mem_free()`*/
#define LV_MEM_CUSTOM 0
#if LV_MEM_CUSTOM == 0
    /*Size of the memory available for `lv_mem_alloc()` in bytes (>= 2kB)*/
    #define LV_MEM_SIZE (48U * 1024U)          /*[bytes]*/

    /*Set an address for the memory pool instead of allocating it as a normal array. Can be in external SRAM too.*/
    #define LV_MEM_ADR 0     /*0: unused*/
    /*Instead of an address give a memory allocator that will be called to get a memory pool for LVGL. E.g. my_malloc*/
    #if LV_MEM_ADR == 0
        #undef LV_MEM_POOL_INCLUDE
        #undef LV_MEM_POOL_ALLOC
    #endif

#else       /*LV_MEM_CUSTOM*/

Then the next step is to configure the tick source, I will set it to 1 for Arduino-based platforms as shown below. This removes the need to manually update the tick with the function call "lv_tick_inc".

/*Use a custom tick source that tells the elapsed time in milliseconds.
 *It removes the need to manually update the tick with `lv_tick_inc()`)*/
#define LV_TICK_CUSTOM 1
#if LV_TICK_CUSTOM
    #define LV_TICK_CUSTOM_INCLUDE "Arduino.h"         /*Header for the system time function*/
    #define LV_TICK_CUSTOM_SYS_TIME_EXPR (millis())    /*Expression evaluating to current system time in ms*/
#endif   /*LV_TICK_CUSTOM*/

This step is optional, by setting LV_USE_LOG, we can log different types of the log messages, at the moment I have set it to "LV_LOG_LEVEL_WARN".

#define LV_USE_LOG 1
#if LV_USE_LOG

    /*How important log should be added:
    *LV_LOG_LEVEL_TRACE       A lot of logs to give detailed information
    *LV_LOG_LEVEL_INFO        Log important events
    *LV_LOG_LEVEL_WARN        Log if something unwanted happened but didn't cause a problem
    *LV_LOG_LEVEL_ERROR       Only critical issue, when the system may fail
    *LV_LOG_LEVEL_USER        Only logs added by the user
    *LV_LOG_LEVEL_NONE        Do not log anything*/
    #define LV_LOG_LEVEL      LV_LOG_LEVEL_WARN

    /*1: Print the log with 'printf';
    *0: User need to register a callback with `lv_log_register_print_cb()`*/
    #define LV_LOG_PRINTF 0

    /*Enable/disable LV_LOG_TRACE in modules that produces a huge number of logs*/
    #define LV_LOG_TRACE_MEM        1
    #define LV_LOG_TRACE_TIMER      1
    #define LV_LOG_TRACE_INDEV      1
    #define LV_LOG_TRACE_DISP_REFR  1
    #define LV_LOG_TRACE_EVENT      1
    #define LV_LOG_TRACE_OBJ_CREATE 1
    #define LV_LOG_TRACE_LAYOUT     1
    #define LV_LOG_TRACE_ANIM       1

#endif  /*LV_USE_LOG*/

And finally, we can enable and disable the fonts as shown below, I have enabled MONTSERRAT_12, 14, and 16 fonts. Again this is an optional step.

/*Montserrat fonts with ASCII range and some symbols using bpp = 4
 *https://fonts.google.com/specimen/Montserrat*/
#define LV_FONT_MONTSERRAT_8  1
#define LV_FONT_MONTSERRAT_10 0
#define LV_FONT_MONTSERRAT_12 1
#define LV_FONT_MONTSERRAT_14 1
#define LV_FONT_MONTSERRAT_16 1
#define LV_FONT_MONTSERRAT_18 0
#define LV_FONT_MONTSERRAT_20 0
#define LV_FONT_MONTSERRAT_22 0
#define LV_FONT_MONTSERRAT_24 0
#define LV_FONT_MONTSERRAT_26 0
#define LV_FONT_MONTSERRAT_28 0
#define LV_FONT_MONTSERRAT_30 0
#define LV_FONT_MONTSERRAT_32 0
#define LV_FONT_MONTSERRAT_34 0
#define LV_FONT_MONTSERRAT_36 0
#define LV_FONT_MONTSERRAT_38 0
#define LV_FONT_MONTSERRAT_40 0
#define LV_FONT_MONTSERRAT_42 0
#define LV_FONT_MONTSERRAT_44 0
#define LV_FONT_MONTSERRAT_46 0
#define LV_FONT_MONTSERRAT_48 0

Final Step

Get the Source Code from the GitHub

I have shown the important and tricky configuration steps, and the rest of the part is really simple just copy and paste after running the above code from GitHub you will see the following screens on the display.

VIBGYOR Display for 4 seconds

RGB Mixer

Temperature and Humidity Graph

Weather Monitoring Using ESP32 and InfluxDB

noreply@blogger.com (Embedded Laboratory) — Tue, 20 Dec 2022 12:28:00 +0000

In this post, I will demonstrate how we can use the ESP32 module to sense the temperature and humidity from the DHT11 sensor and send this data to the InfluxDB cloud database, and then using InfluxDB and Grafana Dashboard, we can visualize this data in the form of graphs and gauges. Below is the image of the dashboard created in InfluxDB.

Note: Grafana Dashboard post will be a separate topic else this will be a very long post.

Dashboard in InfluxDB Cloud

You can watch the video or read the below post.

Prerequisite for this Tutorial

ESP32 Board
DHT11 Sensor
Some Cables

Note: I prefer PlatformIO with VSCode for my software development, but the same project will work on the Arduino platform also. In PlatformIO you have to click on Libraries and then search for the library and then add that library to the project, while in Arduino you have to use "Library Manager" and search for the library and install it. Both are really simple methods and I assume you all are very much familiar with them.

As a first step, we will use the ESP32 to capture the temperature and humidity information from the DHT11 temperature sensor. Fortunately, the software library is already available for this purpose from Adafruit.

Install the DHT sensor library if using PlatformIO or Arduino as shown in the image below.


Install Adafruit DHT Sensor Library for PlatformIO


Install Adafruit DHT Sensor Library for Arduino

Install the InfluxDB library if using PlatformIO or Arduino as shown in the image, this library has the name ESP8266 but don't worry about that, it works very well with ESP32 also.


Install InfluxDB ESP8266 Library for PlatformIO

Install InfluxDB ESP8266 Library for Arduino

DHT11 Sensor Interfacing

As a first step, we will test the DHT11 sensor to make sure it is working, this is basically a modular approach that helps the software development easier.

Let's start our coding, first, we need to include the DHT sensor include files in the project as shown below.

#include <DHT.h>
#include <DHT_U.h>

The next step is to select the DHT sensor type and the pin it is connected to, here it is connected to ESP32 pin 12, we have also created a macro "DHT11_REFRESH_TIME", this macro is used to trigger the measurement from the DHT11 sensor, this we will see below.

#define DHTPIN                          (12)
#define DHTTYPE                         (DHT11)

#define DHT11_REFRESH_TIME              (5000u)

The next step is to create the DHT sensor object and define some variables to store temperature and humidity data, another variable is created named "dht_refresh_timestamp", this variable along with macro "DHT11_REFRESH_TIME" is used to get the temperature and humidity after every 5 seconds, which is programmed in "DHT11_REFRESH_TIME" macro.

static uint8_t dht11_temperature = 0;
static uint8_t dht11_humidity = 0u;
DHT dht(DHTPIN, DHTTYPE);

Below are the two main important functions, one is the "DHT11_TaskInit" function and another is the "DHT11_TaskMng()" function.

DHT11_TaskInit

This function is called inside the "setup" function and it basically setup the sensor pins and sets pull timings, also initializes the "dht_refresh_timestamp" variable with the current values millisecond value using "millis()" function.

DHT11_TaskMng

This function is called inside the "loop" function and it basically triggers the temperature and humidity measurements and prints the information on the serial port and also saves the data into the variables "dht11_temperature" and "dht11_humidity".

The content of both of these functions are as below.

static void DHT11_TaskInit( void )
{
  dht.begin();
  // delay(2000);
  dht_refresh_timestamp = millis();
}
 

static void DHT11_TaskMng( void )
{
  uint32_t now = millis();
  float temperature, humidity;
  if( now - dht_refresh_timestamp >= DHT11_REFRESH_TIME )
  {
    dht_refresh_timestamp = now;
    // Reading temperature or humidity takes about 250 milliseconds!
    // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
    humidity = dht.readHumidity();
    // Read temperature as Celsius (the default)
    temperature = dht.readTemperature();
    
    // Check if any reads failed and exit early (to try again).
    if (isnan(humidity) || isnan(temperature) ) 
    {
      Serial.println(F("Failed to read from DHT sensor!"));
    }
    else
    {
      Serial.print(F("Humidity: "));
      Serial.print(humidity);
      Serial.print(F("%  Temperature: "));
      Serial.print(temperature);
      Serial.println(F("°C "));
      // store this in the global variables
      dht11_humidity = (uint8_t)humidity;
      dht11_temperature = (uint8_t)temperature;
    }
  }
}
 
void setup()
{
  System_Init();
  DHT11_TaskInit();
}

void loop()
{
  DHT11_TaskMng();
}
 

We will test this much and if this works we will proceed further with the connection to the InfluxDB cloud server.

Creating InfluxDB Database

With the above piece of code, we can get the temperature and humidity data from the DHT11 sensor, and as a next step we have to store this data on the InfluxDB database we need an account for that, which can be created for free of cost for primary usage.

To create a free account, register with an email id on this link. And once you are registered you have the possibility to select from the following three options.

AWS Amazon Web Services
Google Cloud
Microsoft Azure

You can select anyone of them, and opt for "Free Account", which looks like this.

InfluxDB Plan Type

InfluxDB Database Connection Details

InfluxDB has already done some work for us in interfacing Arduino-based devices, so we can take advantage of it, this is shown below where we get the option of "Client Libraries", one can click on "Arduino" icon and follow along.

But let's do it differently here, although it means the same thing, we need two things here, one is "Bucket" and the other thing is "API Tokens" by which the other application can access the InfluxDB database.

Click on Generate API Token button to generate token.


Generate API Token

Click on Create Bucket button to create a bucket. The purpose of bucket is to collect all data

Create Bucket

And now next step is to update our program to connect with the InfluxDB server and send data to the InfluxDB database. And for this we will include the InfluxDB-related header files and also the WiFiMulti header file which will handle all WiFi-related operations for the ESP32 chip, so now our header file inclusion will look like this.

 
#include <Arduino.h>
#include <WiFiMulti.h>
#include <InfluxDbClient.h>
#include <InfluxDbCloud.h>
#include <DHT.h>
#include <DHT_U.h>
 

The next step is to fill in the WiFi Router's SSID and Password information so that our ESP32 module can be connected to the router and the internet.

 
#define WIFI_SSID             "Enter SSID Here"
#define WIFI_PASSWORD         "Enter Password Here"

After this, we must enter the InfluxDB database-related information, as mentioned below.

 
#define INFLUXDB_URL          "????????????"
#define INFLUXDB_TOKEN        "????????????"
#define INFLUXDB_ORG          "????????????"
#define INFLUXDB_BUCKET       "????????????"
 

All of this information we can get from the InfluxDB account, like for example we just created the "Bucket" and also generated the "API Token", so that information needs to be entered here, similarly URL and also the organization, which is just your email id.

The next step is to set the time zone and this is done using the following statements.

Here I have specified the Central European Time i.e. CET.

 
// Set timezone string according to https://www.gnu.org/software/libc/manual/html_node/TZ-Variable.html
// Examples:
//  Pacific Time: "PST8PDT"
//  Eastern: "EST5EDT"
//  Japanesse: "JST-9"
//  Central Europe: "CET-1CEST,M3.5.0,M10.5.0/3"
#define TZ_INFO "CET-1CEST,M3.5.0,M10.5.0/3"
 

Once this is done we need to define the Device Name, and also a macro named "INFLUXDB_SEND_TIME" to send data periodically to InfluxDB database.

#define DEVICE                          "ESP32"
#define INFLUXDB_SEND_TIME              (10000u)

After this, I will create a WiFi object, a Point object which stores the data for the bucket, and an InfluxDB client object for connecting and sending data to the InfluxDB database, and this can be done using the following line of code.

 
// InfluxDB client instance with preconfigured InfluxCloud Certificate
InfluxDBClient client(INFLUXDB_URL, INFLUXDB_ORG, INFLUXDB_BUCKET, INFLUXDB_TOKEN, InfluxDbCloud2CACert);

// Data point
Point sensor("Sensor_Data");

WiFiMulti wifiMulti;

Now let's start working on writing our important function, just like we did for the DHT11 sensor, this part also includes three important functions, first "WiFi_Setup", the second one is "InfluxDB_TaskInit()" and the last and most important one "InfluxDB_TaskMng()"

WiFi_Setup

This function connects the ESP32 with the WiFi router and connects it to the internet, here first configure the ESP32 in station mode and then connect it to the router, as shown below.

 
static void WiFi_Setup( void )
{
  // Connect WiFi
  Serial.println("Connecting to WiFi");
  WiFi.mode(WIFI_STA);
  wifiMulti.addAP(WIFI_SSID, WIFI_PASSWORD);
  while (wifiMulti.run() != WL_CONNECTED)
  {
    Serial.print(".");
    delay(500);
  }
  Serial.println();
}
 

InfluxDB_TaskInit

This function synchronizes time and connects with the InfluxDB database as shown with the help of the below piece of code, we also added a "Tag" named device, to identify that this data is coming from this device which in this case is "ESP32"

 
static void InfluxDB_TaskInit( void )
{
  // Add constant tags - only once
  sensor.addTag("device", DEVICE);

  // Accurate time is necessary for certificate validation & writing in batches
  // For the fastest time sync find NTP servers in your area: 
  // https://www.pool.ntp.org/zone/
  // Syncing progress and the time will be printed to Serial.
  timeSync(TZ_INFO, "pool.ntp.org", "time.nis.gov");

  // Check server connection
  if (client.validateConnection()) 
  {
    Serial.print("Connected to InfluxDB: ");
    Serial.println(client.getServerUrl());
  }
  else
  {
    Serial.print("InfluxDB connection failed: ");
    Serial.println(client.getLastErrorMessage());
  }
}
 

InfluxDB_TaskMng

This function is the most important function and this function, and this function sends the WiFi RSSI value of the WiFi, with Temperature and Humidity data to the InfluxDb database. As shown in the below piece of source code.

This function executes every 10 seconds, but I would suggest it changed to every minute as temperature and humidity values don't change that quickly.

In this function, the following things are done.

Clear All Fields for the Point
Then add fields, one is RSSI, then DHT11 Temperature, and then DHT11 Humidity
Once the above step is done we send this to Serial for debugging purposes to see if everything looks fine or not.
The next step is that check if the WiFi is still connected or not.
If connected we will write the Point data to the InfluxDB server

 
static void InfluxDB_TaskMng( void )
{
  uint32_t now = millis();
  if( now - influxdb_send_timestamp >= INFLUXDB_SEND_TIME )
  {
    influxdb_send_timestamp = now;
    sensor.clearFields();
    // Report RSSI of currently connected network
    sensor.addField( "rssi", WiFi.RSSI() );
    // add temperature and humidity values also
    sensor.addField( "temperature", dht11_temperature );
    sensor.addField( "humidity", dht11_humidity );
    
    // Print what are we exactly writing
    Serial.print("Writing: ");
    Serial.println(client.pointToLineProtocol(sensor));
    // If no Wifi signal, try to reconnect it
    if (wifiMulti.run() != WL_CONNECTED)
    {
      Serial.println("Wifi connection lost");
    }
    // Write point
    if (!client.writePoint(sensor))
    {
      Serial.print("InfluxDB write failed: ");
      Serial.println(client.getLastErrorMessage());
    }
  }
}
 

Download the code from the GitHub Repository

Or you can use the below-mentioned code also.

/**
 * Basic Write Example code for InfluxDBClient library for Arduino
 * Data can be immediately seen in a InfluxDB UI: wifi_status measurement
 * Enter WiFi and InfluxDB parameters below
 *
 * Measures signal level of the actually connected WiFi network
 * This example supports only InfluxDB running from unsecure (http://...)
 * For secure (https://...) or Influx Cloud 2 use SecureWrite example
 **/

#include <Arduino.h>
#include <WiFiMulti.h>
#include <InfluxDbClient.h>
#include <InfluxDbCloud.h>
#include <DHT.h>
#include <DHT_U.h>

// Project Macros
#define WIFI_SSID             "Enter SSID Here"
#define WIFI_PASSWORD         "Enter Password Here"
#define INFLUXDB_URL          "????????????"
#define INFLUXDB_TOKEN        "????????????"
#define INFLUXDB_ORG          "????????????"
#define INFLUXDB_BUCKET       "????????????"

// Set timezone string according to https://www.gnu.org/software/libc/manual/html_node/TZ-Variable.html
// Examples:
//  Pacific Time: "PST8PDT"
//  Eastern: "EST5EDT"
//  Japanesse: "JST-9"
//  Central Europe: "CET-1CEST,M3.5.0,M10.5.0/3"
#define TZ_INFO "CET-1CEST,M3.5.0,M10.5.0/3"

#define DEVICE                          "ESP32"

// DHT Sensor Configuration Macros
#define DHTPIN                          (12)
#define DHTTYPE                         (DHT11)

#define DHT11_REFRESH_TIME              (5000u)
#define INFLUXDB_SEND_TIME              (10000u)

// Priavate Variables

// InfluxDB client instance with preconfigured InfluxCloud Certificate
InfluxDBClient client(INFLUXDB_URL, INFLUXDB_ORG, INFLUXDB_BUCKET, INFLUXDB_TOKEN, InfluxDbCloud2CACert);

// Data point
Point sensor("Sensor_Data");

WiFiMulti wifiMulti;

static uint8_t dht11_temperature = 0;
static uint8_t dht11_humidity = 0u;
DHT dht(DHTPIN, DHTTYPE);

// Task Time related Variables
static uint32_t dht_refresh_timestamp = 0u;
static uint32_t influxdb_send_timestamp = 0u;

// Private Function Prototypes
static void System_Init( void );
static void WiFi_Setup( void );
static void DHT11_TaskInit( void );
static void DHT11_TaskMng( void );
static void InfluxDB_TaskInit( void );
static void InfluxDB_TaskMng( void );

void setup()
{
  System_Init();
  WiFi_Setup();
  DHT11_TaskInit();
  InfluxDB_TaskInit();
}

void loop()
{
  DHT11_TaskMng();
  InfluxDB_TaskMng();
}

// Private Function Definitions
static void System_Init( void )
{
  Serial.begin( 115200 );
  // TODO: XS
}

static void WiFi_Setup( void )
{
  // Connect WiFi
  Serial.println("Connecting to WiFi");
  WiFi.mode(WIFI_STA);
  wifiMulti.addAP(WIFI_SSID, WIFI_PASSWORD);
  while (wifiMulti.run() != WL_CONNECTED)
  {
    Serial.print(".");
    delay(500);
  }
  Serial.println();
}

static void DHT11_TaskInit( void )
{
  dht.begin();
  // delay(2000);
  dht_refresh_timestamp = millis();
}

static void DHT11_TaskMng( void )
{
  uint32_t now = millis();
  float temperature, humidity;
  if( now - dht_refresh_timestamp >= DHT11_REFRESH_TIME )
  {
    dht_refresh_timestamp = now;
    // Reading temperature or humidity takes about 250 milliseconds!
    // Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)
    humidity = dht.readHumidity();
    // Read temperature as Celsius (the default)
    temperature = dht.readTemperature();
    
    // Check if any reads failed and exit early (to try again).
    if (isnan(humidity) || isnan(temperature) ) 
    {
      Serial.println(F("Failed to read from DHT sensor!"));
    }
    else
    {
      Serial.print(F("Humidity: "));
      Serial.print(humidity);
      Serial.print(F("%  Temperature: "));
      Serial.print(temperature);
      Serial.println(F("°C "));
      // store this in the global variables
      dht11_humidity = (uint8_t)humidity;
      dht11_temperature = (uint8_t)temperature;
    }
  }
}

static void InfluxDB_TaskInit( void )
{
  // Add constant tags - only once
  sensor.addTag("device", DEVICE);

  // Accurate time is necessary for certificate validation & writing in batches
  // For the fastest time sync find NTP servers in your area: 
  // https://www.pool.ntp.org/zone/
  // Syncing progress and the time will be printed to Serial.
  timeSync(TZ_INFO, "pool.ntp.org", "time.nis.gov");

  // Check server connection
  if (client.validateConnection()) 
  {
    Serial.print("Connected to InfluxDB: ");
    Serial.println(client.getServerUrl());
  }
  else
  {
    Serial.print("InfluxDB connection failed: ");
    Serial.println(client.getLastErrorMessage());
  }
}

static void InfluxDB_TaskMng( void )
{
  uint32_t now = millis();
  if( now - influxdb_send_timestamp >= INFLUXDB_SEND_TIME )
  {
    influxdb_send_timestamp = now;
    // Store measured value into point
    sensor.clearFields();
    // Report RSSI of currently connected network
    sensor.addField( "rssi", WiFi.RSSI() );
    // add temperature and humidity values also
    sensor.addField( "temperature", dht11_temperature );
    sensor.addField( "humidity", dht11_humidity );
    
    // Print what are we exactly writing
    Serial.print("Writing: ");
    Serial.println(client.pointToLineProtocol(sensor));
    // If no Wifi signal, try to reconnect it
    if (wifiMulti.run() != WL_CONNECTED)
    {
      Serial.println("Wifi connection lost");
    }
    // Write point
    if (!client.writePoint(sensor))
    {
      Serial.print("InfluxDB write failed: ");
      Serial.println(client.getLastErrorMessage());
    }
  }
}

Visualizing Data on InfluxDB Database

Now the data is sent to the InfluxDB database, it is very easy to visualize the data, we just have to go to following the following steps as mentioned in the image.

Creating Dashboard Using Data Explorer

Select the Data Explorer menu available on the left-hand side.
Select the Bucket, which in this case is "HomeBucket"
The next step is to select the measurement, which in this case is "Sensor_Data"
The next step is to select the "fields" either RSSI, Humidity, or Temperature, we can select each field individually also, and place them on the Dashboard.
The next step is to select the "device" which in our case is "ESP32"
The next step is to select the data duration, here I have specified that I wanted to view the past 12 hours of data.
The next step is to select the "Aggregate Function" here I selected "last"
The next step is to click on the "Submit" button, this will generate a graph.
And if you like this graph, you can click on the "Save As Graph" button, if you want to play with some other types of graphs, then you can play around with the "Customize" button and "Graph" drop-down menu to see various options.

I hope you like this post of mine, in case you have any queries or questions feel free to contact me using the comments section.

I will also update the links to the video tutorial and the link to the next related post, which displays the dashboard using Grafana.

LVGL with STM32F4 and STM32F7

noreply@blogger.com (Embedded Laboratory) — Fri, 16 Dec 2022 13:39:00 +0000

LVGL stands for Light and Versatile Graphics Library. LVGL is an open-source graphics library providing everything we need to create an embedded GUI with easy-to-use graphical elements, beautiful visual effects, and a low-memory footprint.

In this post, I will show you how to use LVGL with STM32 micro-controller in two different environments, the first example is based on the STM32F429 Discovery Board, and the second example is based on the STM32F769I Discovery board ~~and the third example is based on the Labcenter Electronics based STM32F4 and ILI9341 Simulation.~~

STM32F7 using LVGL to display Temperature Graph

I had a third plan also which is based on Labcenter Electronics Proteus simulation also, it is working, but it had a lot of issues, if someone wants to refer to that then they can use the project at the following location.

Proteus-Based LVGL and STM32 Project

Some of the issues with the Proteus are as follows:

UART with Virtual Terminal doesn't work when PLL is enabled in the clock configuration
SPI DMA mode crashing the Proteus Simulation
When using SPI 16-Bit data transfer mode, the ILI9341 display module crashes.
SPI debugger can't use when there is a lot of data, the system hangs completely.
The simulation runs really slow, making it almost unusable.

This LVGL-based program does the following things.

First VIBGYOR colors are displayed on display for 4 seconds.
Red-Green-Blue Color Mixer is shown on display.
The chart containing the temperature data from the LM35DZ sensor is displayed.

STM32F429 Discovery Board

The STM32F429ZI Discovery board kit leverages the capabilities of the STM32F429 high-performance microcontrollers, to allow users to develop rich applications easily with advanced graphical user interfaces. This board consists of a 2.4-inch QVGA TFT LCD based on the ILI9341 display controller.

In this board, the microcontroller uses the SPI module to send the commands to the display module based on the ILI9341 display controller.

STM32F4 and ILI9341 Programming Interface

This can be seen in the above programming interface image block diagram, the blue lines represent the SPI lines, where PF7 is the SPI clock and PF8 is the Data Line which can be used as MISO and MOSI also, as this is a bi-directional data line of the SPI communication (This is SPI5 and it can be used in Half-Duplex mode). In this board, the LTDC is used to send the RGB data to the ILI9341 display controller.

The goal of this post is not to tell how to configure LTDC, SPI, and External SDRAM, because the ports are easily available on GitHub.

The following is the link to the official LVGL port on GitHub for the STM32F429 Discovery Board.

LVGL Official Port for STM32F429

I used this port, mainly the driver's files, and created a new project using CubeMX, the benefit of CubeMX I can update the other modules whenever needed.

The following is the demo of the project, I will explain the LVGL project at the bottom of this post.

GitHub Link to the STM32F4 DISCO

This project is inside my STM32F4 repository, so it's better to clone the whole repository using the following commands.

git clone https://github.com/xpress-embedo/STM32F4.git
cd STM32F4
git submodule update --init --recursive

Then the project is available under the following path.

"STM32F4/Without_Cube/LVGL_Sample2"

STM32F769I Discovery Board

This discovery board is based on the STM32F769NIH6 microcontroller which has

2 Mbytes of Flash memory and 512+16+4 Kbytes of RAM, in the BGA216 package. With the onboard ST-LINK/V2-1 supporting USB and can also be used as a virtual COM port.

This discovery kit also has a 4" capacitive touch LCD display with a MIPI® DSI connector (on STM32F769I-DISCO only).

The goal of this post is not to tell how to configure LTDC, MIPI DSI Internal, and External SDRAM, because the ports are easily available on GitHub.

The following is the link to the official LVGL port on GitHub for the STM32F769 Discovery Board.

LVGL Official Port for STM32F769

I used this port, mainly the driver's files, and created a new project using CubeMX, the benefit of CubeMX I can update the other modules whenever needed.

The following is the demo of the project, I will explain the LVGL project at the bottom of this post.

GitHub Link to the STM32F769I Disco Project

This project is inside my STM32F7 repository, so it's better to clone the whole repository using the following commands.

git clone https://github.com/xpress-embedo/STM32F7.git
cd STM32F7
git submodule update --init --recursive

Then the project is available under the following path.

STM32F7/LVGL_Sample2

Source Code Understanding

As I mentioned previously also, I used references from the officially provided LVGL ports for both of these discovery boards and modified them to use the CubeMX tool which can be useful for future configurations if some other peripheral is needed.

The following are some of the activity diagrams which will help in understanding the overall flow of the project.

Project Overview

Project Interrupt Routines

Display Manager (LVGL)

In this project the main function is "Display_Mng", this function calls all sub-functions which uses different-different LVGL widgets to display different display screens on the TFT. The "Display_Mng" function calls three important functions, and they are as below.

Display VIBGYOR

This function displays the VIBGYOR color on the TFT screen and is like this.

NOTE: If you don't have STM32 Discovery Boards, then you can use LVGL Simulator also for learning and Development.

static void Display_Vibgyor( void )
{
  static lv_style_t style;
  lv_coord_t width = 0u;
  lv_coord_t length = 0u;

  lv_obj_t * V_rectangle;
  lv_obj_t * I_rectangle;
  lv_obj_t * B_rectangle;
  lv_obj_t * G_rectangle;
  lv_obj_t * Y_rectangle;
  lv_obj_t * O_rectangle;
  lv_obj_t * R_rectangle;

  lv_obj_t *act_scr = lv_scr_act();           // Get the active screen object

  R_rectangle = lv_obj_create( act_scr );     // Create Rectangle Object
  O_rectangle = lv_obj_create( act_scr );
  Y_rectangle = lv_obj_create( act_scr );
  G_rectangle = lv_obj_create( act_scr );
  B_rectangle = lv_obj_create( act_scr );
  I_rectangle = lv_obj_create( act_scr );
  V_rectangle = lv_obj_create( act_scr );

  lv_style_init(&style);
  // set the radius to zero
  lv_style_set_radius(&style, 0);
  // by default the object which we created for rectangle has some radius component
  // and it looks bad for this particular example, hence updating style for all
  // created objects
  lv_obj_add_style(R_rectangle, &style, 0);
  lv_obj_add_style(O_rectangle, &style, 0);
  lv_obj_add_style(Y_rectangle, &style, 0);
  lv_obj_add_style(G_rectangle, &style, 0);
  lv_obj_add_style(B_rectangle, &style, 0);
  lv_obj_add_style(I_rectangle, &style, 0);
  lv_obj_add_style(V_rectangle, &style, 0);


  length = lv_disp_get_hor_res(NULL);
  // VIBGYOR are seven colors
  width = lv_disp_get_physical_ver_res(NULL)/7;

  lv_obj_set_size(R_rectangle, length, width);
  lv_obj_align(R_rectangle, LV_ALIGN_TOP_LEFT, 0, 0 );
  lv_obj_set_style_border_color(R_rectangle, lv_palette_main(LV_PALETTE_RED), LV_PART_MAIN );
  lv_obj_set_style_bg_color( R_rectangle, lv_palette_main(LV_PALETTE_RED), LV_PART_MAIN );

  lv_obj_set_size(O_rectangle, length, width );
  // lv_obj_align_to(O_rectangle, R_rectangle, LV_ALIGN_BOTTOM_MID, 0, 0);
  lv_obj_align(O_rectangle, LV_ALIGN_TOP_LEFT, 0, width );
  lv_obj_set_style_border_color(O_rectangle, lv_palette_main(LV_PALETTE_ORANGE), LV_PART_MAIN );
  lv_obj_set_style_bg_color( O_rectangle, lv_palette_main(LV_PALETTE_ORANGE), LV_PART_MAIN );

  lv_obj_set_size(Y_rectangle, length, width );
  // lv_obj_align_to(Y_rectangle, O_rectangle, LV_ALIGN_TOP_LEFT, 0, 0);
  lv_obj_align(Y_rectangle, LV_ALIGN_TOP_LEFT, 0, width*2u );
  lv_obj_set_style_border_color(Y_rectangle, lv_palette_main(LV_PALETTE_YELLOW), LV_PART_MAIN );
  lv_obj_set_style_bg_color( Y_rectangle, lv_palette_main(LV_PALETTE_YELLOW), LV_PART_MAIN );

  lv_obj_set_size(G_rectangle, length, width );
  // lv_obj_align_to(G_rectangle, Y_rectangle, LV_ALIGN_TOP_LEFT, 0, 0);
  lv_obj_align(G_rectangle, LV_ALIGN_TOP_LEFT, 0, width*3u );
  lv_obj_set_style_border_color(G_rectangle, lv_palette_main(LV_PALETTE_GREEN), LV_PART_MAIN );
  lv_obj_set_style_bg_color( G_rectangle, lv_palette_main(LV_PALETTE_GREEN), LV_PART_MAIN );

  lv_obj_set_size(B_rectangle, length, width );
  // lv_obj_align_to(B_rectangle, G_rectangle, LV_ALIGN_TOP_LEFT, 0, 0);
  lv_obj_align(B_rectangle, LV_ALIGN_TOP_LEFT, 0, width*4u );
  lv_obj_set_style_border_color(B_rectangle, lv_palette_main(LV_PALETTE_BLUE), LV_PART_MAIN );
  lv_obj_set_style_bg_color( B_rectangle, lv_palette_main(LV_PALETTE_BLUE), LV_PART_MAIN );

  lv_obj_set_size(I_rectangle, length, width );
  // lv_obj_align_to(Y_rectangle, B_rectangle, LV_ALIGN_TOP_LEFT, 0, 0);
  lv_obj_align(I_rectangle, LV_ALIGN_TOP_LEFT, 0, width*5u );
  lv_obj_set_style_border_color(I_rectangle, lv_palette_main(LV_PALETTE_INDIGO), LV_PART_MAIN );
  lv_obj_set_style_bg_color( I_rectangle, lv_palette_main(LV_PALETTE_INDIGO), LV_PART_MAIN );

  lv_obj_set_size(V_rectangle, length, width );
  // lv_obj_align_to(V_rectangle, I_rectangle, LV_ALIGN_TOP_LEFT, 0, 0);
  lv_obj_align(V_rectangle, LV_ALIGN_TOP_LEFT, 0, width*6u );
  lv_obj_set_style_border_color(V_rectangle, lv_palette_main(LV_PALETTE_DEEP_PURPLE), LV_PART_MAIN );
  lv_obj_set_style_bg_color( V_rectangle, lv_palette_main(LV_PALETTE_DEEP_PURPLE), LV_PART_MAIN );
}

Display RGB Mixer

This function has two main parts one is the function which displays the RGB Mixer on the TFT screen and the other is the Slider Callback function, this function is called whenever their is some changes on the slider.

static void Display_RGBMixer( void )
{
  lv_obj_t *act_scr = lv_scr_act();                     // Get the active screen object

  lv_obj_clean( act_scr );                              // Clear the screen

  // intialize the styles
  lv_style_init(&style);
  // we have to enable other font sizes in menuconfig
  lv_style_set_text_font(&style, &lv_font_montserrat_32);

  // RED, Green and Blue Slider Configuration
  lv_obj_t *slider_r = lv_slider_create( act_scr );     // create a red slider base object
  lv_obj_t *slider_g = lv_slider_create( act_scr );     // create a green slider base object
  lv_obj_t *slider_b = lv_slider_create( act_scr );     // create a blue slider base object

  // Setting Sliders Width
  lv_obj_set_width( slider_r, LV_PCT(80) );
  lv_obj_set_width( slider_g, LV_PCT(80) );
  lv_obj_set_width( slider_b, LV_PCT(80) );

  // Setting Sliders Height
  lv_obj_set_height( slider_r, LV_PCT(4) );
  lv_obj_set_height( slider_g, LV_PCT(4) );
  lv_obj_set_height( slider_b, LV_PCT(4) );

  // Align Sliders with Each Other
  lv_obj_align( slider_r, LV_ALIGN_TOP_MID, 0u, LV_PCT(20) );
  lv_obj_align_to( slider_g, slider_r, LV_ALIGN_TOP_MID, 0u, 70u );
  lv_obj_align_to( slider_b, slider_g, LV_ALIGN_TOP_MID, 0u, 70u );

  // set slider range also (by default it is 0 to 100 but we want till 255)
  lv_slider_set_range( slider_r, 0, 255 );
  lv_slider_set_range( slider_g, 0, 255 );
  lv_slider_set_range( slider_b, 0, 255 );

  // Coloring Sliders, Slider has three parts Main, Indicator and Knob
  // apply red color to the indicator part
  lv_obj_set_style_bg_color( slider_r, lv_palette_main(LV_PALETTE_RED), LV_PART_INDICATOR );
  // apply red color to the knob part
  lv_obj_set_style_bg_color( slider_r, lv_palette_main(LV_PALETTE_RED), LV_PART_KNOB );

  // apply green color to the indicator part
  lv_obj_set_style_bg_color( slider_g, lv_palette_main(LV_PALETTE_GREEN), LV_PART_INDICATOR );
  // apply green color to the knob part
  lv_obj_set_style_bg_color( slider_g, lv_palette_main(LV_PALETTE_GREEN), LV_PART_KNOB );

  // apply blue color to the indicator part
  lv_obj_set_style_bg_color( slider_b, lv_palette_main(LV_PALETTE_BLUE), LV_PART_INDICATOR );
  // apply blue color to the knob part
  lv_obj_set_style_bg_color( slider_b, lv_palette_main(LV_PALETTE_BLUE), LV_PART_KNOB );

  rectangle = lv_obj_create(act_scr);                   // Creates a base object Rectangle to display color
  lv_obj_set_size( rectangle, LV_PCT(93), LV_PCT(33) );
  lv_obj_align_to( rectangle, slider_b, LV_ALIGN_TOP_MID, 0u, 50u );
  lv_obj_set_style_border_color( rectangle, lv_color_black(), LV_PART_MAIN );   // add black border to rectangle
  lv_obj_set_style_border_width( rectangle, 2, LV_PART_MAIN );                  // increase the width of the border by 2px
  lv_obj_set_style_bg_color( rectangle, lv_color_make( 0, 0, 0), LV_PART_MAIN); // all sliders are at zero, so background color should be black

  // Create Main Heading Label
  lv_obj_t *heading = lv_label_create(act_scr);
  lv_label_set_text( heading, "RGB Mixer");
  lv_obj_align( heading, LV_ALIGN_TOP_MID, 0u, LV_PCT(5) );
  lv_obj_add_style( heading, &style, 0 );

  // Creating labels for individual slider current values
  red.slider_type = SLIDER_TYPE_RED;
  red.label = lv_label_create(act_scr);
  lv_label_set_text( red.label, "0");
  // lv_obj_align_to( red.label, slider_r, LV_ALIGN_TOP_MID, 0u, 0u );         // this will display inside slider
  lv_obj_align_to( red.label, slider_r, LV_ALIGN_OUT_TOP_MID, 0u, 0u );    // this will display outside slider

  green.slider_type = SLIDER_TYPE_GREEN;
  green.label = lv_label_create(act_scr);
  lv_label_set_text( green.label, "0");
  lv_obj_align_to( green.label, slider_g, LV_ALIGN_OUT_TOP_MID, 0u, 0u );

  blue.slider_type = SLIDER_TYPE_BLUE;
  blue.label = lv_label_create(act_scr);
  lv_label_set_text( blue.label, "0");
  lv_obj_align_to( blue.label, slider_b, LV_ALIGN_OUT_TOP_MID, 0u, 0u );

  // add event callbacks for sliders
  lv_obj_add_event_cb( slider_r, Slider_Callback, LV_EVENT_VALUE_CHANGED, &red );
  lv_obj_add_event_cb( slider_g, Slider_Callback, LV_EVENT_VALUE_CHANGED, &green );
  lv_obj_add_event_cb( slider_b, Slider_Callback, LV_EVENT_VALUE_CHANGED, &blue );
}

And the below is the "Slider_Callback" function, this function updates the rectangle color based on the values of Slider.

static void Slider_Callback( lv_event_t *e )
{
  static int32_t red, green, blue;
  int32_t slider_value = 0;
  // get the object (slider) for which the we received the event
  lv_obj_t *slider = lv_event_get_target(e);
  // extract the object (slider) user data
  RGB_Mixer_s *user_data = lv_event_get_user_data(e);
  // get the current slider value
  slider_value = lv_slider_get_value(slider);

  // now we have to update the slider labels
  lv_label_set_text_fmt( user_data->label, "%ld", slider_value );

  // now we have to update the color of the rectangle object based on the current
  // selected values of the color
  if( user_data->slider_type == SLIDER_TYPE_RED )
  {
    red = slider_value;
  }
  else if( user_data->slider_type == SLIDER_TYPE_GREEN )
  {
    green = slider_value;
  }
  else if( user_data->slider_type == SLIDER_TYPE_BLUE )
  {
    blue = slider_value;
  }
  // now we have the color information, update the rectangle color
  // NOTE: rectangle object must be file global else we will not be able to
  // update it from here
  lv_obj_set_style_bg_color( rectangle, lv_color_make( red, green, blue), LV_PART_MAIN);
  // the function `lv_color_make` can form colors if red, green and blue color
  // are specified

  if( (red == 255) && (green == 255) && (blue == 255) )
  {
    disp_state = DISP_STATE_TEMP_SENSOR;
  }
}

And the last part is displaying the Temperature data as line chart on the graph, and it's content is as below.

This is main function, and there is an another function also, which is called periodically at the rate of 1 second to update the latest temperature data on the graph.

static void Display_TemperatureChart( void )
{
  uint16_t idx = 0u;
  // this should match with the temperature buffer length
  uint16_t chart_hor_res = 260;
  uint16_t chart_ver_res = lv_disp_get_ver_res(NULL) - 100;
  uint8_t *data = Display_GetTempData();

  lv_obj_clean( lv_scr_act() );                         // Clean the screen

  // Create a chart object
  chart = lv_chart_create( lv_scr_act() );

  // Create a label for Title text
  lv_obj_t * lbl_title = lv_label_create( lv_scr_act() );
  lv_label_set_text( lbl_title, "Temperature Graph");
  lv_obj_set_style_text_align( lbl_title, LV_TEXT_ALIGN_CENTER, 0);
  lv_obj_align( lbl_title, LV_ALIGN_TOP_MID, 0, 0 );
  lv_obj_add_style( lbl_title, &style, 0 );

  // Set the chart size (Size should be set properly because we wanted to display
  // chart title and some data on y-axis also)
  // display is 320x240
  lv_obj_set_size( chart, (lv_disp_get_hor_res(NULL) - 100), chart_ver_res );
  // TODO: XS I don't want to center it, will check later
  // lv_obj_center( chart );
  lv_obj_align( chart, LV_ALIGN_CENTER, LV_PCT(5), 0 );
  // lv_obj_align( chart, LV_ALIGN_BOTTOM_RIGHT, 0, 0 );

  // Set Chart Type to Line Chart
  lv_chart_set_type( chart, LV_CHART_TYPE_LINE );
  // By Default the number of points are 10, update it to chart width
  lv_chart_set_point_count( chart, chart_hor_res );
  // Update mode shift or circular, here shift is selected
  lv_chart_set_update_mode( chart, LV_CHART_UPDATE_MODE_SHIFT );
  // Specify Vertical Range
  lv_chart_set_range( chart, LV_CHART_AXIS_PRIMARY_Y, 10, 60);
  // Tick Marks and Labels
  // 2nd argument is axis, 3rd argument is major tick length, 4th is minor tick length
  // 5th is number of major ticks on the axis
  // 6th is number of minor ticks between two major ticks
  // 7th is enable label drawing on major ticks
  // 8th is extra size required to draw labels and ticks
  lv_chart_set_axis_tick(chart, LV_CHART_AXIS_PRIMARY_Y, 10, 5, 10, 2, true, 50);

  // Add Data Series
  temp_series = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);

  for( idx=0; idx<chart_hor_res; idx++ )
  {
    temp_series->y_points[idx] = (lv_coord_t)*(data+idx);
  }

  lv_chart_refresh(chart); /*Required after direct set*/
}

Below is the chart refresh function.

static void Display_TemperatureChartRefresh( void )
{
  uint16_t idx = 0u;
  uint8_t *data = Display_GetTempData();
  // this should match with the temperature buffer length
  uint16_t chart_hor_res = 260;

  for( idx=0; idx<chart_hor_res; idx++ )
  {
    temp_series->y_points[idx] = (lv_coord_t)*(data+idx);
  }

  lv_chart_refresh(chart); /*Required after direct set*/
}

Fatal Simulation Error while Debugging Embedded Projects in Proteus

noreply@blogger.com (Embedded Laboratory) — Mon, 14 Nov 2022 17:38:00 +0000

Hello Everyone, in this post I would like to share a problem that I am getting when I am trying to debug my STM32 micro-controller-based project in "Labcenter Electronics Proteus".

The Proteus Design Suite is a proprietary software tool used primarily for electronic design automation. The software is used mainly by electronic design engineers and technicians to create schematics and electronic prints for manufacturing printed circuit boards.

So, I am using the Proteus to simulate a simple project based on an STM32F4 microcontroller, and when running the simulation it was working fine also, but when I tried to debug this project with Proteus, I get a "Fatal Simulation" Error message.

Here by debugging I mean to say that I wanted to put breakpoints inside the code and do single-step debugging but it failed with the "Fatal Simulation" Error message, which is also shown in the image below.

Fatal Simulation Error in Proteus

The normal *.hex file was working fine, but when I wanted to do debugging using the debug files, such as the *.elf file or *.out file, it fails with the above message.

The development environment which I am using is IAR Embedded Workbench (IAR Compiler), and I also tested with STM32CubeIDE (GNU Compiler), so the debug files generated by both of these compilers failed to run on the Proteus.

I investigated and found the root cause of the problem that why this is not working and how to fix this problem.

Root Cause of the Problem

The default debug output files generated by the IAR Compiler and GNU GCC Compiler is in dwarf4 format, while the Proteus can handle or work with dwarf2 format only as of now, so due to this reason whenever I tried to debug the program with these files, I get "Fatal Simulation" error as for Proteus the file format is not acceptable.

Solution to the Problem

The solution to the problem is simple, we just need to change the format of the debug file generated by these compilers from dwarf4 to dwarf2. I will show you this can be done in STM32CubeIDE and also in IAR Embedded Workbench project settings.

First, let's start with STM32CubeIDE, here we have to open the "Project Properties" and then go to "C/C++ Build" and then go to "MCU GCC Compiler" and then Select "Miscellaneous".

Adding Compiler Flag Setting

And then click on the "+" button to add a compiler flag "-gdwarf-2" and by doing so the output file generated will be in dwarf2 format.

Updating Compiler Flag to generate dwarf2 format in STM32CubeIDE

The second step is to show you how to achieve the same thing with IAR Compiler, so here also the process is really straightforward, first, go to "Project Option", then go to the "C/C++ Compiler" and then select the "Extra Options", here check the "Use Command Line Options" and then in the command line option, add the command "--no_dwarf4", this will instruct the compiler to not generate the dwarf4 format.

Updating Compiler Flag to generate dwarf2 format in IAR

Apart from this in IAR, we have to do one additional change, and this is changing the debug output file name from *.out to *.elf as shown below. This can be done by going into the "Linker" setting and then selecting "Output", also make sure the checkbox "Include debug information in output" is checked.

Generating *.elf file in IAR

Once this is done, the output *.elf file generated can be used to debug in Proteus, the following images demonstrate this.

Debugging in Proteus

I am documenting this here because I was facing this problem from last so many days, and I think this post of mine will help you fix this issue.

If you like this post also check my YouTube channel for more such interesting topics.

Also, have a look at GitHub Account for some cool projects.

FFMPEG Command Line Audio and Video Processing Tool

noreply@blogger.com (Embedded Laboratory) — Sun, 31 Jul 2022 11:35:00 +0000

Sometimes we need to post some videos of our setups, some issues, some behavior on some forums, emails, etc., but the videos recorded from our mobile are too big, so can't be attached to forums and also can't be sent over email, so to overcome this situation, we have found a tool, which is open source and can be used without installing, and this tool can be used to process audio and video files. Not only just size reduction but this can also be used for several other audio and video processing things.

FFMPEG is a command line tool, below are some of the important commands which are useful for our needs.

Download Link for Windows User.

Convert File Format

With FFMPEG we can convert the video file format, like in the below example we are changing a *.avi file into *.mp4 format.

ffmpeg -i input.avi output.mp4

Split a File

ffmpeg -i source.m4v -ss 0 -t 593.3 -c copy part1.m4v
ffmpeg -i source.m4v -ss 593.3 -t 551.64 -c copy part2.m4v
ffmpeg -i source.m4v -ss 1144.94 -t 581.25 -c copy part3.m4v

Reduce the Size by Changing Quantizer Value

This method is applicable only for *.mp4 and *.avi files. There is a factor in image compression called quantizer that actually affects the file quality and it is linked to how it should choose the bit-rate when it comes to variable bit-encoding, for details check on the web.

The important point is smaller the quantizer higher the quality and the higher the quantizer lower is the quality. Higher quality means higher file size and lower quality means lower file size, so by changing this parameter, we can reduce the file size.

ffmpeg -i input.mp4 -q 20 output_q20.mp4

With the above command, we are setting the value of quantizer or quality to 20, I did an experiment where 40MB Full HD video is reduced to 6MB (video quality was still very good).

Note: If the input file is *.avi and the output required is *.mp4 then use -crf factor instead of -q, an example is given below.

ffmpeg -i input.avi -crf 18 output.mp4

Reduce the Size by Changing the Bitrate

The above method works well, but if our requirement is to have finer control in setting the bitrate, then we can also do this with FFmpeg. And this works for both audio and videos, the following are the commands.

ffmpeg -i in_file.mp3 -b:a 320k outputfile.mp3
ffmpeg -i in_file.mp4 -b:v 1000k outputfile.mp4

See the difference between -b:a and -b:v, here a is for audio and v is for video.

And with the following command, we can adjust the bitrate in a single command.

ffmpeg -i in_file.mp4 -b:v 1000k -b:a 128k outputfile.mp4

There are some filters also available with FFmpeg, check its documentation to have in-depth details, the few most commonly used filters are as below.

Audio: Volume
Audio: Channel Map
Video: Cropping
Video: Scale
Video: Rotate

Audio: Volume

With this filter we can increase or decrease the volume, the following is the command to double the volume.

ffmpeg -i inputFile -filter:a "volume=2" outputfile

This filter can be used to reduce external noise.

Audio: Channel Mapping

This is not so important for us, but still for documentation purposes adding it here.

ffmpeg -i inputFile -filter:a "channelmap=0-0|0-1" outputFile

Here with the line "channelmap=0-0|0-1" in the above command, we mean that we are mapping the Input Left to Output Left and Input Left to Output Right channel.

Video: Cropping

This is an important filter and with this, we can remove the redundant information from our videos and this also reduces the file size. The following is the example command.

ffmpeg -i inFile -filter:v "crop=w:output_width:h:output_height:x:y" outFile

4-parameters can be specified, i.e output width, output height, and top left corner parameters.

Top Left corner parameters are optional and if not specified, cropping is centered in the frame.

We can also use arithmetic also in these parameters like the following.

ffmpeg -i inFile -filter:v "crop=w=2/3*in_w:h=2/3*in_h" outFile

The variables in_w and in_h are supplied and they stand for input width and input height.

Video: Scaling

Syntax

ffmpeg -i inFile -filter:v "scale=w=640:h=480" outFile

Scaling with arithmetic and variables

ffmpeg -i inFile -filter:v "scale=w=2/3*in_w:h=2/3*in_h" outFile

Proportional Scaling

ffmpeg -i inFile -filter:v "scale=w=640:h=-1" outFile

Put -1 for any of the inputs to get the proportional scaling and its value will be calculated based on the input.

Video: Rotate

Syntax:

ffmpeg -i inFile -filter:v "rotate=45*PI/180" outFile

This is also important for us, as sometimes when videos are recorded from mobiles, the orientation is not proper and with the above command we can change the orientation so that it can be viewed properly.

Weather Station using Arduino and ESP8266 with Open Weather API using AT Command

noreply@blogger.com (Embedded Laboratory) — Sat, 20 Feb 2021 09:53:00 +0000

Hello Everyone, in the last post I have shown you how to update your ESP8266 firmware and I have also shown you guys some of the important AT commands related to ESP8266 firmware which works with the new/latest firmware.

In today's post, I will share my Weather Station software with you guys, with which you can easily communicate with your ESP8266 WiFi Module with Arduino and do the following things with the module.
- Check whether the module is connected and working properly.
- Connect to a Network (Need SSID and Password)
- Get the MAC Address of the WiFi Module
- Get the Assigned IP Address to the module
- Connect with "OpenWeather" website
- Get temperature, real feel temperature, minimum temperature, and maximum temperature of any city and display this information on OLED display
OR
- Get temperature, real feel temperature, minimum temperature, maximum temperature, pressure, humidity and wind speed of any city and display this information on TFT display.

So, there are two projects, in one display is OLED and in another one display in TFT (ILI9341) based.

Instead of using an actual Arduino, I am using Arduino Simulation Module in Proteus software, while the ESP8266 module is real, and is connected to my Laptop, and Proteus can access it using COMPIM.

Weather Station Simulation (TFT Based)

Weather Station Simulation (OLED Based)

OLED Based

The following are the software libraries needed for this project.
- Standard Arduino Libraries
- OLED_I2C Library from Rinky-Dink Electronics

Download the code from the GitHub Repository. This consist of software and simulation file.

ILI9341 TFT Based

The following are the software libraries needed for this project.
- Standard Arduino Libraries
- Adafruit GFX Library
- Adafruit ILI9341 Library

Download the code from the GitHub Repository. This consist of software and simulation file.

The Software Flow is as below, I will try to prepare a diagram to help in understanding in a better way, but for now, I am writing the text description.

- At Power-Up SW initializes the OLED/TFT Library and Serial Communication.
- Note: BaudRate of the module is changed to 9600 from 115200 because Proteus COMPIM doesn't support higher baud rates.
- Here the ESP8266 module is connected to the main Arduino UART, you can change it to your choice and update the SW accordingly.
- OLED/TFT is cleared and some default information is displayed.
- Arduino sends the "echo off" command to the module, this is done to prevent turning off the echoing of the characters transmitted by Arduino.
- Arduino sends the "AT" command and checks for the **OK** response, if the response comes from the module, then SW will move further, else it will stay in the same state retrying until the valid response comes from the ESP8266 module.
- Arduino sends the command to change the mode to "Station Mode", here also the response from the module is checked, and if valid SW will move further else remain in the same state.
- Arduino will then send the command to join with the access point, and if connected SW will move further, else it will keep on retrying.
- Arduino will now send the command to get the assigned IP address and MAC address of the module, and if the response is valid, Arduino SW will display this information on the OLED/TFT screen. Till this stage, our setup and initialization of the module are done.
- Now here comes the repetitive part, where we get the data of one city and display it on the OLED/TFT, and then move to the next city.
- Arduino SW will connect with the "open weather" server, and once the connection is successful it will proceed further else keeps on retrying.
- Now Arduino SW will send the number of bytes command followed by the "GET" request for the selected city.
- Arduino will receive the data from the ESP8266 module, parse it, and display it on the OLED/TFT screen if it is valid.

Other Important Topics related to this topic.

Update the AT Firmware in Your ESP8266 WiFi Module

noreply@blogger.com (Embedded Laboratory) — Sat, 06 Feb 2021 11:11:00 +0000

Hello Everyone,

In today's post, I will show you how one can update the AT firmware in your ESP8266 module. Now, there might be questions in your mind that why we wanted to update the ESP8266 WiFi firmware when the current one is already working fine.

So, in my case, the reason is that the WiFi module which I received has the firmware from 2016 which is pretty old and some of the AT commands are not working, since during 2016 those commands were not available. There are always the benefits of updating the firmware to the latest version. Below are some of the benefits which I can think of as of now.

- New Firmware has more features.
- New Firmware has bug fixes and hence is more stable.
- Sometimes we messed up & put some wrong SW & hence wanted to restore everything to normal.

Updating the firmware in ESP8266 is a really painful process if you don't know the correct steps, in this post and the video I embedded in this post is the latest as of in 2021, and I tried to cover all the steps so that you don't face any problem in updating the firmware, so let's get started.

The video is as below.

I recommend watching the video as compared to reading this text, as I think watching the video is more helpful.

The following is the pin-out of the ESP8266 WiFi module.

Pin-Out of ESP8266 Module

The following are the components required to update the firmware in the ESP8266 WiFi Module.

- ESP8266 WiFi Module (Of course you need this :-) )
- USB to Serial Converter
- Male to Female Cables
- Mechanical Switches

ESP8266 WiFi module firmware is updated over UART so that's why we need USB to UART converter, and cables or mechanical switches are needed to short the FLASH and RST pin to ground pin, this can be done neatly with the mechanical switches and cables, so it's up to you, how you wanted to do it.

The following are the connection, which you have to do.

Connection for Updating Firmware

The idea is simple, you need to short your RST pin and FLASH pin of the WiFi module with the Ground Pin, and then only you can enter the programming mode.

Once the connections are done, as a next step download the required tools and firmware from the ESPRESSIF website.

Download Link: https://www.espressif.com/en/support/download/all

Download the "Flash Download Tool" current version is v3.8.5

Download the AT Command Firmware which is "ESP8266_NonOS_AT_Bin_V1.7.4"

Once this downloading of software is done, as a next step, we have to determine which SPI flash is present on our module, whether it is 4Mbit or 8Mbit or 16Mbit , etc.

This we can do easily with the help of "Flash Download Tool", the following are the steps to determine the SPI flash present on your module.

- Connect RST and FLASH pin with the ground and connect the module with USB to UART module with the USB port
- Open the "Flash Download Tool", make sure the "SPIDownload" tab is selected and all the check-boxes are unchecked.

Flash Download Tool

- Now, press the start button, and on the command prompt, you see some dots and dashed lines, now disconnect the RST pin from the ground.
- Once you do the above step, you will see that the "Flash Download Tool" has fetched some important information from your module, which includes, Flash Size, Crystal Frequency, Access Point MAC address, and Station Mode MAC Address, as can be seen in the below image.

Module Information

- Now, with the help of this information we can update our firmware since as per the above image we can see the Flash Size is 8Mbit, and then in ESPRESSIF AT Documentation, section "Downloading AT firmware into the Flash", I will open the 8Mbit section while depending on what you get, you will open that particular section.

ESP8266 AT Command Document

- Now, we will copy these addresses and the binaries downloaded from the ESPRESSIF website into our "Flash Download Tool" as shown in the below image.

Copy Address from Documents to Flash Tool

- Once this is done, select the correct Flash settings, and now we are ready for programming the new firmware.
- Make sure your RST and Flash Pins are connected with Ground, and now press the start key.
- On Command Prompt you will see some dots and dashes, and now you can disconnect the RST pin from the Ground, and after doing this your programming is completed.

The firmware update is done, and now you can disconnect the RST and Flash Pin from the ground (RST is already disconnected), remove the USB to Serial Converter module from the USB port, and connect it back again.

Now with the help of serial terminal utility like HW Hercules test whether the firmware is updated correctly or not, this can be done with the help of AT+GMR command, as can be seen in the below screenshot, we are getting version 1.7.4.0, this is the same as what is programmed into the module.

Testing Updated Firmware

That's all in this post, I would still recommend watching the video rather than reading this text. if you have any questions let me know in the comment section here or on the YouTube channel. If you want me to do some other video related to the ESP8266 module, let me know.

Update: 17-Feb-2021

I have prepared one video, where I mentioned some of the important AT commands related to the ESP8266 WiFi module, and with the help of AT commands, I have connected to the "OpenWeatherMap" website to fetch the weather information of some cities.

Update: 17-Feb-2021
As mentioned earlier, I have used Arduino Mega and ESP8266 module, and using these two I have connected with the Open Weather Map website to get the data of some cities and display them on an OLED screen.

GitHub: https://github.com/xpress-embedo/ArduinoWeatherStation

Blog: https://embeddedlaboratory.blogspot.com/2021/02/weather-station-using-arduino-and.html
Youtube:

Analog Clock using OLED and PIC Microcontroller

noreply@blogger.com (Embedded Laboratory) — Wed, 27 May 2020 16:59:00 +0000

Hello Everyone, in this blog post I will show you guys how to make an analog clock on OLED SSD1306, this is a simple and cool project to display some basic animations on the OLED display.

We are going to build this project in the proteus simulation environment and use the PIC18F microcontroller. In terms of the software components, we need I2C Library, OLED Library, and DS1307 RTC Library.
If you are following my blogs you might be aware that these three libraries are already available and tested well, the following are the links to the previous posts, you can refer if you want.
OLED I2C Display Using Microchip PIC Microcontroller
Real Time Clock (DS1307) Interfacing with PIC Microcontroller
(My all new projects will be on GitHub and I am also trying to port all previous projects on GitHub so that these can be maintained well.)

The following are the steps to make an Analog Clock.

Make a small circle with a very small radius such as 1
Make a big circle with a big radius but make sure to not exceed the screen size.
Make Hour Ticks

We have 12 Hours and 360 degrees, which means 1 Hour equals 30 degrees.
We will use a for loop incremented by 30 degrees, to draw small lines representing ticks for each hour position. This is done by draw_clock_face function.
draw_clock_face function uses sine and cosine formulas to draw 12 marks of length 5 at each hour position.

Displaying Hour, Minute and Second Hands

Displaying timing using clock hands is very similar to displaying marks.
Hour Hand should be very small, while minute being medium and second hand should be longest of all.

Data from RTC is read and converted to decimal format from BCD format, and this is data is faced to the display_time function.
Executing this function per second will have an animation effect of moving the second hand of the clock.
In the project, we have called this per 500ms, the reason for this is the digital clock as we wanted to display the colon blinking, which is done half a second.

The following is the code and this can be downloaded or cloned from my GitHub page (click here).

The following is the simulation video link.

In case of any doubt, feel free to contact us.

Displaying Basic 2D Shapes Using emWin

noreply@blogger.com (Embedded Laboratory) — Sat, 23 May 2020 23:25:00 +0000

Hello Everyone, In the last two posts, we have learned how to display text and display images using the emWin framework under a simulated environment using Code::Blocks. If you have not seen those blog posts, I would recommend you first have a look at them.
Getting Started with emWin using Code::Blocks
Draw Bitmap Images using emWin

Now in this blog post, I will show you to use some other basic 2D APIs to draw some basic 2D shapes, such as rectangle, triangle, polygon, ellipse, pie chart, etc.

Basic 2D Shapes

- Draw horizontal and vertical Gradients

- Draw rectangles

- Change Pen Size

- Draw Pixel and Points

Basic 2D Shapes

Draw Lines

Draw Circles

Draw Ellipses

Draw Polygon

Draw Pie Chart

Draw Line Graph

Draw Bitmap Images

There is a separate blog post to draw bitmap images on the display, click here to read the blog post link.

The following is the complete Code::Blocks program, also watch the video given below to view how the complete program runs.

Draw Bitmap Images using emWin

noreply@blogger.com (Embedded Laboratory) — Sat, 23 May 2020 14:41:00 +0000

Hello Everyone, in this blog post, I will show you the step by step instructions to display a simple bitmap image on the display. I hope you guys have already read the first tutorial of this series, if not click here to read that post.

Bitmap Displayed on emWin simulation

There are three steps which we need to follow:
* Select the bitmap images based on the display type.
* Convert the bitmap images into *.c source code using emWin Bitmap converter tool.
* Use emWin API's to display Bitmap images on the Graphical displays.

Please have a look at the following video.

Once the images are selected, use the "Bitmap Converter Tool" provided by Segger (available with emWin simulation for free), to load the image, and then save the file with extension as *.c filetype.

Bitmap Converter Tool

Add these generated *.c files into the Code::Blocks project, as shown below.

Add image files into the Code::Block Projects

Now, use the emWin API "GUI_DrawBitmap", to display the bitmaps on the Graphical Display. In our example we have generate the *.c code for three images and there names are "bmimage01", "bmimage04" and "bmSTLogo".
Use the following piece of code to update the display.

Thanks for reading this blog post, in case you have some question please post your comment here. This is just a starting and my target is to use the STM32F7 display and emWin to do some cool projects.

Getting Started with emWin using Code::Blocks

noreply@blogger.com (Embedded Laboratory) — Sun, 01 Mar 2020 11:36:00 +0000

Hello Everyone, In this blog post, I will show how to use the emWin simulation using CodeBlocks.
emWin is a professional embedded GUI. emWin enables the creation of highly efficient, and high-quality graphical user interfaces on any embedded system. emWin empowers even resource-constrained microcontroller-based systems to run stunning interactive interfaces. emWin is independent of any target, and display.
* Create stunning graphics with a powerful and easy to use API.
* Use any display and any microcontroller.
* Use any ANSI C/C++ development environment.
* Experience the reliability of a proven graphics solution.
* Embedded graphical user interface solution.

emWin license is very costly, but they are offering a free simulation version, which is good for learning emWin framework purposes. Apart from this, we will be using the STM32F769i-DISCO board for the real demonstration of the emWin framework. And we should thank the ST and Segger partnership because they are offering a compiled library version of the emWin library for ST microcontrollers known as STemWin. So, in any case, we don't have to spend money on the license cost for emWin.
To get started we need to have emWin simulation and CodeBlocks, as a first step download the emWin simulation package from the following link.
emWin Simulation Package.
And next, we have to download the CodeBlocks for windows along with the compiler, there is a lot of version of CodeBlocks but we will use the one which is having the C/C++ (MinGW) compiler, and I will use the non-setup version, as I don't want to install any software. CodeBlock can be downloaded by clicking on the following link.
The emWin sample project contains Visual Studio project files and CodeBlocks project files, we aren't using Visual Studio project file and will use only CodeBlocks, so, we have to open the *.cbp format file.
After running the sample project, we will get the following output, this is the sample project from Segger emWin, which demonstrates all the Segger products on this virtual screen.

emWin sample demo project

This project is a little complex to start, as a starting point, we will remove all the project files from the "Application" folder and a new file with a simple code to just display some text on multi-line on this display, as shown on the image below.

Simple Program to display text

The following program is used to display some simple text of the display.

Have a look at this video, to see the above steps.

Now as a next step, we will use some other APIs to display decimal values and change the text color and background color. The following program demonstrates the usage of these APIs.

The following figure shows the output of the simulator.

Display Decimal Value with different color

Real Time Clock (DS1307) Interfacing with PIC Microcontroller

noreply@blogger.com (Embedded Laboratory) — Sat, 01 Feb 2020 22:45:00 +0000

Hello Guys, first of all, I am really very sorry that I am not able to post anything for approximately 2 years. I was totally occupied with some other stuff and that's why I didn't get time to post anything, but during this time I have worked on a lot of different projects and learned a lot of tools and new technologies, which includes UML, Sparx EA, emWin, STM32, Git, etc.
In this post, I will start with a very simple and one of the most common topics in the field of Embedded System and is interfacing a real-time clock integrated circuit with the most common pic micro-controller.
In the past I have faced a lot of problems in handling the software (source code) written by me, every time I started a new project, I have to re-write the libraries again or copying pasting the libraries from one place to another. So, this time I will be more professional and will keep my all libraries on GitHub, and use these libraries into the project as a submodule. This will help in maintaining and updating the libraries and also issue fixing and feature enhancement all at the same place.
In this project, I am going to use RTC DS1307 and interface it with PIC18F4550 microcontroller, and display the time and date fetched from the RTC.
For this project, I have created three libraries and they are as follow:
* LCD Library
* I2C Library
* DS1307 Library

The complete project can be downloaded or clones by clicking here.

I have also done this similar type of task in the past and you can have a look at that by clicking here.
The software written in the older post is working but it is not maintainable, now I will try to move everything to GitHub, this will give the flexibility to maintain the software.
Please have a look at the video for the post and please subscribe to my YouTube channel also.

The following is the snippet from the code from main.c file.

/*
 * @file i2.c
 * @author xpress_embedo
 * @date 1 Feb, 2020
 * 
 * @brief Main File of the Project
 *
 */

#include "main.h"
#include "lcd_16x2.h"
#include "ds1307.h"

/* Local Variables */
static uint32_t millisecond = 0;

/* Local Function */
void timer0_init( void );
void system_init( void );

/* Start From Here*/
void main(void) 
{
  char lcd_msg[LCD_BUFFER_LEN] = {0};
  uint32_t timestamp = 0;
  system_init();
  sprintf(lcd_msg, "Embedded");
  LCD_Print_Line (0, lcd_msg);
  sprintf(lcd_msg, "      Laboratory");
  LCD_Print_Line (1, lcd_msg);
  LCD_Update();
  Delay_ms(1000);
  while(1)
  {
    // Task-1 (500ms)
    if( millis() - timestamp > 500ul )
    {
      uint8_t year, month, date, hour, minute, second;
      static uint8_t sec_blink;
      timestamp = millis();
      second = DS1307_Read (DS1307_SEC);
      minute = DS1307_Read (DS1307_MIN);
      hour   = DS1307_Read (DS1307_HOUR);
      date   = DS1307_Read (DS1307_DATE);
      month  = DS1307_Read (DS1307_MONTH);
      year   = DS1307_Read (DS1307_YEAR);
      // The value Read are in BCD Format, which needs to be converted into char
      if( sec_blink )
      {
        sec_blink = FALSE;
        sprintf (lcd_msg, "TIME: %c%c:%c%c:%c%c", \
                 BCD2UpperCh (hour), BCD2LowerCh (hour), \
                 BCD2UpperCh (minute), BCD2LowerCh (minute), \
                 BCD2UpperCh (second), BCD2LowerCh (second) );
      }
      else
      {
        sec_blink = TRUE;
        sprintf (lcd_msg, "TIME: %c%c:%c%c %c%c", \
                 BCD2UpperCh (hour), BCD2LowerCh (hour), \
                 BCD2UpperCh (minute), BCD2LowerCh (minute), \
                 BCD2UpperCh (second), BCD2LowerCh (second) );
      }
      LCD_Print_Line (0, lcd_msg);
      sprintf (lcd_msg, "DATE: %c%c/%c%c/%c%c", \
               BCD2UpperCh (date), BCD2LowerCh (date), \
               BCD2UpperCh (month), BCD2LowerCh (month), \
               BCD2UpperCh (year), BCD2LowerCh (year) );
      LCD_Print_Line (1, lcd_msg);
      LCD_Update ();
    }
  }
  return;
}

/* Function Definitions */

/**
 * @breif Initialize the system
 */
void system_init( void )
{
  // Initialize 1ms Timer
  timer0_init ();
  // Initialize DS1307 and Start Time
  DS1307_Init ();
  // Initialize LCD
  LCD_Init();
  Delay_ms(100);
}

/**
 * @brief Counts milliseconds till startup
 * @return This function returns the number of milliseconds elapsed till the 
 * system is powered up.
 */
uint32_t millis( void )
{
  uint32_t time = 0;
  GIE = 0;
  time = millisecond;
  GIE = 1;
  return time;
}

/**
 * @brief Initialize Timer0 Module to generate 1ms interrupt
 */
void timer0_init( void )
{
  // Code Generated Using mikroC Timer Calculator
  T0CON = 0x88;
  TMR0H = 0xD1;
  TMR0L = 0x20;
  ENABLE_INT();
  TMR0IE = 1;
}

/**
 * PIC18F Interrupt Service Routine
 */
void __interrupt() ISR_ROUTINE( void )
{
  if( TMR0IF )
  {
    TMR0IF = 0;
    TMR0H = 0xD1;
    TMR0L = 0x20;
    millisecond++;
  }
}

I am still working on improvements and with the use of a version control system like Git, hosting services like GitHub, I can keep my source code updated.
The Proteus simulation file is also updated in the SIM folder and can be found under the GitHub project.

Working Simulation Snapshot

The above image illustrates the working of the simulation.
Thank You guys, in case of any question, please feel free to contact me.

Simulate USB Keyboard Keypress Using PIC Micro-controller

noreply@blogger.com (Embedded Laboratory) — Sun, 06 May 2018 18:56:00 +0000

Hello Everyone, today I am back with one exciting project of simulating key-press just using PIC micro-controller, the best thing is that, we are going to make a device similar to USB keyboard (USB HID Class Device).

Project Idea

Actually few of my friends works in a company, where they have started tracking the daily activities of employees using some dedicated software's. They track everything, like for how much time, they have spend on Skype chatting with friends, how much time they spend on actual work related tools like that.

And based on the tracking details, the software calculates the actual amount of work done by employee and this information is also shared with their managers.

They don't have any idea how to handle this situation, and from here I got an idea to make a simple device which looks like a USB keyboard to PC and sends some random commands pre-programmed in it, by this the tracking software's will think that the employee is doing their work, but actually it's the device which is automatically sending the key-press to PC.

Video

Watch the following video or read the post given below.

I am using the StartUSB Board for this purpose, which already have PIC18F2550 micro-controller and it also comes with USB HID Bootloader to upload the program without any programmer.

Having this board is not mandatory and you can use any PIC board of your choice having in-built USB support.
With this StartUSB board and the program written in mikroC, I will simulate the key presses just like our USB Keyboard.

Description

Follow the following steps.

1) Open mikroC for PIC Micro-controller and create a blank project by selecting PIC18F2550 micro-controller.

2) Once the project is created edit the configuration settings of the project as shown below.

The following things can be observed from the above set of configuration.

* PLL Prescalar Selection is set to Divide By 2, reason for this is that, PLL used 4MHz input, and StartUSB Board has 8MHz External Oscillator, that's why to feed it to input of PLL, it is divided by 2.

* USB Clock Source is selected from the Output of PLL divided by 2, which means 48MHz.

* Oscillator Mode is HC with PLL Enabled.

* USB Voltage Regulator is Enabled.

3) mikroC for PIC comes with in-built USB HID and also has a tool to generate USB descriptor file. Tools -> HID Terminal

Use the above GUI based tool to change the settings or you can go ahead with the default settings also, just don't forget to enter/change the Vendor and Product Name, save the Descriptor file, this will automatically generate the *c code.

4) Next step you have to add this automatically generated descriptor file into your mikroC project. The Descriptor file generated is very basic in nature and is used for simple HID project. This file can't be used for USB Keyboard, so as a next step, we have to modify the descriptor file to make the system work like the USB HID Keyboard.

5) Download the USB HID Tool by clicking on this link.

6) Open the tool and then click on File -> Open and open the keyboard.hid file.

The above image clearly shows the "Report Descriptors" to be used for USB HID Keyboard, now we have to modify the mikroC automatically generated descriptor file with the above values. (This is a easy task, just double check that you have entered all values correctly)

7) The basic setup is done, now it's time to copy and the library which I have written to send the key press to PC using the StartUSB board.
The library only consist of the following three functions.

// Function Prototypes
void key_emulator_init( void );
void key_emulator_send( char value );
void key_emulator_text( char* text );

key_emulator_init: This function initializes HID Communication Library.
key_emulator_send: This function sends single key-press to the PC.
key_emulator_text: This function is to send multiple key-press to PC, at the bottom level this function uses the above function.
The following is the main program.

#include "keypress_emul.h"

void interrupt()
{
  // USB Servicing is done inside the interrupt
  USB_Interrupt_Proc();
}

void main()
{
  // Initialize USB for Keypress Emulation
  key_emulator_init();
  key_emulator_text("/*");
  key_emulator_text("\tKeyboard Emulator Program\r");
  key_emulator_text("\tabcdefghijklmnopqrstuvwxyz\r");
  key_emulator_text("\tABCDEFGHIJKLMNOPQRSTUVWXYZ\r");
  key_emulator_text("\t0123456789\r");
  key_emulator_text("\t`~!@#$%^&*()_+-=,./;'[]\\<>?:\"{}|\r");
  key_emulator_text("\t################################n");
  key_emulator_text("*/\r\r");
  // Write a Simple Program
  key_emulator_text("#include <stdio.h>\r");
  key_emulator_text("void main()\r");
  key_emulator_text("{\r");
  key_emulator_text("\tprintf(\"Hello World\");\r");
  key_emulator_text("}\r");
  while(1)
  {
  }
}

After flashing the above program in the StartUSB board, i quickly opened the Notepad, to check what keys are pressed, and the output of the program is as follow.

You can also check the device information in the device manager, it will be listed as HID Input Device, the following image was taken from HID Terminal Information Setting, and as can be seen clearly that the same values are appearing which we have specified in HID Descriptor tool.

Note:
You have already read why I worked on this project, but it's not like, that I want to help my friends to cheat the Software Tracking tool, but the ultimate aim of mine is to check if the Tracking Tool will be able to detect such kind of devices or not, right now it's not able to detect this device and treating like that employee is working continuously.
This project can be used in the other areas such as:
Automation: Certain repetitive things can be automated by this project and that will help someone to execute their day to day task effortlessly.
USB Keyboard: If keys are connected to this device then a customized USB keyboard can also be created using this simple project as base project.

And now comes the most important thing, :-) the complete source code.
Click Here to get the complete source code from GitHub.

Displaying Images on 3.2 Inch TFT using Arduino

noreply@blogger.com (Embedded Laboratory) — Sun, 29 Apr 2018 11:07:00 +0000

In this post, I will show you guys how to display images on 3.2 Inch TFT Using Arduino Mega as shown below.

Avengers Image Display on TFT

You have two choices either watch the following video tutorial or read the post given below.

Prerequisite
Download the following three libraries which are required for this project.
* UTFT or Universal TFT Library
* SdFAT Library
* UTFT_SdRaw Library

UTFT Library
This library contains all the API's to initialize the TFT controller and display data on the TFT screen, this library also comes with a tool which is used to convert the images into *.c code and *.raw file. This tool can also resize the images according to the size of the TFT.
Reason for choosing *.raw image file format as compared to other *.bmp, *.jpeg, *.png etc format is to speed-up the process of displaying images, as other formats requires converter or decoder which increases the code size and processing time on Arduino devices.
This tool is available under the following path.
\Arduino\libraries\UTFT\Tools\ImageConverter565.exe
Click Here to download the library.

SdFat Library
This library is used to read and write data/files on the Sd Card.

UTFT_SdRaw
This library is used to display raw format images from Sd Card on TFT.

NOTE:
One more important thing i want to tell you guys, that do not use tinyFAT library, it is really good but only for FAT16 formatted SD card, and in today's world we usually have 8GB/16GB/32GB/64GB/128GB memory cards, and this is the reason it doesn't work on Sd card cards above 2GB size.

I have downloaded posters of most of the characters from the movie Avengers:Infinity War and as a first step these all images will be converted into *.raw format using the tool described above. The size I am going to use is 320X240 as the TFT I have with me is of 3.2 Inch.

Image to RAW File

Once all the files are converted, copy all the *.raw format files onto your memory card, and now it's time to start writing the Arduino code to display images on 3.2 Inch TFT.

#include <SPI.h>
#include <SdFat.h>
#include <UTFT.h>
#include <UTFT_SdRaw.h>

#define SD_CHIP_SELECT  53  // SD chip select pin(Arduino Mega)
SdFat sd;

UTFT myGLCD(ILI9341_16, 38, 39, 40, 41);
UTFT_SdRaw myFiles(&myGLCD);

void setup()
{
  Serial.begin(115200);
  delay(100);
  bool mysd = 0;
  while (!mysd)
  {
    if (!sd.begin(SD_CHIP_SELECT, SPI_FULL_SPEED))
    {
      Serial.println(F("Card failed, or not present"));
      Serial.println(F("Retrying...."));
    }
    else
    {
      mysd = 1;
      Serial.println(F("Card initialised."));
    }
  }
  Serial.println(F("Initialising LCD."));
  myGLCD.InitLCD();
  myGLCD.clrScr();
}

void loop()
{
  myFiles.load(0, 0, 320, 240, "inifinity_war.RAW", 1, 0);
  while(1);
  delay(4000);
  myFiles.load(0, 0, 320, 240, "black_panther.RAW", 1, 0);
  delay(4000);
  myFiles.load(0, 0, 320, 240, "black_widow.RAW", 1, 0);
  delay(4000);
  myFiles.load(0, 0, 320, 240, "bucky.RAW", 1, 0);
  delay(4000);
  myFiles.load(0, 0, 320, 240, "captain_america.RAW", 1, 0);
  delay(4000);
  myFiles.load(0, 0, 320, 240, "doctor_strange.RAW", 1, 0);
  delay(4000);
  myFiles.load(0, 0, 320, 240, "drax.RAW", 1, 0);
  delay(4000);
  myFiles.load(0, 0, 320, 240, "falcon.RAW", 1, 0);
  delay(4000);
  myFiles.load(0, 0, 320, 240, "gamora.RAW", 1, 0);
  delay(4000);
  myFiles.load(0, 0, 320, 240, "groot_rocket.RAW", 1, 0);
  delay(4000);
  myFiles.load(0, 0, 320, 240, "hulk.RAW", 1, 0);
  delay(4000);
  myFiles.load(0, 0, 320, 240, "iron_man.RAW", 1, 0);
  delay(4000);
  myFiles.load(0, 0, 320, 240, "mantis.RAW", 1, 0);
  delay(4000);
  myFiles.load(0, 0, 320, 240, "scarlet_witch.RAW", 1, 0);
  delay(4000);
  myFiles.load(0, 0, 320, 240, "shuri.RAW", 1, 0);
  delay(4000);
  myFiles.load(0, 0, 320, 240, "spider_man.RAW", 1, 0);
  delay(4000);
  myFiles.load(0, 0, 320, 240, "star_lord.RAW", 1, 0);
  delay(4000);
  myFiles.load(0, 0, 320, 240, "thor.RAW", 1, 0);
  delay(4000);
  myFiles.load(0, 0, 320, 240, "vision.RAW", 1, 0);
  delay(4000);
  myFiles.load(0, 0, 320, 240, "war_machine.RAW", 1, 0);
  delay(4000);
}

The above program is really simple and is divided into three main parts.
* SD Card Initialization
* TFT Initialization (TFT I am using is based on ILI9341 controller and is operated using 16-bit mode, this is the reason I used ILI9341_16 while creating object for TFT, make sure to update it as per your TFT controller).
* The last step is to display the images from SD card using function load.

After running the following program, we see the following output on TFT display.

Click Here to download the complete image set and Arduino Program.