Guition ESP32-P4-JC1060P470 Display mit Home Assistant verbinden

Einleitung

Das Guition ESP32-P4-JC1060P470C ist ein leistungsstarkes 7" Touch-Display mit ESP32-P4 Mikrocontroller. Mit seiner hohen Auflösung von 1024x600 Pixeln und dem kapazitiven Touchscreen eignet es sich hervorragend als Dashboard für Home Assistant.

Guition ESP32 Display mit Home Assistant Dashboard Das Display zeigt das Home Assistant Dashboard in voller Pracht

In diesem Artikel zeige ich dir, wie du das Display mit Home Assistant verbindest und über den RemoteWebViewServer deine Dashboards anzeigst.

Voraussetzungen

Guition ESP32-P4-JC1060P470C Display (7", 1024x600)
Home Assistant Installation
ESPHome Device Builder Add-on in Home Assistant
Docker-fähiger Server für den RemoteWebViewServer

Schritt 1: RemoteWebViewServer einrichten

Der RemoteWebViewServer rendert deine Home Assistant Dashboards und streamt sie als JPEG-Frames an das Display. Er läuft in einem Docker-Container.

Docker Compose Konfiguration

Erstelle eine docker-compose.yml Datei:

services:
  rwvserver:
    image: strangev/remote-webview-server:latest
    container_name: remote-webview-server
    restart: unless-stopped
    environment:
      TILE_SIZE: 16
      FULL_FRAME_TILE_COUNT: 1
      FULL_FRAME_AREA_THRESHOLD: 0.0
      FULL_FRAME_EVERY: 50
      EVERY_NTH_FRAME: 1
      MIN_FRAME_INTERVAL_MS: 30
      JPEG_QUALITY: 70
      MAX_BYTES_PER_MESSAGE: 245760
      WS_PORT: 8081
      DEBUG_PORT: 9221
      HEALTH_PORT: 18080
      PREFERS_REDUCED_MOTION: false
      USER_DATA_DIR: /pw-data
      BROWSER_LOCALE: "de-DE"
    ports:
      - "8081:8081"                   # WebSocket Stream
      - "9222:9222"                   # Externe DevTools via socat
    expose:
      - "18080"                       # Health Endpoint (intern)
      - "9221"                        # Interner DevTools Port
    volumes:
      - ./pw-data:/pw-data
    shm_size: 2gb
    healthcheck:
      test: ["CMD-SHELL", "curl -fsS http://localhost:18080 || exit 1"]
      interval: 10s
      timeout: 3s
      retries: 5
      start_period: 10s

  debug-proxy:
    image: alpine/socat
    container_name: remote-webview-server-debug
    restart: unless-stopped
    network_mode: "service:rwvserver"
    depends_on:
      rwvserver:
        condition: service_healthy
    command:
      - "-d"
      - "-d"
      - "TCP-LISTEN:9222,fork,reuseaddr,keepalive"
      - "TCP:127.0.0.1:9221"

Server starten

docker-compose up -d

Der Server ist dann unter Port 8081 erreichbar.

Schritt 2: ESPHome Konfiguration

Öffne das ESPHome Device Builder Add-on in Home Assistant und erstelle eine neue Konfiguration für das Display.

Vollständige ESPHome YAML

esp32:
  variant: esp32p4
  flash_size: 16MB
  cpu_frequency: 360MHZ
  framework:
    type: esp-idf
    sdkconfig_options:
      CONFIG_SPIRAM_XIP_FROM_PSRAM: "y"   # Verhindert Bildschirmflackern während OTA
      CONFIG_SDMMC_HOST_DEFAULT: "y"
    components:
      - name: "espressif/esp_websocket_client"
        ref: 1.5.0
      - name: "bitbank2/jpegdec"
        source: https://github.com/strange-v/jpegdec-esphome

esphome:
  name: display1
  friendly_name: "Display 1"
  area: "Studio"
  on_boot:
    priority: -100
    then:
      - script.execute: inactivity_timer

wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password

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

# Sekundärer ESP32-C6 für Netzwerk-Konnektivität
esp32_hosted:
  variant: esp32c6
  reset_pin: GPIO54
  cmd_pin: GPIO19
  clk_pin: GPIO18
  d0_pin: GPIO14
  d1_pin: GPIO15
  d2_pin: GPIO16
  d3_pin: GPIO17
  active_high: true

# Videospeicher
psram:
  mode: hex
  speed: 200MHz

ota:
  platform: esphome

api:

logger:

# Spannungsversorgung
esp_ldo:
  - channel: 3
    id: dsi_phy_enable
    voltage: 2.5V
    adjustable: True
  - channel: 4
    id: sd_card_power
    voltage: 2.7V
    adjustable: True

# Hintergrundbeleuchtung
output:
  - platform: ledc
    pin: GPIO23
    id: backlight_pwm

light:
  - platform: monochromatic
    output: backlight_pwm
    name: Display Backlight
    icon: mdi:lightbulb-on
    id: back_light
    restore_mode: ALWAYS_ON
    default_transition_length: 0.5s
    gamma_correct: 1.0

# Touchscreen I2C
i2c:
  - id: bus_a
    sda: GPIO07
    scl: GPIO08
    frequency: 400kHz
    sda_pullup_enabled: False
    scl_pullup_enabled: False

i2c_device:
  - id: i2cdev1
    address: 0x18
  - id: i2cdev2
    address: 0x32
  - id: i2cdev3
    address: 0x36
  - id: i2cdev4
    address: 0x40

# Touchscreen
touchscreen:
  - platform: gt911
    id: my_touchscreen
    i2c_id: bus_a
    reset_pin: GPIO22
    interrupt_pin: GPIO21
    on_touch:
      then:
        - script.execute: inactivity_timer

# Display-Konfiguration
display:
  - platform: mipi_dsi
    id: my_display
    model: JC1060P470
    color_order: RGB
    reset_pin:
      number: GPIO05
    rotation: 0
    update_interval: never
    auto_clear_enabled: false
    hsync_pulse_width: 20

# RemoteWebView Client
remote_webview:
  id: rwv
  server: 192.0.2.10:8081          # IP deines RemoteWebViewServers
  url: http://198.51.100.5:8123/home/overview  # Dein Home Assistant Dashboard
  full_frame_tile_count: 1
  max_bytes_per_msg: 245760
  jpeg_quality: 60

# URL-Textfeld für dynamische Änderungen
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());
          }

# Inaktivitäts-Timer für Bildschirm-Timeout
script:
  - id: inactivity_timer
    mode: restart
    then:
      - if:
          condition:
            light.is_off: back_light
          then:
            - light.turn_on:
                id: back_light
            - delay: 0.5s
            - lambda: |-
                id(rwv).disable_touch(false);
      - delay: 15s
      - light.turn_off:
          id: back_light
      - lambda: |-
          id(rwv).disable_touch(true);

Wichtige Anpassungen

Passe folgende Werte an dein Netzwerk an:

Parameter	Beschreibung	Beispiel
`server`	IP:Port des RemoteWebViewServers	`192.0.2.10:8081`
`url`	Home Assistant Dashboard URL	`http://198.51.100.5:8123/home/overview`

Schritt 3: Kompilieren und Flashen

Klicke in ESPHome auf Installieren
Wähle Plug into the computer running ESPHome Dashboard
Verbinde das Display per USB-C mit deinem Home Assistant Server
Das Display wird automatisch geflasht

Schritt 4: Home Assistant Integration

Nach dem erfolgreichen Flash erscheint das Display automatisch in Home Assistant unter Einstellungen → Geräte & Dienste.

Verfügbare Entitäten

Display Backlight - Schaltet die Hintergrundbeleuchtung ein/aus
URL - Ermöglicht das dynamische Ändern der angezeigten Seite

Automatisierungsbeispiel: Bewegungsaktivierung

alias: "Display bei Bewegung aktivieren"
trigger:
  - platform: state
    entity_id: binary_sensor.bewegungsmelder_studio
    to: "on"
action:
  - service: light.turn_on
    target:
      entity_id: light.display1_display_backlight

Tipps & Troubleshooting

Bildschirm flackert während OTA

Die Konfiguration enthält CONFIG_SPIRAM_XIP_FROM_PSRAM: "y", um Flackern während Over-the-Air Updates zu verhindern.

Touch reagiert nicht

Prüfe die I2C-Verbindung
Stelle sicher, dass die Interrupt-Leitung (GPIO21) korrekt verbunden ist

Verbindung zum Server fehlgeschlagen

Überprüfe die IP-Adresse in der server: Zeile
Stelle sicher, dass der Docker-Container läuft: docker ps
Prüfe die Firewall-Regeln für Port 8081

Selbsttest durchführen

Setze die URL auf "self-test" um den integrierten Selbsttest zu starten:

remote_webview:
  url: "self-test"

Fazit

Das Guition ESP32-P4-JC1060P470C Display ist eine hervorragende Lösung für interaktive Home Assistant Dashboards. Durch die Kombination aus leistungsstarkem ESP32-P4, großem Display und Touchscreen lassen sich komplexe Steuerungen intuitiv bedienen.

Der RemoteWebViewServer ermöglicht dabei die Darstellung beliebiger Web-Inhalte – nicht nur Home Assistant, sondern auch andere Web-Dashboards oder sogar lokale HTML-Seiten.

Einleitung#

Voraussetzungen#

Schritt 1: RemoteWebViewServer einrichten#

Docker Compose Konfiguration#

Server starten#

Schritt 2: ESPHome Konfiguration#

Vollständige ESPHome YAML#

Wichtige Anpassungen#

Schritt 3: Kompilieren und Flashen#

Schritt 4: Home Assistant Integration#

Verfügbare Entitäten#

Automatisierungsbeispiel: Bewegungsaktivierung#

Tipps & Troubleshooting#

Bildschirm flackert während OTA#

Touch reagiert nicht#

Verbindung zum Server fehlgeschlagen#

Selbsttest durchführen#

Fazit#

Weiterführende Links#