Collega blocchi con linee viventi.
Disegna linee di connessione SVG tra due blocchi sul canvas — con percorsi multi-punto, curve Bézier fluide, punti di ancoraggio ai blocchi e flusso animato di particelle guidato dallo stato live delle entità.
- SVG
- Linee di connessione fluide
- 9
- Punti di ancoraggio per blocco
- Bézier
- Supporto curva
- Live
- Animazione guidata dalle entità
Disegna connessioni direttamente sul canvas
Attiva la modalità disegno link dalla barra header, poi clicca un ancoraggio sorgente su un blocco e trascina all'ancoraggio destinazione su un altro blocco. Il percorso SVG viene creato istantaneamente.
Abilita la modalità disegno link
Clicca l'icona link nella barra header per entrare in modalità disegno link. Un indicatore visuale mostra lo stato attivo.
Clicca un ancoraggio sorgente
Passa il cursore su qualsiasi blocco per rivelare i suoi 9 punti di ancoraggio. Clicca quello da cui vuoi iniziare la connessione.
Trascina alla destinazione
Trascina su un altro blocco e rilascia sul suo ancoraggio destinazione. La linea di connessione SVG viene disegnata e agganciata.
Stilizza e anima
Configura l'aspetto della linea e opzionalmente collega la sua animazione o visibilità a un'entità Home Assistant.
Retta, a gradini o curva
Scegli tra tre modalità di rendering del percorso per adattarsi allo stile visuale della tua card.
Una linea retta diretta dall'ancoraggio sorgente all'ancoraggio destinazione. Pulita e minimale — ideale per layout compatti.
Un percorso ortogonale che si instrada attraverso segmenti orizzontali e verticali. Segue una struttura pulita a griglia.
Una curva Bézier cubica fluida con maniglie del punto di controllo configurabili. Crea connessioni organiche e fluenti.
Controllo visuale completo su ogni linea
Ogni link ha le proprie proprietà di stile — colore, larghezza, pattern tratteggio, opacità e altro. Ogni proprietà può essere collegata allo stato dell'entità per feedback visuale dinamico.
Colore tratto
Imposta il colore della linea usando qualsiasi valore CSS, o collegalo allo stato dell'entità per colorazione dinamica.
Larghezza tratto
Controlla lo spessore della linea in pixel. Supporta binding entità per variazioni dinamiche della larghezza.
Pattern tratteggio
Crea linee tratteggiate o punteggiate con un pattern SVG dash array configurabile.
Opacità
Imposta l'opacità complessiva del link, o collegala per far apparire/scomparire le linee in base allo stato dell'entità.
Marcatori freccia
Aggiungi marcatori freccia direzionali all'inizio, alla fine o a entrambe le estremità della linea di connessione.
Flusso particelle
Abilita particelle animate che scorrono lungo il percorso della linea, con velocità, dimensione e colore configurabili.
Linee che reagiscono alla tua casa
Collega qualsiasi proprietà del link — colore, opacità, velocità animazione — a un'entità Home Assistant live. Visualizza flussi energetici, connessioni attive o transizioni di stato in tempo reale.
Visualizzazione flusso energetico
Mostra la potenza che scorre dai pannelli solari alla batteria alla casa con particelle animate. La direzione e la velocità del flusso riflettono le letture energetiche reali.
Indicatori connessione attiva
Mostra linee di connessione tra dispositivi solo quando stanno comunicando — collegato a un sensore binario o attributo di connettività.
Colorazione basata sullo stato
Cambia il colore del link in base a soglie del sensore — verde per normale, ambra per attenzione, rosso per critico — usando le stesse modalità di binding delle proprietà di stile.
Dai vita alle tue card.
I link entità visivi sono disponibili su tutti i piani CardBuilder Pro — gratis per iniziare.