Dwin-HMI with NodeMCU


DWIN specialized in making High quality and cost effective HMI touch screens display.

In this project I am going to make a smart weather station which can read the on-time data from Internet. For this I have used here OpenWeqathermap website to generate the API key. So let’s start the project from GUI design first.

This is DMG80480C043_02WTC has resolution of 480X800 and can be easily used with 5V compatible controller boards like Arduino Uno, Arduino Nano, Arduino Mega, PIC microcontrollers, 8051 family of microcontrollers, etc.

Tool Installation

Before proceeding further we need to install some tool & for tool installation, I already explained in the first tutorial of Dwin-HMI you can check this by clicking on given link. And this is require to proceed further so please check it, how to install the tools, then you can proceed further in this project to design GUI as you saw in the output video/YouTube so go through first Tutorial which is given below.

GUI Designing

Step1 :- First you have to make a new folder then go in GUI tool and click on new project and give the path of this project. Then convert that image which we are going to use for GUI, with the help of inbuilt tool “Picture conversion” . At the time of converting images give the path of Project folder.

Step2 :- After converted images you have to make ICL file of every images and icons and then save these file in DWIN_SET folder with the name starting from 32..33…34……..64 and so on this is the rule, because memory is divided in different section so you have to name like this only, you can see ICL tool in below image through this you have to make ICL file.

Now you need to add background here after converted images into ICL file.

Then add widget here in place of text box, add “Artistic variable” there and put that VP address also as you can find the detail in the below image.

Similarly add this widget in all text box and give the VP address to all. And it should be different for every text box.

API key creation

For API creation you just need to go on this website OpenWeqathermap and ten register on this website and you will get the interface like this.

Then go in My API Key section and there you will get the API key as shown in the below image.

And this API you have to put in the code as shown in the code snippet.

Now you are done with API part, let’s move further to make the circuit and code.

Circuit & NodeMCU code

Circuit Diagram :-

After done with GUI design you have to connect Display with NodeMCU as given in below circuit. Before uploading you need to add your Wi-Fi name and password in the code. And also API key as I have added in my code.

Code :-

#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <WiFiClient.h>
#include <Arduino_JSON.h>

const char* ssid = "Mustakim";
const char* password = "1234567m";

String openWeatherMapApiKey = "b69e71d4bdeefefb176c1ae4179e631c";
String city = "Mumbai";
String countryCode = "IN";

// For a final application, check the API call limits per hour/minute to avoid getting blocked/banned
unsigned long lastTime = 0;
unsigned long timerDelay = 5000;
String jsonBuffer;

/* Adresses of all sensors */
unsigned char Buffer[9];
#define temperature_add     0x51
#define humidity_add        0x52
#define wind_speed_add      0x53
#define pressure_add        0x54

unsigned char   Temperature[8] = {0x5a, 0xa5, 0x05, 0x82, temperature_add , 0x00, 0x00, 0x00};
unsigned char      Humidity[8] = {0x5a, 0xa5, 0x05, 0x82, humidity_add,     0x00, 0x00, 0x00};
unsigned char    Wind_Speed[8] = {0x5a, 0xa5, 0x05, 0x82, wind_speed_add,   0x00, 0x00, 0x00};
unsigned char      Pressure[8] = {0x5a, 0xa5, 0x05, 0x82, pressure_add,   0x00, 0x00, 0x00};

void setup()
  WiFi.begin(ssid, password);
  while(WiFi.status() != WL_CONNECTED)
  Serial.print("Connected to WiFi network with IP Address: ");

void loop() {
  // Send an HTTP GET request
  if ((millis() - lastTime) > timerDelay)
    if(WiFi.status()== WL_CONNECTED){
      String serverPath = "http://api.openweathermap.org/data/2.5/weather?q=" + city + "," + countryCode + "&APPID=" + openWeatherMapApiKey;      
      jsonBuffer = httpGETRequest(serverPath.c_str());
      JSONVar myObject = JSON.parse(jsonBuffer);
      if (JSON.typeof(myObject) == "undefined")
        Serial.println("Parsing input failed!");

      int  Temp =    (int(myObject["main"]["temp"])-273 );
      int  Humi =    (int(myObject["main"]["humidity"]));
      int  Wind =    (int(myObject["wind"]["speed"]));
      int  Pres =    (int(myObject["main"]["pressure"]));

      Temperature[6] = highByte(Temp);
      Temperature[7] = lowByte(Temp);
      Serial.write(Temperature, 8);
      Humidity[6] = highByte(Humi);
      Humidity[7] = lowByte(Humi);
      Serial.write(Humidity, 8);

      Wind_Speed[6] = highByte(Wind);
      Wind_Speed[7] = lowByte(Wind);
      Serial.write(Wind_Speed, 8);

      Pressure[6] = highByte(Pres);
      Pressure[7] = lowByte (Pres);
      Serial.write(Pressure, 8);

      Serial.print("Temperature: ");
      Serial.print("Humidity: ");
      Serial.print("Wind Speed: ");
      Serial.print("Pressure: ");
      Serial.println("WiFi Disconnected");
    lastTime = millis();

String httpGETRequest(const char* serverName)
  WiFiClient client;
  HTTPClient http;
  // Your IP address with path or Domain name with URL path 
  http.begin(client, serverName);
  // Send HTTP POST request
  int httpResponseCode = http.GET();
  String payload = "{}"; 
  if (httpResponseCode>0)
    payload = http.getString();
  else {
    Serial.print("Error code: ");
  // Free resources
  return payload;

Here is the output video you can see it for reference and if you are facing any difficulties you can watch the YouTube video, link is given below please find that. Or if you have any doubt please ask in comment section, I will try to give answer as soon as possible.

And for any product query reach to them Email Id- rock@dwin.com.cn

YouTube Video
Click Here

Leave a Reply

Your email address will not be published. Required fields are marked *