2017年8月1日 星期二

ESP8266 Weather Widget


Welcome to my new Weather Widget Project.
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

Parts and Tools  Required
Parts Required :
1. ESP8266 -01 (eBay )
2. Optional NodeMCU ESP8266-12 ( eBay )
3. OLED Display (eBay )
4. Voltage Regulator AMS1117 ( eBay )
5.Tactile Switch (eBay )
6.Slide Switch ( eBay )
7.Resistors ( 10K and 330R )
8.Female Double Row Straight Pin Header ( eBay )
9. Male Double Row Right Angle Pin Header ( eBay )
9.Jumper Wires ( eBay )
10.Prototype Board ( eBay )
Tools Required :
1. Soldering Iron
2.Wire Cutter
3.Wire Stripper
4.Nipper

Step 2: Making the Circuit

Making the Circuit
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 .

Step 3: Download and Installed the Softwares

1. Arduino Code
2. Libraries :
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.
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

Get Weather API Key
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”.

Step 5: Set Up the Software

Set Up the Software
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

Step 6: Upload the Code

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

Testing
566f89eb2e7fb640df0004ab.jpeg
566f8a7650e1b636d9000066.jpeg
566f88af4936d43517000495.jpeg
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 videomade 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

OLED圖片取檔方法, 使用LCD Assistant

這篇是把圖檔轉成OLED或其它繪圖LCD的方法, 函數用bitmap來畫, 圖檔轉換軟體用LCD assistant, 這是一套很古老的軟體, 但還是很好用



步驟1, 打開LCD Assistant軟體


步驟2, 點選file\load image, 這裡的圖檔格式只支援bmp, 且需為單色, 不然轉出來會很難看 

步驟3, 點選完你要的圖片後, 出現如下相關的參數, 如果你的OLED是128x64, 那你的圖片大小就要等於或小於128x64, 目前取檔的方向都是vertical, 這和你的 bitmap函數相對應, 大多數都是用vertical來轉出圖檔的陣列資料

 步驟4, 確認相關參數都沒問題, 點選file\save output

 步驟5, 輸入圖檔陣列的檔案名稱, 我習慣取成xxx.h

 完成後, 打開wifi_12864.h, 會出現如下的圖檔陣列, 把它和arduino ino檔案放在一起, 在ino檔把它include進來即可

 實際顯示的圖片如下