albino98 / Arduino_Desk_Weatherstation

Desk Weather Station with esp8266, oled display and Python-Flask web Application

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Python Flask C C++ MySQL Arduino

logo

Desk WeatherStation with esp8266 and Python-Flask web application

Desk WeatherStation with esp8266, 1,3" oled display, GY-BME280 sensor and Python-Flask web application for data visualization.

IMG_9997

Pin Connections

The pin connections are the same as indicated in the KeeYees kit tutorial but I report them below:

NodeMCU ESP8266 OLED Display
3.3V VCC
GND GND
D1 SCL
D2 SDA
NodeMCU ESP8266 BME280
3.3V VCC
GND GND
D1 SCL
D2 SDA

weatherStation_schematics vpd

Esp8266 Code Description

For the project I used this KeeYees kit that can be purchased at this link: https://www.amazon.it/KeeYees-GY-BME280-Atmosferica-Temperatura-Breadboard/dp/B07T2H5QXC/ref=sr_1_12?__mk_it_IT=%C3%85M%C3%85%C5%BD%C3%95%C3%91&dchild=1&keywords=keeyees&qid=1624183225&sr=8-12

I also used the terminal adapter for esp8266: https://www.amazon.it/KeeYees-Espansione-ESP8266-ESP-12E-Sviluppo/dp/B08HYZ4Y69/ref=sr_1_5?__mk_it_IT=%C3%85M%C3%85%C5%BD%C3%95%C3%91&dchild=1&keywords=scheda+di+espansione+esp8266&qid=1625037621&sr=8-5

The arduino code is the same as provided by the KeeYees demo except for a function that I inserted in the code that allows you to send the bme sensor data to the Python web application. Below the function:

image

N.B. : it would be more correct to make a post call but for ease I made a get.

Python Web Application Description

The python web application with Flask allows you to view the latest BME sensor data sent by esp8266 and the graphs (with the Plotly library) that show the trend of temperature, humidity and atmospheric pressure over time. The data is saved on the MySQL DB. I have deployed my application (also the DB) on pythonanywhere.

pythonApplication-2021-06-20_16.55.25.mov

Demo

IMG_9999.MOV

How to change the logo shown on the display

To change the logo to be shown on the display follow the steps:

  1. choose a logo without shading
  2. change the resolution to adapt it to the size of the display (I chose 79x31 in order to view the footer with temperatures and time on the display). You can change the resolution with Paint
  3. Convert the logo from png or jpeg to xbm using online tools
  4. Finally replace the xbm code generated in WeatherStationImages.h in logo PROGMEM

image

IMG_0002

To Do

✔️ collapsable area for latest weather data

❌ add logging on DB

❌ view system logs in another collapsible area

✔️ add symbols indicating whether the system is working or not:

image

BuyMeACoffee

License

MIT license

License: MIT

About

Desk Weather Station with esp8266, oled display and Python-Flask web Application

License:MIT License


Languages

Language:C 76.9%Language:C++ 11.5%Language:Python 5.7%Language:HTML 4.5%Language:CSS 1.5%