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.

1 „Gefällt mir“