Hey what's up this is Václav here. If you watch with my channel, you know that
I like to play with small displays. You know it's cool to have everything controlled
from a website but when I'm for example in the garden and I want to start the irrigation
or when I'm leaving the house and I want to check whether there will be some trash collection,
going to the computer or taking out my phone and starting Home Assistant it might not be
the easiest thing. I mean if I want to just do something I can
use voice control but often I'd like to just check the state of things and then possibly
take an action based on that. So I make small HMIs for that and I share
them on a GitHub and I make videos about that and they are quite popular. I made a sprinkler controller, a weather station
and I have a small display next to the entrance that shows state of different things around
the house. Recently I have extended that with the details
about the energy management. It's quite useful. For all these projects I used Nextion displays. They are simple and affordable and they are
supported in ESPHome so I love them. But they are controlled through UART so this
is the TX, RX, ground and 5V. So you need some kind of microcontroller to
control them and I typically use some variant of Sonoff for that. But if you don't have one available, adding
one just to control display makes no sense. It's complicated, you have no use for the
Sonoff and you would have to make some complicated enclosure for it. Then there are plenty of HMIs that are made
for Raspberry Pi. They usually have an HDMI interface and they
are great but they need Raspberry Pi. And to have Raspberry Pi just to control display,
that doesn't make sense for me either. So then I have discovered this Elecrow display. It has ESP32 built inside this and it has
the touch display. It's powered from USB-C or battery. It has quite rigid body so you don't have
to make a complicated enclosure for it like I did for the weather station. And it has a number of interfaces like the
UART, IC2, Digital and Analog and they even make variant with small camera on top so you
can make face recognition. So it looks like a perfect choice for what
I need. The only question I have is how difficult
it will be to interface with the Home Assistant. The graphic uses an open source LVGL graphics
library. This is quite nicely looking square line studio
to do the design. They support Arduino and MicroPython but you
know what? Lately I like to avoid programming and I try
to do things either with the native integration or with ESPHome. The microprocessor is ESP32 and the display
is ILI9488 chip. Both are supported in ESPHome. Not sure about the touch interface but you
can add custom components. So let's see. Right, so I am in the ESPHome script editor
and I am looking at an empty screen and why is that you might ask. Because when you start ESPHome there is like
a wizard. It will ask you a couple of questions, what
is the board you use and some of the common settings and it will pre-configure the device
for you. And this might be good if you are configuring
your first device but this is not my case. I have a number of devices, a couple of dozens
and many of them they are very similar, one to the other. So what I do instead is I kind of created
my own templates and I copy the settings or snippets of codes from one to the other. So let me show you what I use. There is always this section ESPHome. This is mandatory for all the ESPHome devices. There is a name which always has to be there. And then there are two optional fields, friendly
name which I always like to use. If you look at the ESPHome dashboard it shows
you what the device is about, you are not limited to the naming of the devices. And then there is a comment which is also
optional but I always use it to show either what type of device I am dealing with or what
the device actually does. And as you can see this section doesn't have
any actual values because it is using substitutions which is what I was talking about. I have this ESPHome generic section that I
use across all of my devices and then I have this part of substitutions on top of each
of the files where I have the configuration that is specific for each device. So this is the ESPHome. Then I always use some packages, so the configuration
of the Wi-Fi, over the air updates and the Home Assistant API. And I have them actually defined in a separate
file so all the settings are kept in this common directory in api.yaml, ota.yaml or
wifi.yaml. The beauty of that is if I want to change
something on the API or Wi-Fi for example, I can change it in this one single file and
then I can recompile all the devices. And I don't have to update every single device
configuration file. And those are using substitutions as well. Again in case I want to use one device separately,
so I have the passwords and the secrets kept in the secret file so I don't have them in
the script. Then I always have the logger so I can see
what the device does, I can debug. And then there is a section ESP32 because
this device is using ESP32 microcontroller and this one is specific for the device. Each of the ESP32 devices, they have a mandatory
field for the type of board. If you would look at the Platformio website,
it will show you and there is really, I have a filter here but if I would un-filter it,
there is 14 pages of different boards and each of them have a different board time. And I need to use the right board that is
on my device for it to compile properly. This display is using ESP32 S3 chip and this
is a little bit complicated. There is still two pages of those and I have
to choose the right one. And it has 16M of flash so if I know that
then this is limited to a couple of devices. So hopefully it will be one of those. And I can use this to copy the board ID from
here actually. So I didn't know which one it is because the
actually electro display isn't there. So I contacted the manufacturer and they told
me that the ESP32 S3 box is the one which is quite similar to that. So this is what I have used and I have configured
that in here. And then optionally you can select different
frameworks either Arduino or ESP-IDF. For the S3 it is recommended to use the ESP-IDF. So this is the definition of the minimum firmware
that will build for this device and connect to Wi-Fi, connect to Home Assistant. I'm not gonna configure the display or any
of the other components on the device because once I get this working I can keep adding
piece by piece and if something doesn't work I can focus on that, get it working and then
move on to the next part. So I'll start with that. I will connect the display with the USB-C
to my computer and then I'm going to hold the reset button, push the boot button and
then release the reset button still keeping the boot button and then I'm going to release
the boot button. So now the device is in the upload mode and
I can do install and it's plugged into this computer and I will select this port in here
and I will say connect and then it tells me that the configuration doesn't match the platform
of the connected device. So that means that the board we have chosen
is not the correct one. So what we'll need to do is we need to check
some of those other boxes. I know it's about 16M flash so I will try
some of the others and see if some of them work. And I'm not gonna bother you with that so
I'll post it here and I'll come back when I tried them all. So none of them work so this is gonna change
our plans slightly so I'm not going to configure it in the ESP home and I will see if I can
get the device working through the Arduino. Okay so I did not expect that. On the ESP home website they say that the
ESP32 S3 is experimental so I suppose it will be fixed over the time. But you know what I'm actually starting to
look forward to refresh my memory with Arduino. They have a quite nice demos and the Squareline
Studio seems to generate the Arduino project source files anyhow. So I will hopefully just generate it and then
it'll be just matter of adding Wi-Fi and MQTT and putting some logic behind. So let's see. Right, and so what I'm gonna do is I'm gonna
start with the Squareline Studio. So this is a application that is free for
use. There is a trial version and when I saw it
I thought like well then this is the end. But if you look at the website actually then
in the licensees they basically have a personal license for free. So for our creators this is all we need. There is a limitation of a number of screens
but five is enough. A number of widgets I think 50 is plenty as
well. Components this is something that will be
a little bit limiting so I'll probably try to design without using components and it's
not for commercially use. But I think it'll do. So let's get back to the Squareline. So I still have a trial so I will continue
with that. And I have created this page in here so I'm
not gonna bother you with designing it from scratch. There is plenty of tutorials for Squareline. If you're interested you can look at those. But essentially you have different widgets
that you can put on the screen. The way it works is you would like to build
a hierarchy. So you would like to start with a screen. So I have two screens. There is one for settings which I haven't
finished yet and then there is one with a control panel. And on the screen I put different panels and
then I put different widgets so buttons and text on those panels. And as you can see the label is actually a
child of this button as well. So the beauty of that is if I would move this
all the content within the panel moves with it. And the other beautiful thing about it is
it actually has this smart positioning. It looks almost like a CSS. It's using a flex layout and all of those
buttons in there they actually align to top mid. So the only thing is I specified they are
17% high and 100% white and that's all I need to do. And then I also defined custom background
color for the default state and then for the checked state. So you can change specific values in those
style sheets. And then the other thing that I have done
is there is a font manager. So I've added a couple of fonts in here that
I'm using on the screen. And then also I have a couple of PNG files
that I use for those buttons as well because I think they are easier to read than text. So this is the screen I have designed just
briefly. Let me explain what I have in here. The purpose of the screen is to be in the
garage so I can have on the right side overview what's going on currently with the solar plant,
how much power I'm producing by the plant, am I importing or exporting from the battery,
same thing with the grid, what is the consumption of the house and what is the state of charge
of the house and of the battery. So it's like information just for me, I don't
have to look it up anywhere. And then the main part is those buttons. So if you have watched my video for power
management you know that for the cars I work with different smart modes so it knows how
to charge the car. And so I have those modes fast, off, available
and scheduled. I'm not going to explain them here if you
want to know what they are. Just watch the previous video, I think it's
really great. And then there is the auto when those modes
are automatically selected by the Home Assistant based on number of things, based on day of
a week, time of a day and so on. So I have a choice, either say it's auto and
then the Home Assistant will decide automatically how to charge the car and what to do with
the house or I can pick manually one of those modes and then it will be in there. So for example if I come home and I'd like
to charge the car now, maximum power, I don't care about the automations, I will just say
fast and it will start charging the car immediately. And then I have this box on the bottom showing
the currently selected mode by the automation. So this is the screen I have created, nothing
fancy, nothing too graphic but hey, it works for me, it's functional. So all I need to do now is to export it to
the Arduino project. So first I'm going to export it and say create
template project. So I'm going to do it, it's going to ask me
to select the directory where I'd like to put it. So I select directory, I'll call it generated,
so it's going to be the generated file and I say open and export it there, export succeeded. So I do this thing once and then I will export
the UI files and this is done as well. And I need to do that anytime I change anything
on the layout and I'd like to update the project, I will then just say export the UI files and
it will refresh all of those source code. And what it does is it will create this square
line project within the directory we have selected and then it's going to put there
the libraries we will need. There's a readme file which is going to tell
you what you need to do. And then there is the UI directory with all
the code it has generated. So if you look at that, there is the project
file, the ino which is the basic Arduino file with the setup and with the loop. And then there is the UI.c file where you
have all of those widgets created and what it does is it will actually generate a C code
which generates a lot of those components. So what we can actually do is we can open
this UI that I know in Arduino and we can upload it to the device right away and it
should load to the device even though it will just show the interface. The same way as if I would push this play
button here, so there is this sort of demo trial, so I can do that. As you see it doesn't do anything. If I push the buttons, it doesn't do anything. There is no logic, there is no values in here
because it doesn't communicate obviously with the Home Assistant. So this is something I need to add in here. And then some of the other files you see it
generates for the fonts. For each font it will generate this kind of
source code file and the same thing for the images. So for the images it will generate the source
code. I don't need to do anything with those. I'll just keep them in there. So looking at that, if I were to try this
with the ESP home, it will be I guess quite a lot of work. So it's probably a good thing that we went
the Arduino route. It looks like the project is almost ready
for deployment. So the only thing we need to do is we need
to add the communication with the Home Assistant and we need to add some of the logic for the
buttons to switch. So what I'm going to do is I'm going to copy
all of that. It was a separate directory. I'd like to keep this one the way it is and
I will copy it to a directory called Display Garage. So all of those files I copied in here and
I have added parts of it for the communication with the Home Assistant. So let me show you. So I'll open it in the Arduino IDE and each
Arduino code is at least two functions. One of them is set up and what I've done here
is I have just added the configuration of the Wi-Fi with the SSID and password that
I'm connecting, waiting for it to connect it. And the second function is the loop that defines
what the microcontroller does once it is initiated. Then the communication. Usually I thought I'm going to use MQTT. Arduino has this quite popular library Pubsub
which I thought I'm going to use. But then I realized that in Home Assistant
for the buttons I use input selects, for all of the power flows I use the integration with
Goodwe or Skoda Car, none of them use MQTT. I would have to have an automation to regularly
republish all the values to MQTT on any value change. And I thought that must be a better way. So what I decided to do, I decided to use
the Home Assistant native REST API and I wrote two functions. One is to get entity state and set entity
state. They both use the Arduino standard HTTP client
library. Basically what it does, there is this IP address
of the Home Assistant, it's locally on my network so I can use that. And then the URL is api/states and after that
there is the entity ID of the sensor I want. And then what I need to do is I need to add
the authorization header. So there is the BER token which is one of
those long lift access tokens you can actually generate in the Home Assistant. So you will just generate one here and you
create token, it will generate piece of code. Something like that. And you just take it and you copy it and then
you use it in your code. So I'm gonna delete this test one. And each application has a unique one. It will only show one so you have to remember
it somewhere. And if you lose it you can always generate
a new one. So for the display garage this is what I have
created in here and this is what I have stored somewhere in the secrets. And then all it does is it does HTTP get and
it will get the response and it will parse it because it will get it in the JSON and
it will get the state value and it will return it. Then I have a similar one I have created for
the set state and that one is using actually a put method of the API other than that it's
the same. So I get the state as a parameter of the function,
I serialize it in JSON and I post it. So these are the two basic functions. They don't do much error handling but I suppose
it'll do for me. So this is what I use for the communication. And then I have changed the UI code. So first I have created a function that is
setting the button states and what it does is it will go through all the buttons. So there are five buttons. And when the button corresponds to the mode
I'd like to set it to then I will change the state of the button to a checked state. And if it's not then I will actually clear
the state state check. So it will be unchecked. And the other thing I do is I will then call
this function we just saw to send the new state to Home Assistant over the API. So that's that. And then I have another one which is actually
going through all the fields with all the values. And so it's getting all the states for all
the photovoltaic power and battery state of charge and whatnot. And it's setting the text label with the format. For the power I'm adding W like watts and
for the percentages I'm adding percentage. So this is that. And then I have this piece of code here. And what I decided I actually decided to have
a different picture for when the battery is charging or discharging and when I'm importing
and exporting the energy. Maybe you saw it in here. So this is the button for exporting energy
when the energy flows to the grid. And this is the button for importing energy. So the energy comes from the grid. And I like to have a green color for export
because this is good for me and for import it's red. And for the battery if I charge it I set it
green and if I discharge it I have a neutral white color. So that's that. And then I'm going through the button states. And so I'm here checking whether the mode
has changed. And if it did I'm going to update the buttons
as well. And then there is this button even handler
that is called when a button on a display is pressed and what it does is it'll set the
corresponding mode. And here is the control screen initialization. So this is pretty much the code that was generated
by the Squareline Studio. So I admit it's not as easy as ESPHome because
I had to remember how to program in C code again. I didn't do it for like five or six years. So I had to get back to it again fighting
with it a little bit. Took me a day or so. But then once you get into it it's actually
quite nice and very flexible. You can do pretty much anything with it. So now that I have the code done I can just
hit upload. I will compile the code and upload it to the
device. I have selected that the device is connected
on this USB port. So what I need to do is put it in the boot
mode again and it will connect to the device and it will upload it. So now it's saying it's uploaded and I can
reset it. So I'll hit the reset button and look at the
display. And it shows the display and it shows the
values from the Home Assistant. And if I push any of the buttons it will actually
pretty nicely react and change the mode and do exactly what I wanted. Now let me make a disclaimer here. If you think that the way it works is that
I just write the code the way I have explained and hit upload button and it's done and it
works. Well that's not the case. I spent about three days doing it. But if I made a 3 days long video, you would
not watch it, would you? Initially it took me about one day for it
to load to the screen. There was lots of trial and error. You know embedded programming is not as simple
as writing automations in Home Assistant. If you have anything wrong it's very difficult
to debug to find out where is the problem. Most cases it will just reboot and so you
would have to sort of debug it in putting different messages in different parts of code
trying to figure out where it crashed and why unless you have a hardware debugger which
I think most of us don't. But I think the Squareline Studio helps a
lot and I progressed in the steps. So first I wanted to get the screen to show
without any controls and then I was gradually adding different functionalities. So first the button logic and then at the
end I added the communication with Home Assistant. I tried with the MQTT first but at the end
it was getting a little bit too heavy and a little bit too complicated so I actually
scrubbed the MQTT and I went for the API communication which is what I use. Okay so it turned out quite nicely at the
end. What do you think? So now I'd like to mount it to the wall. The display has quite solid acrylic body with
two screws in the back. So my plan is to 3D print very simple French
cleat that I will screw to the back of the display and then slot it in a frame that I
will screw on the wall to create thin plate under the display. On their website they have all the dimensions
I need. Display is 106x66 mm and it has two M3 threads
40 mm apart. So that should be simple. I'm gonna use Blender to do that. Yes it is an overkill but I know it and I'm
not gonna learn new program just to do this simple plate. So let's quickly do that. This is not a Blender tutorial so I'm not
gonna walk you through the whole thing but just a quick time lapse. I'm gonna start from a basic cube, I'm gonna
give it the dimensions based on the website. Then I'm gonna use add-on to add the bolts
and I'm gonna choose M3, I'm going to configure the head to be counter sink and then I'm gonna
configure shank that I'm gonna use as a cutter. Then I'm gonna duplicate it because the mount
is gonna have two parts for the cleat and for the piece mounting the wall and each will
need its holes. And I'll rotate the second one so it's facing
the wall. I'm gonna focus on the cleat. It's gonna be symmetrical so I'm gonna delete
the right half and use the mirror modifier so I don't have to do everything twice. And then I'm gonna resize it based on the
bolt position from both sides, from the side and from the bottom and then make the sides
in 45 degrees angle to create the cleat. And then I'm gonna duplicate it because I'm
gonna use the second part as a cutter for the second part. And back to the cleat I'm gonna use boolean
operations to cut the holes for the bolts. Now back to the piece mounting the wall I'm
going to use boolean again to create holes for the bolts. Then I'm gonna use mirror modifier and then
I'm going to use the copy of the cleat to cut the hole in this piece. So I have two parts, one is the actual cleat
and one is the mount that's gonna be attached to the wall. Then I'm gonna use solidify to create like
a 0.2 mm gap between the two pieces so they can actually slide in. And then I'm gonna use also cutters from the
top and the bottom to make sure there is like a gap between the display and the plate and
as well between the wall and the cleat. Right, so now it's done so let's export it
to an STL file. Then I can go to the slicer, organize the
pieces on the bed, generate the gcode for the 3D printer and we can print. Once mounted I screwed the cleat to the display
and let's test if the other part is gonna slide in and it does very nicely, it creates
a seamless frame. So let's put it on the wall. I like to put it next to the charger cable
and conveniently I have a UPS there for the Home Assistant with a USB socket. So I'm gonna just put it on the wall, mark
the position, drill the holes, install the anchors, mount the frame and then just slide
the display in and it fits there very nicely. Alright so this was a bit more difficult than
I expected. In the beginning I even thought I would give
up. But after starting some simple demos I had
to relearn Arduino, I had to learn how this LGVL works but after that it was actually
quite simple. In fact I started liking it quite a lot. I might even do some more. Now would I recommend this to you? Well it depends. If you're familiar with Arduino or MicroPython
then yes, it's actually quite fun. The library is quite similar to the web style
sheets and you have a full control of the display from the microcontroller. Unlike the Nextion where you have to do the
HMI design in the PC editor and then you upload it to display and then from the microcontroller
you just set the object properties. Here you can do much more. But if you do not know Arduino then I wouldn't
recommend that. For the same reason I'm not even sharing the
source code because if you don't know Arduino then it will be useless and if you do then
you don't need this. Even if you're willing to learn I'd start
with some simple project first and then if you like it you might take it from there. Alright so that's been it. Let me know if you like it and if you don't
I'm sure you will let me know as well. And I'll see you in the next one. Bye!
