Description
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()
{
Serial.begin(115200);
WiFi.begin(ssid, password);
Serial.println("Connecting");
while(WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to WiFi network with IP Address: ");
Serial.println(WiFi.localIP());
}
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!");
return;
}
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.println(Temp);
Serial.print("Humidity: ");
Serial.println(Humi);
Serial.print("Wind Speed: ");
Serial.println(Wind);
Serial.print("Pressure: ");
Serial.println(Pres);
}
else
{
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: ");
Serial.println(httpResponseCode);
}
// Free resources
http.end();
return payload;
}
Testing/Output
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
