🔘 Piotras Smart Button

Share your Projects! Dashboards & Frontend
, , ,
1

:radio_button: Piotras Smart Button

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

Zrzut ekranu (1196)
Zrzut ekranu (1196)800×374 49.1 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

:light_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

:electric_plug: Socket & Power Monitoring

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

Zrzut ekranu (1178)
Zrzut ekranu (1178)784×147 78.6 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

:speaker_high_volume: Media Player

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

Zrzut ekranu (1188)
Zrzut ekranu (1188)397×141 36.1 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).
2 Likes
Is it possible to make thermostat cards with room backgrounds and +/- buttons directly on the card?
2

You should also upload the source code to github, not just the dist files :eyes:

3

Thanks for the suggestion. Currently, I’m focusing on refining the stable dist version to ensure the best user experience. The full source code will be made available alongside the official HACS release. If the official Home Assistant HACS submission process requires it, the repository will be updated accordingly. For now, my priority is delivering a polished final product. Please stay tuned for the official HACS launch.

4

Release v1.1.0

Editor Fix — Config State Display + Minor Card Fixes

Fixed editor incorrectly showing default values instead of actual YAML config. Toggles, number and text fields now correctly reflect saved state. Minor card fix: removed hardcoded widths on service bar and slider zones — now fully responsive to card_width setting.

5

An example of how the script works
Animation

6

Still no /src available?

7

v1.2.0

Person & Device Tracker support

Zrzut ekranu (1290)a
Zrzut ekranu (1290)a502×158 38.5 KB

  • Control Zone now shows last state change time (HH:MM) for person and device_tracker entities
  • Bar icon uses mdi:home / mdi:walk colored by icon_color_on (home) and icon_color (away)

Battery monitoring

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

  • Dynamic main card icon auto-adjusted to charge level (mdi:battery-10 → mdi:battery)
  • Color bar in Control Zone: red → yellow → green
  • Optional entity_battery_state for charging detection (charging / discharging / full / not_charging)
  • Card turns ON when charging, OFF otherwise
  • ⚡ suffix when charging

Thermostat control

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

  • Control Zone renders − / + temperature buttons with 0.5° step
  • State badge shows current room temperature instead of ON/OFF
  • Card turns ON when hvac_action is heating or cooling
  • Red OFF label when thermostat is fully off

Dual icon mode

  • New icon_on option — separate icon for ON state
  • Battery ignores icon and icon_on — always uses dynamic battery icon

Control Zone scaling

  • All Control Zone content (labels, icons, sliders, bars) scales proportionally with slider_height using √(height/26) — smooth, non-linear growth

New options

  • slider_label_color — single color variable for all Control Zone labels and icons
  • entity_battery_state — optional battery charging state entity
  • icon_on — alternative icon for ON state

Visual Editor improvements

  • Editor detects entity domain automatically
  • Slider & Power tab shows only relevant options per entity type
  • icon and icon_on fields hidden for battery (auto-dynamic)
  • name_on / name_off fields hidden for climate (state badge is automatic)
  • Battery Icon Tip shown in Icon tab

I’ve put together a live preview of all my card assets. If you’re looking for icons or graphics for your buttons, feel free to check it out:

:eye: View Smart Button Assets

8

First guides for the card are now available. Hope someone finds them useful!