Creating a User Interface on a Guition Display with ESPHome and the LVGL Library

Recently, an updated version of ESPHome 2024.8.0 was released, which included the LVGL library version 8.4 for creating graphical interfaces for TFT screens. I had this one available displayand I decided to use the new possibilities to create a smart home control interface. My task was to fill an inexpensive display with the necessary functionality.

The list of tasks for implementation that I have planned:

• Display date and time

• Weather indications:

  • Temperature

  • Weather forecast for several days

  • Realistic weather icons

  • Icon animation

• Status indication (Wi-Fi signal level, thermostat status, etc.)

• Screen lock

• Output of sensor status from DIY device

• Widgets for control:

• Settings:

  • Change language (Russian/English)

  • Screen backlight level

  • Screen “sleep mode” time

  • Sound notification from sensors

From the entire list, it was not possible to implement the weather forecast for several days, ventilation, curtains and vacuum cleaner control. The reasons are as follows:

• Weather forecast significantly increases the size of the firmware and complicates the code.

• Control of ventilation, curtains and vacuum cleaner is not implemented due to the absence of these devices in the place where the Home Assistant server is located. It is not practical to create widgets without testing, so this is a matter of future updates.

Now more about the implementation and the shortcomings of the screen that I encountered:

Flaws:

• RGB565: The format only supports 65,536 colors, which makes gradients appear banded or “flat”. This results in loss of smooth transitions and visual artifacts.

• Alpha channel: ESPHome does not have full support. Images must have a background, which imposes design restrictions. Removing the background is possible, but this degrades the image quality.

• Vector graphics: There is a similar problem here – the icons look “laddered”. To create beautiful icons, I had to use glyphs and create my own font (for example, using the service IcoMoon).

• Feedback from Home Assistant Services: No full support. For example, you can run the “light.turn_on” service, but you won't be able to read data from weather.get_forecast without creating additional sensors.

Implementation:

Weather:

Displaying the weather as an animated image turned out to be cumbersome. There is no GIF support, so the animation was calculated manually. I created the images in Photoshop, and although it is a matter of taste, in my opinion, the result is not bad. However, the weather updates are infrequent (in my case, every half hour from Yandex), which reduces the relevance of the information. To improve the situation, you may have to write Python code to parse the data from the site and display it in Home Assistant.

Indicators:

There are 6 indicators at the top right: Wi-Fi signal level, connection to Home Assistant, thermostat and ventilation status, presence sensor and sensor sound. The indicators turn color if the status is active.

Screen Lock:

To enable screen lock, you need to hold the button on the lock icon for 5 seconds. The lock icon becomes colored, but sometimes it is not visible whether the lock has worked. Perhaps it is worth bringing the status to indicators.

Sensor readings:

Sensor readings from Home Assistant are simply displayed on the screen. In the future, I plan to make a choice of sensors from the list of entities and the ability to turn on/off widgets from the settings menu. According to the developers, at the moment it is technically possible, but not yet implemented. As an option, use a separate file for variables so that the user does not have to edit this in the main code.

Buttons:

• Thermostat: a thermostat based on a display relay is implemented. The current temperature is displayed on the arc, and the target temperature can be set using the +/- buttons or by swiping your finger along the arc. It is necessary to add hysteresis and its settings.

  

• Light: 3 sections are implemented. The first section is for setting the color temperature and brightness. The second and third sections are on/off buttons. In the future, I plan to give the user the ability to select the number of buttons and customize their names.

  

• Ventilation/curtains/vacuum cleaner: added as blank pages for future implementations for now.

Settings:

4 positions implemented:

1. Screen backlight brightness

2. Screen off time (sleep mode in seconds)

3. Sound notification from sensors when threshold values ​​are exceeded. Threshold values ​​are currently set in the code, but ideally I would like to put them in the settings.

4. Change language from English to Russian. All entries are changed “on the fly”, except for the inscription on the splash screen when turning on the screen.

What else would you like to implement?

• By the display itself: redesign the power section, removing the relay and 230V and replacing it with PoE. Possibly replace it with another screen with a resolution of 720×720. At the same time, I expect the release of ESP32-P4, which will be able to process video streams and connect the display via a high-speed interface.

• On the software side: do everything according to the “blueprint” principle, so that users could configure all parameters from the screen menu. But, as I said above, at the moment this is still basically impossible to implement until such a possibility is implemented.

That's all, thanks for your attention! If the topic is interesting, ask questions in the comments.

General discussion on forum home assistant

General discussion in discord

Link to project