In fact, I have been envious of the Qingping air 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 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 have made a gadget with hardware, I chose the NodeMCU, which is more beginner-friendly. It has an ESP8266 chip, which can solve the problem of network communication. Additionally, 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#
APIs for PM2.5 and other data are already sufficient, but what impressed me about the Qingping air detector was its carbon dioxide detection function. So the carbon dioxide detection function is definitely going to be included in this gadget. I found an SGP30 air quality sensor module on Taobao, which can detect CO2 and TVOC, which is sufficient for my needs.
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 update firmware
- Save configuration file for automatic configuration on startup
- If WIFI connection fails, it will open a hotspot for users 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 levels
- 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 drawn the weather icons that have appeared here, and then I thought that the sun shouldn't be displayed at night, so I drew some additional icons and added a feature to switch between day and night icons.
API Proxy#
During the process of debugging the API, I found that the data returned by the HeWeather API was too large and some of the data was not needed. The large amount of data could potentially trigger a software watchdog reset. So I used Python's Flask to create a server to filter the data.
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 redesign the layout of the screen. There seems to be some empty space in the lower right corner, and I might also create a 3D printed case.
Well, ESP8266 is really great, and playing with hardware really gives a sense of pleasure(??) accomplishment.