ESP8266 Weather Widget

191,384

972

176

Published

Introduction: ESP8266 Weather Widget

About: I am an Electrical Engineer. I love to harvest Solar Energy and make things by recycling old stuff. I believe, IF YOU TRY YOU MIGHT, IF YOU DON'T YOU WON'T. www.opengreenenergy.com

[ Play Video ]

Welcome to my new Weather Widget Project.

You can find all of my projects on : https://www.opengreenenergy.com/

A weather widget is a application that can be downloaded on your PC, laptop or a mobile device and perform the job of providing easy access to weather information.But I was always trying to make something different.So I go through the internet to get some ideas.After few days of my work, finally I made it.I am sharing this so that any one can make it easily.

This is an ESP8266 based Weather Display unit which retrieve localized weather information from http://www.wunderground.com/ by WLAN and display it on a 128x64 OLED Display.

The Widget display following things

1. Current Time with Date

2. Current Day Weather Information like Temperature,Pressure,Humidity and Rain fall.

3. Future forecasting for 3 days

I would like to give credit to my friend Dani Eichhorn who did all of the programming parts.He is updating the software on his Github page regularly with new features.You can visit SquixTechBlog to see more projects on ESP8266.

Step 1: Parts and Tools Required

AmazonParts Required :

1. ESP8266 -01 ( Amazon )

2. Optional NodeMCU ESP8266-12 ( Amazon )

3. OLED Display ( Amazon )

4. Voltage Regulator AMS1117 ( Amazon )

5.Tactile Switch ( Amazon )

6.Slide Switch ( Amazon )

7.Resistors ( 10K and 330R )

8.Female Double Row Straight Pin Header ( Amazon )

9. Male Right Angle Pin Header ( Amazon )

9.Jumper Wires ( Amazon )

10.Prototype Board ( Amazon)

Tools Required :

1. Soldering Iron ( Amazon )

2.Wire Cutter ( Amazon )

3.Wire Stripper ( Amazon )

Step 2: Making the Circuit

Make the circuit on a prototype board as per the schematic shown above.

Important thing is that this Board can be used for programming the ESP8266 -01 module from Arduino IDE. You can use it for any of your project.

The whole Circuit is consists of ESP8266-01 module, OLED Display and few other components

1. AMS1117 : This is a voltage regulator which convert 5V to 3.3V required for ESP8266 module.

2. Tactile Switch ( S1) : Used for Resetting the ESP8266

3.Slide Switch (S2) : Used for changing the mode of ESP8266. There are two modes Normal and Program Mode.

4. Resistors : R1 is a pull up resistor and R2 is current limiting resistor.

5. Header CP2102 : Used for programming

6.Header Power : Provide power from a LiPo Battery.This is optional, because you can use the programming port's two pin for power.

7. Header OLED : Connection for OLED Display

Update as on 13/03/2016 : New PCB files

Thanks to my friend spilz who put his effort to make this nice PCB.Now you can make it by downloading the gerber files attached below.

PCB Components :

1. AMS : AMS1117-3.3

2. C1 : 100nF

3. C2 : 10uF

4. C3 : 100nF

5. C4 : 10uF

6. C5 : 100nF

Note : An additional resistor R2 is added in PCB to protect ESP8266 .

For any improvement please suggest .

Step 3: Download and Installed the Softwares

1. Arduino Code

ESP8266 Weather Station

2. Libraries :

Json Streaming Parser

ESP8266 Oled Driver for SSD1306 display

After downloading the library unzip it and installed it with your Arduino Library Manager in

Sketch > Include Library > Manage Libraries...

3. ESP8266 board on Arduino IDE :

To installed the ESP8266 board on your arduino IDE follow the following link.

https://github.com/esp8266/Arduino

Update on 2/1/2016 :

As per the feedback, lot of people facing problem in compiling the code.So I think it is better to share the code what I have used.You can download the .zip file attached below.

Step 4: Get Weather API Key

The Weather Station real-time data obtained from the Weather Underground (http://www.wunderground.com) website. So you have to get the Wunderground API Key. There is no cost to apply for a basic key, which is more than sufficient for our requirements.

Follow the steps below:


1. Go to http://www.wunderground.com/weather/api/d/login.h... a free Weather Underground account.

2.Enter your email address, a password , and a handle (a username), then click the “Sign Up” button.

3.Weather Underground will immediately send you an email with an activation link. You must click this link within the email to activate your account (you’ll be brought back to the login screen).

4. Login to Weather Underground using the account you just created and activated.

5.Click on the “Explore My Options” button.Click the “Purchase Key” button at the top or bottom of the page (you will not be asked for a method of payment).

6.Weather Underground will ask you to fill out a simple form in order to complete your request.

When asked where the API will be used, answer “Other”.

When asked if the API is for commercial use, answer “No”.

When asked if the API is for chip processing, answer “No”.

Step 5: Set Up the Software

After downloading the Arduino Code, you have to change the following things

1.Open the sketch in the Arduino IDE

2.Enter the Wunderground API Key

3.Enter your Wifi credentials

4.Adjust the location according to Wunderground API, e.g. India,Kolkata

5. Adjust UTC offset

Step 6: Upload the Code

Connect the FTDI Programmer as follows

ESP8266 --> CP2102

Vcc --> Vcc

GND--> GND

Tx --> Rx

Rx --> Tx

Slide the switch toward the Programming Mode

In Arduino IDE ,select the board as " Generic ESP8266 Module "

Then upload the code.

Step 7: Testing

Now remove the programmer and its connection.

Slide the switch to its normal position

Connect the Power Supply.I used a LiPo battery for it.

After few seconds the OLED will display all the weather parametrs.

Step 8: Make With Node MCU

If you are a not interested to make the circuit by using an ESP8266-01 module,then this is an alternative for you.You can make the same Weather Widget by using a Node MCU board. NodeMCU is an open source IoT platform.It includes firmware which runs on the ESP8266 Wi-Fi SoC, and hardware which is based on the ESP-12 module.You can still use your favourite Arduino IDE and Arduino code to program it.Another advantage is that you do not need a separate FTDI programmer to program it.A micro USB cable is enough for it.You can use your smart phone/tablet charger cable for it.

Follow the steps :

First update the NodeMCU to latest version firmware .You can see the video made by TornTech for reference.

1. Make the circuit on a bread board

Node MCU --> OLED

3.3V --->Vcc

GND -->GND

D5----> SDA

D6----> SCL

2. Connect the micro USB cable

3.Plug in to your laptop/PC USB port.

4.Set up the Software as stated in the earlier steps.

5.Set the board to " NodeMCU 1.0 (ESP-12E Module)"

6.Upload the code

You are done !!!

Step 9: Make the Enclosure

You can make your enclosure yourself with your own choice.

But I will suggest to look in to the beautiful 3D printed enclosure designed by smily77.I have printed my enclosure but still few works is left.I will update it once completed.Stay tuned...

Download the .STL files from Thingiverse.

Follow the instruction to print the Enclosure.

Then insert all the components inside.Now the Weather Widget is ready !!!

If you enjoyed this article, don’t forget to pass it along!

Follow me for more DIY projects and ideas. Thank you !!!

27 People Made This Project!

Recommendations

  • Water Contest

    Water Contest
  • Creative Misuse Contest

    Creative Misuse Contest
  • Clocks Contest

    Clocks Contest

176 Discussions

Doesn't work anymore "we will no longer provide free weather API keys"

Did u find any other option?

wunderground doesnt provide free API anymore. Any other solution?

Hello, I've got error message when uploading...

Arduino: 1.8.5 (Windows 7), Board: "NodeMCU 1.0 (ESP-12E Module), 80 MHz, 4M (1M SPIFFS), v2 Prebuilt (MSS=536), Disabled, None, 115200"

WARNING: Category '' in library XPT2046 is not valid. Setting to 'Uncategorized'
C:\Users\Aldrin\Documents\Arduino\libraries\ssd1306_i2c-master\ssd1306_i2c.c:32:25: fatal error: wiringPiI2C.h: No such file or directory

#include <wiringPiI2C.h>

^

compilation terminated.

exit status 1
Error compiling for board NodeMCU 1.0 (ESP-12E Module).

This report would have more information with
"Show verbose output during compilation"
option enabled in File -> Preferences.

Pls. help...Thanks

Hey all, I'm still learning how to use my ESP8266MOD, so was wondering could I use this code to test its WiFi capabilities without the OLED display and simply display the data on the serial monitor?

0
user
giecuk

5 months ago

why my oled not displaying ???
what should i change at sketch ?

1 reply

I changed line 54 location and it worked ,you can find it here https://www.dropbox.com/s/u7scny7dwoj9n2t/esp8266-weather-station.rar?dl=0

0
user
vmed

6 months ago

Hello, help please

esp8266-weather-station:54: error: 'drawFrame1' was not declared in this scope

void (*frameCallbacks[])(int x, int y) = {drawFrame1, drawFrame2, drawFrame3, drawFrame4};

^

esp8266-weather-station:54: error: 'drawFrame2' was not declared in this scope

void (*frameCallbacks[])(int x, int y) = {drawFrame1, drawFrame2, drawFrame3, drawFrame4};

^

esp8266-weather-station:54: error: 'drawFrame3' was not declared in this scope

void (*frameCallbacks[])(int x, int y) = {drawFrame1, drawFrame2, drawFrame3, drawFrame4};

^

esp8266-weather-station:54: error: 'drawFrame4' was not declared in this scope

void (*frameCallbacks[])(int x, int y) = {drawFrame1, drawFrame2, drawFrame3, drawFrame4};

^

exit status 1

'drawFrame1' was not declared in this scope

for some reason i can not get weather condition for New York.

0
user
kd8bxp

10 months ago

Didn't get this to work - but did get https://blog.squix.org/weatherstation-getting-code...

working...for the most part it was easy.... one problem was even thou I selected imperial units (Fahrenheit) it still displayed C....the temperatures where in Fahrenheit - just changed the Cs to Fs.

I'm not sure what is wrong with the code here, It almost worked, I think it has something to do with the display library being used thou.

This is a fake "WEMOS" ESP8266 with OLED board (D-Duino board) - NodeMCU is used to upload code.

2017-09-03 12.29.59.jpg2017-09-03 12.30.21.jpg2017-09-03 12.30.26.jpg

Doesn`t work for me.. i get this error like this "Arduino: 1.8.3 (Windows 10), Board: "NodeMCU 1.0 (ESP-12E Module), 80 MHz, 115200, 4M (3M SPIFFS)"

In file included from C:\Users\User\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\2.3.0\cores\esp8266/esp8266_peri.h:24:0,

from C:\Users\User\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\2.3.0\cores\esp8266/Arduino.h:38,

from sketch\esp8266-weather-station.ino.cpp:1:

C:\Users\User\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\2.3.0/tools/sdk/include/c_types.h:71:66: error: redefinition of 'const char ArialMT_Plain_10 []'

#define ICACHE_RODATA_ATTR __attribute__((section(".irom.text")))

^

C:\Users\User\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\2.3.0\cores\esp8266/pgmspace.h:18:21: note: in expansion of macro 'ICACHE_RODATA_ATTR'

#define PROGMEM ICACHE_RODATA_ATTR

^

sketch\SSD1306Fonts.h:26:31: note: in expansion of macro 'PROGMEM'

const char ArialMT_Plain_10[] PROGMEM = {

^

In file included from C:\Users\User\Documents\Arduino\libraries\esp8266-oled-ssd1306-master/OLEDDisplay.h:32:0,

from E:\1A1A Weather station\F7MN21OIIW1Y89Y\ESP8266 Weather Widget\esp8266-weather-station-master\esp8266-weather-station\esp8266-weather-station.ino:2:

C:\Users\User\Documents\Arduino\libraries\esp8266-oled-ssd1306-master/OLEDDisplayFonts.h:4:12: error: 'const char ArialMT_Plain_10 [2731]' previously defined here

const char ArialMT_Plain_10[] PROGMEM = {

^

In file included from C:\Users\User\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\2.3.0\cores\esp8266/esp8266_peri.h:24:0,

from C:\Users\User\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\2.3.0\cores\esp8266/Arduino.h:38,

from sketch\esp8266-weather-station.ino.cpp:1:

C:\Users\User\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\2.3.0/tools/sdk/include/c_types.h:71:66: error: redefinition of 'const char ArialMT_Plain_16 []'

#define ICACHE_RODATA_ATTR __attribute__((section(".irom.text")))

^

C:\Users\User\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\2.3.0\cores\esp8266/pgmspace.h:18:21: note: in expansion of macro 'ICACHE_RODATA_ATTR'

#define PROGMEM ICACHE_RODATA_ATTR

^

sketch\SSD1306Fonts.h:227:31: note: in expansion of macro 'PROGMEM'

const char ArialMT_Plain_16[] PROGMEM = {

^

In file included from C:\Users\User\Documents\Arduino\libraries\esp8266-oled-ssd1306-master/OLEDDisplay.h:32:0,

from E:\1A1A Weather station\F7MN21OIIW1Y89Y\ESP8266 Weather Widget\esp8266-weather-station-master\esp8266-weather-station\esp8266-weather-station.ino:2:

C:\Users\User\Documents\Arduino\libraries\esp8266-oled-ssd1306-master/OLEDDisplayFonts.h:428:12: error: 'const char ArialMT_Plain_16 [5049]' previously defined here

const char ArialMT_Plain_16[] PROGMEM = {

^

In file included from C:\Users\User\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\2.3.0\cores\esp8266/esp8266_peri.h:24:0,

from C:\Users\User\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\2.3.0\cores\esp8266/Arduino.h:38,

from sketch\esp8266-weather-station.ino.cpp:1:

C:\Users\User\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\2.3.0/tools/sdk/include/c_types.h:71:66: error: redefinition of 'const char ArialMT_Plain_24 []'

#define ICACHE_RODATA_ATTR __attribute__((section(".irom.text")))

^

C:\Users\User\AppData\Local\Arduino15\packages\esp8266\hardware\esp8266\2.3.0\cores\esp8266/pgmspace.h:18:21: note: in expansion of macro 'ICACHE_RODATA_ATTR'

#define PROGMEM ICACHE_RODATA_ATTR

^

sketch\SSD1306Fonts.h:427:31: note: in expansion of macro 'PROGMEM'

const char ArialMT_Plain_24[] PROGMEM = {

^

In file included from C:\Users\User\Documents\Arduino\libraries\esp8266-oled-ssd1306-master/OLEDDisplay.h:32:0,

from E:\1A1A Weather station\F7MN21OIIW1Y89Y\ESP8266 Weather Widget\esp8266-weather-station-master\esp8266-weather-station\esp8266-weather-station.ino:2:

C:\Users\User\Documents\Arduino\libraries\esp8266-oled-ssd1306-master/OLEDDisplayFonts.h:851:12: error: 'const char ArialMT_Plain_24 [9643]' previously defined here

const char ArialMT_Plain_24[] PROGMEM = {

^

In file included from E:\1A1A Weather station\F7MN21OIIW1Y89Y\ESP8266 Weather Widget\esp8266-weather-station-master\esp8266-weather-station\esp8266-weather-station.ino:46:0:

ssd1306_i2c.h:57: error: using typedef-name 'SSD1306' after 'class'

class SSD1306 {

^

In file included from E:\1A1A Weather station\F7MN21OIIW1Y89Y\ESP8266 Weather Widget\esp8266-weather-station-master\esp8266-weather-station\esp8266-weather-station.ino:9:0:

C:\Users\User\Documents\Arduino\libraries\esp8266-oled-ssd1306-master/SSD1306.h:33:21: note: 'SSD1306' has a previous declaration here

typedef SSD1306Wire SSD1306;

^

esp8266-weather-station:71: error: 'drawFrame1' was not declared in this scope

void (*frameCallbacks[])(int x, int y) = {drawFrame1, drawFrame2, drawFrame3, drawFrame4};

^

esp8266-weather-station:71: error: 'drawFrame2' was not declared in this scope

void (*frameCallbacks[])(int x, int y) = {drawFrame1, drawFrame2, drawFrame3, drawFrame4};

^

esp8266-weather-station:71: error: 'drawFrame3' was not declared in this scope

void (*frameCallbacks[])(int x, int y) = {drawFrame1, drawFrame2, drawFrame3, drawFrame4};

^

esp8266-weather-station:71: error: 'drawFrame4' was not declared in this scope

void (*frameCallbacks[])(int x, int y) = {drawFrame1, drawFrame2, drawFrame3, drawFrame4};

^

E:\1A1A Weather station\F7MN21OIIW1Y89Y\ESP8266 Weather Widget\esp8266-weather-station-master\esp8266-weather-station\esp8266-weather-station.ino: In function 'void setup()':

esp8266-weather-station:100: error: 'SSD1306' has no member named 'setFrameCallbacks'

display.setFrameCallbacks(numberOfFrames, frameCallbacks);

^

esp8266-weather-station:102: error: 'SSD1306' has no member named 'setFrameTransitionTicks'

display.setFrameTransitionTicks(10);

^

esp8266-weather-station:104: error: 'SSD1306' has no member named 'setFrameWaitTicks'

display.setFrameWaitTicks(150);

^

E:\1A1A Weather station\F7MN21OIIW1Y89Y\ESP8266 Weather Widget\esp8266-weather-station-master\esp8266-weather-station\esp8266-weather-station.ino: In function 'void loop()':

esp8266-weather-station:118: error: 'SSD1306' has no member named 'getFrameState'

if (readyForWeatherUpdate && display.getFrameState() == display.FRAME_STATE_FIX) {

^

esp8266-weather-station:118: error: 'SSD1306' has no member named 'FRAME_STATE_FIX'

if (readyForWeatherUpdate && display.getFrameState() == display.FRAME_STATE_FIX) {

^

esp8266-weather-station:130: error: 'SSD1306' has no member named 'nextFrameTick'

display.nextFrameTick();

^

E:\1A1A Weather station\F7MN21OIIW1Y89Y\ESP8266 Weather Widget\esp8266-weather-station-master\esp8266-weather-station\esp8266-weather-station.ino: In function 'void drawFrame1(int, int)':

esp8266-weather-station:138: error: invalid conversion from 'int' to 'OLEDDISPLAY_TEXT_ALIGNMENT' [-fpermissive]

display.setTextAlignment(TEXT_ALIGN_CENTER);

^

In file included from E:\1A1A Weather station\F7MN21OIIW1Y89Y\ESP8266 Weather Widget\esp8266-weather-station-master\esp8266-weather-station\esp8266-weather-station.ino:2:0:

C:\Users\User\Documents\Arduino\libraries\esp8266-oled-ssd1306-master/OLEDDisplay.h:183:10: error: initializing argument 1 of 'void OLEDDisplay::setTextAlignment(OLEDDISPLAY_TEXT_ALIGNMENT)' [-fpermissive]

void setTextAlignment(OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);

^

esp8266-weather-station:147: error: invalid conversion from 'int' to 'OLEDDISPLAY_TEXT_ALIGNMENT' [-fpermissive]

display.setTextAlignment(TEXT_ALIGN_LEFT);

^

In file included from E:\1A1A Weather station\F7MN21OIIW1Y89Y\ESP8266 Weather Widget\esp8266-weather-station-master\esp8266-weather-station\esp8266-weather-station.ino:2:0:

C:\Users\User\Documents\Arduino\libraries\esp8266-oled-ssd1306-master/OLEDDisplay.h:183:10: error: initializing argument 1 of 'void OLEDDisplay::setTextAlignment(OLEDDISPLAY_TEXT_ALIGNMENT)' [-fpermissive]

void setTextAlignment(OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);

^

E:\1A1A Weather station\F7MN21OIIW1Y89Y\ESP8266 Weather Widget\esp8266-weather-station-master\esp8266-weather-station\esp8266-weather-station.ino: In function 'void drawFrame3(int, int)':

esp8266-weather-station:167: error: invalid conversion from 'int' to 'OLEDDISPLAY_TEXT_ALIGNMENT' [-fpermissive]

display.setTextAlignment(TEXT_ALIGN_CENTER);

^

In file included from E:\1A1A Weather station\F7MN21OIIW1Y89Y\ESP8266 Weather Widget\esp8266-weather-station-master\esp8266-weather-station\esp8266-weather-station.ino:2:0:

C:\Users\User\Documents\Arduino\libraries\esp8266-oled-ssd1306-master/OLEDDisplay.h:183:10: error: initializing argument 1 of 'void OLEDDisplay::setTextAlignment(OLEDDISPLAY_TEXT_ALIGNMENT)' [-fpermissive]

void setTextAlignment(OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);

^

E:\1A1A Weather station\F7MN21OIIW1Y89Y\ESP8266 Weather Widget\esp8266-weather-station-master\esp8266-weather-station\esp8266-weather-station.ino: In function 'void drawForecast(int, int, int)':

esp8266-weather-station:194: error: invalid conversion from 'int' to 'OLEDDISPLAY_TEXT_ALIGNMENT' [-fpermissive]

display.setTextAlignment(TEXT_ALIGN_CENTER);

^

In file included from E:\1A1A Weather station\F7MN21OIIW1Y89Y\ESP8266 Weather Widget\esp8266-weather-station-master\esp8266-weather-station\esp8266-weather-station.ino:2:0:

C:\Users\User\Documents\Arduino\libraries\esp8266-oled-ssd1306-master/OLEDDisplay.h:183:10: error: initializing argument 1 of 'void OLEDDisplay::setTextAlignment(OLEDDISPLAY_TEXT_ALIGNMENT)' [-fpermissive]

void setTextAlignment(OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);

^

esp8266-weather-station:206: error: invalid conversion from 'int' to 'OLEDDISPLAY_TEXT_ALIGNMENT' [-fpermissive]

display.setTextAlignment(TEXT_ALIGN_LEFT);

^

In file included from E:\1A1A Weather station\F7MN21OIIW1Y89Y\ESP8266 Weather Widget\esp8266-weather-station-master\esp8266-weather-station\esp8266-weather-station.ino:2:0:

C:\Users\User\Documents\Arduino\libraries\esp8266-oled-ssd1306-master/OLEDDisplay.h:183:10: error: initializing argument 1 of 'void OLEDDisplay::setTextAlignment(OLEDDISPLAY_TEXT_ALIGNMENT)' [-fpermissive]

void setTextAlignment(OLEDDISPLAY_TEXT_ALIGNMENT textAlignment);

^

exit status 1

using typedef-name 'SSD1306' after 'class'

Dieser Bericht wäre detaillierter, wenn die Option

"Ausführliche Ausgabe während der Kompilierung"

in Datei -> Voreinstellungen aktiviert wäre."

I have successfully made this using Node MCU, but the clock time is not showing my location time of Kolkata , India . Pl advise.

0
user
ArsS1

11 months ago

how to shows weathers graph from wunderground in oled????

Hey! i made it!

The first time i make it work but now i want to change some settings and maybe add more frames.

but i'm getting this error after change de city and country.:

void updateForecast(String apiKey, String language, String country, String city);

^

sketch\WundergroundClient.h:108:10: note: candidate expects 4 arguments, 3 provided

exit status 1
no matching function for call to 'WundergroundClient::updateForecast(String&, String&, String&)'

can you help me?

Hi, what a great little project. I am a relative newbie to the mcu world and this was very interesting and reasonably straight forward to get impressive results. My only drawback was that I was supplied OLEDs that were stated as being SSD1306 but they were SH1106 - I just got snow! Changed them out for a Sunfounder OLED but it was faulty - DOH! Sunfounder support was great and supplied a good OLED and I am now very happy indeed. Also tried the Moon/Sun version by Solar767 - also very happy. Please keep up the good work.

I made your version of the Weather Widget (Solar767) and it's a significant improvement over the earlier versions. I added the WiFi manager code to make configuring it even simpler without having to hard code your password and such into the flash. Combination of your code, WifiManager, and some code from Fowlerk. I'll try to post a copy in Github.

No errors when compiling display is however dark :(

'drawFrame1' was not declared in this scope

why?