ESP8266 Weather Station That Displays Data on a Website

Note: Parts of this tutorial may be available in video format on my YouTube Channel - Tech Tribe.

In this instructable, I will show how to make a weather station that directly sends data to your website. Therefore, you will need your own domain (Ex: msolonko.net). To start, here are the materials you will need:

Items:

Feather Huzzah($16.95)

Micro USB cable with Data($1.99)

Battery Pack($25): I'll later discuss what capacity you need for what amounts of time without recharging, so you can choose the capacity you want. This is a link to the one I used. You can also just power it from an outlet.

1 Photoresistor

Some other resistors - discussed later

Wire

Perf Board($5.59) - Pack of 20

BME280 Temperature, Pressure, and Humidity Sensor($9.99)

Some sort of box; you can 3D print one, and I will show you my design.

Webhosting and domain, if you want to follow along completely with the tutorial

Tools:

Wire cutter

Soldering iron

Step 1: Feather Huzzah Code

The code will be written in Arduino IDE, which can be downloaded here. Before we begin, please follow the instructions here in order to set up the Arduino IDE to work with your Feather Huzzah. Also, follow these instructions to download the necessary libraries to get the BME sensor working.The code file is attached, and all the code is commented so that you can understand it. Once you look at it, move on to the next step where we will look at the code that receives the sensor data.

Step 2: Receiving Data From Feather Huzzah

By now, you hopefully understand how the Arduino code works. If not, go back to the code and read my comments (I commented almost every line). Now we will write the code that receives the data. Like before, all of it is commented. The programming language that is used for this is PHP, which you can read more about here.

Our data will be stored in a MySQL Database, which you can read more about here. Data is stored in tables that have rows and columns. Before we write the code, we should make the structure of our table on our hosting cPanel. I am using Arvixe Hosting, so your cPanel may look different. Refer to one of the images to see what part of mine looks like. First, you want to create a new MySQL database if you don't have one already. You can use the wizard for that. There are plently of online resources on this if you need help.

Once you have a database set up, go to phpMyAdmin and select your database. Create a table named weather_data with 9 columns. Consult one of my images above to see what each column should be (copy the name, datatype, and everything else exactly if you want to use my code). Counter will be our primary key and id will help us identify what day the data pertains do (1: today, 2: yesterday, 3: everything else). Since we will have a lot of data, we will be erasing some of it as it becomes older. That is why we need the id column. The rest of the columns are pretty self-explanatory. Right now, your table in your database should look exactly like mine.

Now, download the attached code and read through it and my comments. When done, move on to the next step.

Note: when you download the code, rename it to esp.php. For some reason, I got an error when I tried uploading a PHP file.

This is basically how the code will work.

1. Collect data every 10 minutes and display it

2. Once a day passes, average every 6 values (to save DB space) so that there is a data point for every hour

3. Once another day passes, average all the remaining data for that day and store it as only one data point

This way, we will be able to see fluctuations in light, temperature etc. over the timespan of months without begin distracted by daily fluctuations in temperature, light, etc.

Step 3: Retrieving Data From the Database to Display

So now we have figured out how to collect weather data and upload it to our database. Now we have to be able to retrieve it in a usable form. As before, I attached a PHP file getWeatherData.txt that you should save to your host and change the filename extension to .php instead of .txt. All the code is commented. Read through it to understand it and move on once you think you have got it. If you have questions, feel free to ask below.

Step 4: Libraries Setup and Some Other Things

For this project, one of the frameworks that we will be using is AngularJS, which will help us communicate with the database and build a SPA (Single Page Application). To get the library, go to this link and download a version 1.64 or higher. For this tutorial, I used 1.64 but new versions are often being released so you can use a different one. Find a link on that page that ends like this: /VERSION/angular.min.js

Copy the link and save it somewhere safe. We just got a link for the AngularJS library. You will need it for the next step. Now, on the same page find a link that looks like this and copy it as well: /VERSION/angular-route.min.js

The angular-route will help us manage our SPA and handle the switching of views in the page.

We want to be able to nicely display charts of our data. For this we will use a library called ChartJS. Go here, choose the latest version and save a link that ends like this: VERSION/Chart.bundle.min.js

Finally, we will be using a library to layout the pages called Bootstrap. Go to this link to Quick Start and leave this open for now. Once we begin writing the client code, you will be able to replace my old links with the newer version.

Now, we should set up the different views for our application. In the directory on your host where you have the previous two files (esp.php and getWeatherData.php), create a new folder named weather_views. In here, we will put all of our pages that will each correspond with an id from our database (1, 2, or 3).

In the folder, create 3 files (day.html, old.html, and yesterday.html). Download the attached code and put it into those files. The code for DAY.HTML is commented so that you can understand what is happening. The code for the other 2 pages is basically the same (different part in old.html is commented).

Once you are done with this step, move on to the next one, which is the most difficult programming step.

Step 5: Main HTML File

In this step, you will make/edit/read the main HTML file where you will display everything. Save the attached file (which, as always, is commented) as espdata.html in the same directory as esp.php. I hope you can make some changes to it and understand what is really going on.

This is the bulk of your code, so it is definitely important to understand what is going on.

Step 6: Wiring Test on a Breadboard

Now we will test that all the code works with our hardware. If you haven't already, solder header pins on the Feather Huzzah and the BME280 sensor. For each step, a photo is attached.

1. Place feather on the breadboard. Connect 3V to the + rail and GND to - rail.

2. Connect the sensor VIN to + rail and GND to - rail.

3. Connect sensor SDA to pin 4 on feather. Connect SCL to pin 5.

4. Place photoresistor on the breadboard with one lead going to the + rail.

5. Connect a 4.7k resistor to the unconnected lead of the photoresistor. Connect the unconnected lead of the 4.7k to a 2k resistor. Connect the unconnected end of the 2k resistor to the - rail (GND).

6. Connect the joint of the 4.7k and 2k resistor to pin ADC(analog pin). We just made a voltage divider that divides the maximum voltage read by the pin from 3.3V to less than 1V. You can play around with your own combination if you want but keep in mind that the voltage given to the analog pin must be less than 1V.

7. Finally, connect the RST (reset) pin on the feather to pin 16 on the feather (orange wire in the photo). This configuration allows the Feather Huzzah to enter deep sleep mode to save power.

Now you are done! Upload the code to your feather huzzah, and hopefully, you can see your webpage update (only the day.html page). If not, try using the Serial monitor to troubleshoot or ask in the comments below.

Step 7: Permanent Project (Optional)

Assuming everything works, if you wish, you can make this project more permanent. I will not be showing this here, but you can solder all the components to a perf board and then enclose them in a container. I will attach the IPT files for the 3D container that I used below and a few photos to get you started. The container is meant for inspiration because you will probably want to make it more personal with a different design and text. Have fun with customization! Good luck!

P.S. My name is engraved into the IPT files. You can easily change it using Autodesk Inventor or similar software. Still, I recommend that you do this on your own. For me, 3D modeling was the most satisfying step of this project.