SquareLine Studio + ESPHome integration... any idea?

ESPHome
1

Hi, I am playing with Lilygo T-Panel S3, version 480x480, dual MCU, RS-485 etc.

I can’t make it work with esphome and the ST7701s driver, but it works with Arduino and UI from Squareline (starting example), then connected to HA via MQTT and ArduinoOTA for wireless upgrade.
This is working and the quality of the UI experience with Squareline is awesome, imho.

It would be amazing to include Squareline’s exported UI src into esphome and spend way less effort in the integration with HA, sensors, etc.

Just in case anyone is aware how to do it, happy to test.

Screenshot 2025-02-02 at 02.21.32
Screenshot 2025-02-02 at 02.21.321818×902 108 KB

IMG_3019
IMG_30192876×2876 806 KB

2 Likes
2

That is a great idea. What output does square line provide? Ie if you have a square line project, is it json, or xml, or something else useful?

3

Hi @nickrout, Squareline exports a directory with standard c code with reference to an external lvgl library.
e.g. the whole /ui folder in this example is the export of Squareline.
In my project I’m coding with Visual Studio the main.cpp and the /ui folder is updated by Squareline whenever I export a new version of the UI. Then I need to update the code on visual studio in the callbacks from the UI.

I will try to load it into esphome as an external component, but I’m not familiar yet with components.

4

Hello, I’m trying to bring inspiration from the working example for arduino+squareline into a custom external component that should handle the display with the Arduino_GFX library and its own lvgl and touchlib.
But I’m stuck at trying to include the libraries in the right way.
I don’t have enough experience to get out of it, tried Cursor AI in many ways but can’t fix it.
Tried several ways in init and header, also including more recent version from GitHub repo, but finding conflicts among versions.
The original project is working just with the local libraries.
Here’s my repo in progress, in case you or anyone want to have a look: https://github.com/umbex/tpanel.git

1 Like
5

Hi there,

I am interested in this idea, will follow this thread. I purchased a Waveshare esp32-s3 touch 7 inch (ESP32-S3 7inch Capacitive Touch Display Development Board, ESP32 With Display, 800×480, 5-point Touch, 32-bit LX7 Dual-core Processor, Supports WiFi & Bluetooth | ESP32-S3-Touch-LCD-7) just to give myself a project. Trying out the integration via esphome and using the lvgl framework. Which is all fine and working. I stumbled on the square line studio software to make life (and gui) a bit better.

I think your idea rocks if things can go that route :+1:t2:

6

Same here! New to lvgl and squareline studio and esphome too but I’m trying to get into it! i have the same waveshare display! I tried to connect one single button as test without success. Will follow too!

7

I just bought the ‘B’ Version of this screen and I am looking to do the same thing! I am learning about Squareline as we speak and hoping to get the same outcome. Let me know how I can help😎

8

How were you able to get it running with ESPHome, I’m trying to figure out my config

9

Hi, I haven’t figure out how to make it work with esphome yet.

For now I’ve flashed the squareline + arduino sample project at the link you see in my first message and from there I created my version that talks via mqtt to HA.

I’ll find some time to either

  • try again with esphome, display component and lvgl
  • try esphome with external component to drive the display and import UI from squareline. Not sure I can do it by myself.
10

lvgl is likely very low level compared to Square Line Studio (from what I read about it). Is the first one to just figure out how to drive the display with LVGL?

For the second one, what are you thinking is the flow? What do you need/want from esphome?

11

It would be better to use something like this.

It can export the LVGL to and xml based file. Then all we would need is an XML to native ESPHome LVGL converter. ESPHome already has great support for LVGL. Why reinvent the wheel?

12

Squarline Studio files are JSON, and look like they could probably be converted to ESPHome compatible YAML. No idea how much work that would be.

13

Hi @neel-m

first option is just about this specific device, which I still can’t make it work with esphome’s display component, even without lvgl. Can’t figure out exactly how to adapt my working Arduino’s pinout and init sequence in esphome.

Second option might be implemented in a few ways, I think:

  • create a python script that converts (manually) Squareline’s output to lvgl code compatible with esphome and then include it dynamically in main esphome code
  • Create a esphome external component to use Squareline’s json (thanks @clydebarrow )
  • Create an external component to include Squareline’s export in c/c++ code, this way we need to handle callbacks

Glad to hear any other idea

1 Like
14

I’d love a simpler way of editing LVGL! I’m a Power Apps Developer and considered building a Code compiler with Power Apps, but I hesitate since I know there are so many better options. GUI editor would be great but I’d settle for a simply code compiler at the moment that could be expanded upon later. Here is my post: GUITION 4" 480x480 ESP32-S3-4848S040 Smart Display with LVGL - #517 by Redspray00

15

I’ve started working on a Python script that parses SquareLine’s JSON project and generates an ESPHome YAML snippet. There’s still a lot to do, but a lot is already working. Give it a try and let me know:

Currently, there are no instructions on how to use it, but if you know a bit of Python, you should be able to figure it out.

Contributions are welcome!

9 Likes