WT32-SC01 ESPEasy Dashboard 320x480px

[localhorst]

Here comes the documentation, how I've created the dashboard on WT32-SC01 with the 320x480px LCD in ESPEasy with BMPs and rules:

IMG_3051.jpeg (887.4 KiB) Viewed 842 times

Coming from this thread / project: Air Quality unit - which devices are best?

The dashboard is build with a background image (himmel.bmp - a simple sky picture) which is having the full screen resolution of 320x480px. As we have to use BMP, this is quite "heavy" and takes some time to load.
So this will be done only when the ESP is booting, with a wait timer of 3 seconds, to ensure that the Display - ST77xx TFT plugin finished loading.
After that the title and the different lines with the icons and values are loaded - and refreshed when new values from the sensors are there, leaving the background image untouched.

As this is a very early stage and only the SenseAir S8 is currently available (SEN55 plugin is at this point in time in the making) my rules need later to be differentiated per value. So that only the lines with the new values are reloaded. Currently I get values from other sensors via MQTT.


Here are the rules for it:

Code: Select all

// load the background BMP once after 3sec waittime after boot
on System#Boot do
  timerSet,1,3
endon

on Rules#Timer=1 do
  st77xx,clear,#02066F
  st77xx,bmp,0,0,himmel.bmp
endon

// CO2 and title / systemtime
on CO2_SenseAirS8#co2 do 
  st77xx,font,amerikasans16pt 
  st77xx,rrf,10,1,300,68,34,Black,#7995eb  
  st77xx,bmp,35,3,bakterien.bmp
  st77xx,txc,#0d1d4d,#02066F
  st77xx,font,robotomono8pt
  st77xx,txz,225,15," %systm_hm%" 
  st77xx,font,amerikasans16pt
  st77xx,txz,120,46,"Air Unit B" 
  st77xx,txs,1
  
// CO2
  st77xx,rrf,10,85,300,50,25,Black,#7995eb 
  st77xx,bmp,30,87,co2.bmp
  st77xx,txz,90,120,"[CO2_SenseAirS8#co2] ppm"
 
  // OK or warning sign
    if [CO2_SenseAirS8#co2]<1100
        st77xx,bmp,240,87,ok.bmp
    else
        st77xx,bmp,240,87,warning.bmp
    endif
 endon
 
 on MQTT#Temperatur do 
// Temperatur + Humidity - in the same row with vertical line
  st77xx,rrf,10,140,300,50,25,Black,#7995eb 
  st77xx,bmp,30,142,temperatur.bmp
  st77xx,txz,80,175,"[MQTT#Temperatur]C"
  st77xx,l,170,140,170,190,Black
  st77xx,bmp,175,142,feuchtigkeit.bmp
  st77xx,txz,225,175,"[MQTT#Feuchte]%"
 
// NOX
  st77xx,rrf,10,195,300,50,25,Black,#7995eb 
  st77xx,bmp,30,197,nox.bmp
  st77xx,txz,90,230,"NOx µg/m3"
  
// PM
  st77xx,rrf,10,250,300,50,25,Black,#7995eb 
  st77xx,bmp,30,252,partikel.bmp
  st77xx,txz,90,285,"Partikel µg/m³"
   
 // VOC
  st77xx,rrf,10,305,300,50,25,Black,#7995eb 
  st77xx,bmp,30,307,voc.bmp
  st77xx,txz,90,340,"VOC ppb"
endon
 
 on MQTT#Druck do 
 // Luftdruck
  st77xx,rrf,10,360,300,50,25,Black,#7995eb 
  st77xx,bmp,30,362,druck.bmp
  st77xx,txz,90,395,"[MQTT#Druck] hPa"
endon

If you want to do a quick tryout with my rules and graphics
and start from there, you can download my BMPs here and load them into the internal flash file system of the ESP:

WT32-SC01-ESPEasy-Dashboard-320x480px-BMPs.zip

(231.71 KiB) Downloaded 24 times

Coming to the creation of the BMP files:
As you can see from the rules, I've chosen the following colors:

• #7995eb for the background of the lines
• #0d1d4d for the text

For the size of the lines, I've chosen 50px height. So I wanted 45x45px for the icons.
To create the icons in an easy way, I went to: https://icons8.de
There you can search for the desired icon and directly modify it to have the text:

icon_textcolor.png (173.52 KiB) Viewed 842 times

and background color:

icon_backgroundcolor.png (162.96 KiB) Viewed 842 times

At download, you can directly set the desired size (in my case 45x45):

icon_download.png (61.01 KiB) Viewed 842 times

So now we have a nice icon with the correct colors and size. Next is to convert it to BMP with 24 bit.

For this, I've used GIMP:

• load the PNG icon in GIMP
• Files --> Export to
• choose a filename and the filetype BMP
• In the following dialogue you have to choose under "more options" 24 Bit:

  

  icon_GIMP_export.png (249.04 KiB) Viewed 842 times

• upload the icon to the internal flash file system of the ESP
• use it in your rules

This is basically it. I may do a complete rework later, once the SEN55 plugin is available and I finalize these units.