Home Assistant Bubble Card – 6“ Square Wall Panel Setup

This project file helps you add and use https://github.com/Clooos/Bubble-Card for a 6-inch square wall-mounted touch panel. It includes installation steps and a ready-to-use dashboard layout optimized for square displays.

1) Install Bubble Card

Recommended: HACS (Home Assistant Community Store)

HACS → Frontend → Search “Bubble Card” → Install
Restart Home Assistant

Manual (if not using HACS)

Download the latest release assets from the Bubble Card repository and place bubble-card.js in www/
Add as a resource in Settings → Dashboards → Resources: /local/bubble-card.js

2) Optional: Pop-up initialization fix

Add this to configuration.yaml if you installed via HACS and need the pop-up initialization fix:

frontend:
  extra_module_url:
    - /hacsfiles/Bubble-Card/bubble-pop-up-fix.js

After enabling, clear browser/app cache for the panel.

3) Enable Bubble Card Modules storage (for Module Editor/Store)

Add to configuration.yaml to store Module data:

# Storage for Bubble Card Modules
template:
  - trigger:
      - platform: event
        event_type: bubble_card_update_modules
    sensor:
      - name: "Bubble Card Modules"
        state: "saved"
        icon: "mdi:puzzle"
        attributes:
          modules: "{{ trigger.event.data.modules }}"
          last_updated: "{{ trigger.event.data.last_updated }}"

Restart Home Assistant after editing configuration files.

4) Create a square wall panel dashboard

This example uses a single full-screen square-friendly view with:

A top area of primary controls
A horizontal footer for quick room navigation
A pop-up card for camera/alerts

You can paste the YAML into a new dashboard (Settings → Dashboards → Three dots → Raw configuration editor), or create a new dashboard in YAML mode and add this view.

views:
  - title: Wall Panel
    path: wall-panel
    theme: default
    type: sections
    subview: false
    icon: mdi:tablet
    badges: []
    sections:
      - type: grid
        cards:
          # Primary lights
          - type: custom:bubble-card
            card_type: button
            entity: light.led_panel
            name: LED Panel
            show_state: true
            state_color: true
            card_layout: large
            rows: 2
            sub_button:
              - icon: mdi:brightness-6
                tap_action:
                  action: call-service
                  service: light.turn_on
                  service_data:
                    entity_id: light.led_panel
                    brightness_pct: 50

          - type: custom:bubble-card
            card_type: button
            entity: light.livingroom
            name: Living Room
            show_state: true
            state_color: true
            card_layout: large
            rows: 2
            sub_button:
              - icon: mdi:brightness-6
                tap_action:
                  action: call-service
                  service: light.turn_on
                  service_data:
                    entity_id: light.livingroom
                    brightness_pct: 50

          - type: custom:bubble-card
            card_type: button
            entity: light.bedroom
            name: Bedroom
            show_state: true
            state_color: true
            card_layout: large
            rows: 2
            sub_button:
              - icon: mdi:brightness-6
                tap_action:
                  action: call-service
                  service: light.turn_on
                  service_data:
                    entity_id: light.bedroom
                    brightness_pct: 50

          - type: custom:bubble-card
            card_type: climate
            entity: climate.livingroom
            name: Living Room
            card_layout: large
            rows: 2
            show_state: true
            hide_target_temp_low: true
            hide_target_temp_high: true

      - type: grid
        cards:
          # Other lights
          - type: custom:bubble-card
            card_type: button
            entity: light.bathroom
            name: Bathroom
            show_state: true
            state_color: true
            card_layout: normal

          - type: custom:bubble-card
            card_type: button
            entity: light.kitchen
            name: Kitchen
            show_state: true
            state_color: true
            card_layout: normal

          - type: custom:bubble-card
            card_type: button
            entity: light.office
            name: Office
            show_state: true
            state_color: true
            card_layout: normal

          - type: custom:bubble-card
            card_type: button
            entity: light.toilet
            name: Toilet
            show_state: true
            state_color: true
            card_layout: normal

      - type: grid
        column_span: 1
        cards:
          # Footer navigation
          - type: custom:bubble-card
            card_type: horizontal-buttons-stack
            1_name: Living
            1_icon: mdi:sofa
            1_link: '#living'
            1_entity: light.livingroom
            1_pir_sensor: binary_sensor.motion_sensor_occupancy
            2_name: Kitchen
            2_icon: mdi:fridge
            2_link: '#kitchen'
            2_entity: light.kitchen
            3_name: Bed
            3_icon: mdi:bed
            3_link: '#bedroom'
            3_entity: light.bedroom
            3_pir_sensor: binary_sensor.bedroom_occupancy
            4_name: Bath
            4_icon: mdi:shower
            4_link: '#bathroom'
            4_entity: light.bathroom

    # Pop-up layer cards
    cards:
      - type: custom:bubble-card
        card_type: pop-up
        hash: '#weather'
        name: Weather
        icon: mdi:weather-partly-cloudy
        entity: weather.home
        close_on_click: true
        close_by_clicking_outside: true
        auto_close: '10000'
        width_desktop: '520px'
        margin: '8px'
        bg_color: '#000000'
        bg_opacity: '60'
        bg_blur: '8'
        shadow_opacity: '40'
        show_header: true

Notes:

Adjust entities to match your setup.
type: sections provides a good responsive grid for square panels.
Use card_layout: large and rows: 2 on important cards for comfortable touch targets.

5) Optional: Global module example

If you want a module applied to all Bubble Cards, define it in YAML, then reference it per-card or globally via the Module Editor.

my_button_module:
  name: "Button only module"
  supported:
    - button
  code: |
    // Example: emphasize ON state with a subtle pulse
    if (entity?.state === 'on') {
      el.style.animation = 'pulse 1.5s infinite';
    }

6) Panel/device tips

Set the dashboard as the start URL for your panel browser (e.g., Fully Kiosk, WallPanel, or Safari in Guided Access).
Consider enabling Kiosk Mode (custom frontend add-on) to hide HA’s sidebar/header on dedicated panels.
If your panel is truly square, keep groups of 2×2 or 3×3 “large” cards for balanced composition.

Your Home Assistant Setup

Based on your current installation, here are the key details for your wall panel:

Available Lights

LED Panel: light.led_panel (main living room light)
Living Room: light.livingroom (multiple bulbs: light.livingroom_front_bulb, light.livingroom_back_bulb)
Bedroom: light.bedroom (includes light.bedroom_cloud_light_hue)
Kitchen: light.kitchen (includes light.kitchen_bulb)
Office: light.office (includes light.office_bulb_a5, light.office_mushroom_light_hue)
Bathroom: light.bathroom (multiple bulbs)
Toilet: light.toilet

Climate Controls

Living Room: climate.livingroom (tado° smart thermostat)
Kitchen: climate.kitchen (tado° smart thermostat)
Bedroom: climate.bedroom (tado° smart thermostat)
Office: climate.office (tado° smart thermostat)
Bathroom: climate.bathroom (tado° smart thermostat)

Motion Sensors

Toilet: binary_sensor.motion_sensor_lumi_lumi_sensor_motion_aq2_occupancy
Bathroom: binary_sensor.bathroom_motion_sensor_occupancy
Living Room: binary_sensor.livingroom_motion_sensor_occupancy

Weather

Home: weather.home

Special Notes for Your Setup

Your installation uses tado° smart thermostats in each room with motion sensors
You have Adaptive Lighting installed which works well with Bubble Card
HACS is installed, making Bubble Card installation straightforward

Quick checklist

Bubble Card installed and resource loaded
Optional pop-up fix added (and cache cleared)
Modules storage sensor configured
Dashboard view created with square-friendly layout
Entities mapped and tested on device

Home Assistant - Bubble Card Panel