There’s not a massive amount of information on how to use the new HASP powered Tasmota GUI builder and the universal display driver offered, so I thought I’d share my config so that it may help others.
Product page (currently): https://en.wireless-tag.com/product-item-25.html
This is a simple 4 button little wall controller for things in my kitchen, and I’ll revisit this with more complexity in future (adding things like screen dimming etc).
First you’ll need to install the firmware to your device. In a compatible browser that offers serial links (Chrome) go to:https://tasmota.github.io/install/
And install Tasmota32 LVGL by plugging in your device with USB and choosing the correct port. This will take about 2 mins and you will also set up your wifi and name of the device.
Once it is installed, go to the IP address on your network where it lands and go to Configuration->Other->Template and put the following into the text box:
{"NAME":"WT32-SC01","GPIO":[6210,1,1,1,1,1,0,0,1,704,736,768,1,1,640,608,1,800,1024,992,0,1,1,1,0,0,0,0,1,1,1,1,1,0,0,1],"FLAG":0,"BASE":1}Make sure to check the “Activate” box and hit save. This will set up the correct pins for the display, backlight, touchscreen etc.
With the new universal display driver, we no longer use the console to set it up, instead we have to upload a display.ini file which carries all of the config. Go to Tools->Manage File System and browse for your display.ini file, and press upload. You should see it listed on the panel after uploading. Here are the contents you need:
display.ini:
:H,ST7796,480,320,16,SPI,1,*,*,*,*,*,*,*,40
:S,2,1,1,0,40,20
:I
EF,3,03,80,02
CF,3,00,C1,30
ED,4,64,03,12,81
E8,3,85,00,78
CB,5,39,2C,00,34,02
F7,1,20
EA,2,00,00
C0,1,23
C1,1,10
C5,2,3e,28
C7,1,86
36,1,48
37,1,00
3A,1,55
B1,2,00,18
B6,3,08,82,27
F2,1,00
26,1,01
E0,0F,0F,31,2B,0C,0E,08,4E,F1,37,07,10,03,0E,09,00
E1,0F,00,0E,14,03,11,07,31,C1,48,08,0F,0C,31,36,0F
11,80
29,80
:o,28
:O,29
:A,2A,2B,2C
:R,36
:0,28,00,00,01
:1,88,00,00,02
:2,E8,00,00,03
:3,48,00,00,00
:i,20,21
:UTI,FT6336U,I1,38,*,*
RD A0
CP 02
RTF
RT
:UTT
RDM 00 16
MV 2 1
RT
:UTX
MV 3 2
RT
:UTY
MV 5 2
RT
Reboot your device and you should see thhttps://tasmota.github.io/install/e splash screen for Tasmota pop up and draw on screen as it boots.
Now that we have the display working properly, we are going to add a super simple gui with a title at the top, the time, wifi strength, and 4 buttons on screen to do things in Home Assistant.
We will do this with 2 files:
1. autoexec.be (runs on boot to set up various things and load the pages)
2. pages.jsonl (contains the details of what to draw on screen)
In my autoexec.be I first import the hasp and mqtt libraries, and then I define some actions that happen when pressing buttons (publishing to certain MQTT topics), then finally start running the GUI.
autoexec.be:
import haspmota
import mqtt
tasmota.add_rule("hasp#p1b1#event=down", / -> mqtt.publish("kitchenpanel/button/espresso", "pressed"))
tasmota.add_rule("hasp#p1b2#event=down", / -> mqtt.publish("kitchenpanel/button/toaster", "pressed"))
tasmota.add_rule("hasp#p1b3#event=down", / -> mqtt.publish("kitchenpanel/button/aircon", "pressed"))
tasmota.add_rule("hasp#p1b4#event=down", / -> mqtt.publish("kitchenpanel/button/neonc", "pressed"))
haspmota.start()In my pages.jsonl I have 2 pages. Page 0 is a special page which is always shown in hasp, it’s like an overlay over everything else, and in mine I have a top bar with a title, a clock, and wifi signal strength. Page 1 is where I put my buttons which show in the middle. Both pages are shown simultaneously to make a single GUI.
pages.jsonl:
{"page":0,"comment":"---------- Upper stat line ----------"}
{"id":11,"obj":"label","x":0,"y":0,"w":480,"pad_right":90,"h":22,"bg_color":"#D00000","bg_opa":255,"radius":0,"border_side":0,"text":"Kitchen Control","text_font":"montserrat-20"}
{"id":15,"obj":"lv_wifi_arcs","x":291,"y":0,"w":29,"h":22,"radius":0,"border_side":0,"bg_color":"#000000","line_color":"#FFFFFF"}
{"id":16,"obj":"lv_clock","x":232,"y":3,"w":55,"h":16,"radius":0,"border_side":0}
{"page":1,"comment":"---------- Page 1 ----------"}
{"id":0,"bg_color":"#000000","bg_grad_color":"#000000","bg_grad_dir":1,"text_color":"#FFFFFF"}
{"id":1,"obj":"btn","x":50,"y":50,"w":200,"h":100,"text":"Espresso"}
{"id":2,"obj":"btn","x":250,"y":50,"w":200,"h":100,"text":"Toaster"}
{"id":3,"obj":"btn","x":50,"y":150,"w":200,"h":100,"text":"AirCon"}
{"id":4,"obj":"btn","x":250,"y":150,"w":200,"h":100,"text":"Neon C"}Make sure to upload these to Tasmota using the same method above, then reboot the device. You should now see the simple GUI being drawn on screen, as well as the buttons changing colour briefly when you press them.
But currently these buttons don’t connect to anything, as we’re not yet linked with our home assistant installation.
On your Tasmota interface webpage (the IP address of the device) go to Configuration->MQTT and fill in the important info:
Host: The IP or domain name of your Home Assistant host
Port: usually leave this as is (default 1883)
Client: usually leave as is (unique name)
User: username you connect your device to HA with
Password: password for this username
Topic: I like to name this the name of the device (“kitchenpanel” in this case)
Full Topic: Leave as is
Hit save
Head back to the main menu, and go to Tools->Console and type:weblog 4
Which will show you full logging.
When you press a button on the device, you should now see messages like:
08:23:18.555 MQT: stat/kitchenpanel/RESULT = {"WebLog":4}
08:23:18.768 CFG: Saved, Count 104, Bytes 4096
08:23:20.447 TS : touched x=169 y=107 gest=0x00 (raw x=213 y=169)
08:23:20.474 LVG: Refreshed 19095 pixels in 10 ms (1909 pix/ms)
08:23:20.485 MQT: kitchenpanel/button/espresso = pressed
08:23:20.489 HSP: publish {"hasp":{"p1b1":{"event":"down"}}}
08:23:20.517 LVG: Refreshed 19095 pixels in 10 ms (1909 pix/ms)
08:23:20.555 LVG: Refreshed 19095 pixels in 10 ms (1909 pix/ms)
08:23:20.564 TS : released x=169 y=107 (raw x=213 y=169)
08:23:20.570 BRY: GC from 24994 to 14905 bytes, objects freed 155/237 (in 2 ms) - slots from 649/655 to 228/594
08:23:20.592 LVG: Refreshed 19095 pixels in 10 ms (1909 pix/ms)
08:23:20.601 HSP: publish {"hasp":{"p1b1":{"event":"release"}}}
08:23:20.606 HSP: publish {"hasp":{"p1b1":{"event":"up"}}}Notice the:MQT: kitchenpanel/button/espresso = pressed
This means we’re sending a message of “pressed” to the topic “kitchenpanel/button/espresso” (I pressed the espresso button).
Now it’s time to plumb these messages over MQTT into an automation on Home Assistant so that they do things.
In HA, go to Settings->Automations&Scenes->Automations Tab and press “Create Automation” and “Create new automation”
Under the “When” header, press “add trigger” and type “MQTT” and press the plus symbol. We want the topic to be kitchenpanel/button/+ Which will catch all messages going to the button topic so that everything is nicely grouped together. Put pressed in the payload box.
Under the “Then Do” header, press “add action” and type “Choose” and press the plus symbol.
Press “add option” and type “Template”. Under the “Conditions” subheading press “add condition” and type “template” and we’re going to add the first button condition.
Put in the “value template”:
{{ trigger.topic == 'kitchenpanel/button/espresso' }}
To capture presses from only the espresso button.
Now we want an action in the action subheader, for mine, I’m adding an action based on device, so I’ve chosen the device as “espresso” (which matches my device name) and chosen “Toggle Espresso”.
Do this for the other three value templates:{{ trigger.topic == 'kitchenpanel/button/toaster' }}{{ trigger.topic == 'kitchenpanel/button/aircon' }}{{ trigger.topic == 'kitchenpanel/button/neonc' }}
Now you should have full pass through of all of your buttons to devices!
I’ll do more on this in the near future with automatic dimming of the screen, more flexible layouts, and symbols instead of text for the buttons.