ha-gammy-bridge/ha-examples/lovelace-dashboard.md

# 📘 Home Assistant Dashboard Examples for Gammy Bridge

This document shows how to build a Home Assistant dashboard card to control **Gammy** (Windows screen temperature/brightness) through MQTT.  
It includes **entities**, **button controls**, **a dropdown selector**, **Mushroom examples**, and a **chips row**. Everything is self-contained and copy-pasteable.

---

## 🖥️ Entities Card with State

Shows the current state reported by the Python bridge.

```yaml
type: entities
title: PC Screen Status
entities:
  - entity: sensor.gammy_mode
    name: Current Reported Mode
    icon: mdi:monitor


⸻

🎛️ Example 1: Button Controls

Three simple buttons to trigger Ember, Movie, and Auto modes.

type: entities
title: Quick Mode Buttons
entities:
  - type: button
    name: Ember Mode
    icon: mdi:weather-sunset
    tap_action:
      action: call-service
      service: mqtt.publish
      service_data:
        topic: "pc/gammy/mode"
        payload: "ember slow"

  - type: button
    name: Movie Mode
    icon: mdi:movie-open
    tap_action:
      action: call-service
      service: mqtt.publish
      service_data:
        topic: "pc/gammy/mode"
        payload: "movie fast"

  - type: button
    name: Auto Mode
    icon: mdi:weather-sunny
    tap_action:
      action: call-service
      service: mqtt.publish
      service_data:
        topic: "pc/gammy/mode"
        payload: "auto slow"


⸻

🎚 Example 2: Dropdown Selector

This method uses an input_select in HA to choose the mode.
You’ll also need an automation to publish the right MQTT payload when the dropdown changes.

input_select.yaml

input_select:
  gammy_mode:
    name: Gammy Mode
    options:
      - Ember
      - Movie
      - Auto
    initial: Auto
    icon: mdi:monitor

automation-select.yaml

automation:
  - alias: Gammy Mode Selector
    trigger:
      - platform: state
        entity_id: input_select.gammy_mode
    action:
      - choose:
          - conditions:
              - condition: state
                entity_id: input_select.gammy_mode
                state: "Ember"
            sequence:
              - service: mqtt.publish
                data:
                  topic: "pc/gammy/mode"
                  payload: "ember slow"

          - conditions:
              - condition: state
                entity_id: input_select.gammy_mode
                state: "Movie"
            sequence:
              - service: mqtt.publish
                data:
                  topic: "pc/gammy/mode"
                  payload: "movie fast"

          - conditions:
              - condition: state
                entity_id: input_select.gammy_mode
                state: "Auto"
            sequence:
              - service: mqtt.publish
                data:
                  topic: "pc/gammy/mode"
                  payload: "auto slow"

dashboard card

type: entities
title: Mode Selector
entities:
  - entity: input_select.gammy_mode
    name: Select Mode
    icon: mdi:monitor


⸻

🍄 Example 3: Mushroom Cards

If you use the Mushroom UI kit, you can make sleek buttons.

type: custom:mushroom-template-card
primary: Ember
icon: mdi:weather-sunset
tap_action:
  action: call-service
  service: mqtt.publish
  service_data:
    topic: "pc/gammy/mode"
    payload: "ember slow"

type: custom:mushroom-template-card
primary: Movie
icon: mdi:movie-open
tap_action:
  action: call-service
  service: mqtt.publish
  service_data:
    topic: "pc/gammy/mode"
    payload: "movie fast"

type: custom:mushroom-template-card
primary: Auto
icon: mdi:weather-sunny
tap_action:
  action: call-service
  service: mqtt.publish
  service_data:
    topic: "pc/gammy/mode"
    payload: "auto slow"


⸻

🍄 Example 4: Mushroom Chips Row

A compact layout with three pill-style chips in one line.

type: custom:mushroom-chips-card
chips:
  - type: template
    icon: mdi:weather-sunset
    content: Ember
    tap_action:
      action: call-service
      service: mqtt.publish
      service_data:
        topic: "pc/gammy/mode"
        payload: "ember fast"

  - type: template
    icon: mdi:movie-open
    content: Movie
    tap_action:
      action: call-service
      service: mqtt.publish
      service_data:
        topic: "pc/gammy/mode"
        payload: "movie fast"

  - type: template
    icon: mdi:weather-sunny
    content: Auto
    tap_action:
      action: call-service
      service: mqtt.publish
      service_data:
        topic: "pc/gammy/mode"
        payload: "auto slow"


⸻

📊 ASCII Mockup

Here’s how the dashboard could look:

+-------------------------+
|   PC Screen Status      |
|  Current Mode: Ember    |
+-------------------------+

Quick Mode Buttons:
[ 🌇 Ember ] [ 🎬 Movie ] [ ☀️ Auto ]

Dropdown Mode Selector:
+-----------------------+
| Select Mode: Ember ▼ |
+-----------------------+

Mushroom Style:
🌇 Ember     🎬 Movie     ☀️ Auto

Chips Row (compact):
[🌇 Ember] [🎬 Movie] [☀️ Auto]


⸻

✅ Recommendations
	•	Start with Button Controls to test quickly.
	•	Add the Dropdown Selector if you like compact mode switching.
	•	Switch to Mushroom Cards or Chips Row for a polished look.
	•	Always keep sensor.gammy_mode visible so you know what mode your PC is in.