Nodi HTML (Card Designer)

Categoria: Media Utilities
Difficoltà: Avanzato

Il HTML Node (spesso chiamato Card Designer) ti permette di creare immagini statiche programmatiche. Invece di usare l’IA generativa (imprevedibile), usi codice HTML e CSS standard per disegnare layout precisi (es. cartellini prezzi, titoli di coda, citazioni).

La potenza sta nelle Variabili Dinamiche: puoi inserire dati da altri nodi direttamente nel codice HTML.

Specifiche Tecniche

Inputs (Ingressi Dinamici)

Nome Porta	Tipo Dati	Molteplicità	Descrizione
`{{variable}}`	`String`	Singolo	Ogni volta che scrivi `{{nome}}` nel codice HTML, appare una nuova porta di ingresso sul nodo.

Outputs (Uscite)

Nome Porta	Tipo Dati	Descrizione
`Rendered Card`	`Image`	L’immagine PNG risultante dal rendering del codice.

Parametri (Inspector)

Parametro	Tipo	Default	Descrizione
`HTML`	`Code`	-	La struttura della card (es. `<h1>{{titolo}}</h1>`).
`CSS`	`Code`	-	Lo stile della card (es. `h1 { color: red; }`).
`Width/Height`	`Number`	`400x300`	La risoluzione dell’immagine generata.

Guida alle Variabili

Per creare un ingresso dinamico:

Nel pannello HTML, scrivi una variabile tra doppie graffe: Ciao {{nome}}.
Noterai che sul nodo nel grafo è apparsa una nuova porta chiamata nome.
Collega un Text Node (o Fetch/JSON) a quella porta.
L’immagine finale sostituirà {{nome}} con il testo in ingresso.

Casi d’Uso (Esempi)

Scenario A: Titolo Video (Overlay)

Vuoi un titolo pulito sopra il video.

HTML: <div class="title">{{titolo}}</div>
CSS: .title { color: white; font-size: 60px; text-shadow: 0 2px 4px black; }
Input: Collega il titolo della news alla porta titolo.
Uso: Usa l’immagine risultante come Reference (o overlay in post-produzione).

Scenario B: Scheda Prodotto E-commerce

HTML:

<div class="card">
  <img src="{{img_url}}" />
  <h2>{{prezzo}}</h2>
</div>

Input: Collega prezzo e URL immagine estratti da un JSON.

Troubleshooting (Risoluzione Problemi)

Sintomo	Causa Probabile	Soluzione
Immagini esterne rotte	CORS / Sicurezza	I tag `<img>` funzionano solo se il server dell’immagine permette l’accesso. Usa immagini Base64 se possibile o URL pubblici sicuri.
Font non caricati	Web Fonts	I font di sistema funzionano. Per Google Fonts, devi importarli via CSS `@import`.
Variabile non appare	Sintassi errata	Assicurati di usare esattamente `{{nome}}` senza spazi strani all’interno delle graffe (es. `{{ nome }}` funziona, ma `{{nome }` no).