Introduction: Live Regional Weather Clock

By Follow my bilibili：陳亮手痕定律
About: Make it yourself if you cannot buy one ;)

This instructables shows how to use online regional weather image to build a weather panel.

Supplies

  1. Waveshare ESP32-S3-Zero
  2. Three ST77916 1.5" round QSPI color screen
  3. Micro-SD / SD card slot breakout board
  4. Micro-SD / SD card
  5. Some 47 ohm 1/4 resistor
  6. 830 Points Breadboard
  7. Some 10CM Male to Male Dupont Cable
  8. Some U Shape Breadboard Wire

Note:

Step 1: Regional Weather Information

Most city have their own observatory department responsible for monitoring and forecasting weather. For example, in Hong Kong, it is Hong Kong Observatory. You can find many regional weather monitoring information on their web site. I always view their Radar Image to see any rain nearby and the satellite image to see the cloud movement. And also weather photo is very useful to see outside status if you stay indoor and no window near you.

Ref.:

https://www.hko.gov.hk/en/wxinfo/radars/radar.htm

https://www.hko.gov.hk/en/wxinfo/intersat/satellite/sate.htm

https://www.hko.gov.hk/en/wxinfo/ts/webcam/HMM_photo.htm

Step 2: How Does It Works?

ESP32 family dev device most have WiFi capability, so it can gather the latest information from the Internet.

  1. The first information requires gather is the current time, it can gather from public NTP service on the Internet.
  2. According to the different images interval pattern, we can download the image every 5, 6 or 10 minutes.
  3. The downloaded images are saved to Micro-SD / SD card
  4. While waiting next download interval, we can play downloaded image in sequence every few seconds.

Note:

At the beginning, only 1 downloaded image in the card, so it only display a still image. After power on 3 hours, it can display 3 hours Timelapse animation.

Step 3: Software Preparation

Arduino IDE

Download and install Arduino IDE latest version if not yet:

https://www.arduino.cc/en/software

Arduino-ESP32

Follow installation steps to add Arduino-ESP32 support if not yet:

https://docs.espressif.com/projects/arduino-esp32/en/latest/installing.html

Arduino_GFX Library

Open Arduino IDE Library Manager by selecting "Tools" menu -> "Manager Libraries...". Search "GFX for various displays" and press "install" button.

You may refer my previous instructables for more information about Arduino_GFX.

JPEGDEC

Open Arduino IDE Library Manager by selecting "Tools" menu -> "Manager Libraries...". Search "JPEGDEC" and press "install" button.


Note:

You may refer to Arduino Documentation for the details on how to install/import library to Arduino IDE.

Step 4: Wire Connection

Here are the connection summary:

ESP32-S3-Zero LCD 1 LCD 2 LCD 3 Micro-SD / SD card slot
============= ===== ===== ===== =======================
5V VCC VCC VCC
GND GND GND GND GND
3V3(OUT) VCC
GP1 CS
GP2 MOSI
GP3 SCK
GP4 MISO
GP5 CS
GP6 CS
GP7 -> Resistor -> SCL SCL SCL
GP8 -> Resistor -> SDA SDA SDA
GP9 -> Resistor -> IO1 IO1 IO1
GP10 -> Resistor -> IO2 IO2 IO2
GP11 -> Resistor -> IO3 IO3 IO3
GP12 -> Resistor -> RST RST RST
GP13 CS


Note:

The resistors are optional, but it can make the connection more stable while connect multiple display in parallel.

The display BL and TE pin can leave it unconnected.

Step 5: Sample Code

Please download the sample code at GitHub:

https://github.com/moononournation/WeatherPanel.git

Step 6: Compile & Upload

  1. Open WeatherPanelHKO.ino in Arduino IDE
  2. The first 2 lines are the WiFi station connect details, please replace with your WiFi details
  3. Insert Micro-SD / SD into the card slot
  4. Set the board parameter settings according to your dev board
  5. Press upload button and wait...

Ref.:

https://www.waveshare.com/wiki/ESP32-S3-Zero#Arduino

Step 7: Enjoy!

Now you have a decent Weather Panel showing live weather image on your desk!

Step 8: Notes on Importing Root CA Cert

This project requires download image on the web using HTTPS protocol. The download code is base on the ESP32 HTTPS client sample code. It requires prepare the web site root CA Cert first.

The sample code is set the hko.gov.hk root CA Cert for download images. If you would like to use other web site images, please follow the above video import the correct root CA Cert to the code.