Home Assistant Dashboard in Raspberry Pi format

[0ll0wain]

Hello,
let me start with a big thank you to the dev! This Project is awesome and I was looking for a long time for a solution like this. I had the idea to implement something similar and this Project checks all the boxes: Server side rendering, partially update only the parts that change, easy UI configuration with Home Assistant Dashboard, Easy install and config over ESP Home. Its so nice to just have it running and if I want to change something I just have to edit my Dashboard. So big thank you for implementing this. I am so hyped for this that I am very willing to help developing so if there is a way I can support let me know!

So now let me tell you about my Project. The Box is an ESP32-WROVER with Display in RasPi Format by Lilygo that I bought years ago on AliExpress. Display is ST7796 and touch FT6236. My goal was to built a display that shows Airplanes that fly by and I can see from my window. I think I tried about 5 different ways to implement this. For Example a C++ project with python backend on a server and LVGL. The last attempt was ESPHome with LVGL to name the two most successful ones. However, those always failed because UI development was slow and painful and when I wanted to change something I had to do a full recompile.

I had a few struggles setting up this Project so let me tell you about it. My boards SPI does not work properly with esp-idf so I had to use arduino framework. I was surprised but it works flawless. Some configs from the example did not work with arduino and my esp32. I didn’t get how to start the self-test at first and I am still not sure about what to do about many of the parameters that can be set. The Server setup was also quite smooth, however I struggled to connect with the Chrome DevTools because I forgot to start the debug proxy in docker. Maybe there could be a comment in the docs that explains what the purpose of the second Container is and what its needed for.

Some Performance Metrics:
Self Test Client:
FPS
Partial: 37 (27ms)
Full: 5 (184 ms)

Docker Container Self Test
[Self test] Started for device esp32-4848s040-t1
[Self test] Frame render time: 178ms
[Self test] Partial stage finished for device esp32-4848s040-t1
[Self test] Frame render time: 27ms

Current Draw:
~200mA with display on
~100mA with display off

Here is my working ESP-Home config:

esphome:
  name: esp-box
  friendly_name: ESP Box
  on_boot:
    priority: -100 # Run early
    then:
      - logger.log:
          format: "Total Heap: %u bytes, Free Heap: %u bytes"
          args: [ 'ESP.getHeapSize()', 'ESP.getFreeHeap()' ]
      - logger.log:
          format: "Total PSRAM: %u bytes, Free PSRAM: %u bytes"
          args: [ 'ESP.getPsramSize()', 'ESP.getFreePsram()' ]

esp32:
  board: esp-wrover-kit
  framework:
    type: arduino
    components:
      - name: "espressif/esp_websocket_client"
        ref: 1.5.0
      - name: "espressif/esp-dsp"
        ref: 1.7.0
      - name: "bitbank2/jpegdec"
        source: https://github.com/strange-v/jpegdec-esphome

psram:
  mode: quad
  speed: 80MHz

external_components:
  - source: github://strange-v/RemoteWebViewClient@main
    refresh: 0s
    components: [ remote_webview ]

# Enable logging
logger:

# Optional: Periodically log free heap to debug malloc errors
interval:
  - interval: 30s
    then:
      - logger.log:
          format: "Free Heap: %u, Free PSRAM: %u"
          args: [ 'ESP.getFreeHeap()', 'ESP.getFreePsram()' ]

# Enable Home Assistant API
api:
  encryption:
    key: "kcrELQ+4FdTwKKCxNH8YDb4krFRWORCOZ3ebXYmyadY="

ota:
  - platform: esphome
    password: "6e20864367166c77a263e4da2b0f8665"

wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password
  fast_connect: True
  power_save_mode: light

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: "Esp-Box Fallback Hotspot"
    password: "ByfH2pJcFOgv"

captive_portal:

# Define a PWM output on the ESP32
output:
  - platform: ledc
    pin: GPIO12
    id: backlight_pwm

# Define a monochromatic, dimmable light for the backlight
light:
  - platform: monochromatic
    output: backlight_pwm
    name: "Display Backlight"
    id: back_light
    restore_mode: ALWAYS_ON

spi:
  clk_pin: GPIO18
  mosi_pin: GPIO19
  miso_pin: GPIO23

i2c:
  sda: GPIO21
  scl: GPIO22
  scan: true
  id: bus_a

display:
  - platform: ili9xxx
    id: my_display
    model: ST7796
    dc_pin: GPIO27
    cs_pin: GPIO05
    invert_colors: false
    show_test_card: false
    auto_clear_enabled: false
    update_interval: never
    transform:        # <-- ADD THIS BLOCK
      mirror_y: true
    dimensions:
      width: 320
      height: 480

touchscreen:
  platform: ft63x6
  display: my_display
  id: my_touchscreen
  interrupt_pin: GPIO34
  transform:        # <-- ADD THIS BLOCK
    mirror_y: true
    mirror_x: true

remote_webview:
  id: rwv
  display_id: my_display
  touchscreen_id: my_touchscreen
  device_id: esp32-4848s040-t1
  server: 192.168.50.82:8082
  url: http://192.168.50.82:8123/esp-box/0 # set url: "self-test" to initiate the self-test
  # url: "self-test"
  full_frame_tile_count: 1
  max_bytes_per_msg: 61440
  jpeg_quality: 90
  # min_frame_interval: 

text:
  - platform: template
    id: rwv_url
    name: "URL"
    optimistic: true
    restore_value: false
    mode: TEXT
    min_length: 1
    set_action:
      - lambda: |-
          if (!id(rwv).open_url(std::string(x.c_str()))) {
            id(rwv).set_url(std::string(x.c_str()));
            ESP_LOGI("remote_webview", "URL queued (not connected): %s", x.c_str());
          }

Thanks again, Feedback is appreciated
P.S. @strange-v This project is amazing. Is there any way I can send a small tip to support your work?

[strange-v]

Hey — thank you for the kind words and for sharing such a detailed write-up! I’m glad the project clicked for your use case.

This is exactly the kind of scenario it was built for: when using the native Home Assistant dashboard matters more than squeezing every last bit of performance out of a bespoke LVGL UI. If your setup works well, you can safely ignore most of the extra tuning options; the defaults are designed to “just work.” For cases where you need a bit more performance, I recommend ESP32-S3-based displays — they deliver around ~13 FPS at the default JPEG quality.

I’ll add a short README note explaining the purpose of the second (debug-proxy) container and how it ties into Chrome DevTools.

On the roadmap front: I’m not actively adding new features right now. The one worthwhile improvement I’ve been eyeing is running Chrome on the server instead of Chromium to enable hardware video decoding, but I’ve had to postpone it due to complications and time constraints.

Re: sending a tip — thank you for the offer! Unfortunately, most sponsorship platforms (Buy Me a Coffee, Patreon, etc.) still don’t play nicely with Ukraine. If I find a reliable way to accept sponsorships, I’ll add the details to the repo.