From 62cbf5317aefa23282e3f111853dee2d582e0f7e Mon Sep 17 00:00:00 2001 From: tonym Date: Wed, 1 Oct 2025 00:48:41 -0500 Subject: [PATCH] Add ha-examples/lovelace-dashboard.md --- ha-examples/lovelace-dashboard.md | 238 ++++++++++++++++++++++++++++++ 1 file changed, 238 insertions(+) create mode 100644 ha-examples/lovelace-dashboard.md diff --git a/ha-examples/lovelace-dashboard.md b/ha-examples/lovelace-dashboard.md new file mode 100644 index 0000000..6cf9260 --- /dev/null +++ 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. +