🔘 Piotras Smart Button — karta do sterowania prawie wszystkim

Większość kart milczy po wywołaniu usługi. Ta daje znać że zadziałała.

Karta przycisku dla Home Assistant z układem 9-siatki, automatycznym wykrywaniem suwaków, dynamicznymi tłami, odliczaniem usług i wbudowanym edytorem wizualnym.


:sparkles: Co potrafi

  • Edytor wizualny — pełne GUI z zakładkami: Ogólne, Rozmiar, Tło, Ikona, Tekst, Układ, Suwak & Moc, Filtry, Akcje, Usługa. Bez ręcznego YAML.
  • Układ 9-siatki — ikona, nazwa i odznaka stanu niezależnie w macierzy 3×3
  • Automatyczne suwaki — wykrywa jasność, temp. barwową, głośność, pozycję rolety, prędkość wentylatora. Zero konfiguracji.
  • Dynamiczne tła — jednolity kolor, gradienty 2/3-kolorowe lub pełne obrazy tła
  • Silnik filtrów — filtry CSS (jasność, nasycenie, skala szarości) per stan ON/OFF
  • Odliczanie usługi — animowany krąg SVG lub pasek postępu po call-service
  • Monitoring mocy — pasek zużycia w czasie rzeczywistym z progiem ostrzeżenia
  • Osoba & śledzenie urządzenia — czas ostatniej zmiany stanu w strefie sterowania
  • Bateria — dynamiczna ikona dopasowana do poziomu naładowania, kolorowy pasek, obsługa stanu ładowania
  • Termostat — przyciski /+ w strefie sterowania, aktualna temperatura jako odznaka stanu
  • Podwójny tryb ikony — osobna ikona dla stanu ON przez icon_on

:package: Instalacja przez HACS

Kliknij przycisk poniżej aby dodać repo do HACS:

Open your Home Assistant instance

Następnie kliknij Pobierz i zrób Hard reload przeglądarki (Ctrl+Shift+R).


:bust_in_silhouette: Osoba / śledzenie urządzenia


type: custom:piotras-smart-button
entity: person.jan
name: Jan
icon: mdi:walk
icon_on: mdi:home-account
icon_color: "#aaaaaa"
icon_color_on: "#43d14a"
card_width: 200
card_height: 140
show_image: true
background_image_on: /local/persons/jan.jpg
show_filter: true
show_more: true
slider_height: 30
name_on: W Domu
name_off: Poza Domem
tap_action:
   action: more-info

:battery: Bateria

type: custom:piotras-smart-button
entity: sensor.lenovo_battery
entity_battery_state: sensor.lenovo_battery_state
name: Lenovo Battery
icon_color: "#aaaaaa"
icon_color_on: "#43d14a"
card_width: 200
card_height: 140
show_more: true
slider_height: 30
name_on: Ładuje
name_off: Rozładowuje
tap_action:
   action: more-info

:thermometer: Termostat

type: custom:piotras-smart-button
entity: climate.salon
name: Salon
icon: mdi:sofa
icon_color: "#aaaaaa"
icon_color_on: "#ff6b35"
card_width: 200
card_height: 140
show_image: true
background_image_on: /local/rooms/salon.jpg
show_filter: true
show_more: true
slider_height: 32
tap_action:
   action: more-info

:light_bulb: Lampa z suwakiem jasności

type: custom:piotras-smart-button
entity: light.salon
name: Salon
icon: mdi:lightbulb-off
icon_on: mdi:lightbulb
icon_color: "#c0c0c0"
icon_color_on: "#ffff80"
card_width: 160
card_height: 120
show_image: true
background_image_on: /local/rooms/salon.jpg
name_on: Włączone
name_off: Wyłączone
show_filter: true
show_more: true
tap_action:
   action: toggle
hold_action:
   action: more-info

:electric_plug: Gniazdko z monitoringiem mocy

type: custom:piotras-smart-button
entity: switch.bojler
entity_watts: sensor.bojler_moc
name: Bojler
icon: mdi:thermometer-low
icon_on: mdi:thermometer-high
name_on: Włączony
name_off: Wyłączony
icon_color: "#c0c0c0"
icon_color_on: "#ff0000"
card_width: 200
card_height: 140
show_more: true
max_watts: 2000
tap_action:
   action: toggle

:scroll: Skrypt z odliczaniem

type: custom:piotras-smart-button
name: Skrypt
icon: mdi:script
card_width: 160
card_height: 120
name_off: Gotowy
name_on: W trakcie
show_service: true
time_service: 20
service_style: circle
tap_action:
   action: call-service
   service: script.twoj_skrypt

Pełna dokumentacja i lista wszystkich opcji na GitHub:

Stworzone przez Piotrasa. Zaprojektowane z myślą o niezawodności.

4 polubienia

Polecam zajrzeć – jak ktoś szuka jakiejś grafiki, może znajdzie tam coś do swojego buttona.

demo-piotras-smart-button

Realse v1.2.1

Dodatkowa obsługa temperatury i wilgotności z ustawianiem strefy komfortu


Wyszukiwarka Piotras Icon Browser Home Assistant może ktoś skorzysta.

1 polubienie

Pierwsze poradniki do karty. Może komuś się przyda.

3 polubienia

Karta od dzisiaj jest w oficjalnym sklepie HACS .

HACSHACS DownloadsGitHub StarsGitHub IssuesGitHub ReleaseGitHub Release Date

Wystarczy w wyszukiwarkę HACS wpisać Piotras Smart Button
Miłego użytkowania.

KioskAssets GalleryMDI Icons

1 polubienie

Steruj vacuum jak PRO i poznaj nowe funkcje piotras-smart-button v1.2.4"

vacuum-piotras-smart-button

Na przykładzie mojego odkurzacza Dreame MC1808 pokażę, jak to spiąć. Aby uzyskać tak płynne sterowanie z dynamicznym podświetleniem pomieszczeń i odliczaniem czasu blokady, wystarczy

  • “Jedna prosta automatyzacja”
  • “Kilka dedykowanych skryptów dla każdego pokoju”
  • “Jeden pomocnik input_number
  • “I najnowsza karta piotras-smart-button w wersji v1.2.4.”

Wersja v1.2.4 to potężny release! Oprócz zaawansowanego sterowania vacuum, karta zyskała dedykowane tryby pracy dla: mini pogody, zegara cyfrowego, mini kalendarza oraz interaktywnego panelu alarmu.

Jeśli ktoś jest zainteresowany takimi funkcjami, dajcie znać! Pewnie już niedługo przygotuje kompletny tutorial dla odkurzacza ze sterowaniem przyciskami z podświetleniem.

1 polubienie

Witam.

Przypadkiem niedawno trafiłem na tę świetną kartę i skonfigurowałem już oświetlenie. Utknąłem na karcie z klimatyzatorem. Wskazuję statyczny png jako stan wyłączony i animowany gif jako włączony, ale stan obrazka się nie zmienia. Proszę o pomoc. Oto mój kod:

type: custom:piotras-smart-button
entity: climate.23089744189375_climate
name: Salon
icon: ""
icon_color: "#f4f3f0"
icon_color_on: "#f49d06"
card_width: 180
card_height: 140
border_radius: 12
icon_mode: 1
name_mode: 8
value_mode: 2
tap_action:
  action: more-info
double_tap_action:
  action: more-info
hold_action:
  action: more-info
show_image: true
background_image_on: /local/images/klima_on.gif
background_image_off: /local/images/klima_off.png
show_filter: false
filter_off: opacity(40%) grayscale(100%)
filter_on: opacity(100%) grayscale(0%)
icon_size: 18
icon_wrap_size: 28
show_icon_full: true
show_more: true
slider_height: 30
show_service: false
show_icon: false



climate.2308974 to Domena HA. Domeny climate nie da się włączyć / wyłączyć, musisz użyć encji switch.twojKlimatyzator

Możesz sprawdzić, czy dodanie poniższego zapisu w konfiguracji karty zadziała w obecnej wersji:

vacuum_states_on:
  - cool
  - heat

Jeżeli to nie przyniesie rezultatu, to w najbliższym czasie zostanie wypuszczona nowa wersja karty, która jest już w fazie intensywnych testów. Wprowadzi ona dedykowaną opcję custom_states_on oraz wiele innych nowości, które całkowicie rozwiążą ten problem.

Dziękuję za odpoweidź, na razie rozwiązałem to tak: script

alias: Przełącz Klimatyzację Sypialnia
sequence:
  - action: climate.toggle
    target:
      entity_id: climate.20890720947835_climate
mode: single

i karta z poborem mocy chwilowej:


type: custom:stack-in-card
keep:
  box_shadow: false
  margin: false
  padding: false
cards:
  - type: custom:config-template-card
    entities:
      - climate.20890720947835_climate
    card:
      type: custom:piotras-smart-button
      entity: climate.20890720947835_climate
      name: Sypialnia
      icon: ""
      icon_color: "#f4f3f0"
      icon_color_on: "#060ef4"
      card_width: 330
      card_height: 210
      border_radius: 12
      icon_mode: 1
      name_mode: 2
      value_mode: 2
      tap_action:
        action: call-service
        service: script.przelacz_klimatyzacje_sypialnia
      double_tap_action:
        action: more-info
      hold_action:
        action: more-info
      show_image: true
      background_image_on: >-
        ${ states\['climate.20890720947835_climate'\].state === 'off' ?
        '/local/images/klima_blue.png' : '/local/images/klima_on.gif' }
      background_image_off: >-
        ${ states\['climate.20890720947835_climate'\].state === 'off' ?
        '/local/images/klima_blue.png' : '/local/images/klima_on.gif' }
      show_filter: false
      filter_off: opacity(40%) grayscale(100%)
      filter_on: opacity(100%) grayscale(0%)
      icon_size: 28
      icon_wrap_size: 38
      show_icon_full: true
      show_more: true
      slider_height: 47
      show_service: false
      show_icon: false
      state_size: 26
      font_style: 3
      name_size: 22
      text_color: "#000000"
      icon_style: square_color
      image_filter_on: brightness(0.50) saturate(0.70) grayscale(0.70)
      image_filter_off: brightness(0.40) saturate(0.20) grayscale(1.00)
      icon_over_size: 10
      show_name: true
      show_state: true
  - type: custom:button-card
    entity: sensor.klima_sypialnia_moc
    show_name: false
    show_icon: false
    show_state: true
    styles:
      state:
        - color: "#FF0000"
        - font-size: 20px
        - font-weight: bold
    card_mod:
      style: |
        ha-card {
          position: absolute !important;
          bottom: 105px !important;
          right: -90px !important;
          background: transparent !important;
          border: none !important;
          box-shadow: none !important;
          pointer-events: none !important;
          z-index: 999 !important;
        }

Dobra wiadomość, że nadal rozwijasz ten projekt, bo ma mega potencjał.

sprytnie owinąłeś kartę teraz możesz zmienić co chcesz w karcie
na przykład zautomatyzować co chcesz

show_more: ${ states['switch.twoje_gniazdo'].state !== 'unavailable' }
show_more: "${ states['light.twoja_lampa_salon'].state !== 'off' }"

zobacz co można zrobić w przyszłej wersji za pomocą custom_states_labels





Czyli poczekajcie na następny Release.

Co nowego?

:crown: custom_states_on — Globalny Priorytet

Opcja custom_states_on otrzymała właśnie najwyższy priorytet w całym systemie. Nadpisuje wbudowaną logikę dla domen battery, climate, alarm_control_panel, vacuum oraz wszystkich pozostałych. Jeśli ją zdefiniujesz, zawsze wygrywa — bez żadnych wyjątków.

:glowing_star: custom_states_labels — Potężna aktualizacja

Dopasowywanie liczb za pomocą operatorów i zakresów

Etykiety (labels) mogą być teraz dopasowywane przy użyciu operatorów porównania oraz zakresów liczbowych, a nie tylko dokładnego tekstu:

custom_states_labels:
  "<10": "Zimno"
  "10-25": "Komfortowo"
  ">25": "Gorąco"
  • Obsługiwane operatory: >, <, >=, <= oraz zakresy min-max (w tym zakresy “przechodzące przez zero/północ”, np. 22-0 dla godzin nocnych).
  • Najwyższy priorytet: custom_states_labels jest teraz sprawdzane przed jakimikolwiek etykietami specyficznymi dla danej domeny (media_player, light, climate, fan, cover). Jeśli system znajdzie dopasowanie — wygrywa ono, a name_on/name_off służą jako opcja awaryjna.

:chart_increasing: Dopasowywanie na podstawie procentów

Dla domen, w których stanem encji jest zawsze on/off, ale “poziom” znajduje się w atrybutach, wartości są przeliczane na procenty (0–100):

  • light — dopasowuje do jasności (brightness) przeliczonej na %
  • fan — dopasowuje do procentowej prędkości
  • cover — dopasowuje do aktualnej pozycji rolety (current_position)
custom_states_labels:
  off: "Wyłączone"
  "<10": "Nastrojowe"
  "10-40": "Słabe"
  "40-80": "Jasne"
  ">80": "Maksymalne"

:thermometer: Druga linia tekstu (value2) dla termostatów (climate)

Gdy zdefiniujesz custom_states_labels dla encji typu climate, pod aktualną temperaturą pojawi się mniejsza, dodatkowa etykieta.

  • Priorytet dopasowania: hvac_actionstate (hvac_mode) → preset_mode.
custom_states_labels:
  off: ""
  heating: "Grzanie"
  idle: "Czuwanie"
  eco: "Eko"
  comfort: "Komfort"

Domyślny rozmiar czcionki to state_size - 5px. Możesz go nadpisać parametrem value2_size.

:sun_behind_small_cloud: Druga linia tekstu (value2) dla pogody (weather)

Ten sam mechanizm działa dla encji pogodowych — dopasowanie odbywa się na podstawie atrybutu temperatury (temperature).

custom_states_labels:
  "<5": "Zimno: weź grubą kurtkę"
  "5-15": "Chłodno: załóż kurtkę"
  "15-25": "Komfortowo: lekka bluza"
  ">25": "Gorąco: t-shirt"

:alarm_clock: Powitanie w trybie zegara (entity: on.clock)

Gdy zdefiniujesz custom_states_labels dla wbudowanego zegara, nad cyframi pojawi się tekst powitania, który aktualizuje się na żywo co sekundę (bez przeładowywania strony!).

entity: on.clock
custom_states_labels:
  "0-5": "Cisza nocna... 🌙"
  "5-9": "Dzień dobry! ☕"
  "9-17": "Miłego dnia! 👋"
  "17-22": "Dobry wieczór! 🌆"
  "22-0": "Dobranoc! ✨"

:input_latin_letters: Automatyczne zawijanie wierszy

Długie etykiety tekstowe zawijają się teraz automatycznie wewnątrz granic karty — nie trzeba już ręcznie wpisywać znaczników <br>. Oczywiście ręczne wymuszenie przejścia do nowej linii za pomocą <br> nadal działa.

:high_voltage: max_watts — Obsługa ID encji

Parametr max_watts przyjmuje teraz zarówno sztywną liczbę, jak i ID encji (np. sensor mocy). Wartość jest odczytywana na żywo ze stanu sensora.

max_watts: sensor.socket_max_power
# lub tradycyjnie:
max_watts: 2000

:memo: Ważne uwagi przy konfiguracji

  1. Wszystkie zmiany są w pełni kompatybilne wstecz — Twoje obecne konfiguracje będą działać bez żadnych modyfikacji.
  2. :warning: Klucze w YAML używające operatorów > lub < MUSZĄ być w cudzysłowie (np. ">25", "<10"), inaczej parser zgłosi błąd.
  3. Dla operatorów zwiększających (>, >=) układaj reguły od najwyższej do najniższej wartości — wygrywa pierwsze dopasowanie od góry.
  4. Dla operatorów zmniejszających (<, <=) układaj reguły od najniższej do najwyższej (z tego samego powodu).

:open_file_folder: Przydatne linki i dokumentacja PL

Pełny opis działania tych funkcji wraz z zaawansowanymi przykładami znajdziecie w polskiej dokumentacji w katalogu docs na repozytorium:


:star: Podoba Ci się ten projekt?

Jeśli korzystasz z karty i podoba Ci się moja praca, zachęcam do zostawienia gwiazdki (Star) na GitHubie! :glowing_star:
Dla Ciebie to tylko jedno kliknięcie, a dla mnie ogromna motywacja do dalszego rozwijania projektu i dodawania kolejnych funkcji. Dzięki! :raising_hands:

4 polubienia

Przykład wykorzystania custom_states_labels do wyświetlania własnych komunikatów w zależności od poboru mocy bojlera.

Na poniższych screenach widać efekt dla stanu spoczynku oraz podczas intensywnego grzania.

entity: sensor.boiler_moc  
custom_states_labels:
  < 10: Gorąca woda gotowa! Czas na relaks 🛁
  10 - 100: Grzałka przeciąga się po drzemce 😴
  100 - 600: Powoli, ale skutecznie 🌡️
  600 - 1200: Woda nabiera temperatury! 🚀
  1200 - 1550: Grzejemy na pełnym gazie! 🔥
  "> 1550": Uwaga! Bojler połyka waty jak szalony! ⚡🚨
custom_states_on:
  - "0.0"  # dajemy 0.0 aby karta przełączyła stan jeżeli chcemy sterować kartą on , off
entity_watts: sensor.boiler_moc
tap_action:
  action: call-service
  service: homeassistant.toggle
  service_data:
    entity_id: switch.boiler_socket

To tylko jeden z przykładów. W ten sam sposób można opisywać temperaturę, zużycie energii, poziom baterii i wiele innych sensorów.

Jakie ciekawe zastosowania custom_states_labels przyszły Wam do głowy?

1 polubienie