Add ha-examples/lovelace-dashboard.md

2025-10-01 00:48:41 -05:00
parent a64c934ca9
commit 62cbf5317a
1 changed files with 238 additions and 0 deletions
--- a/ha-examples/lovelace-dashboard.md
+++ b/ha-examples/lovelace-dashboard.md
@@ -0,0 +1,238 @@
+# 📘 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.
+