Interactive 2D Floorplan on Guition Display (openHASP + Home Assistant)

[nkvd121]

Hey everyone! I wanted to share my experience building a smart home control panel. Instead of a standard grid of buttons, I decided to create a fully interactive floorplan of my apartment.
The main feature of this project is the maximum simplicity of the UI. I didn't draw complex room widgets in code; instead, I used a trick: a static background image + invisible touch zones.

🛠️ Hardware & Software
​Display: Guition panel (ESP32).
​Firmware: openHASP (works great "out of the box" with UI graphics).
​Server: Home Assistant + MQTT.

💡 How It Works (The Magic of Invisible Buttons)
The logic is split into two parts:
Display: A pre-drawn dark floorplan of the apartment (in .bin format) is displayed in full screen as the background.
Control: UI objects (buttons) with their background opacity set to zero (bg_opa: 0) are overlaid exactly on top of the rooms on the drawing. They are completely invisible to the user, but the touchscreen perfectly registers taps at these coordinates.
When I touch a room on the screen, openHASP sends an MQTT payload to Home Assistant, and the physical light toggles. When the light turns on, Home Assistant sends a state update back to the display, changing the button's opacity from 0 to 25 and setting its color to yellow (#ffcc00). This creates a beautiful glowing overlay over that specific room on the floorplan!

📝 The Code (openHASP pages.jsonl)
Here is what the screen layout looks like. The background image and invisible zones with the "click": true parameter:

{"page":4,"id":0,"bg_color":"#000000"}`
// Base floorplan image
{"page":4,"id":1,"obj":"img","src":"L:/222.bin","x":0,"y":0}

// Invisible button for the Kitchen (id 20)
{"page":4,"id":20,"obj":"obj","x":10,"y":20,"w":250,"h":210,"bg_color":"#ffcc00","bg_opa":0,"border_width":0,"click":true}

// Invisible button for the Bathroom (id 21)
{"page":4,"id":21,"obj":"obj","x":10,"y":315,"w":115,"h":135,"bg_color":"#ffcc00","bg_opa":0,"border_width":0,"click":true}

⚙️ Home Assistant Integration
To make the rooms "light up" in sync with the actual lights, I mapped the states in my configuration.yaml. If the light is on, the yellow layer's opacity becomes 25; if it's off, it drops back to 0 (making the button invisible again).

1. Highlighting the rooms (configuration.yaml):

openhasp:
  bmo:
    objects:
      - obj: "p4b20" # Kitchen
        properties:
          "bg_opa": '{{ 25 if is_state("light.kitchen_svet_rabochei_zony", "on") else 0 }}'
          
      - obj: "p4b21" # Bathroom
        properties:
          "bg_opa": '{{ 25 if is_state("light.bathroom_svet_v_vannoi", "on") else 0 }}'

2. Toggling lights on touch (Automation):
   Instead of relying on the built-in HA UI triggers (which sometimes miss custom openHASP objects), I listen directly to the raw MQTT messages when the finger is released from the screen ("event":"up"). It is much faster and 100% reliable:

alias: BMO - Floorplan Light Control
description: ""
mode: parallel
trigger:
  - platform: mqtt
    topic: hasp/bmo/state/p4b20
    payload: "{\"event\":\"up\"}"
    id: kitchen
  - platform: mqtt
    topic: hasp/bmo/state/p4b21
    payload: "{\"event\":\"up\"}"
    id: bathroom
condition: []
action:
  - choose:
      - conditions:
          - condition: trigger
            id: kitchen
        sequence:
          - service: light.toggle
            target:
              entity_id: light.kitchen_svet_rabochei_zony
      - conditions:
          - condition: trigger
            id: bathroom
        sequence:
          - service: light.toggle
            target:
              entity_id: light.bathroom_svet_v_vannoi

🎯 Conclusion
This approach saves a ton of time: there's no need to mess with the complex positioning of dozens of custom graphical UI elements in the code. You simply design a nice floorplan in any image editor, drop it onto the display's flash drive, and "cover" it with transparent touch zones. The result feels very smooth and native!
Happy to answer any questions if anyone wants to replicate this setup for their own smart home!