← Tutte le funzionalità · Funzionalità

Stili che reagiscono allo stato dell'entità.

Qualsiasi proprietà di stile su qualsiasi blocco può essere guidata da dati live di Home Assistant. Collega i colori di sfondo alla temperatura, l'opacità allo stato di un interruttore, o genera un gradiente CSS da un valore sensore — con cinque potenti modalità di binding.

Editor binding di stile con binding soglia che cambia colore in base alla temperatura
5
Modalità di binding
Qualsiasi
Proprietà CSS collegabile
Live
Aggiornamenti in tempo reale
AND/OR
Operatori logici
Pulsante binding accanto a una proprietà di stile e overlay editor binding
Come funziona

Un clic per collegare uno stile alla tua casa

Accanto a ogni proprietà di stile nel pannello Stili, un pulsante di binding apre l'editor di binding. Scegli un'entità, seleziona una modalità, configura la mappatura — e lo stile si aggiorna live mentre lo stato dell'entità cambia.

  1. 1

    Clicca il pulsante binding

    Ogni proprietà di stile ha un pulsante 🔗 di binding. Cliccalo per aprire l'editor di binding dedicato per quella proprietà.

  2. 2

    Scegli una sorgente entità

    Seleziona da quale entità leggere e se usare il suo stato o un attributo specifico come valore di input.

  3. 3

    Scegli una modalità di binding

    Scegli una delle cinque modalità — Diretto, Mappa, Soglia, Condizione o Template — a seconda di come vuoi trasformare il valore.

  4. 4

    Vedi il risultato live sul canvas

    Il canvas si aggiorna immediatamente mentre configuri il binding. Quello che vedi nell'editor è esattamente quello che appare nel tuo dashboard.

Cinque modalità di binding

Una modalità per ogni caso d'uso

Dal semplice passaggio diretto del valore a condizioni complesse su più entità — c'è una modalità di binding per ogni tipo di stile dinamico immaginabile.

01

Diretto

Mappa un intervallo numerico a un intervallo di stile

Passa il valore dell'entità direttamente alla proprietà di stile, con mappatura opzionale degli intervalli input e output. Ideale per valori numerici come luminosità, volume o temperatura.

Esempio: Luminosità → Opacità

Entità light.living_room · attributo brightness
Range Input 0 – 255
Range Output 0.2 – 1
Risultato L'opacità scala con la luminosità
0255
opacity: 0.2opacity: 1

Esempio: Stato interruttore → Colore sfondo

on #4CAF50 verde
off #9E9E9E grigio
unavailable #F44336 rosso
02

Mappa

Mappa stati specifici a valori specifici

Definisci una tabella di lookup: ogni valore di stato dell'entità mappa a uno specifico output di stile. Perfetto per stati discreti come on/off, modalità HVAC o livelli di allerta.

03

Soglia

Codifica a colori gli intervalli numerici

Definisci intervalli con valore minimo e massimo, ciascuno con un output diverso. Ideale per sensori numerici come temperatura, umidità, CO₂ o livello batteria.

Esempio: Temperatura → Colore bordo

Freddo
Buono
Caldo
0 – 18°C Freddo
18 – 24°C Confortevole
24 – 40°C Caldo

Esempio: Bordo di allerta multi-entità

AND entrambe devono essere vere
sensor.temperature > 30
sensor.humidity > 70
2px solid #F44336
altrimenti 1px solid transparent
== != > < >= <= contains in
04

Condizione

Regole logiche con operatori AND / OR

Valuta condizioni usando operatori di confronto e combinale con logica AND/OR. Ogni caso condizione può leggere da più entità e attributi all'interno dello stesso binding. Le condizioni vengono valutate in ordine — vince il primo match.

05

Template

Controllo totale con stringhe template

Scrivi una stringa template con segnaposto {{ }} che fanno riferimento ai valori delle entità. Il risultato viene usato direttamente come valore della proprietà CSS — abilitando qualsiasi output immaginabile, inclusi gradienti dinamici.

Esempio: Gradiente tonalità dinamico

linear-gradient(to right, hsl({{ state }}, 80%, 50%), transparent)

Dove {{ state }} è il valore di sensor.color_temperature — un numero tra 0 e 360.

Sorgente entità

Leggi da qualsiasi entità o attributo

Ogni binding ha una sorgente entità indipendente — non deve corrispondere all'entità configurata del blocco. Leggi lo stato o esplora qualsiasi attributo.

Stato entità

Usa il valore dello stato principale dell'entità — lo stesso valore mostrato nel blocco Stato entità.

Attributo specifico

Leggi qualsiasi attributo dell'entità — brightness, color_temp, fan_speed, battery_level e altro.

Entity Slot

Usa un entity slot come sorgente — il binding si aggiorna quando cambia l'assegnazione dello slot.

Valore predefinito

Valore di fallback usato quando l'entità non è disponibile o il binding non può essere risolto.

Selettore sorgente entità con entity picker e selettore attributo

Dai vita alle tue card.

Installa CardBuilder sulla tua istanza Home Assistant e inizia a collegare gli stili ai dati delle entità — gratis.