Internet Weather Forecast

Ramesh G
May 2, 2022
5 min read

Updated: Dec 29, 2022

Here to learn how to make an IOT based internet weather station with OLED.

The ESP8266 can access the internet and gets weather data from www.openweathermap.org that provide Free/Paid weather information for many cities over the world. In this project to show how to get weather data from the internet and print it on OLED display.

Circuit Diagram

Components Required

0.96 OLED 4wire Module - 1no

Node MCU ESP8266 12E Dev Module- 1 no

Refer Weather station on before: https://www.dofbot.com/post/internet-weather-station

Open weather map

Internet weather station To get weather data, first we’ve to sign up for a free account in order to get an API key which is important in this project.

Hourly forecast is available for 4days
Forecast weather data for 96 timestamps
JSON and XML formats
Included in the Developer, Professional and Enterprise subscription plans

Once you sign in to your account (of course after the free registration), you’ll be directed to member area, go to API keys and you’ll find your API key as shown in the following image:

Replace CITY by with the city you want weather data for, and YOUR_API_KEY with your API key which is shown above and replace API key in the arduino code.

For example the weather in Chennai, URL and API key.

URL like https://openweathermap.org/city/1264527

String OPEN_WEATHER_MAP_LOCATION_ID = "1264527"; // for chennai

Pick a language code from this list i below.

// Arabic - ar, Bulgarian - bg, Catalan - ca, Czech - cz, German - de, Greek - el,

// English - en, Persian (Farsi) - fa, Finnish - fi, French - fr, Galician - gl,

// Croatian - hr, Hungarian - hu, Italian - it, Japanese - ja, Korean - kr,

// Latvian - la, Lithuanian - lt, Macedonian - mk, Dutch - nl, Polish - pl,

// Portuguese - pt, Romanian - ro, Russian - ru, Swedish - se, Slovak - sk,

// Slovenian - sl, Spanish - es, Turkish - tr, Ukrainian - ua, Vietnamese - vi,

// Chinese Simplified - zh_cn, Chinese Traditional - zh_tw.

String OPEN_WEATHER_MAP_LANGUAGE = "en";

Hourly forecast is available for 4days

const uint8_t MAX_FORECASTS = 4;

Installing Library

To install the library navigate to the Sketch > Include Library > Manage Libraries… Wait for Library Manager to download libraries index and update list of installed libraries.

Download SSD1306Wire.h Library , we need to use this library for SSD1306 OLED display

Download JsonListener.h_Library , we need to use this library for json-streaming-parser-master

Download misc Library , we need to use this library for weather

After installing the required libraries, copy the following code to your Arduino IDE.

arduino code

Subscribe and Download code

#include <Arduino.h>

#include <ESP8266WiFi.h>

#include <ESP8266HTTPClient.h>

#include <JsonListener.h>

// time

#include <time.h> // time() ctime()

#include <sys/time.h> // struct timeval

#include <coredecls.h> // settimeofday_cb()

#include "SSD1306Wire.h"

#include "OLEDDisplayUi.h"

#include "Wire.h"

#include "OpenWeatherMapCurrent.h"

#include "OpenWeatherMapForecast.h"

#include "WeatherStationFonts.h"

#include "WeatherStationImages.h"

#include<WiFiClient.h>

#include <DNSServer.h>

#include <ESP8266WebServer.h>

WiFiClient client;

// WIFI

const char* WIFI_SSID = "TP-Link_3200";// your SSID

const char* WIFI_PWD = "95001121379884265554";//your wifi password

#define TZ 5 // (utc+) TZ in hours India chennai time setting// your area

#define DST_MN 30 // use 60mn for summer time in some countries''

// Setup

const int UPDATE_INTERVAL_SECS = 20 * 60; // Update every 20 minutes

// Display Settings

const int I2C_DISPLAY_ADDRESS = 0x3c;

#if defined(ESP8266)

const int SDA_PIN = 5;

const int SDC_PIN = 4;

#else

const int SDA_PIN = 5; //D3;

const int SDC_PIN = 4; //D4;

#endif

// OpenWeatherMap Settings

// Sign up here to get an API key:

// https://docs.thingpulse.com/how-tos/openweathermap-key/

String OPEN_WEATHER_MAP_APP_ID = "add82e4e24d449f3a522f06621a3aaeb";

String OPEN_WEATHER_MAP_LOCATION_ID = "1264527"; // for chennai

// Pick a language code from this list:

// Arabic - ar, Bulgarian - bg, Catalan - ca, Czech - cz, German - de, Greek - el,

// English - en, Persian (Farsi) - fa, Finnish - fi, French - fr, Galician - gl,

// Croatian - hr, Hungarian - hu, Italian - it, Japanese - ja, Korean - kr,

// Latvian - la, Lithuanian - lt, Macedonian - mk, Dutch - nl, Polish - pl,

// Portuguese - pt, Romanian - ro, Russian - ru, Swedish - se, Slovak - sk,

// Slovenian - sl, Spanish - es, Turkish - tr, Ukrainian - ua, Vietnamese - vi,

// Chinese Simplified - zh_cn, Chinese Traditional - zh_tw.

String OPEN_WEATHER_MAP_LANGUAGE = "en";

const uint8_t MAX_FORECASTS = 4;

const boolean IS_METRIC = true;

// Adjust according to your language

const String WDAY_NAMES[] = {"SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"};

const String MONTH_NAMES[] = {"JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"};

// Initialize the oled display for address 0x3c

// sda-pin=14 and sdc-pin=12

SSD1306Wire display(I2C_DISPLAY_ADDRESS, SDA_PIN, SDC_PIN);

OLEDDisplayUi ui( &display );

OpenWeatherMapCurrentData currentWeather;

OpenWeatherMapCurrent currentWeatherClient;

OpenWeatherMapForecastData forecasts[MAX_FORECASTS];

OpenWeatherMapForecast forecastClient;

#define TZ_MN ((TZ)*60)

#define TZ_SEC ((TZ)*3600)

#define DST_SEC ((DST_MN)*60)

time_t now;

// flag changed in the ticker function every 10 minutes

bool readyForWeatherUpdate = false;

String lastUpdate = "--";

long timeSinceLastWUpdate = 0;

//declaring prototypes

void drawProgress(OLEDDisplay *display, int percentage, String label);

void updateData(OLEDDisplay *display);

void drawDateTime(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y);

void drawCurrentWeather(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y);

void drawForecast(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y);

void drawForecastDetails(OLEDDisplay *display, int x, int y, int dayIndex);

void drawHeaderOverlay(OLEDDisplay *display, OLEDDisplayUiState* state);

void setReadyForWeatherUpdate();

// Add frames

// this array keeps function pointers to all frames

// frames are the single views that slide from right to left

FrameCallback frames[] = { drawDateTime, drawCurrentWeather, drawForecast };

int numberOfFrames = 3;

OverlayCallback overlays[] = { drawHeaderOverlay };

int numberOfOverlays = 1;

void setup() {

Serial.begin(115200);

delay(1000);

Serial.println("connected?... :)");

delay(1000);

Serial.println();

// initialize display

display.init();

display.clear();

display.display();

//display.flipScreenVertically();

display.setFont(ArialMT_Plain_10);

display.setTextAlignment(TEXT_ALIGN_CENTER);

display.setContrast(255);

WiFi.begin(WIFI_SSID, WIFI_PWD);

int counter = 0;

while (WiFi.status() != WL_CONNECTED) {

delay(500);

Serial.print(".");

display.clear();

display.drawString(64, 10, "Connecting to WiFi");

display.drawXbm(46, 30, 8, 8, counter % 3 == 0 ? activeSymbole : inactiveSymbole);

display.drawXbm(60, 30, 8, 8, counter % 3 == 1 ? activeSymbole : inactiveSymbole);

display.drawXbm(74, 30, 8, 8, counter % 3 == 2 ? activeSymbole : inactiveSymbole);

display.display();

counter++;

}

// Get time from network time service

configTime(TZ_SEC, DST_SEC, "pool.ntp.org");

ui.setTargetFPS(30);

ui.setActiveSymbol(activeSymbole);

ui.setInactiveSymbol(inactiveSymbole);

// You can change this to

// TOP, LEFT, BOTTOM, RIGHT

ui.setIndicatorPosition(BOTTOM);

// Defines where the first frame is located in the bar.

ui.setIndicatorDirection(LEFT_RIGHT);

// You can change the transition that is used

// SLIDE_LEFT, SLIDE_RIGHT, SLIDE_TOP, SLIDE_DOWN

ui.setFrameAnimation(SLIDE_LEFT);

ui.setFrames(frames, numberOfFrames);

ui.setOverlays(overlays, numberOfOverlays);

// Inital UI takes care of initalising the display too.

ui.init();

Serial.println("");

updateData(&display);

}

void loop() {

if (millis() - timeSinceLastWUpdate > (1000L*UPDATE_INTERVAL_SECS)) {

setReadyForWeatherUpdate();

timeSinceLastWUpdate = millis();

}

if (readyForWeatherUpdate && ui.getUiState()->frameState == FIXED) {

updateData(&display);

}

int remainingTimeBudget = ui.update();

if (remainingTimeBudget > 0) {

// You can do some work here

// Don't do stuff if you are below your

// time budget.

delay(remainingTimeBudget);

}

void drawProgress(OLEDDisplay *display, int percentage, String label) {

display->clear();

display->setTextAlignment(TEXT_ALIGN_CENTER);

display->setFont(ArialMT_Plain_10);

display->drawString(64, 10, label);

display->drawProgressBar(2, 28, 124, 10, percentage);

display->display();

}

void updateData(OLEDDisplay *display) {

drawProgress(display, 10, "Updating time...");

drawProgress(display, 30, "Updating weather...");

currentWeatherClient.setMetric(IS_METRIC);

currentWeatherClient.setLanguage(OPEN_WEATHER_MAP_LANGUAGE);

currentWeatherClient.updateCurrentById(&currentWeather, OPEN_WEATHER_MAP_APP_ID, OPEN_WEATHER_MAP_LOCATION_ID);

drawProgress(display, 50, "Updating forecasts...");

forecastClient.setMetric(IS_METRIC);

forecastClient.setLanguage(OPEN_WEATHER_MAP_LANGUAGE);

uint8_t allowedHours[] = {12};

forecastClient.setAllowedHours(allowedHours, sizeof(allowedHours));

forecastClient.updateForecastsById(forecasts, OPEN_WEATHER_MAP_APP_ID, OPEN_WEATHER_MAP_LOCATION_ID, MAX_FORECASTS);

readyForWeatherUpdate = false;

drawProgress(display, 100, "Done...");

delay(1000);

}

void drawDateTime(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y) {

now = time(nullptr);

struct tm* timeInfo;

timeInfo = localtime(&now);

char buff[16];

display->setTextAlignment(TEXT_ALIGN_CENTER);

display->setFont(ArialMT_Plain_10);

String date = WDAY_NAMES[timeInfo->tm_wday];

sprintf_P(buff, PSTR("%s, %02d/%02d/%04d"), WDAY_NAMES[timeInfo->tm_wday].c_str(), timeInfo->tm_mday, timeInfo->tm_mon+1, timeInfo->tm_year + 1900);

display->drawString(64 + x, 5 + y, String(buff));

display->setFont(ArialMT_Plain_24);

sprintf_P(buff, PSTR("%02d:%02d:%02d"), timeInfo->tm_hour, timeInfo->tm_min, timeInfo->tm_sec);

display->drawString(64 + x, 15 + y, String(buff));

display->setTextAlignment(TEXT_ALIGN_LEFT);

}

void drawCurrentWeather(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y) {

display->setFont(ArialMT_Plain_10);

display->setTextAlignment(TEXT_ALIGN_CENTER);

display->drawString(64 + x, 38 + y, currentWeather.description);

display->setFont(ArialMT_Plain_24);

display->setTextAlignment(TEXT_ALIGN_LEFT);

String temp = String(currentWeather.temp, 1) + (IS_METRIC ? "°C" : "°F");

display->drawString(60 + x, 5 + y, temp);

display->setFont(Meteocons_Plain_36);

display->setTextAlignment(TEXT_ALIGN_CENTER);

display->drawString(32 + x, 0 + y, currentWeather.iconMeteoCon);

}

void drawForecast(OLEDDisplay *display, OLEDDisplayUiState* state, int16_t x, int16_t y) {

drawForecastDetails(display, x, y, 0);

drawForecastDetails(display, x + 44, y, 1);

drawForecastDetails(display, x + 88, y, 2);

}

void drawForecastDetails(OLEDDisplay *display, int x, int y, int dayIndex) {

time_t observationTimestamp = forecasts[dayIndex].observationTime;

struct tm* timeInfo;

timeInfo = localtime(&observationTimestamp);

display->setTextAlignment(TEXT_ALIGN_CENTER);

display->setFont(ArialMT_Plain_10);

display->drawString(x + 20, y, WDAY_NAMES[timeInfo->tm_wday]);

display->setFont(Meteocons_Plain_21);

display->drawString(x + 20, y + 12, forecasts[dayIndex].iconMeteoCon);

String temp = String(forecasts[dayIndex].temp, 0) + (IS_METRIC ? "°C" : "°F");

display->setFont(ArialMT_Plain_10);

display->drawString(x + 20, y + 34, temp);

display->setTextAlignment(TEXT_ALIGN_LEFT);

}

void drawHeaderOverlay(OLEDDisplay *display, OLEDDisplayUiState* state) {

now = time(nullptr);

struct tm* timeInfo;

timeInfo = localtime(&now);

char buff[14];

sprintf_P(buff, PSTR("%02d:%02d"), timeInfo->tm_hour, timeInfo->tm_min);

display->setColor(WHITE);

display->setFont(ArialMT_Plain_10);

display->setTextAlignment(TEXT_ALIGN_LEFT);

display->drawString(0, 54, String(buff));

display->setTextAlignment(TEXT_ALIGN_RIGHT);

String temp = String(currentWeather.temp, 1) + (IS_METRIC ? "°C" : "°F");

display->drawString(128, 54, temp);

display->drawHorizontalLine(0, 52, 128);

}

void setReadyForWeatherUpdate() {

Serial.println("Setting readyForUpdate to true");

readyForWeatherUpdate = true;

}

After a successful upload, open the Serial Monitor at a baud rate of 9600. Press the “EN/RST” button on the ESP8266 board. Now it should print its weather data.

Demo

Subscribe

Buy

DOFBOT

An Ultimate Online Store

Internet Weather Forecast

Recent Posts

Comentários