# DHT 11 Send Data and Retrieve Data displayed on OLED Display

In this project, you will use the **Antares Shield Workshop** on the **ESP8266** module. In this **Antares Shield Workshop**, there are temperature, humidity (DHT11), relay, LED, and push button sensors. You will monitor the temperature and humidity with a specified interval period. The results of the data sent by the sensors can be monitored through the Antares console and displayed on the **OLED**. You can also send messages in the form of string data displayed on the **OLED** display. This data transmission process uses **MQTTX software** to send data to the **Antares IoT Platform**.<br>

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/KJljnyCgxyT72xoLvyL2/ESP8266_OLED_Hello_Antares-removebg-preview%20(1).png" alt=""><figcaption><p>Image of WEMOS D1R2 Displaying Data on OLED</p></figcaption></figure>

## Prerequisites

The materials required follow the **General Prerequisites** on the previous page. If you have not prepared the requirements on that page, then you can visit the following page.

{% content-ref url="../../general-prerequisites-esp8266-wi-fi" %}
[general-prerequisites-esp8266-wi-fi](https://docs.antares.id/en/code-and-library-examples/esp8266-wi-fi/general-prerequisites-esp8266-wi-fi)
{% endcontent-ref %}

The additional materials specific to this project are as follows.

1. Shield Workshop Antares
2. I2C-based 0.96inch 128x64 pixel SSD1036 OLED module

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/1N82dMJA390VeJDNjK1K/WhatsApp%20Image%202023-09-06%20at%2014.39.49.jpeg" alt="" width="345"><figcaption><p>SSD1036 0.96inch OLED Module Picture</p></figcaption></figure>

3. Antares ESP MQTT Library. This documentation uses the **Antares ESP MQTT library version 1.0.**

{% hint style="info" %}
If you have not installed **Antares ESP MQTT version 1.0**, you can follow these steps.

[antares-wi-fi-mqtt](https://docs.antares.id/en/getting-started/arduino-library-installation/antares-wi-fi-mqtt "mention")
{% endhint %}

4. OLED display library. This documentation uses **Adafruit\_SSD1306 by Adafruit version 2.5.7.**

{% hint style="info" %}
If you have not installed the **Adafruit SSD1306 by Adafruit library version 2.5.7.** you can follow the steps in the following link.
{% endhint %}

5. DHT11 Library. This documentation uses **DHT11 Sensor Library version 1.4.4.**

{% hint style="info" %}
If you have not installed the **DHT11 Sensor Library version 1.4.4.** you can follow the steps in the following link.

[dht11-sensor-library](https://docs.antares.id/en/getting-started/arduino-library-installation/dht11-sensor-library "mention")
{% endhint %}

6. MQTTX Software

{% hint style="info" %}
If you have not installed the **MQTTX Software**, you can follow the steps in the following link.

[mqttx-installation](https://docs.antares.id/en/getting-started/software-installation/mqttx-installation "mention")
{% endhint %}

## Follow These Steps

### **1.** Launch the Arduino IDE application

### **2.** Opening Sample Programme&#x20;

{% hint style="info" %}
You can open the programme code in the Arduino IDE via **File > Example > Antares ESP HTTP > ESP8266-Simple-Project > POST\_DATA\_GET\_DATA\_OLED.**&#x20;
{% endhint %}

Below is the programme code of the **POST\_DATA\_DHT11\_OLED** example.

```cpp
// Include necessary libraries
#include <AntaresESPMQTT.h>   // Include AntaresESP8266HTTP library for Antares platform communication
#include <Adafruit_SSD1306.h>   // Include Adafruit_SSD1306 library for OLED display
#include "DHT.h"               // Include DHT library for temperature and humidity sensor

#define DHTPIN D1               // Define the pin connected to the DHT sensor
#define DHTTYPE DHT11           // Set the DHT sensor type as DHT11

#define ACCESSKEY "your-access-key" // Replace with your Antares account access key
#define WIFISSID "your-wifi-ssid" // Replace with your Wi-Fi SSID
#define PASSWORD "your-wifi-password" // Replace with your Wi-Fi password

#define projectName "YOUR-APPLICATION-NAME"     // Antares project name
#define deviceNameSensor "YOUR-DEVICE-NAME-1"   // Name of the device sending sensor data
#define deviceNameMQTT "YOUR-DEVICE-NAME-2"  // Name of the device receiving data

AntaresESPMQTT antares(ACCESSKEY); // Create AntaresESP8266HTTP object
DHT dht(DHTPIN, DHTTYPE);            // Create DHT object for sensor readings

#define SCREEN_WIDTH 128          // Set OLED screen width
#define SCREEN_HEIGHT 64          // Set OLED screen height
#define OLED_RESET -1             // Define OLED reset pin, not used in this case

const unsigned long interval = 5000; // Interval for sending sensor data (5 seconds)
const unsigned long interval2 = 10000; // Interval for receiving Postman data (10 seconds)
unsigned long previousMillis = 0;     // Store the last time sensor data was sent
unsigned long previousMillis2 = 0;    // Store the last time Postman data was received

String testData;             // Store received Postman data
String lastData = "";        // Store last received Postman data

Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET); // Create OLED display object

bool showSensorData = true;  // Flag to control displaying sensor data

void callback(char topic[], byte payload[], unsigned int length) {
  antares.get(topic, payload, length);

  Serial.println("New Message!");
  Serial.println("Topic: " + antares.getTopic());
  Serial.println("Payload: " + antares.getPayload());

  testData = antares.getString("Test");
  Serial.println("Received: " + testData);
  if (testData!="null")
  {
    if (lastData!=testData)
    {
      lastData=testData;
      display.clearDisplay();
      display.setTextSize(1);
      display.setTextColor(SSD1306_WHITE);
      display.setCursor(0, 0);
      display.println("Received: " + testData);
      display.display();
    }
  }
}

void setup() {
  Serial.begin(115200);                 // Initialize serial communication
  antares.setDebug(true);               // Enable debugging for Antares
  antares.wifiConnection(WIFISSID, PASSWORD);
  antares.setMqttServer();
  antares.setCallback(callback);

  dht.begin();                          // Initialize DHT sensor

  if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { // Initialize OLED display
    Serial.println(F("SSD1306 allocation failed"));
    for (;;)
      ;
  }

  display.clearDisplay();               // Clear the display buffer
  display.display();                    // Display the cleared buffer
}

void loop() {
   /*
    Check if we're still connected to the MQTT broker/server.
    If disconnected, the device will try to reconnect.
   */
  antares.checkMqttConnection();
  // Send sensor data
  if (millis() - previousMillis > interval) {
    previousMillis = millis();

    float hum = dht.readHumidity();      // Read humidity from DHT sensor
    float temp = dht.readTemperature();  // Read temperature from DHT sensor

    if (isnan(hum) || isnan(temp)) {     // Check if sensor reading is valid
      Serial.println("Failed to read DHT sensor!");
      return;
    }

    // Add temperature and humidity data to the storage buffer
    antares.add("temperature", temp);
    antares.add("humidity", hum);

    // Send data from the storage buffer to Antares
    antares.publish(projectName, deviceNameSensor);

    // Display temperature and humidity on OLED
    display.clearDisplay();
    display.setTextSize(1);
    display.setTextColor(SSD1306_WHITE);
    display.setCursor(0, 0);
    display.println("Temp: " + String(temp) + " *C");
    display.println("Humidity: " + String(hum) + " %");
    display.display();
  }
  
  // Receive and display latest data
  if (millis() - previousMillis2 > interval2) {
    previousMillis2 = millis();
    antares.retrieveLastData(projectName,deviceNameMQTT);
   }
}
```

### **3.**&#x53;et WiFi Credential and Antares Credential in Program Code &#x20;

Change the HTTP Protocol parameters in the following variables **\*ACCESSKEY, \*WIFISSID, \*PASSWORD, \*projectName**, and **\*deviceName**. Adjust to the parameters in the Antares console.

{% hint style="info" %}
This project requires 2 devices, namely a device to receive data from DHT11 and a device to receive data from MQTTX made in one application on the Antares console.
{% endhint %}

```cpp
#define ACCESSKEY "your-access-key" // Replace with your Antares account access key
#define WIFISSID "your-wifi-ssid" // Replace with your Wi-Fi SSID
#define PASSWORD "your-wifi-password" // Replace with your Wi-Fi password

#define projectName "YOUR-APPLICATION-NAME"     // Antares project name
#define deviceNameSensor "YOUR-DEVICE-NAME-1"   // Name of the device sending sensor data
#define deviceNameMQTT "YOUR-DEVICE-NAME-2"  // Name of the device receiving data
```

{% hint style="info" %}
The **\*Access key** parameter is obtained from your Antares account page.
{% endhint %}

<figure><img src="https://3873791589-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7cujmJ5QHdJaAjH815aZ%2Fuploads%2FGWMVBWnD1FRcgQaHF8p9%2Fimage.png?alt=media&#x26;token=4b90f641-b3ba-40d2-8f6d-d3c26bc69621" alt=""><figcaption><p>Access Key Location on Antares Account Page</p></figcaption></figure>

{% hint style="info" %}
The **WIFISSID** parameter is obtained from the name of the **Wifi / Hotspot** that is currently being used by you. for example in the image below.
{% endhint %}

<div align="center" data-full-width="true"><figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/2so0izB9vfTgd4YHP1d2/Wifi%20SSID.jpeg" alt="" width="375"><figcaption><p>The WiFi SSID being used.</p></figcaption></figure></div>

{% hint style="info" %}
The **\*PASSWORD** parameter is obtained from the **WiFi password** you are currently using.
{% endhint %}

{% hint style="info" %}
The parameters **\*projectName** and **\*deviceName** are obtained from the **Application Name** and **Device Name** that have been created in the Antares account.
{% endhint %}

<figure><img src="https://3873791589-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7cujmJ5QHdJaAjH815aZ%2Fuploads%2Fj1yD0ulKX9IPRksVlu3g%2Fimage.png?alt=media&#x26;token=3999af39-ef05-44e4-9738-526b010dfb86" alt=""><figcaption><p>Application Name Display</p></figcaption></figure>

<figure><img src="https://3873791589-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7cujmJ5QHdJaAjH815aZ%2Fuploads%2FvTHEMLieYXirp0aQsHoQ%2Fimage.png?alt=media&#x26;token=54bfa084-bb3d-44cb-bc4b-ee89fb27b6ce" alt=""><figcaption></figcaption></figure>

### **4. Compile and Upload Program**

Connect the **ESP8266 WEMOS D1R2** with your computer and make sure the **Communication Port** is read.

{% hint style="info" %}
On Windows operating systems, checking can be done via **Device Manager.** If your **ESP8266 WEMOS D1R2** is read, the **USB-Serial CH340** appears with the port adjusting the port availability (in this case it reads **COM4**).
{% endhint %}

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/pswNTzRqQ3mmltXWW4Wd/Device%20Manager.jpeg" alt=""><figcaption><p>Device Manager image on Windows.</p></figcaption></figure>

Set up the **ESP8266 WEMOS D1R2** board by clicking **Tools > Board > esp8266** in the Arduino IDE, then make sure the one used is **LOLIN (WEMOS) D1 R2 & mini**. Select the port according to the communication port that is read (in this case COM4). The result will look like the following picture.

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/aQ805SzGe9TjvrTf2bjJ/Board%20LOLIN%20WEMOS%20D1R2.jpeg" alt="" width="563"><figcaption><p>Image of Tools Menu on Arduino IDE</p></figcaption></figure>

After all the setup is complete, upload the programme by pressing the arrow icon as shown below. Wait for the compile and upload process to finish.

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/FvGIvSrPtnGAEXPajM3D/Logo%20Upload%20dan%20Verify.jpeg" alt=""><figcaption><p>Image of the Verify and Upload icons in the Arduino IDE.</p></figcaption></figure>

{% hint style="info" %}
**The Tick icon** on the Arduino IDE is just the verify process. Usually used to C**ompile** the programme to find out whether there are errors or not. \
**The Arrow icon** on the Arduino IDE is the verify and upload process. Usually used to **Compile** the programme as well as Flash the programme to the target board.
{% endhint %}

If the programme upload is successful, it will look like the following image.

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/4dkOx48ycpKAHEd3WVnw/Done%20Uploading.jpeg" alt=""><figcaption><p>Arduino IDE page image after successful upload.</p></figcaption></figure>

After uploading the programme, you can view the serial monitor to debug the programme. The serial monitor icon is shown in the following image.

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/rBPPCRlt9IU2Z0pWwZZI/Logo%20SeRial%20Retrieve%20Last%20Data.jpeg" alt=""><figcaption><p>Image of the Serial Monitor Icon in the Arduino IDE.</p></figcaption></figure>

Set the **serial baud rate** to 115200 and select BothNL & CR. The result will look like the following image.

{% hint style="danger" %}
Make sure the **serial baud rate** matches the value defined in the programme code. If the **serial baud rate** is not the same between **the programme code** and **the serial monitor**, the ASCII characters will not be read properly.
{% endhint %}

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/CaygKXBm8IoXijFmcAbU/Serial%20Monitor%20POST&#x26;GET_MQTT.jpg" alt=""><figcaption><p>Serial Monitor Image</p></figcaption></figure>

### **5.** MQTTX Software Setup

Open the MQTTX App, then select New Connection.

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/YhCjAORMVZf4VQWdF4vn/New%20Connection%20MQTTX.jpg" alt=""><figcaption><p>Creating a New Connection</p></figcaption></figure>

In order to configure MQTTX with Antares broker, adjust the Name, Host and Port as shown below, then click Connect.

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/EXE8NIa3niFv00Eb021l/Configuration%20MQTTX.jpg" alt=""><figcaption><p>Antares MQTT Broker Configuration</p></figcaption></figure>

If it is connected, there is a notification as shown below.

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/S6OC8fKJiawWXj3b2kH5/Connected%20MQTTX.jpg" alt=""><figcaption><p>Antares Broker MQTTX Connected</p></figcaption></figure>

To publish to the Antares server, enter **Topic** and **Payload** in the fields in MQTTX.

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/ijJakj7oisLBj79GRmu7/Topic%20dan%20Payload%20MQTTX.jpg" alt=""><figcaption><p>Topic and Payload pages in MQTTX</p></figcaption></figure>

<table><thead><tr><th width="111">Field</th><th>Value</th></tr></thead><tbody><tr><td><strong>Topic</strong></td><td><mark style="color:red;"><code>/oneM2M/req/your-access-key/antares-cse/json</code></mark></td></tr><tr><td><strong>Payload</strong></td><td><pre class="language-json"><code class="lang-json">{
      "m2m:rqp": {
        "fr": "your-access-key",
        "to": "/antares-cse/antares-id/nama-aplikasi-anda/nama-device-anda",
        "op": 1,
        "rqi": 123456,
        "pc": {
          "m2m:cin": {
            "cnf": "message",
            "con": "{\"your-first-data\":\"the-integer-value\",\"your-second-data\":\"the-string-data\"}"
          }
        },
        "ty": 4
      }
    }
</code></pre></td></tr></tbody></table>

{% hint style="info" %}
Customise <mark style="color:red;">your-access-key</mark>, <mark style="color:red;">your-application-name</mark>, and <mark style="color:red;">your-device-name</mark> to the names registered to your Antares account. Fill in the "Field" data and "Value" data in "con" as you wish.
{% endhint %}

In the MQTTX software, enter the Topic and Payload that you want to use. Then click Publish to send the message from MQTTX to the Antares server.

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/TTo26XPxgPJKkqdgwrFH/Publish%20to%20Antares%20MQTTX.jpg" alt=""><figcaption><p>Publish to send the message to the Antares server</p></figcaption></figure>

### **6.** Sending MQTTX Messages to Antares Server

After the MQTTX software setup is complete, it's time to send the PUBLISH command. The "Test" field is filled with the string "Hello Antares" as the message that will be sent via the MQTT protocol to the Antares server.

```json
{
      "m2m:rqp": {
        "fr": "your-access-key",
        "to": "/antares-cse/antares-id/nama-aplikasi-anda/nama-device-anda",
        "op": 1,
        "rqi": 123456,
        "pc": {
          "m2m:cin": {
            "cnf": "message",
            "con": "{\"Test\":\"Hallo Antares\"}"
          }
        },
        "ty": 4
      }
    }
```

If you have finished filling in the "Test" field, then press the **Publish** button on the MQTTX software, as shown below.

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/N7rd1REJyfOQFsP2oCu7/Payload%20Hello%20Antares%20MQTTX.jpg" alt=""><figcaption><p>Image of MQTTX Payload content</p></figcaption></figure>

If it has been published, the MQTTX page will have a message like the following.

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/DaiR5mBeYIXIehJMmB99/Published%20MQTTX.jpg" alt=""><figcaption><p>Notification Message Published</p></figcaption></figure>

### **7.** Check Data in Antares

After uploading the programme successfully, then open the device antares page and see if the data has been successfully sent.

<figure><img src="https://3873791589-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7cujmJ5QHdJaAjH815aZ%2Fuploads%2FhkCg1X8zjmi5puh3EhWb%2Fimage.png?alt=media&#x26;token=43d62604-c813-4504-b4a8-506147b35a5d" alt=""><figcaption><p>Image of the Antares Console Page when data is successfully received from MQTTX.</p></figcaption></figure>

<figure><img src="https://3873791589-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7cujmJ5QHdJaAjH815aZ%2Fuploads%2FlGK4qkCNrMlxL7NwkBLl%2Fimage.png?alt=media&#x26;token=a4ea3b7d-88d1-4958-8f43-61da21d3e9de" alt=""><figcaption><p>Image of the Antares Console Page when data is successfully received from the ESP8266.</p></figcaption></figure>

{% hint style="info" %}
The data received by **ESP8266** with the MQTT protocol is in the form of Test Data variables.
{% endhint %}

### 8. Output program&#x20;

Send and Retrieve data from the **Antares IoT Platform** and display on the OLED display after connecting to Wi-Fi is shown in the figure below:

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/p2oy4jJOPyjZ9chS3UwN/ESP8266_OLED_DHT11-removebg-preview.png" alt=""><figcaption><p>DHT11 Data Send Result displayed on OLED</p></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/7cujmJ5QHdJaAjH815aZ/blobs/kbARvilcKSeyNZ7IkcvH/ESP8266_OLED_Hello_Antares-removebg-preview.png" alt=""><figcaption><p>MQTTX Data Retieve Result displayed on OLED</p></figcaption></figure>