WiFi Weather Stations with Online Graphs

The Weather Station

http://funnytech.atwebpages.com/tms/

This little Weather Station is developed assembling necessary components (bought separately) and it's programmed to gather data related to temperature and humidity from a specific sensor DHT22.

• Module WIFI AZDelivery D1 mini con NodeMCU ESP8266/ESP8266-12E/ESP12

• Module LCD AZDelivery OLED Display 128 x 64 Pixel 0,96 police

• Button A, showing additional information

• Button B, sending immediately data on line

• Potentiometer

• Module AZDelivery Real Time Clock RTC DS3231 I2C

• Power supply

Periodically, after a defined interval time, the Weather Station is connecting to home network via WiFi and the data related to Humidity and Temperature are sent online and stored remotely into a MySql database.

The OLED Display (2) is showing the values for temperature/humidity and the set interval time to upload data. Also date and time are displayed, get from real time clock RTC.

Pressing Button A (3) the display is showing other information (i.e. IP number os station)

Pressing Button B (4) the data for temperature/humidity are immediately sent and stored on line.

The potentiometer (5) is used to set the interval for automatically upload (it's possible to set between 1 and 60 minutes)

The stored data is displayed graphically using the free java script library Chart.js. So it's possible to obtain the following diagrams:

The following screenshot is showing the project web site (for the moment only in Italian), where the data are displayed. Click here to go.

In this video the start-up process. The station is connecting to home WI-FI, get the IP address from router then displaying the value for humidity and temperature.

The coding (PHP) part

The rendering of graph is obtained using the free javascript library Chart.js. The web page are developed in Python and HTML.

• The index.php is including the container for graphs by

<canvas id="mycanvasTemperature"></canvas> 
<canvas id="mycanvasHumidity"></canvas>

Still into index.php there are the javascript inclusion for rendering graph, chart.js library and jquery:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/appHumid.js"></script>
<script type="text/javascript" src="js/appTemp.js"></script> 

• The appHumid.js file (and also appTemp.js file) are calling the file http://funnytech.atwebpages.com/tms/dataTemp.php where is defined the database connection, query to get data and also query execution. Data are passed back to calling file (appHumid.js) for rendering.

• The file add.php is called directly by the station (see sketch code) to store data into database.