M5Paper Weather Station

I have one M5Paper which is equipped an ePaper touch screen 540 x 960 pixels, temperature and humidity sensor, real-time clock, microSD, 03 x HY2.0-4P ports. It can connect to WIFI, bluetooth, or implement other protocols like: I2C, UART, DAC/ADC via extension ports and a magnetic attachment system....

Today, I'd like to share my home weather station by using this M5Paper.

Let's getting started.

Hardwares:

• 1pcs x M5Stack® M5Paper ESP32 Development Kit 960X540 4.7 Inch eInk Display 235 PPI IoT Terminal E-Book Industrial Control Panel
• 1pcs x USB-C programming cable.

Softwares:

• Visual Studio Code.
• PlatformIO IDE for VSCode (Extension).
• LCD Image Converter: It can transform your bitmaps and fonts to “C” source format.

M5Paper features:

• ESP32-D0WDQ6-V3 @ 240 MHz dual core, 600 DMIPS, 520 KB SRAM.
• Screen: ePaper / eInk multipoint touchscreen, 4.7 “, 540 x 960 pixels @ 235ppi, 180 degree viewing angle.
• Connectivity: Wi-Fi with 3D antenna, dual mode Bluetooth.
• Memory and storage: 16 MB flash memory, PSRAM 8MB, Micro SD card reader up to 16GB.
• Built-in RTC BM8563.
• Built-in temperature and humidity SHT30.
• Built-in Magnet.
• Internal 1150mAh LiPo battery.
• Expansion connectors x3 HY2.0-4P.

It can be used for the following applications: IoT Terminal, E-Book, Industrial Control Panel, Smart Home Panel....

M5Paper can be programmed by classic Arduino IDE, MicroPython or UIFlow (M5Stack's graphical IDE) and so on....Previously I had tested some M5Paper sample codes by Arduino IDE from internet, it caused errors and I couldn't return to original factory test. Then I found that M5Paper original factory test program is developed by VSCode + PlatformIO IDE extension therefore I took my times to install & learn. This is a tool I've never used previous time, but after I studied some basic knowledge, it really seem like to be a good platform.

To install VSCode and PIO for M5Paper, I followed below steps:

• Firstly, I downloaded Visual Studio Code from https://code.visualstudio.com base on my computer operating system Windows 7(/ macOS/ Linux)... and installed it to computer.
• Secondly, I opened VSCode, go to Extensions Tab ‣ Type PlatformIO IDE at "Search Extensions in Marketplace" ‣ Click "Install". There are many extensions here, we can install more depending on our needs.

• Thirdly, I entered to PIO Home ‣ Click Libraries tab ‣ Search and install "M5Stack by Zibin" and "M5EPD by m5stack"

To do this weather station, I was inspired by estshorter with his M5Paper dashboard project at:

https://github.com/estshorter/m5paper-dashboard

Since the M5Paper is new product and it doesn't have many resources to refer to, so for me this is a good starting point, both in terms of M5Paper and PlatformIO.

The time & weather information are described in the below picture.

Take notes that:

• The indoor temperature and humidity are read from a built-in SHT30 sensor.
• Time information is read from a RTC built-in sensor BM8563 and it can be synchronized with NTP Time Server.
• The other weather information like: pressure, wind, sunrise & sunset time, visibility, weather icon & description...are read from openweathermap.org

The code is available at my GitHub. Thank to estshorter for his good reference source related to M5Paper.

https://github.com/tuenhidiy/m5paper-weatherstatio...

Notes:

- Change your Wi-Fi parameters in "src/WiFiInfo.h".

- Weather, sunrise & sunset, temmperature, humidity, visibility, pressure, wind ... icons are converted to "C" codes and located at:

• "scr/WeatherIcons.c"
• "scr/THPIcons.c"
• "scr/WindIcons.c"

1. LovyanGFX library:

This is a graphics library that compatibles with M5Paper, display driver: IT8951.

https://github.com/lovyan03/LovyanGFX

2. M5EDP library version 0.1.1

This is an official library for M5Paper from M5Stack.

https://github.com/m5stack/M5EPD

3. ArduinoJson version 5.13.4

This library is used to make the HTTP query and read the response from OpenWeatherMap.

https://github.com/bblanchon/ArduinoJson/releases

We can learn how to generate a JSON document on Arduino follwing this tutorial:

https://arduinojson.org/v5/doc/serialization/

We can see all libraries in file "platformio.ini"

lib_deps = 
	https://github.com/lovyan03/LovyanGFX
	m5stack/M5EPD@^0.1.1
	bblanchon/ArduinoJson@5.13.4

1. Weather icons set by Dooder

https://www.iconfinder.com/iconsets/weather-413

Take note that we should rename the weather icons same like on OpenWeatherMap, detail information at:

https://openweathermap.org/weather-conditions

The "Weather icons set by Dooder" on top link has been named according to their names on OpenWeatherMap.

Because OpenWeatherMap clearly identifies icons between day and night, so that their names have the suffix "D" or "N".

2. Temperature, humidity, pressure, sunrise, sunset and visibility icons:

These icons are easy to find on the internet in black and white format. We can choose the icons that we like, download, and resize them to fit with our dashboard.

3. Wind icons

These wind icons are hard to find on the internet in black and white format. The icon set below I found at the Home Assistant Community forum and made a little tweaking by adding a black dot indicating the wind direction because M5STACK only shows grayscale images so the red color of indicating point won't be visible.

N---------------NNE---------------NE-------------ENE

E---------------ESE---------------SE-------------SSE

S---------------SSW---------------SW-------------WSW

W---------------WNW---------------NW-------------NNW

There are totally 16 wind directions as declared in "WindIcons.c":

#define TXT_N       	"N"
#define TXT_NNE     	"NNE"
#define TXT_NE      	"NE"
#define TXT_ENE     	"ENE"
#define TXT_E       	"E"
#define TXT_ESE     	"ESE"
#define TXT_SE      	"SE"
#define TXT_SSE     	"SSE"
#define TXT_S       	"S"
#define TXT_SSW     	"SSW"
#define TXT_SW      	"SW"
#define TXT_WSW     	"WSW"
#define TXT_W       	"W"
#define TXT_WNW     	"WNW"
#define TXT_NW      	"NW"
#define TXT_NNW     	"NNW"

To convert all icons collection to "C" code, we can follow the below steps:

• Open LCD Image Converter ‣ File ‣ Open ‣ Choose Image File (or multiple images).
• Go to Options ‣ Preset ‣ Color R5G6B5.
• Go to Image ‣ Block size ‣ 8 bit.
• Go to File ‣ Click Convert (or Convert All for multiple images).

For example in case of a temperature icon with size 112x128:

The setting parameters are shown in header of "C" file after the image is converted.

/******************************************************************************** image
* filename: unsaved
* name: Temperature112x128
*
* preset name: Color R5G6B5
* data block size: 8 bit(s), uint8_t
* RLE compression enabled: no
* conversion type: Color, not_used not_used
* bits per pixel: 16
*
* preprocess:
*  main scan direction: top_to_bottom
*  line scan direction: forward
*  inverse: no
*******************************************************************************/


/*
 typedef struct {
     const uint8_t *data;
     uint16_t width;
     uint16_t height;
     uint8_t dataSize;
     } tImage;
*/

In the program, to show the temperature icon with size 112x128, we can refer to below code:

  THPIcons.createSprite(112, 128); // Image size 112x128
  THPIcons.setSwapBytes(true);
  THPIcons.fillSprite(WHITE);  
  THPIcons.pushImage(0, 0, 112, 128, (uint16_t *)Temperature112x128);
  THPIcons.pushSprite(offset_x, offset_y); // Position to show the image

It's nice to see that the updated M5PAPER library supports printing images in *.JPG or *.PNG format via URL.

https://github.com/m5stack/M5EPD/blob/main/example...

I have also tried printing all weather icons (night & day) from OpenWeatherMap to a M5Paper screen as shown below:

The URL link of all weather icons are shared on the OpenWeatherMap website, for example URL of "01n" (night icon - clear sky) is:

http://openweathermap.org/img/wn/01n@2x.png

And they can be printed on M5Paper via these codes:

    canvas1n.createCanvas(100, 100); // Icon size: 100x100
    canvas1n.setTextSize(3);
    canvas1n.drawPngUrl("http://openweathermap.org/img/wn/01n@2x.png"); // URL of night icon - clear sky
    canvas1n.pushCanvas(50,0,UPDATE_MODE_GC16); // Position to show icon.

As you can see, some image details are lost, even 2 icons ( "03d.png" and "03n.png") are not visible because they coincide with white color of M5PAPER screen.

Anyway, this is a good feature to build IoT projects with a all-in-one device M5Paper.!!!

Thank you for reading my works!!!