ESP8266 Weather Widget V1.0

by opengreenenergy in Circuits > Arduino

268576 Views, 1051 Favorites, 0 Comments

ESP8266 Weather Widget V1.0

567054f550e1b6e6db0001e3.jpeg
NodeMCU Weather Widget
ESP8266 Weather Widget Demo ( New )
3d cover.png
BookBrushImage3D-eReader-front.png.png

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

Parts and Tools Required

566faae367400c88ed0007e0.jpeg

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 )

Making the Circuit

566f8ffc937ddb0dcd000432.jpeg
IMG_20151215_082900.jpg
IMG_20151215_082945.jpg
3D view back.jpg
3D view front.jpg
567568b14fbade607100077a.jpeg

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 .

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.

Get Weather API Key

566efc0615be4d4440000693.jpeg
566efc3215be4d1f22000f55.jpeg
566efd8450e1b65729000330.jpeg

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

Set Up the Software

566efe3f45bceb42ae000207.jpeg
566eff2e4936d435170001ca.jpeg
566f016367400cf42d000162.jpeg
566eff83937ddbc7e300000d.jpeg

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

Upload the Code

566fb43550e1b62d7a000576.jpeg

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.

Testing

566f93e867400cf42d0002bf.jpeg
566f89eb2e7fb640df0004ab.jpeg
566f8a7650e1b636d9000066.jpeg
566f88af4936d43517000495.jpeg
ESP8266 WEATHER STATION

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.

Make With Node MCU

NodeMCU Weather Widget
5673dbe92e7fb65b2f00035b.jpeg
5673dc49937ddbde110003a2.jpeg
5673dca315be4d05a6000e52.jpeg
5673dd432e7fb67f26000afc.jpeg
5673ddc067400cd75a000d6e.jpeg
5673ddf515be4d07ba0006f5.jpeg
ESP8266/NodeMCU IDE, Firmware Upgrade & First Bit Of Code - Complete Guide Part 2 - TN0006

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

Make the Enclosure

IMG_20151103_224709.jpg
IMG_20151109_171457.jpg
Desktop_preview_featured.JPG
DSC_2687_preview_featured.JPG

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