We have interfaced a lot of sensors over the last few videos and at the moment you can
obtain their status using a browser or the home assistant app. However, you might also
want to display this in the hallway for instance and for that, you could use an epaper display
like this one.
We have taken a closer look at the display to learn how it works and we have also used
it with an Arduino in a previous video so do watch that one if you haven’t already.
In this video, we will first learn how to interface it with ESPHome to display some
text. We will then use MQTT and nodeRED to display sensor status messages along with
the temperature from another node in the home.
The display itself is a 2.9” e-paper display that is manufactured by waveshare. The box
contains the cable along with these connectors which means that we can plug it directly into
the Wemos D1 mini board which simplifies the setup for us.
Open up ESPHome and start by creating a new node. We’ve done this before so give it
a name, select the correct board, add the WiFi credentials and click done. Then, navigate
to the ESPHome add-on and restart it. Give it a minute to complete, open up the UI and
use the node option to compile the binary file that we need to load onto the board.
Download the file to your computer. We now need to use the ESPHome flasher tool to load
this file so download the tool if you haven’t already. Then, plug in your board, select
the correct COM port, binary file and hit the flash button. It will take a minute to
complete so give it some time. The board will then automatically connect to your WiFi network
and its status will change to online. Navigate to configuration, integrations and hit the
configure button to add the node to your setup.
Now that the node is up and running, we need to configure the display. There is an example
page that you can use to learn more about interfacing it, and it also contains an example
configuration that we can use. Start by copying this configuration file and then open up ESPHome
again. Click the EDIT button to open up the node configuration and then paste the example
here.
These are the default pin configurations that are being used, but I would recommend changing
D3 to D6 and D4 to D7 to give us something like this. The reason for this is because
pins D3 & D4 can prevent the board from booting if they are pulled LOW. You will notice that
we are printing the string hello world and that we also need to define a font.
One benefit of this setup is that we can use any font that we like and all we need to do
is provide the font file.
As an example, head over to Google fonts, select a font and download the file like so.
Then, extract it to obtain the actual files and make a note of the file name.
Then, type in the following lines or copy them from the example template that I will
link in the description. Be sure to specify the correct font name, this will now be associated
with the ID seen here. Finally, update the print statement to use this ID.
That’s all we need to do here, but you will still get an error because we have not uploaded
the font file. So save this configuration and then close the file. The easiest way for
us to upload the font file is by using the configurator add-on that can be installed
from the add-on store. I believe it is now called File Editor as the team have recently
started rebranding home assistant. Either way, this is what it looks like. Click this
icon to view the files and folders, and then navigate to esphome to view all the ESPHome
files. These are all the individual node configuration files. Click this button here to upload a
new file, select the font file that you plan on using and then click OK to upload it. That’s
all you need to do.
Now, we are ready to upload the configuration, so open up ESPHome, click the EDIT button
to make sure there are no errors and then upload the configuration to the node. Once
uploaded, you will see this error which states that the board cannot communicate with the
display and that is because we haven’t connected it.
Disconnect the board and use this reference wiring diagram to connect the display. These
are the same pins that we assigned in the node configuration file. Once you power it
back ON, you will see the hello world text being displayed which tells you that everything
is working as it should.
Every 30 seconds, you will see the screen refresh itself. This is something that you
need to do with epaper displays so that all the previous text is completely erased. You
will also notice that the display is in the vertical mode so let’s update the configuration
so that the text is displayed in the horizontal position.
Edit the file and add the rotation property shown here. This will rotate the display for
us. While we are at it, I will update the refresh time to 60 seconds and then also display
a new string like so. But since we do not want them to overlap, I will change the XY
coordinates to move it 10 pixels to the right, and 50 pixels below. Now, if we upload this,
you will see the text being displayed as intended.
This is how you can display static text. You can also read the online documentation to
learn more about the different possibilities including drawing shapes, displaying time,
images, formatting the text and so on. All of this is great, but the real benefit of
a setup like this is that we can use something called MQTT to dynamically change the contents
of the display. Check this video out if you are not familiar with MQTT as we go into details
and also use it to send messages between different boards.
At a very basic level we need two types of devices, one is a broker and the other are
clients. The clients send messages to the broker, the broker takes these messages and
then sends them out to the clients who want to receive them. You can think of this entire
thing as a postal system, where the broker acts like a post-office and the clients are
nothing but the senders and receivers. There is something called a topic which is similar
to the postal address.
The video will give you a better idea of everything and it will show you how to setup the Mosquito
MQTT broker that we will be using.
This display is going to be a client so we need to update the configuration for it. There
is an MQTT client component that we will be using. So copy the example configuration entry,
open up the node configuration and paste it there. Update the broker IP address which
should be the same IP address as home assistant if you followed along with the video. Update
the username and password to suit your setup and mine is mqtt for both.
This will allow the node to connect to the broker. Next, we need to subscribe to a topic
and then display the messages that are received on that topic. ESPHome has an MQTT subscribe
text sensor component that we can use. Copy the example configuration and paste it within
the node configuration. You can update the ID and topic if you like, but I will use the
default values for now. In order to display the text, go back to the component page and
then copy this line here. Paste it in the node configuration and update the text position
like so. Be sure to update the font that will be used by specifying the font ID. That’s
all you need to do, hit the upload button and wait for it to complete. Once done, your
display will look something like this.
Now, navigate to the developer tools section and then the MQTT tab to give you something
like this. We can use this section to send test messages to the display. Specify the
same topic that we used earlier and then type in some text. Hit the publish button and the
payload will appear on the display.
This may look very trivial but you can extend this principle to subscribe to multiple topics
which means that you can display sensor data from different nodes around your home if they
are also configured to send data over MQTT. Most of the nodes that we have created communicate
directly with ESPHome and the easiest way to send their status to the display is by
using nodeRED. The first thing I’m going to do is use a manual trigger or switch to
send custom text to the display.
For that we will use the input Boolean integration. We have done this previously, but if you haven’t
watched that video then copy the configuration shown here. Then open up configurator, select
the configuration.yaml file, paste it like so and then save the file. All we need to
do now, is add it to the dashboard. Open it up, select the configure option and then add
an entity. Select the entities option, start typing the word input and select the option
that shows up. Then click save. Once
done, exit the configuration. We can use this switch to trigger some messages.
Open up nodeRED and create a new flow. First, we need to read the input_boolean status so
drag the event state node. Double click it to update the settings. Give it a name, select
the entity ID which should match the input, change the output type to boolean and then
click DONE. The output from this node is going to be the switch status and we can directly
send it to the display. Type in mqtt and then drag the mqtt_out node. Double click it to
update the settings. Since we have not configured an MQTT server, we first need to do that.
So click this icon, give the server a name, and enter the IP address of the broker. Head
over to the security tab and enter the credentials for the mosquito broker that we setup earlier.
Once done, click the Add button to go back to the mqtt out node settings. All we need
to do here is specify the topic to which we want to send the message. This will be the
same one that we used while configuring the display. You could optionally give the node
a name as well. You can then connect the two together and deploy the flow.
I am going to open another browser to access the dashboard so that we can view both the
flow as well as the input status. If I toggle the input, then you will see that the display
string gets updated to reflect it. Also, you can view the messages in the flow.
The Boolean input gives us a true or false output and this is sent to the display. But
what if we wanted to send a different string depending on the state of the input?
For that, we would need to use a switch node. Drag it in, delete the mqtt output node connection
and then connect the switch node to the event node. Update its settings and assign the first
output detect the true state and then add another output to detect the false state.
Click the done button to go back to the flow. The node will now have two outputs, one will
give us a signal when the input is true and the other when the input is false. In order
to create the custom text or payload, we need to use the function node. Drag two of these
into the flow. Double click the first one and type in the following. All we are doing
here is defining the payload and returning it. You can give this node a name. Similarly,
do the same for the other node but be sure to change the text string so that we can identify
the state. You can then wire these nodes up to the switch node and then wire their outputs
to the mqtt out node.
Here’s what’s going to happen. When the input is triggered, we will receive a true
or false value from it. The switch node will separate these values to give us two outputs.
Keep in mind that only one will be active at any given time. When the output is triggered,
the corresponding payload will be sent to the display. Deploy this and toggle the input.
You will see that the appropriate string is being sent to the display. Now, when we toggle
it back, the other string gets displayed which is exactly what we are looking for.
This is great as well, but what if we wanted to display a sensor value directly? That two
can be easily done with nodeRED.
I have this temperature sensor that’s currently active, so I will send its value to the display.
Start by editing the event node, use the temperature sensor entity and change the output type to
string. I will enable the output on connect option so that the display gets updated as
soon as the node connects. Without this, it will only get updated when the temperature
value changes. Then, delete the switch and function nodes as we do not need them. All
we need to do is directly connect the event node output to the mqtt out node. Now, if
we deploy the flow, you will see that the temperature gets displayed as intended. Its
value will keep updating as the temperature changes.
So that’s how you can make use of the epaper display in your home assistant setup. This
video only scratches the surface of what’s possible but it definitely looks like a good
idea to add one. I am not sure how I plan on using it yet but we will see how things
shape up. That’s it for this video. Don’t forget to like, share and subscribe if you
haven’t already. Thank you for watching and I will see you in the next one!