Piotras Smart Button - Eine vielseitige Lovelace Karte

Showroom
, ,
1

Hallo zusammen!

Ich möchte euch kurz mein Projekt vorstellen, an dem ich in letzter Zeit gearbeitet habe. Ich habe diese Karte Piotras-Smart-Button genannt. Mein Ziel war es, eine Karte zu erstellen, die nicht nur gut aussieht, sondern auch echtes funktionales Feedback direkt im Dashboard liefert.

Da die Community international ist, werde ich die technischen Details auf Englisch beschreiben:

A high-performance button card for Home Assistant — Most cards go silent after calling a service. This one tells you it worked.

Zrzut ekranu (1222)
Zrzut ekranu (1222)760×366 44.1 KB

Zrzut ekranu (1223)
Zrzut ekranu (1223)769×370 50 KB

:sparkles: Features

  • Visual Editor — full GUI with tabs: General, Size, Background, Icon, Text, Layout, Slider & Power, Filters, Actions, Service. No manual YAML needed.
  • 9-Grid Layout System — place Icon, Name, and State badge independently across a 3×3 matrix.
  • Adaptive Auto-Sliders — smart detection of Brightness, Color Temp, Volume, Cover Position, Fan Speed. Zero configuration required.
  • Dynamic Backgrounds — solid color, 2/3-color gradients, or full-resolution background images.
  • Smart Filter Engine — CSS filters (brightness, saturation, grayscale) applied automatically per ON/OFF state.
  • Service Countdown — animated SVG circle or progress bar after call-service, with optional card blockade.
  • Power Monitoring — real-time consumption bar with configurable pulse warning threshold.
  • Font Styles — 4 text presets for Name and State labels.
  • Advanced Action Engine — Tap, Double-Tap, and Hold, optimized for both mobile and desktop.
  • Visual Editor Full GUI — General, Size, Background, Icon, Text, Layout, Slider & Power, Filters, Actions, Service tabs. No YAML required.

:compass: Navigation Mode

Zrzut ekranu (1173)
Zrzut ekranu (1173)495×160 27.1 KB

:bulb: Light & Auto-Dimmer Slider

Zrzut ekranu (1180)
Zrzut ekranu (1180)788×148 55.8 KB

Zrzut ekranu (1181)
Zrzut ekranu (1181)786×146 65.9 KB

Zrzut ekranu (1182)
Zrzut ekranu (1182)782×144 64 KB

:electric_plug: Socket & Power Monitoring

Zrzut ekranu (1177)
Zrzut ekranu (1177)787×153 67.8 KB

Zrzut ekranu (1179)
Zrzut ekranu (1179)785×145 65.4 KB

Zrzut ekranu (1178)
Zrzut ekranu (1178)784×147 78.6 KB

:loud_sound: Media Player

Zrzut ekranu (1186)
Zrzut ekranu (1186)400×145 29.7 KB

Zrzut ekranu (1188)
Zrzut ekranu (1188)397×141 36.1 KB

:scroll: Script Button

Zrzut ekranu (1184)
Zrzut ekranu (1184)785×138 46 KB

Zrzut ekranu (1185)
Zrzut ekranu (1185)785×140 59.2 KB

:gear: Installation

Method 1: Via HACS (Recommended)

  1. Click the button below to automatically add the repository to your HACS:
Open your Home Assistant instance
  1. Click Add in the pop-up window.
  2. Once the repository page opens, click Download.
  3. After downloading, do a Hard reload of your browser.

Method 2: Manual Installation

  1. Download this repository as a ZIP file and extract it.
  2. Inside your Home Assistant config/www/ directory, create a new folder named piotras-smart-button.
  3. Copy the compiled files (from dist/ folder) into config/www/piotras-smart-button/.
  4. Go to Settings → Dashboards → Resources.
  5. Click Add Resource and enter:
/local/piotras-smart-button/piotras-smart-button-loader.js?v=1.0.0
  • Resource type: JavaScript Module
  1. Hard reload your browser (Ctrl+Shift+R).

Verbesserungsvorschläge & Issues:

Gerne können wir hier im Thread diskutieren, aber für technische Fehlerberichte nutzt bitte die GitHub Issues in meinem Repository.

2 „Gefällt mir“
2

Demonstration der Funktionsweise und Konfiguration von Skripten in Buttons
Animation

3

v1.2.0

Unterstützung für Person & Geräteverfolgung

Zrzut ekranu (1290)a
Zrzut ekranu (1290)a502×158 38.5 KB
Zrzut ekranu (1292)a
Zrzut ekranu (1292)a505×154 42.3 KB

  • Die Steuerzone zeigt jetzt die letzte Statusänderungszeit (HH:MM) für person- und device_tracker-Entitäten
  • Das Symbol in der Leiste verwendet mdi:home / mdi:walk, eingefärbt mit icon_color_on (zu Hause) und icon_color (abwesend)

Akkuüberwachung

Zrzut ekranu (1290)
Zrzut ekranu (1290)239×148 23.6 KB
Zrzut ekranu (1292)
Zrzut ekranu (1292)251×153 25.4 KB

  • Dynamisches Hauptkartensymbol, automatisch an den Ladestand angepasst (mdi:battery-10 → mdi:battery)
  • Farbige Leiste in der Steuerzone: Rot → Gelb → Grün
  • Optionale entity_battery_state für die Ladeerkennung (charging / discharging / full / not_charging)
  • Karte schaltet ON beim Laden, OFF sonst
  • ⚡-Suffix beim Laden

Thermostatsteuerung

Zrzut ekranu (1319)
Zrzut ekranu (1319)241×172 21 KB
Zrzut ekranu (1320)
Zrzut ekranu (1320)239×164 22.1 KB
Zrzut ekranu (1321)
Zrzut ekranu (1321)236×162 25.2 KB

  • Steuerzone zeigt − / + Temperaturschaltflächen mit 0,5°-Schritt
  • Statusanzeige zeigt aktuelle Raumtemperatur statt ON/OFF
  • Karte schaltet ON, wenn hvac_action heating oder cooling ist
  • Rotes OFF-Label, wenn der Thermostat vollständig ausgeschaltet ist

Dualer Icon-Modus

  • Neue Option icon_on — separates Symbol für den EIN-Zustand
  • Batterie ignoriert icon und icon_on — verwendet immer das dynamische Akkusymbol

Skalierung der Steuerzone

  • Alle Inhalte der Steuerzone (Beschriftungen, Symbole, Schieberegler, Leisten) skalieren proportional mit slider_height über √(height/26) — gleichmäßiges, nichtlineares Wachstum

Neue Optionen

  • slider_label_color — einzelne Farbvariable für alle Beschriftungen und Symbole in der Steuerzone
  • entity_battery_state — optionale Entität für den Akku-Ladezustand
  • icon_on — alternatives Symbol für den EIN-Zustand

Verbesserungen am visuellen Editor

  • Editor erkennt die Entitätsdomäne automatisch
  • Tab „Slider & Power" zeigt nur relevante Optionen je nach Entitätstyp
  • Felder icon und icon_on für Batterie ausgeblendet (automatisch-dynamisch)
  • Felder name_on / name_off für Klimaanlage ausgeblendet (Statusanzeige ist automatisch)
  • Batteriesymbol-Hinweis im Tab „Icon" angezeigt

Ein Blick auf den folgenden Link lohnt sich – falls ihr Grafiken für eure Buttons sucht, findet ihr dort vielleicht etwas Passendes:

:eye: View Smart Button Assets

4

Die ersten Anleitungen für die Karte sind online. Hoffe, es hilft jemandem weiter!