Come creare un SVG dinamico (SVGHMI) per WinCC Unified & V8: guida passo passo, a mano o con l'IA

Pensa a un serbatoio disegnato sullo schermo di una macchina. Un'immagine normale mostra sempre lo stesso livello. Un SVG dinamico permette al liquido di salire e scendere in base a un numero, con lo stesso disegno. Serve anche per indicare se una valvola è aperta, cambiare il colore di un motore o mostrare un componente solo quando serve.

SVG è un formato di immagine fatto di forme e linee, quindi si può ingrandire senza che diventi sgranato. Perché WinCC Unified possa modificare parti del disegno, il file dichiara degli ingressi chiamati parametri e viene salvato con l'estensione .svghmi. In TIA Portal compare nella tavolozza Widget dinamici.

Un parametro è un'impostazione che l'autore rende disponibile. In questo serbatoio si chiama FillLevel e accetta un numero da 0 a 100: con 50 il liquido arriva a metà altezza. Più avanti lo collegherai a TankLevel, una variabile HMI: il punto in cui il progetto conserva il numero che scrivi. Hanno nomi diversi perché uno appartiene al disegno e l'altro al progetto.

Ogni risorsa ha i propri parametri. Il download di questa guida include solo FillLevel. Gli esempi di colore e visibilità nello schema mostrano altre possibilità degli SVG dinamici; non sono impostazioni di questo file.

Siemens · Creazione di grafica SVG dinamica (109782045)Siemens · Gestione della grafica SVG dinamicaSiemens · Grafica SVGHMI in WinCC V8

Ti serve TIA Portal con WinCC Unified (i passaggi sono illustrati in V21.1) e la sua simulazione o Unified PC Runtime, il programma che esegue la schermata. Userai una variabile interna, che vive dentro la HMI, quindi non serve un PLC.

Attiva le estensioni dei file in Windows (Esplora file → Visualizza → Mostra → Estensioni nomi file). Così vedrai se il file termina davvero in .svghmi e non in .svghmi.txt, l'errore più comune al momento del salvataggio.

1. 1

   Dove · Esplora file → cartella di lavoro

   Scarica il serbatoio e conserva una copia di lavoro

   Scarica HmixHorizontalTank.svghmi con il pulsante di questa sezione. È un unico file: non c'è nulla da decomprimere. Conserva l'originale e copia il file in una cartella chiamata MioSerbatoio. Apri la copia con un editor di testo come Visual Studio Code o Notepad++ (clic destro → Apri con). Vedrai del testo, perché il disegno è descritto con istruzioni modificabili.

   ✓

   Verifica: Hai MioSerbatoio\HmixHorizontalTank.svghmi aperto nell'editor.

2. 2

   Dove · TIA Portal → dispositivo Unified → Pagine

   Prepara la schermata in cui lo inserirai

   Apri o crea un progetto di prova con un dispositivo WinCC Unified. Crea una schermata vuota chiamata ProvaSerbatoio e salva il progetto. Annota dove si trova la sua cartella: per impostazione predefinita, Documenti\Automation\<NomeProgetto>.

   ✓

   Verifica: Hai il file del disegno nell'editor e la schermata ProvaSerbatoio in TIA Portal, e sai dove si trova la cartella del progetto.

Siemens · Formato SVG supportato e restrizioni

Il serbatoio ha tre parti: un corpo fisso, un rettangolo blu che rappresenta il liquido e un ritaglio con la forma interna del serbatoio. Il ritaglio funziona come una mascherina: nasconde tutto ciò che sporge. Quando cambia il livello, cambia solo la parte visibile del liquido.

Se disegni una risorsa da zero, crea prima le parti in un editor vettoriale e salvala come SVG; poi aggiungi la parte HMI (parametri e collegamenti) con un editor di testo, come in questo esempio. Rinominare un .svg in .svghmi non lo rende dinamico. Qui le parti sono già disegnate e ne adatterai il comportamento.

1. 1

   Dove · Editor di testo → cerca (Ctrl+F) id="liquid"

   Trova la parte che cambierà

   Cerca id="liquid": è il rettangolo che rappresenta il liquido. Il corpo e i supporti sono in altre righe e non cambiano. Il gruppo che lo contiene usa clip-path, il ritaglio che tiene il blu dentro il contorno arrotondato.

   Come è costruito il serbatoio a strati

   1. 1

      Disegno fisso

      Corpo, supporti e raccordi non cambiano quando il livello sale.

   2. 2

      Rettangolo del liquido

      Cambiano la sua altezza e la posizione del bordo superiore. Il fondo resta al suo posto.

   3. 3

      Ritaglio interno

      Mostra il liquido solo dentro il contorno arrotondato del serbatoio.

   Gli strati formano un'unica grafica

   FillLevel = 50

   Il liquido arriva a metà altezza ed è ritagliato alle estremità. Il corpo e i supporti mantengono la loro forma.

   ✓

   Verifica: Sai qual è il liquido e perché può crescere senza uscire dal serbatoio.

2. 2

   Dove · Editor di testo → cerca hmi:paramDef

   Trova il parametro e cambia il suo valore iniziale

   Vicino all'inizio, dentro <hmi:self>, c'è la riga che dichiara FillLevel. type="number" indica che riceve un numero e default="50" ne fissa il valore iniziale. Cambia solo default="50" in default="25". Non cambiare il nome FillLevel: è quello che vedrai in TIA Portal.

   ✓

   Verifica: Con la tua variante ogni nuovo serbatoio parte dal 25 % dell'altezza invece che dal 50 % originale.

3. 3

   Dove · Editor di testo → torna a id="liquid"

   Segui il collegamento tra il numero e il liquido

   Il rettangolo ha due collegamenti: hmi-bind:height cambia l'altezza del liquido e hmi-bind:y sposta il suo bordo superiore; insieme mantengono fisso il fondo. Entrambi usano SafeLevel, un valore calcolato in hmi:localDef con Converter.Bounds, che mantiene FillLevel tra 0 e 100. Così, anche se arriva 140 o −20, il liquido non esce mai dal serbatoio. Non toccare queste righe.

   ✓

   Verifica: Hai capito tutto il percorso: il parametro riceve un numero e i collegamenti lo trasformano in un'altezza visibile.

4. 4

   Dove · Editor di testo → Salva

   Salva il file con l'estensione completa

   Salva le modifiche (Ctrl+S) con codifica UTF-8, mantenendo il nome HmixHorizontalTank.svghmi. Controlla in Esplora file che non termini in .svghmi.txt. Non aprire né salvare questo file con un programma di disegno generico: potrebbe eliminare gli attributi hmi: e hmi-bind: che lo rendono dinamico.

   ✓

   Verifica: Hai un .svghmi con il disegno, il suo parametro e i collegamenti tra i due, pronto per TIA Portal.

In questo esempio la percentuale esprime l'altezza del liquido. In un serbatoio orizzontale il 25 % dell'altezza non equivale al 25 % del volume: per mostrare litri servirebbe una conversione basata sulla geometria del serbatoio.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//SIEMENS//DTD SVG 1.0 TIA-HMI//EN" "http://tia.siemens.com/graphics/svg/1.8/dtd/svg18-hmi.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:hmi-bind--xlink="http://svg.siemens.com/hmi/bind/xlink/"
     xmlns:hmi="http://svg.siemens.com/hmi/"
     xmlns:hmi-bind="http://svg.siemens.com/hmi/bind/"
     xmlns:hmi-element="http://svg.siemens.com/hmi/element/"
     xmlns:hmi-feature="http://svg.siemens.com/hmi/feature/"
     xmlns:hmi-event="http://svg.siemens.com/hmi/event/"
     width="400" height="250" viewBox="0 0 400 250" preserveAspectRatio="xMidYMid meet">
  <hmi:self type="widget" displayName="HMIx Horizontal Tank"
            name="extended.HmixHorizontalTank" version="1.0.0">
    <hmi:paramDef name="FillLevel" type="number" default="50" />
  </hmi:self>
  <defs>
    <hmi:localDef name="SafeLevel" type="number"
      hmi-bind:value="{{ Converter.Bounds(ParamProps.FillLevel, 0, 100) }}" />
    <linearGradient id="steel" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#7f949f" />
      <stop offset="0.28" stop-color="#edf3f5" />
      <stop offset="0.52" stop-color="#bdcbd1" />
      <stop offset="1" stop-color="#667d88" />
    </linearGradient>
    <linearGradient id="water" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#4cc4df" />
      <stop offset="1" stop-color="#176184" />
    </linearGradient>
    <clipPath id="inside"><rect x="40" y="60" width="320" height="120" rx="60" /></clipPath>
  </defs>
  <!-- One parameter changes liquid height, not volume percentage. -->
  <path d="M100 170L90 220H130L120 170M280 170L270 220H310L300 170" fill="#405866" stroke="#273d49" stroke-width="2" />
  <path d="M86 224H134M266 224H314" stroke="#607987" stroke-width="8" />
  <rect x="180" y="43" width="40" height="17" rx="3" fill="url(#steel)" stroke="#546e7a" />
  <rect x="175" y="54" width="50" height="8" rx="2" fill="#adbec7" stroke="#546e7a" />
  <rect x="40" y="60" width="320" height="120" rx="60" fill="url(#steel)" />
  <g clip-path="url(#inside)">
    <rect id="liquid" x="40" y="120" width="320" height="60" fill="url(#water)"
      hmi-bind:height="{{ LocalProps.SafeLevel * 1.2 }}"
      hmi-bind:y="{{ 180 - LocalProps.SafeLevel * 1.2 }}" />
    <path d="M120 60V180M280 60V180" stroke="#254b60" stroke-opacity="0.22" stroke-width="2" />
    <path d="M55 78H345" stroke="#ffffff" stroke-opacity="0.28" stroke-width="8" />
  </g>
  <rect x="40" y="60" width="320" height="120" rx="60" fill="none" stroke="#546e7a" stroke-width="2" />
  <rect x="354" y="109" width="14" height="28" rx="2" fill="url(#steel)" stroke="#546e7a" />
  <path d="M369 115V131" stroke="#8ea5b1" stroke-width="6" />
</svg>

Siemens · Creazione di grafica SVG dinamica (109782045)

TIA Portal cerca gli SVG dinamici di ogni progetto in una cartella precisa e li mostra nella tavolozza Widget dinamici, da cui li trascini nella schermata.

1. 1

   Dove · Esplora file → cartella del tuo progetto TIA

   Copia il file nella cartella del progetto

   Nella cartella del progetto entra in UserFiles (creala se non esiste). Al suo interno crea SVGControls, se non esiste ancora, e copia lì il file modificato. La destinazione è la cartella del progetto, non la cartella di installazione Siemens.

   Dove salvare il file del serbatoio

   Dentro la cartella del tuo progetto

   • Il tuo progetto/
     • UserFiles/
       • SVGControls/
         • HmixHorizontalTank.svghmi

   Crea SVGControls se non esiste ancora e copia qui il file.

   Poi, nell'editor delle schermate

   Aggiorna la tavolozza Widget dinamici nella task card Tool e trascina il serbatoio in una schermata del dispositivo Unified.

   ✓

   Verifica: Il percorso termina con UserFiles\SVGControls\HmixHorizontalTank.svghmi.

2. 2

   Dove · TIA Portal → ProvaSerbatoio → Tool → Widget dinamici

   Aggiorna la tavolozza e trascina il serbatoio

   Con la schermata aperta, espandi Widget dinamici (Dynamic widgets) nella task card Tool e fai clic sul suo pulsante di aggiornamento. Cerca il serbatoio — compare come HMIx Horizontal Tank o con il nome del file, HmixHorizontalTank — e trascinalo nella schermata. Se non compare, controlla il percorso del passaggio precedente prima di continuare.

   ✓

   Verifica: Hai un'istanza del serbatoio in ProvaSerbatoio.

3. 3

   Dove · Serbatoio selezionato → Finestra di ispezione → Proprietà

   Controlla il parametro prima di collegarlo

   Con il serbatoio selezionato, trova FillLevel tra le sue proprietà (puoi scriverlo nella casella di ricerca della Finestra di ispezione). Il valore iniziale dovrebbe essere 25 se hai fatto la modifica, oppure 50 se hai importato l'originale. Scrivi un valore fisso di 50 e conferma: nell'editor delle schermate il liquido dovrebbe trovarsi a metà altezza.

   ✓

   Verifica: Il disegno risponde a un valore fisso: il file funziona prima ancora di aggiungere una variabile.

Siemens · Gestione della grafica SVG dinamicaSiemens · Aggiornamento degli SVG dinamici

Finora il livello era un valore fisso. Ora lo collegherai a una variabile che puoi cambiare mentre la schermata è in esecuzione: un campo I/O (ingresso/uscita) scrive in TankLevel e il serbatoio legge la stessa variabile attraverso FillLevel. Non serve JavaScript.

1. 1

   Dove · TIA Portal → dispositivo Unified → Variabili HMI

   Crea la variabile che conserva il livello

   Apri la tabella delle variabili standard e aggiungi TankLevel. Nella colonna Collegamento scegli Variabile interna e seleziona un tipo di dati numerico, per esempio Real.

   ✓

   Verifica: Il tuo progetto ha la variabile TankLevel; il file SVG mantiene il parametro FillLevel.

2. 2

   Dove · ProvaSerbatoio → serbatoio selezionato → proprietà FillLevel

   Collega il parametro del serbatoio a quella variabile

   Nella colonna Dinamizzazione di FillLevel scegli Variabile (Tag) e seleziona TankLevel. In questo modo sostituisci il valore fisso 50 con il valore attuale della variabile.

   Dal numero che scrivi al livello che vedi

   1. 1

      Scrivi 50 nel campo I/O

      Valore

      50

      Il campo di ingresso/uscita permette di inserire un numero durante la prova.

   2. 2

      La variabile HMI conserva 50

      TankLevel

      50

      TankLevel è una variabile interna. Puoi provarla senza collegare un PLC.

   3. 3

      Il parametro FillLevel riceve 50

      FillLevel

      50

      Nelle proprietà del serbatoio collega FillLevel a TankLevel.

   4. 4

      Il liquido arriva a metà altezza

      50%

      Poi prova 0 e 100 per controllare i due estremi.

   ✓

   Verifica: FillLevel prende il suo valore da TankLevel.

3. 3

   Dove · Tool → Elementi → Campo I/O

   Aggiungi un campo per scrivere il livello

   Trascina un campo I/O accanto al serbatoio. Scegli la modalità Ingresso/uscita e collega il suo Valore di processo a TankLevel, la stessa variabile. Se vuoi, aggiungi accanto il testo «Livello, 0–100 %».

   ✓

   Verifica: Il serbatoio e il campo numerico usano entrambi TankLevel, quindi il numero che scrivi si vedrà nel disegno.

4. 4

   Dove · TIA Portal → albero del progetto → dispositivo HMI

   Compila, apri Runtime e prova 0, 50 e 100

   Fai clic destro su ProvaSerbatoio e scegli Definisci come pagina iniziale. Compila il dispositivo HMI (clic destro → Compila → Software), correggi eventuali errori e fai clic su Avvia simulazione oppure carica il progetto nel tuo Unified PC Runtime. Accedi al client web con un utente del progetto (se non ne hai, creane uno in Impostazioni di sicurezza → Utenti e ruoli con un ruolo HMI e compila di nuovo). Scrivi 0 nel campo I/O e premi Invio; ripeti con 50 e 100.

   ✓

   Verifica: Con 0 non si vede liquido, con 50 arriva a metà altezza e con 100 riempie l'interno. Il contorno e i supporti non si muovono.

Il cursore di questa pagina illustra soltanto il comportamento previsto. Non controlla il tuo progetto TIA Portal e non sostituisce la prova in Runtime.

• Non compare in Widget dinamici: controlla che il file si trovi in UserFiles\SVGControls del progetto aperto e termini in .svghmi (non .svghmi.txt). Fai clic su aggiorna nella tavolozza; se ancora non compare, confronta l'inizio del file con il download originale.
• Il serbatoio compare ma non trovi FillLevel: verifica di averlo inserito da Widget dinamici. Un SVG importato come grafica normale non ha parametri.
• Il valore fisso funziona ma il campo I/O non muove il liquido: controlla che il campo e FillLevel usino la stessa variabile TankLevel e che il campo sia in modalità Ingresso/uscita. Conferma ogni numero con Invio.
• Non riesci ad accedere a Runtime: il client chiede un utente del progetto. Creane uno in Impostazioni di sicurezza → Utenti e ruoli con un ruolo HMI, compila e carica di nuovo.
• Non vedi la tua modifica da 50 a 25: controlla quale copia hai salvato in SVGControls. Aggiorna la tavolozza e prova con una nuova istanza: un'istanza esistente conserva il valore che aveva già.
• L'aspetto è diverso da quello nel browser: WinCC Unified supporta un sottoinsieme di SVG. Usa forme ed effetti supportati e controlla il risultato sul dispositivo di destinazione.

Quando questa prova funziona, puoi estendere il tuo SVG con parametri di colore (HmiColor) o di visibilità (boolean). Per riutilizzarlo nei faceplate, consulta la procedura Siemens per creare un tipo di SVG dinamico in una libreria.

Siemens · Aggiornamento degli SVG dinamiciSiemens · Formato SVG supportato e restrizioniSiemens · SVG dinamici come tipi di libreria

Disegnare apparecchiature industriali e scrivere a mano i loro collegamenti hmi-bind richiede tempo. Il generatore IA di HMIx (ai.hmix.tech) crea SVG dinamici per WinCC Unified e V8 a partire da una descrizione o da un'immagine di riferimento: disegna il simbolo o l'apparecchiatura, propone i parametri (livello, colori, visibilità, rotazione) e genera il file .svghmi. Puoi iniziare gratis con il piano Community.

Ciò che hai imparato qui resta valido: l'importazione da UserFiles\SVGControls, il collegamento dei parametri alle variabili e la prova in Runtime sono identici.

1. 1

   Dove · ai.hmix.tech → SVG dinamico

   Descrivi la grafica che ti serve

   Indica l'apparecchiatura, la vista e gli stati, per esempio: «Serbatoio orizzontale in acciaio inox, vista frontale, livello del liquido 0–100 % e colore del liquido configurabile». Scegli se vuoi un simbolo schematico (P&ID) o un'apparecchiatura dettagliata.

   ✓

   Verifica: L'IA disegna una prima versione che puoi perfezionare nella chat o nell'editor vettoriale.

2. 2

   Dove · Generatore → passaggi di definizione e simulazione

   Controlla i parametri e la simulazione

   Verifica i parametri proposti (per esempio, un livello come FillLevel) e modificali nella simulazione per confermare che il liquido salga dal fondo e resti dentro il contorno.

   ✓

   Verifica: Il disegno risponde nella simulazione come ti aspetti.

3. 3

   Dove · Generatore → passaggio di generazione e installazione

   Scarica il file .svghmi

   Scarica il .svghmi generato. È un unico file, come quello di questa guida.

   ✓

   Verifica: Hai un .svghmi pronto da copiare in UserFiles\SVGControls.

4. 4

   Dove · TIA Portal → Widget dinamici

   Importalo e provalo come qui

   Segui «Importa l'SVG dinamico in TIA Portal» e «Collega una variabile» usando i nomi dei tuoi parametri.

   ✓

   Verifica: Il tuo SVG generato con l'IA cambia in Runtime con le tue variabili.

Con il piano gratuito, le risorse generate vengono pubblicate nel catalogo HMIx perché anche altri utenti possano usarle; i piani a pagamento ti permettono di mantenerle private.