Actually, I have been eyeing the Qingping air quality detector for a long time, but I couldn't afford the price of 700+, so I came up with the idea of making a similar desktop gadget myself. On the one hand, I wanted to try making a small gadget that includes hardware, and on the other hand, I really wanted to have a gadget to put on my desk.
Selection#
Chip#
Before officially starting to purchase components and code, I need to choose the components that this gadget will use. Since this is the first time I am making a gadget with hardware, I chose the NodeMCU, which is beginner-friendly and has the ESP8266 chip. This way, I can solve the problem of network communication, and NodeMCU supports Arduino-style programming, which is very convenient. There are various libraries available online that I can use.
Screen#
Since it is a desktop gadget, it must have a display interface. OLED screens are too expensive, so I finally chose the ST7796 4-inch TFT screen with touch function. On the one hand, the price is acceptable, and on the other hand, the touch screen can also meet my possible desire to add touch interaction functionality in the future (although I may just keep thinking about it).
Sensors#
The data from APIs like PM2.5 is already sufficient, but what impressed me about the Qingping air quality detector is its carbon dioxide detection function. So the carbon dioxide detection function is definitely included in this gadget, and I found an SGP30 air quality module on Taobao, which can detect CO2 and TVOC, which is sufficient.
Coding#
Actually, when I was writing this article, the main functions of this gadget were already completed. Currently, it has the following features:
- OTA upgrade, no need to plug in USB to flash firmware
- Save configuration file for automatic configuration on startup
- If WIFI connection fails, it will open a hotspot for the user to configure the network
- Modify configuration through a web interface
- Password verification for web interface management
- NTP time synchronization
- Get weather data through the HeWeather API
- Monitor CO2 and TVOC
- Display weather warning information
- Switch weather icons between day and night
Libraries Used#
TFT_eSPI.h
SPI.h
TFT screen driver
https://github.com/Bodmer/TFT_eSPI
Arduino_JSON.h
JSON parsing
https://github.com/arduino-libraries/Arduino_JSON
NTP.h
NTP time synchronization
https://github.com/sstaub/NTP
Adafruit_SGP30.h
SGP30 driver
https://github.com/adafruit/Adafruit_SGP30
ArduinoOTA.h
OTA support
https://github.com/jandrassy/ArduinoOTA
ESP8266WiFi.h>
ESP8266WiFiMulti.h
ESP8266HTTPClient.h
FS.h
LittleFS.h
WiFiClient.h
ESP8266WebServer.h
https://github.com/esp8266/Arduino
Weather Icons#
Since I didn't want to convert image formats, I chose to redraw the icons myself using the drawing functions in the TFT_eSPI library. However, I'm a bit lazy, so currently I have only redrawn the weather icons that have appeared here, and then I thought it wouldn't be right to display the sun at night, so I drew some night icons and added a feature to switch between them.
API Proxy#
While debugging the API, I found that the data returned by the HeWeather API is too large and some of the data is not needed. The large amount of data may trigger the software watchdog and cause a reset. So I used Python's Flask to create a data cleaning server.
Finished Product#
Feel free to give me a star~ https://github.com/johnpoint/Weather-Card
Main Body#
Web Management Interface#
Future Plans#
In the future, I plan to change the layout of the screen a bit. There seems to be some empty space in the lower right corner, and I might make a 3D printed case.
Well, ESP8266 is really great, playing with hardware really gives a sense of pleasure(??) accomplishment.