Integracja button-card
1Tap-action
1) tap_action: toggle (włącz/wyłącz)
type: button entity: switch.21_relay_button_0_103 name: Przekaźnik 21 – TAP toggle icon: mdi:toggle-switch tap_action: action: toggle
2) tap_action: more-info (okno szczegółów)
type: button entity: switch.21_relay_button_0_103 name: Przekaźnik 21 – TAP more-info icon: mdi:information tap_action: action: more-info
3) tap_action: navigate (przejście do innego widoku)
show_name: true show_icon: true type: button entity: switch.21_relay_button_0_103 name: Przekaźnik 21 – TAP navigate icon: mdi:compass tap_action: action: navigate navigation_path: /lovelace/przelacznik
4) tap_action: url (otwarcie linku)
type: button entity: switch.21_relay_button_0_103 name: Przekaźnik 21 – TAP url icon: mdi:link tap_action: action: url url_path: https://blog.homeswitch.pl/?p=2681
5) tap_action: call-service (wywołanie usługi)
type: button
entity: switch.21_relay_button_0_103
name: Przekaźnik 21 – TAP call-service ON
icon: mdi:power-plug
tap_action:
action: call-service
service: switch.turn_on
target:
entity_id: switch.21_relay_button_0_103
6) tap_action: assist (uruchom Asystenta HA)
type: button entity: switch.21_relay_button_0_103 name: Przekaźnik 21 – TAP assist icon: mdi:microphone tap_action: action: assist # opcjonalnie: # pipeline_id: default # start_listening: true
7) tap_action: none (nic nie rób)
type: button entity: switch.21_relay_button_0_103 name: Przekaźnik 21 – TAP none icon: mdi:block-helper tap_action: action: none
2 Hold-Action
8) hold_action: toggle (włącz/wyłącz)
type: button entity: switch.21_relay_button_0_103 name: Przekaźnik 21 – HOLD toggle icon: mdi:toggle-switch hold_action: action: toggle
9) hold_action: more-info (okno szczegółów)
type: button entity: switch.21_relay_button_0_103 name: Przekaźnik 21 – HOLD more-info icon: mdi:information hold_action: action: more-info
10) hold_action: navigate (przejście do innego widoku)
type: button entity: switch.21_relay_button_0_103 name: Przekaźnik 21 – HOLD navigate icon: mdi:compass hold_action: action: navigate navigation_path: /lovelace/kuchnia
11) hold_action: url (otwarcie linku)
type: button entity: switch.21_relay_button_0_103 name: Przekaźnik 21 – HOLD url icon: mdi:link hold_action: action: url url_path: https://homeassistant.io
12) hold_action: call-service (np. przełącz)
type: button
entity: switch.21_relay_button_0_103
name: Przekaźnik 21 – HOLD call-service TOGGLE
icon: mdi:power-cycle
hold_action:
action: call-service
service: switch.toggle
target:
entity_id: switch.21_relay_button_0_103
13) hold_action: assist (uruchom Asystenta HA)
type: button entity: switch.21_relay_button_0_103 name: Przekaźnik 21 – HOLD assist icon: mdi:microphone hold_action: action: assist # opcjonalnie: # pipeline_id: default # start_listening: true
14) hold_action: none (nic nie rób)
type: button entity: switch.21_relay_button_0_103 name: Przekaźnik 21 – HOLD none icon: mdi:block-helper hold_action: action: none
3 Double-Tap Action
15) double_tap_action: toggle (włącz/wyłącz)
type: button entity: switch.21_relay_button_0_103 name: Przekaźnik 21 – DOUBLE toggle icon: mdi:toggle-switch double_tap_action: action: toggle
16) double_tap_action: more-info (okno szczegółów)
type: button entity: switch.21_relay_button_0_103 name: Przekaźnik 21 – DOUBLE more-info icon: mdi:information double_tap_action: action: more-info
17) double_tap_action: navigate (przejście do innego widoku)
type: button entity: switch.21_relay_button_0_103 name: Przekaźnik 21 – DOUBLE navigate icon: mdi:compass double_tap_action: action: navigate navigation_path: /lovelace/techniczne
18) double_tap_action: url (otwarcie linku)
type: button entity: switch.21_relay_button_0_103 name: Przekaźnik 21 – DOUBLE url icon: mdi:link double_tap_action: action: url url_path: https://grafana.twojalokalna
19) double_tap_action: call-service (np. wyłącz)
type: button
entity: switch.21_relay_button_0_103
name: Przekaźnik 21 – DOUBLE call-service OFF
icon: mdi:power
double_tap_action:
action: call-service
service: switch.turn_off
target:
entity_id: switch.21_relay_button_0_103
20) double_tap_action: assist (uruchom Asystenta HA)
type: button entity: switch.21_relay_button_0_103 name: Przekaźnik 21 – DOUBLE assist icon: mdi:microphone double_tap_action: action: assist
21) double_tap_action: none (nic nie rób)
type: button entity: switch.21_relay_button_0_103 name: Przekaźnik 21 – DOUBLE none icon: mdi:block-helper double_tap_action: action: none
Tap action, hold action, double tap action
type: custom:button-card
entity: switch.21_relay_button_0_114
name: Sterowanie oświetleniem
icon: mdi:light-switch
show_state: true
tap_action:
action: call-service
service: switch.toggle # Pojedyncze kliknięcie – lampa 1
target:
entity_id: switch.21_relay_button_0_114
double_tap_action:
action: call-service
service: switch.toggle # Podwójne kliknięcie – lampa 2
target:
entity_id: switch.swiatlo_lustro
hold_action:
action: call-service
service: switch.toggle # Przytrzymanie – wentylator
target:
entity_id: switch.21_relay_button_0_116
state:
- value: 'on'
icon: mdi:lightbulb-on
color: yellow
- value: 'off'
icon: mdi:lightbulb-off
color: gray
4 Tile — akcje na kaflu i ikonie
1) Kafel: TAP = toggle, IKONA: more-info
type: tile entity: switch.21_relay_button_0_103 name: Przekaźnik 21 tap_action: action: toggle icon_tap_action: action: more-info
2) Kafel: TAP = navigate, IKONA: toggle
type: tile entity: switch.21_relay_button_0_103 name: Przekaźnik 21 tap_action: action: navigate navigation_path: /dashboard/lovelace/techniczne icon_tap_action: action: toggle
3) Kafel: TAP = none, IKONA: call-service (włącz)
type: tile
entity: switch.21_relay_button_0_103
name: Przekaźnik 21
tap_action:
action: none
icon_tap_action:
action: call-service
service: switch.turn_on
target:
entity_id: switch.21_relay_button_0_103
4) Kafel: TAP = toggle, IKONA HOLD: assist
type: tile entity: switch.21_relay_button_0_103 name: Przekaźnik 21 tap_action: action: toggle icon_hold_action: action: assist # opcjonalnie: # start_listening: true
5) Kafel: TAP = toggle, IKONA DOUBLE: url
type: tile entity: switch.21_relay_button_0_103 name: Przekaźnik 21 tap_action: action: toggle icon_double_tap_action: action: url url_path: https://twoja-domena.pl
6) Kafel: TAP = more-info, IKONA: navigate
type: tile entity: switch.21_relay_button_0_103 name: Przekaźnik 21 tap_action: action: more-info icon_tap_action: action: navigate navigation_path: /lovelace/salon
7) Kafel: TAP = toggle, IKONA: call-service (toggle)
type: tile
entity: switch.21_relay_button_0_103
name: Przekaźnik 21
tap_action:
action: toggle
icon_tap_action:
action: call-service
service: switch.toggle
target:
entity_id: switch.21_relay_button_0_103
8) Pełny zestaw gestów na IKONIE (tap/hold/double)
type: tile
entity: switch.21_relay_button_0_103
name: Przekaźnik 21
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: none
icon_tap_action:
action: more-info # kliknięcie ikony otwiera szczegóły
icon_hold_action:
action: call-service # przytrzymanie ikony wywoła usługę
service: switch.turn_off
target:
entity_id: switch.21_relay_button_0_103
icon_double_tap_action:
action: navigate # podwójne kliknięcie ikony – nawigacja
navigation_path: /dashboard/lovelace/kuchnia
9) IKONA = url, kafel nadal steruje
type: tile entity: switch.21_relay_button_0_103 name: Przekaźnik 21 tap_action: action: toggle icon_tap_action: action: url url_path: https://grafana.twojalokalna
10) IKONA wyłączona (nic nie robi), kafel działa normalnie
type: tile entity: switch.21_relay_button_0_103 name: Przekaźnik 21 tap_action: action: toggle icon_tap_action: action: none
6 Button-card — akcje press/release i na ikonie
1) Przycisk chwilowy na Twoim przekaźniku (wciśnij=ON, puść=OFF)
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Przekaźnik 21 – chwilowy
icon: mdi:gesture-tap-button
show_state: false
press_action:
action: call-service
service: switch.turn_on
target:
entity_id: switch.21_relay_button_0_103
release_action:
action: call-service
service: switch.turn_off
target:
entity_id: switch.21_relay_button_0_103
2) „Impuls” tylko przy wciśnięciu (puść = nic)
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Przekaźnik 21 – impuls
icon: mdi:flash-outline
press_action:
action: call-service
service: switch.turn_on
target:
entity_id: switch.21_relay_button_0_103
release_action:
action: none
3) Roleta: trzymaj aby opuszczać, puść aby zatrzymać
type: custom:button-card
entity: cover.roleta_salon
name: Roleta – trzymaj aby opuszczać
icon: mdi:blinds
press_action:
action: call-service
service: cover.close_cover
target:
entity_id: cover.roleta_salon
release_action:
action: call-service
service: cover.stop_cover
target:
entity_id: cover.roleta_salon
4) Roleta: trzymaj aby podnosić, puść aby zatrzymać
type: custom:button-card
entity: cover.roleta_salon
name: Roleta – trzymaj aby podnosić
icon: mdi:blinds-open
press_action:
action: call-service
service: cover.open_cover
target:
entity_id: cover.roleta_salon
release_action:
action: call-service
service: cover.stop_cover
target:
entity_id: cover.roleta_salon
5) BOOST wentylatora tylko podczas trzymania (wciśnij=100%, puść=OFF)
type: custom:button-card
entity: fan.wentylacja
name: Wentylacja – BOOST
icon: mdi:fan
press_action:
action: call-service
service: fan.set_percentage
target:
entity_id: fan.wentylacja
data:
percentage: 100
release_action:
action: call-service
service: fan.turn_off
target:
entity_id: fan.wentylacja
6) Wariant: tylko IKONA steruje chwilowo (kafelek nic nie robi)
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Ikona steruje chwilowo
icon: mdi:power
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
icon_press_action:
action: call-service
service: switch.turn_on
target:
entity_id: switch.21_relay_button_0_103
icon_release_action:
action: call-service
service: switch.turn_off
target:
entity_id: switch.21_relay_button_0_103
5 Button-card — nazwa, label i state_display
1) Podmień on/off na „Świeci/Zgasło”
type: custom:button-card entity: switch.21_relay_button_0_103 name: Oświetlenie taras icon: mdi:lightbulb show_state: true state_display: > [[[ return entity.state === 'on' ? 'Świeci' : 'Zgasło'; ]]]
2) Stała etykieta (label) „Salon”
type: custom:button-card entity: switch.21_relay_button_0_103 name: Przekaźnik 21 label: Salon show_label: true state_display: > [[[ return entity.state === 'on' ? 'Włączone' : 'Wyłączone'; ]]]
3) Dynamiczna etykieta z atrybutu (np. moc w W)
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Gniazdo – biurko
show_label: true
label: >
[[[
const p = entity.attributes.power || 0;
return `Moc: ${p} W`;
]]]
state_display: >
[[[ return entity.state === 'on' ? 'Zasilane' : 'Brak zasilania'; ]]]
4) Nazwa nadpisana, stan pokazuje godzinę ostatniej zmiany
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Sufit LED
show_state: true
state_display: >
[[[
const ts = entity.last_changed;
const d = new Date(ts);
const hh = String(d.getHours()).padStart(2,'0');
const mm = String(d.getMinutes()).padStart(2,'0');
return entity.state === 'on' ? `Od ${hh}:${mm}` : `Off od ${hh}:${mm}`;
]]]
5) Etykieta z innej encji (np. temperatura w pomieszczeniu)
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Lampa – salon
show_label: true
label: >
[[[
const t = states['sensor.salon_temperature']?.state;
return t ? `Salon: ${t}°C` : 'Salon';
]]]
state_display: >
[[[ return entity.state === 'on' ? 'Świeci' : 'Zgaszone'; ]]]
6) Minimalistycznie: bez nazwy, tylko label jako podpis
type: custom:button-card entity: switch.21_relay_button_0_103 show_name: false show_label: true label: "Taras" state_display: > [[[ return entity.state === 'on' ? 'ON' : 'OFF'; ]]]
7) Zmieniaj label w zależności od stanu
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Pompa ogrodowa
show_label: true
label: >
[[[
return entity.state === 'on' ? 'Tryb: Praca' : 'Tryb: Spoczynek';
]]]
state_display: >
[[[ return entity.state === 'on' ? 'Aktywna' : 'Wyłączona'; ]]]
8) Nazwa z atrybutu „friendly_name”, label stały
type: custom:button-card entity: switch.21_relay_button_0_103 name: > [[[ return entity.attributes.friendly_name || 'Przekaźnik 21'; ]]] show_label: true label: Rozdzielnia – sekcja A state_display: > [[[ return entity.state.toUpperCase(); ]]]
9) Stan z czasem działania (ile minut ON)
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Oświetlenie podjazd
show_state: true
state_display: >
[[[
if (entity.state !== 'on') return 'OFF';
const now = Date.now();
const since = new Date(entity.last_changed).getTime();
const minutes = Math.max(0, Math.round((now - since)/60000));
return `ON • ${minutes} min`;
]]]
10) Kompakt: niestandardowy skrót stanu (PL)
type: custom:button-card entity: switch.21_relay_button_0_103 name: Taras LED state_display: > [[[ return entity.state === 'on' ? 'TAK' : 'NIE'; ]]] label: Strefa: Ogród show_label: true
6 Button-card — kolory (icon/card/auto)
1) Kolor ikony (stały) – color_type: icon
type: custom:button-card entity: switch.21_relay_button_0_103 name: Przekaźnik 21 icon: mdi:power color_type: icon color: '#1e88e5' # niebieski, dopuszcza hex/var/nazwę
2) Kolor ikony zależny od stanu (ON = zielony, OFF = szary)
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Oświetlenie podjazd
icon: mdi:lightbulb
color_type: icon
state:
- value: 'on'
color: '#2e7d32'
- value: 'off'
color: '#9e9e9e'
3) Kolor tła karty (stały) – color_type: card
type: custom:button-card entity: switch.21_relay_button_0_103 name: Taras icon: mdi:outdoor-lamp color_type: card color: '#37474f' # tło; kolor tekstu dostosuje się automatycznie
4) Kolor tła zależny od stanu (ON = pomarańcz, OFF = neutral)
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Pompa ogrodowa
icon: mdi:pump
show_state: true
show_icon: true
styles:
card:
- background: >
[[[ return entity.state === 'on'
? 'rgba(251,140,0,0.25) !important' // ON: pomarańczowe tło
: 'var(--card-background-color) !important'; ]]] // OFF: standardowe tło
- transition: background 0.2s ease
name:
- color: var(--primary-text-color)
state:
- color: var(--secondary-text-color)
5) Lampa: kolor „auto” z barwy/temperatury światła (tylko light.*)
type: custom:button-card entity: light.lampa_salon name: Lampa salon icon: mdi:lightbulb color_type: icon color: auto # przejmuje kolor z encji light.*
6) Temperatury → kolor ikony (zimno = niebieski, ciepło = czerwony)
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Nawiew wg temp.
icon: mdi:thermometer
color_type: icon
show_icon: true
triggers_update:
- sensor.temperatura_biuro_temperature
styles:
icon:
- color: |
[[[
const s = states['sensor.temperatura_biuro_temperature'];
const t = s ? parseFloat(s.state) : NaN;
if (isNaN(t)) { return 'red'; } // brak danych
if (t <= 18) { return 'green'; } // zimno
if (t >= 26) { return '#e53935'; } // gorąco
return 'orange'; // umiarkowanie
]]]
7) „Wysoki pobór” → czerwone tło (z atrybutu power)
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Gniazdo biurko
icon: mdi:power-socket-eu
color_type: card
color: >
[[[
const p = entity.attributes.power || 0;
return p > 200 ? '#b71c1c' : 'var(--card-background-color)';
]]]
label: >
[[[ return `Moc: ${(entity.attributes.power || 0)} W`; ]]]
show_label: true
8) Delikatne „podświetlenie tylko gdy ON” (tło półprzezroczyste)
type: custom:button-card
entity: switch.21_relay_button_0_103
name: LED korytarz
icon: mdi:led-strip-variant
color_type: card
state:
- value: 'on'
color: 'rgba(255, 214, 10, 0.25)'
- value: 'off'
color: 'transparent'
9) Tryb organizacyjny: blank-card (pusta przestrzeń/spacer)
type: custom:button-card color_type: blank-card
10) Tryb organizacyjny: label-card (nagłówek/sekcja)
type: custom:button-card color_type: label-card name: Strefa: Salon label: Oświetlenie i rolety show_label: true
7 Button-card — reguły state i styles
1) Proste ON/OFF – inny kolor i ikona
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Oświetlenie podjazd
icon: mdi:lightbulb
color_type: icon
state:
- value: 'on'
color: '#2e7d32'
icon: mdi:lightbulb-on
- value: 'off'
color: '#9e9e9e'
icon: mdi:lightbulb-outline
2) ON = „podświetl kartę”, OFF = standardowe tło
type: custom:button-card
entity: switch.21_relay_button_0_103
name: LED korytarz
icon: mdi:led-strip-variant
color_type: card
state:
- value: 'on'
color: 'rgba(255,214,10,0.25)'
- value: 'off'
color: 'var(--card-background-color)'
3) Próg z sensora (np. temperatura) – zimno / ok / gorąco
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Nawiew wg temp. (po sensorze)
show_icon: true
show_label: true
icon: mdi:thermometer
triggers_update:
- sensor.temperatura_biuro_temperature
- sensor.time # odśwież co minutę (jeśli masz sensor.time)
# Ikona – zostawiamy stałą, kolorujemy tylko barwą
styles:
icon:
- color: >
[[[
const raw = states['sensor.temperatura_biuro_temperature']?.state ?? '';
const t = parseFloat(String(raw).replace(',', '.'));
if (isNaN(t)) return '#9e9e9e !important'; // brak danych – szary
if (t <= 18) return '#2979ff !important'; // ZIMNO – żywy niebieski
if (t >= 26) return '#d50000 !important'; // GORĄCO – głęboka czerwień
return '#00c853 !important'; // UMIARK. – żywa zieleń (bez żółci)
]]]
4) Zmiana nazwy/etykiety po stanie (ON/OFF)
type: custom:button-card
entity: switch.21_relay_button_0_103
show_label: true
state:
- value: 'on'
name: Pompa ogrodowa – PRACA
label: Tryb: aktywny
color: '#43a047'
- value: 'off'
name: Pompa ogrodowa – STOP
label: Tryb: spoczynek
color: '#9e9e9e'
5) Wysoki pobór mocy → czerwone tło + wytłuszczony napis
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Gniazdo biurko
icon: mdi:power-socket-eu
show_label: true
triggers_update:
- sensor.licznik_energii_zemismart_power
# TŁO karty – czerwone gdy > 100 W
styles:
card:
- background: >
[[[
const raw = String(states['sensor.licznik_energii_zemismart_power']?.state ?? '');
// usuń spacje (także twarde), zamień przecinek na kropkę i parsuj
const v = parseFloat(raw.replace(/\s/g,'').replace(',', '.'));
if (isNaN(v)) return 'var(--card-background-color) !important';
return v > 100
? 'rgba(255, 76, 76, 0.25) !important' // czerwone półprzezroczyste
: 'var(--card-background-color) !important';
]]]
icon:
- color: >
[[[
const raw = String(states['sensor.licznik_energii_zemismart_power']?.state ?? '');
const v = parseFloat(raw.replace(/\s/g,'').replace(',', '.'));
if (isNaN(v)) return '#9e9e9e !important';
return v > 100 ? '#b71c1c !important' : '#9e9e9e !important';
]]]
# Etykieta z aktualnym poborem (do weryfikacji, co karta widzi)
label: >
[[[
const raw = String(states['sensor.licznik_energii_zemismart_power']?.state ?? '');
const v = parseFloat(raw.replace(/\s/g,'').replace(',', '.'));
return isNaN(v) ? 'P: —' : (v > 100 ? `P: ${v.toFixed(0)} W • wysoki` : `P: ${v.toFixed(0)} W`);
]]]
7) Ikona „kręci się” tylko, gdy ON
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Pompa cyrkulacyjna
icon: mdi:sync
color_type: icon
state:
- value: 'on'
color: '#1e88e5'
spin: true
- value: 'off'
color: '#9e9e9e'
spin: false
8) Bateria niska → żółty alert, bardzo niska → czerwony
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Czujnik drzwi – bateria
icon: mdi:battery
color_type: icon
triggers_update:
- sensor.drzwi_battery
state:
- entity: sensor.drzwi_battery
operator: '<='
value: 10
color: '#e53935'
icon: mdi:battery-alert-variant-outline
label: Bateria: ≤10%
show_label: true
- entity: sensor.drzwi_battery
operator: '<=' value: 30 color: '#fbc02d' icon: mdi:battery-low label: Bateria: ≤30% show_label: true - entity: sensor.drzwi_battery operator: '>'
value: 30
color: '#43a047'
icon: mdi:battery
9) Różne style po stanie (ramka, cień, rozmiar ikony)
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Zawór wody
icon: mdi:valve
state:
- value: 'on'
styles:
card:
- box-shadow: "0 0 0 2px #2e7d32 inset !important"
icon:
- width: "36px"
- color: "#2e7d32 !important"
- value: 'off'
styles:
card:
- box-shadow: "none !important"
icon:
- width: "28px"
- color: "#9e9e9e !important"
10) Warunek po innej encji (np. czujnik ruchu → „aktywny”)
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Oświetlenie hol
icon: mdi:motion-sensor
color_type: card
triggers_update:
- binary_sensor.hol_motion
state:
- entity: binary_sensor.hol_motion
value: 'on'
color: 'rgba(76,175,80,0.25)' # zielonkawe tło, gdy ruch
- entity: binary_sensor.hol_motion
value: 'off'
color: 'var(--card-background-color)'
8 Button-card — układ, rozmiary i siatka
1) Kwadrat, duża ikona nad tekstem
type: custom:button-card entity: switch.21_relay_button_0_103 name: Oświetlenie podjazd icon: mdi:lightbulb layout: name_state size: "28%" aspect_ratio: "2/1" card_size: 3 show_label: true label: "Wjazd"
2) Tekst z priorytetem, ikona mniejsza (układ „name_state”)
type: custom:button-card entity: switch.21_relay_button_0_103 name: Oświetlenie podjazd icon: mdi:lightbulb layout: name_state # najpierw nazwa+stan, ikona mniej dominująca size: 28% # mniejsza ikona aspect_ratio: 2/1 # prostokąt poziomy (szeroki) card_size: 3 show_label: true label: "Wjazd"
3) Ikona-only (minimal), idealne na szybkie skróty
type: custom:button-card entity: switch.21_relay_button_0_103 icon: mdi:power show_name: false show_state: false show_label: false layout: icon_name_state # układ bez znaczenia, bo ukryliśmy napisy size: 80% aspect_ratio: 1/1 card_size: 1
4) „Kafelek informacyjny” – szeroki, z etykietą w roli opisu
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Gniazdo biurko
icon: mdi:power-socket-eu
layout: icon_name_state
size: 36%
aspect_ratio: 3/1 # bardzo szeroki
card_size: 4
show_label: true
label: >
[[[ return `Pobór: ${(states['sensor.licznik_energii_zemismart_power']?.state||'—')} W`; ]]]
5) Wysoki kafel (pionowy), większe napisy
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Pompa ogrodowa
icon: mdi:pump
layout: icon_name_state
size: 50%
aspect_ratio: 1/2 # wysoki prostokąt
card_size: 2
show_label: true
label: "Tryb: spoczynek"
styles:
name:
- font-size: 16px
label:
- font-size: 13px
state:
- font-size: 13px
6) Układ „na miarę” (zaawansowane) – własna siatka miejsc
# Kiedy sam chcesz zdecydować, gdzie co leży: ikonę, nazwę, stan, etykietę ustawiasz siatką CSS.
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Zawór wody
icon: mdi:valve
show_label: true
label: "Hydro"
# Rozmiar i proporcje
size: 42%
aspect_ratio: 1/1
card_size: 2
# Własny układ (grid)
styles:
grid:
- grid-template-areas: |
"i n"
"i s"
"i l"
- grid-template-columns: 64px 1fr
- grid-template-rows: auto auto auto
icon:
- grid-area: i
- width: 42px
name:
- grid-area: n
- align-self: end
- font-weight: 600
state:
- grid-area: s
- color: var(--secondary-text-color)
label:
- grid-area: l
- color: var(--secondary-text-color)
Dosostowywanie wielkości w button card
type: custom:button-card
entity: switch.21_relay_button_0_103
name: Oświetlenie podjazd
icon: mdi:lightbulb
show_state: true # pokaż stan (on/off)
show_label: true # pokaż dodatkowy podpis pod kartą
label: "Strefa: Wjazd" # tekst etykiety (możesz wpisać, co chcesz)
# 1) UPROSZCZONY UKŁAD (szybkie ustawienie kolejności)
layout: icon_name_state # inne opcje: name_state, icon_state_name, icon_only
# 2) PROPORCJE KARTY I ROZMIAR IKONY
aspect_ratio: "2/1" # proporcje (1/1 = kwadrat, 2/1 = szeroki prostokąt)
size: "48%" # wielkość IKONY (np. "32px", "60%", "80%")
# 3) PEŁNA KONTROLA UKŁADU — SIATKA CSS (nadpisuje 'layout' gdy włączysz własne obszary)
styles:
# --- KARTA (tło, ramka, zaokrąglenia, cień, padding) ---
card:
- border-radius: 16px # ZAOKRĄGLENIA rogów (np. 8px / 16px / 24px)
- padding: 12px # wewnętrzne odstępy od krawędzi karty
- background: var(--card-background-color) # tło karty (albo np. "rgba(0,0,0,0.05)")
- box-shadow: "0 4px 12px rgba(0,0,0,0.08)" # delikatny cień
- border: "1px solid rgba(0,0,0,0.06)" # obramowanie karty
- transition: all 0.2s ease # płynne przejścia kolorów/rozmiarów
# --- WŁASNA SIATKA (pozycje elementów) ---
# Uwaga: odkomentuj poniższe linie, by ustawić własny układ siatką:
# grid:
# - grid-template-areas: |
# "i n" # i = icon, n = name
# "i s" # s = state
# "l l" # l = label (na dole, przez całą szerokość)
# - grid-template-columns: 72px 1fr # szerokość kolumn: lewa 72px (ikona), prawa — reszta
# - grid-template-rows: auto auto auto
# - column-gap: 12px # odstęp między kolumnami
# - row-gap: 4px # odstęp między wierszami
#
# Gdy powyższą sekcję odkomentujesz, dodaj też poniższe "grid-area" przy elementach:
icon:
# - grid-area: i # odkomentuj, gdy używasz własnej siatki
- width: 56px # ROZMIAR IKONY (alternatywa do size)
- color: "#9e9e9e" # kolor ikony (możesz nadpisać motyw)
- align-self: center # wyśrodkowanie w pionie
- justify-self: center # wyśrodkowanie w poziomie
name:
# - grid-area: n
- font-size: 16px # rozmiar nazwy
- font-weight: 600 # pogrubienie
- align-self: end # pozycja w komórce (start/center/end)
- justify-self: start # wyrównanie poziome (start/center/end)
state:
# - grid-area: s
- font-size: 13px # rozmiar czcionki stanu
- color: var(--secondary-text-color) # kolor tekstu stanu
- align-self: start
- justify-self: start
label:
# - grid-area: l
- margin-top: 6px # odstęp od elementów wyżej
- font-size: 12px
- color: var(--secondary-text-color)
# 4) WYGLĄD WEDŁUG STANU (ON/OFF) — proste reguły bez automatyzacji
state:
- value: "on"
# Koloruj ikonę i podświetl kartę, gdy jest włączone
styles:
icon:
- color: "#2e7d32" # zielona ikona przy ON
- width: 60px # ikona trochę większa przy ON
card:
- box-shadow: "0 0 0 2px #2e7d32 inset" # wewnętrzna ramka (zielona)
- value: "off"
styles:
icon:
- color: "#9e9e9e" # szara ikona przy OFF
- width: 48px # mniejsza ikona przy OFF
card:
- box-shadow: "none" # bez ramki przy OFF
# 5) AKCJE (opcjonalnie) — co zrobić po kliknięciu
tap_action:
action: toggle # klik = przełącz (toggle)
hold_action:
action: more-info # przytrzymanie = okno szczegółów
double_tap_action:
action: none # podwójny klik = nic