Hi! I created this awesome mini-sensor display that can show data from all the entities in Home Assistant. This looks great on your desk to quickly monitor your sensors in Home Assistant, or to view the weather conditions, bitcoin status, latest news, graphs, and so on and so on. I will show you how you can create this yourself in this tutorial. Let’s do this!

---

⭐⭐⭐ NOTE: ⭐⭐⭐

This article accompanies a YouTube video. I wrote it for people who would rather read than watch a video. To keep doing this, I would like to ask you to also check out the video, leave a comment under the video, give the video a thumbs up, and subscribe to my YouTube channel. This means that the video is offered more often to new visitors so that they also stay informed of the latest Home Assistant tutorials.

Thank you for your support!

Ed

Click here to watch the video

Introduction

I always wanted to have a mini display on my desk to show some sensor values of Home Assistant. I looked into the LaMetric time, but this thing is way too overpriced for me, so I searched for something else until I found the LiLyGo TTGO Esp board which was exactly what I was looking for! This tiny display is super awesome because it’s not only a display but also an ESP32, so you can hook it up to ESPHome and even attach various sensors to it. And for about 20 bucks, it wasn’t expensive either! The great thing is that you can program it with ESPHome and display just about any information you want on it. I will explain the whole process and how you can show your own sensor information on this beautiful multicolor display.

But, before we start, do me a favor and give this video a thumbs up and subscribe to my channel if you didn’t already.

Show the board of the mini sensor display

This is the LILIGO TTGO Display board. It looks a lot like an ESP32 board and has a display attached to it. Next to the reset button, there are also two buttons here that you can program to interact with the display. And it has a USB-C connection. You can also attach a LIPO battery to this board using the connector on the back of the board. I tested it and it works, but I don’t think the battery power will last long because of the fact that the board has a constant WiFi connection. When you connect the board to the USB-C cable, you cannot do a lot with it at the start. First, you have to upload firmware to it using ESPHome. I developed an ESPHome file in the past couple of weeks that already shows a lot of information and I will explain how it exactly works. You can alter that code after that so that it will show your own sensors.

Install ESPHome

Let’s install ESPHome first. For that,

• Go to Settings.
• Go to Add-ons.
• Click Add-On store.
• Search for ESPHome.
• Click ESPHome.
• and click Install. Now, wait until ESPHome is installed.
• When the installation is finished, turn on all the toggles if you like.
• and click Start.

Adding the TTGO Display to ESPHome

ESPHome is now installed. Let’s add our TTGO Display to ESPHome next.

• Within ESPHome, click on New Device.
• Now you might get this screen if you connect to your local Home Assistant instance using HTTP. In my case, I connect through HTTP locally, so I will choose the option ESPHOME WEB right here to connect my TTGO Display to ESPHome.
• Connect your TTGO Display using a USB-C cable to your computer and click CONNECT.
• Choose the correct USB port that your TTGO Display is connected to and click connect.
• Now click PREPARE FOR FIRST USE.
• Click Install.
• The initial firmware will now be installed on your TTGO Display.
• Click Close.
• Now click CONNECT TO WI-FI and enter your Wi-Fi credentials.
• Click CONNECT.
• Click CLOSE.
• Go back to the ESPHome overview.
• Click ADOPT on the Display device card.
• and enter your Wi-Fi credentials again.
• Click ADOPT.
• Change the name and click Install.
• After installation is finished, go to Settings
• Go to Devices and Services
• and click CONFIGURE on the discovered ESP Home device
• Click Submit
• Click Finish

Upload Images and Fonts

Your TTGO Display is now set up to work with ESPHome and Home Assistant. It will not display anything yet because we did not add any code yet to display something on the screen. This is the next step. I am going to display several things on the display to show what you can do with it. It’s possible to show images, and animations and use custom fonts on this display. For images and animations, we need to copy the images to a folder within the ESPHome folder on our Home Assistant server. The same goes for fonts. You can use either google fonts or uploaded fonts. I will use both just to show you what the possibilities are. Beware that this board has not much memory space and using a lot of images and animations may lead to memory issues.

Install Studio Code Server

For uploading images it is useful to use Studio Code Server. To install Studio Code Server, go to Settings, Add-Ons, and click on Add-On Store.

• Search for Studio Code Server.
• Click Studio Code Server and click INSTALL.
• Turn on all the toggles if you like and click START.
• Now click Studio Code Server in the left sidebar.

We are now going to upload the images and fonts. You can download the images and fonts that I’ve created via the link in the description below.

What you see here are all the files on your Home Assistant server. There’s one folder called esphome. We are going to create two subfolders within this folder. One for images and one for fonts. Do so by clicking on the new folder icon while you have the esphome folder selected.

Now drag and drop the images from your explorer into the images folder. And drag and drop the fonts folder called bitcoin into the fonts folder. The bitcoin folder contains the TrueType font that is used for the bitcoin title on our display later.

Add the mini sensor display code to ESPHome

Our images and fonts are now ready to use. let’s add the code for the display to ESPHome now!

• Open ESPHome.
• Click on Edit on the Display Card.
• Now replace all the code with the code that I’ve prepared for you.

You can type the code from the screen, but you can also download the code via the link in the description below. This saves you a lot of time and frustration and you support me so that I can keep making these videos for you!

Explaining the code for the mini sensor display

Now, let me explain the code to you so that you understand what this is actually doing!

I start with some general settings like the name of the display, what kind of development board is used, and what the WiFi credentials are. These are stored in a file called secrets.yaml which can be found in the ESPHome folder as well. But, never mind about that. This file is automatically filled with the credentials during the installation of the display. There are also some pin definitions, but the fun part starts here at the globals definitions and the rest of the code below that.

Define Global variables

You can toggle the display to rotate the values or just show one value by long pressing the top button on the board. To achieve this I developed some code that responds to a variable called rotate. I defined this variable in the globals: section. It has the id: rotate and the initial value is true, so that means that my display will start rotating pages on the display when the display starts.

Define time

Then I define a time sensor. This is needed to show the time on the display later.

Define the buttons on the board

Next, I am defining how the two buttons on the board should respond when I click them. I start with the bottom button here. First I define what should happen if the button gets pressed for a short period of time. If the button gets released within 1000 milliseconds, then the previous page will be shown on the display.

Then I decide what a long press of the bottom button should do. When I keep pressing the bottom button for 1001 to 5000ms, then I will switch the backlight on or off. I will explain how to define the backlight switch in a minute.

I do the same for the top button. A short press of the top button results in showing the next page on the display. A long press of the button toggles the global variable called rotate which I just explained to be true or false. I will explain later in the code how I will make sure that the pages rotate or not. This action only changes the value of the variable and code later in this file responds to the value of this variable.

Dim the backlight

In this part of the file I’ve added some code that should allow Home Assistant to dim the backlight of the display according to the manual, but unfortunately, step-by-step dimming does not work for this display. I did a lot of investigation on this, but just couldn’t get it to work. I’m not totally sure, but this seems to be a bug in the implementation of the display component for this specific display. Please let me know in the comments if you got it to work.

Toggle the backlight

Then I define the switch for the backlight. This is a reserved pin on the board which is called GPIO4.

Define the numeric sensors

Right here I am defining all the numeric sensors that I want to show on the display. They all fall under the home assistant platform. Each sensor references the entity_id in Home Assistant and has its own id which I refer to later in the code.

The sensors that I am going to show on the display are:

• My YouTube Subscribers.
• The total views that my videos got. I used a REST sensor integration to retrieve the YouTube data. This is out of the scope of this tutorial, but you can read about it in the REST integration manual of Home Assistant.
• The netto power that I am currently using or giving back to the grid. I created a custom sensor to calculate the netto power, but you can use your own power entity as well.
• The temperature in my office.
• The humidity in my office.
• The atmospheric pressure in my office.
• The lux of my light sensor.
• The outside temperature.
• The wind speed.
• and the current value of one bitcoin. I used a HACS integration to retrieve that value.

You can replace these sensors with your own sensors by changing the entity_id or adding new sensors that are available in your own setup. Each sensor must have a unique id so that you can refer to this sensor later in the code.

Define the text sensors

Next to numeric sensors, you might have sensors that return a text value. In my case, I created this text_sensor that returns the weather condition like cloudy, rainy, etcetera. I’ve added a filter to this sensor which converts the state of the sensor to uppercase. This is because I want to show the weather condition in uppercase on my display. Text sensors also have their own unique id.

Define the fonts

I want to show the texts on my display in specific fonts. I can use Google fonts or TrueType fonts for that. So I defined some fonts here with different sizes. I used Google fonts four times for various font sizes and weights. And, I defined one TrueType font for the bitcoin text because I wanted to use the exact bitcoin font for it. The bitcoin font points to the font that we’ve uploaded to the fonts folder on our Home Assistant server. Each font has its own id, so we can refer to this font later in the code.

Define the Colors

Next to fonts, I defined some colors that I want to use on my display. The colors are defined in RGB percentages and have their own unique id.

Define the images

I also want to show some images on my display. Beware that this display board has limited memory, so you cannot add a lot of images here. Each image points to one of the images that we’ve just uploaded to our Home Assistant server and has its own unique id as well.

Define the animations

It’s also possible to show animations on the screen which can be done by pointing to an animated gif. I created one animated gif for the weather page here so that we will have a nice animated weather icon on our weather page on the display.

Define the graphs

And we’re not there yet! You can even show graphs on the display. So, I defined graphs for temperature, humidity, pressure, and the light sensor here. As you can see, I also use the color definitions I defined earlier to make sure the chart is displayed in the color of my choice. It’s even possible to show multiple lines in one graph. You can do that by defining traces within the graph. I made a simple example here where I only show one sensor, but you can add other sensors as well.

Define QR Code

This last definition might not be feasible for everyone, but it is also possible to generate a QR code for a specific website so that people can scan this code with their phone to get certain information. I can imagine that this might be handy for B&Bs if you want to give information to guests about the WiFi code for example.

The main mini sensor display code

Now we’ve arrived at the main display code. We start with some general information that is needed for the display. I’ve set the update interval to 1 second because I want to show seconds on the clock on the time page. You can change this interval if you like of course. Please be aware that the animations also animate on this interval. It is possible to change the update interval on animations as well. You can read about it in the ESPHome Display manual. The link is in the description below.

Show the intro page

Next, I am defining all the pages that I want to show. I start with the intro page which shows my logo and the Smart Home Junkie text. If I want to show an image, I start with the it.image function and then specify the x and y position on the screen and the id of the image. Every function starts with the x and y position and after that what should be shown at that position. Next to that, I show three lines of text in WHITE. The function to show a text line is it.printf. I start with the x and y position, then point to the font id and color that I want to use and finish with the text that I want to show.

Show the time page

The next page shows the date and time. In the first line, I show the date using the latoblack font. The second line shows the time in the latoblackheading font. You see that I’ve used different x and y positions for both lines.

Show YouTube Subscribers and views

After the time page, I show two other pages, namely the YouTube Subscribers and views. Here I introduce an if statement that checks if the subscribers and views sensor contains a value. If so, then the value will be shown in White, otherwise, I will just show “Loading…”. The reason for this is, that when you power on the display, it takes some time for the display to connect to WiFi and retrieve the data from Home Assistant for the first time. I wanted to show a nice text instead of some error. Note that I retrieve the state of a sensor by pointing to the sensor id that I defined before, followed by dot state.
The percentage sign will be filled with the value of the sensor that I call at the end of the line. The dot 1f means that I round the value to 1 decimal for the subscribers. The views value is rounded to 0 decimals using the 0f format here.

Show Power and Bitcoin

The power and bitcoin pages use the same techniques I explained earlier, so I think you get how these two work.

Show Graphs

The code for showing the graphs looks a little bit different, but basically, it’s again defining the x and y position and then pointing to the graph id. You can show a graph using the it.graph function.

Show Weather

The weather page seems to look a bit complicated, but it’s actually not that bad. I start by showing the animation using these two lines. They make sure that the animation animates.

The problem with weather conditions is that the condition names are sometimes two words and sometimes one word. I wanted to show the two-word condition names on two lines and the one-word condition names on one line. I also wanted to use a smaller font for one-word condition names that were too long to show in the latoblack font. So, I created an if statement that checks what the condition state is, and depending on that I show the condition on one line or two lines, and what font I should use.

Show QR Code

And the last page shows the QR code using the function it.qr_code. The number 5 at the end is the zoom factor for the QR code.

Make the pages rotate

The last piece of code on this page is needed to rotate the pages. What I do here is that I defined an interval of 5 seconds. Every 5 seconds the display will check if the value of the rotate variable that I defined at the beginning of this code is true. If so, the next page is shown.

Installing the code

Now that I’ve explained how the code works, let’s install the code on the display.

• For this, click on SAVE.
• And click on INSTALL.
• Your display should be available through WiFi because we previously installed the initial firmware. So, select Wirelessly in this dialog box.
• The code will now be flashed to your display.
• If everything worked well, your display should boot up and show all the pages that we’ve defined in the code.

Again, you can type the code from the screen, but you can also download the code via the link in the description below. Creating this code took me a lot of hours, so this saves you a lot of time and frustration and you support me so that I can keep making these videos!

Note: if you just copied and pasted my code, it might be that some pages show no values because your Home Assistant entities might be different than mine. Make sure you only use entities in the code that are known to your specific Home Assistant setup.

Print a casing

The display is now working. To make it perfect I 3D printed this case for it. It now looks perfect on my desk! You will find the link to the STL for this case in the description below.

During the development of this code, it sometimes took some time for the display to connect to Wi-Fi. Don’t worry, just be patient. It will eventually connect to Wi-Fi.

I was able to create this Home Assistant and ESPHome tutorial thanks to these wonderful people who are my sponsors. I am completely dependent on sponsors so that I can pay for my groceries and make these videos for you. Please consider sponsoring me too if you find the work I do valuable. This ensures that I can continue to make these video tutorials for you.
And don’t forget to give this video a thumbs up, subscribe to my channel, and hit the notification bell.

I’ll see you in my next video.

Bye bye.