ESP32 Weather Dashboard with Satellite Maps and 16-day Weather Forecast

The system displays real-time weather data including radar maps, cloud coverage, rain intensity, and detailed multi-day forecasts with interactive graphs.

As you can see from my previous videos, besides Electronics, my fields of experimentation and projects are also natural phenomena such as earthquakes, static electricity, weather conditions and forecasts, etc. In several previous videos I have described different ways to make weather instruments. This time I will guide you on how to make another weather instrument, but this time with professional features and appearance. Despite the many functions, including weather forecasting for the next 16 days, the device used exclusively free data sources.

The cost of making this device is many times lower than that of similar commercial devices. In fact, the hardware part is ready-made, which means that there is no need for any assembly, soldering or making a case. So it is also suitable for making by absolute beginners. Physically, the device is actually an ELECROW CrowPanel 7-inch HMI display with Acrylic case which costs around 30 USD along with the acrylic case.

It consists of a 7 inch LCD display with capacitive Touch, ESP32S3 microcontroller that controls the display, USB, Speaker and Battery interfaces, GPIO, I2C and UART ports, as well as a Micro SD card slot. Specifically in this project I use only the Wi-Fi option, but otherwise through the rich selection of I/O interfaces we can use it for many other more complex projects.
First, let's go into a little more detail on how to install the software, because that's the only thing we need to do well to turn this display module into a professional weather dashboard.
This project is sponsored by PCBWay . From concept to production, PCBWay provide cutting-edge electronic design solutions for global innovators, Including hardware design, software development, mechanical design, product testing and certification. PCBWay engineering team consists of experienced engineers in electronics, embedded systems, and product development. They successfully delivered hundreds of projects across industries such as medical devices, industrial automation, consumer electronics, smart home, and IoT.

According to the manufacturer's instructions, we need to install ESP32 Core version 2.0.14 or 2.0.15. Then, in the Board Manager, we need to select Board: ESP32S3 Dev Module. Now we need to make a few settings for this board:
- USB CDC On Boot: Enabled
- Flash Mode: QIO 80MHz
- Flash Size: 4mb
- Partition Scheme: HUGE APP
- and PSRAM: OPI PSRAM

Then, through the library manager, we need to install the latest versions of the LovyanGFX and PNGdec libraries. By the way, the libraries that I used are given at the end of the project. We also need the touch.h header file, which is provided directly by the manufacturer. Next, the code is installed. It is given in a format that should immediately compile and upload without any errors. We just need to unzip the given code file and not change anything in the names of the folders and files. Now we enter the Code_Final folder, and activate the .ino file with the same name. This opens the Arduino editor along with the code. In the code we need to enter some information: Wi-Fi credentials from the local network (user and pass) then Latitude and Longitude for the place to which the dashboard view refers, and an API key from OpenWeatherMap. Let me mention that this API key is only used for displaying maps and is completely free, so you can create it on their website in a few minutes. For the current and 16-day weather forecast, data from the Open-Meteo website is used and no registration is required for them. The exact time is downloaded from an NTP server. Now we press compile and then upload. If everything is completed without errors - that's it, we have successfully completed the project.

The most interesting part follows, a description of how it works and a demonstration of all functions and options. By turning on the module, the message "connecting to internet" appears, and then "connected". This is followed by the "Loading map" message, which takes a little longer for the following reasons: The map and the map layers are composed of 6 individual squares that are merged into one complete image. Those 6 small images are downloaded compressed and then decoded with the PNGdec library. So the map image that we see on the display is composed of 6 smaller images - two rows with 3 images each. With each update, change, or restart, the same operation is repeated. So, on the display, in the center, there is a part of the map according to the coordinates entered in the code.The exact location of the entered coordinates is marked with a red marker and is drawn last above both layers so that it is always clearly visible. There are three zoom levels 5,6 and 7 and the default is 6.

By pressing the middle of the display, these 3 zoom values ​​are changed. The default background map is DARK, and by pressing the clock we can choose between the three modes DARK, TOPO, or OPENSTREAM map.

And the meteorological part, which is represented by three different layers drawn above the map. These are the RADAR, CLOUDNESS, and RAIN PROBABILITY layers. They are selected by pressing the rectangle at the top in the middle.

The dark background map is the simplest but also the most readable in terms of interpreting the meteorological condition. The topographic map is the most visually impressive, but it is a little more difficult to determine, especially the RADAR layer. In particular, I most often use the DARK map.
Now let's move on to the other functions and accessories. At the top left is the strength of the Wi-Fi signal received by the device, as well as my nickname, in the middle the meteorological layer above the map, and at the very top right is the current date. At the bottom left is the name of the Location marked with the marker, and on the right the type of the background map. At the bottom in the middle in a large rectangle there is a clearly readable clock and the current temperature in yellow. To the left of the clock is today's forecast Morning, Noon, and Evening with the predicted temperature, and on the right is the forecast for the next three days with the predicted minimum and maximum temperature.

The weather condition is displayed with 7 types of appropriate icons, namely: Sunny, Partly Cloudy, Mostly Cloudy, Cloudy, Rain, Heavy Rain and Snow. On the far left of the display is a vertical bar with two functions: The weather information is updated every 10 minutes. In this bar, one small bar is drawn upwards approximately every 5 seconds, so it takes 10 minutes for the entire bar to fill. The filling of the bar actually shows the time that has passed since the last update. The other function is the regulation of the display backlight, either continuously or in steps. The yellow bar shows the current brightness level.

The remaining eight rectangles with large colored letters on both sides. They actually represent a 16-day forecast for different weather conditions. By pressing the square, the corresponding 16-day graph opens. The first T shows the minimum and maximum predicted temperature for each day, as well as the general weather condition represented by an icon. The forecast type is written at the top (in this case, temperature), immediately below it are the Days of the Week, and at the bottom under the graph the corresponding date. On the left side (the Y axis) are written the values, which are automatically adjusted depending on the minimum and maximum values ​​(resizable).

For greater clarity, the days of the weekend are marked with pale colored vertical bars. On the far left is the BACK button, and at the bottom the corresponding unit. With BACK we return to the main screen, and each button has a corresponding graph.
And finally a short conclusion. This is a compact but powerful DIY weather station with live data, interactive maps, and a fully custom UI. I would like to mention that instead of these 8, you can download some of the fifty parameters that are freely available on the open-meteo site with minimal changes to the code.