ESP8266 Weather Widget V1.0

[ 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.

My Book : DIY Off-Grid Solar Power for Everyone

You can order my Book on Off-Grid Solar Power from Amazon

1. eBook
2. Paperback - Black & White
3. Paperback - Color Print

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 !!!