Crea un serbatoio orizzontale in SVG dinamico per WinCC Unified

SVG descrive un'immagine con forme e linee invece di una griglia fissa di pixel. È utile per simboli che devono rimanere nitidi a dimensioni diverse: serbatoi, valvole, motori e indicatori.

Un widget parametrizzato per WinCC Unified utilizza il formato .svghmi. Aggiunge al disegno un'interfaccia con parametri come FillLevel o un colore. TIA Portal li rende disponibili per collegarli a variabili HMI. Un valore modifica il disegno: non servono 101 immagini per un serbatoio da 0 a 100 %.

Un normale .svg può essere usato come grafica, ma rinominarlo in .svghmi non aggiunge un'interfaccia dinamica.

• Usa un SVG dinamico per livelli, stati delle apparecchiature, cambi di colore o movimenti semplici guidati da valori.
• Scegli un CWC per un'interfaccia web più ricca, una tabella personalizzata o più interazioni.
• Inizia con un disegno semplice per capire l'effetto di ogni parametro.

Siemens · Gestione della grafica SVG dinamicaSiemens · Formato SVG supportato e restrizioni

Usa un progetto di prova con un dispositivo Unified, una schermata vuota e componenti Runtime o di simulazione compatibili. Questa guida segue V21.1; altre edizioni WinCC e versioni precedenti possono differire.

• Per disegnare manualmente usa un editor vettoriale come Inkscape e un editor di testo per l'interfaccia HMI.
• Per una prova immediata scarica il piccolo esempio .svghmi qui sotto. Non serve un PLC.
• Usa forme ed effetti supportati da WinCC Unified. Un SVG corretto nel browser non garantisce che ogni elemento funzioni sul dispositivo HMI.

Siemens · Formato SVG supportato e restrizioni

Il serbatoio unisce una sagoma arrotondata, due supporti e sfumature per l’effetto metallico. Il liquido è un rettangolo indipendente, ritagliato all’interno del serbatoio. Cambia un solo parametro: FillLevel, da 0 a 100.

1. 1

   Disegna le parti fisse

   Disegna il corpo orizzontale, i supporti e il boccaporto superiore. Imposta un viewBox di 400 × 250. Inserisci la sagoma del serbatoio in un clipPath per evitare che il liquido superi le estremità arrotondate.

2. 2

   Aggiungi l'interfaccia HMI

   Nell'editor di testo aggiungi i namespace HMI di Siemens e una sezione hmi:self. Definisci FillLevel con hmi:paramDef, tipo number e valore predefinito 50. Il nostro file completo contiene già questa struttura.

3. 3

   Collega la forma del liquido

   Collega hmi-bind:height e hmi-bind:y a ParamProps.FillLevel. Mentre il rettangolo aumenta in altezza, il bordo superiore sale e il fondo resta fermo. Il clipPath contiene il liquido e Converter.Bounds limita la visualizzazione a 0–100.

4. 4

   Salva come .svghmi

   Salva l'XML in UTF-8 con l'estensione esatta .svghmi, non .svghmi.txt. Conserva una copia modificabile. Dopo aver aggiunto i collegamenti HMI, evita di risalvare con un editor vettoriale generico che potrebbe rimuovere gli attributi Siemens.

Qui FillLevel indica la percentuale di altezza del liquido. In un serbatoio orizzontale non coincide, in generale, con la percentuale di volume. Per mostrare litri o volume serve 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://svg.siemens.com/hmi/svg10-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)

1. 1

   Inserisci il file nel progetto

   Apri la cartella del progetto e crea UserFiles\SVGControls se necessario. Copia qui HmixHorizontalTank.svghmi. Questo percorso richiede il file .svghmi effettivo, non uno ZIP.

2. 2

   Apri i widget dinamici

   Apri la schermata Unified e Strumenti → Widget dinamici (Tools → Dynamic widgets). Aggiorna la tavolozza dopo aver aggiunto o modificato il file; se un nuovo file non compare, riapri il progetto.

3. 3

   Inserisci e controlla

   Trascina HMIx Horizontal Tank nella schermata. Nelle proprietà trova il parametro utente FillLevel e assegna il valore statico 50. Verifica il disegno prima di collegare una variabile.

Per questo file usa i widget dinamici. Importare un normale SVG nella raccolta delle grafiche è un altro procedimento e non crea questi parametri.

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

1. 1

   Crea un valore interno

   Aggiungi una variabile HMI interna TankLevel di tipo numerico, per esempio Real, senza collegamento al PLC. È il valore che cambierai a mano.

2. 2

   Collega il parametro

   Seleziona il serbatoio, imposta la dinamizzazione di FillLevel su Variabile e scegli TankLevel. Il nome del parametro appartiene all'SVG; il nome della variabile appartiene al progetto HMI.

3. 3

   Aggiungi un campo I/O numerico

   Posizionalo vicino al disegno, scegli ingresso/uscita e collega il valore di processo alla stessa TankLevel. Se disponibili, imposta i limiti d'ingresso a 0 e 100.

4. 4

   Compila e prova tre valori

   Imposta la schermata iniziale, compila l'HMI e avvia la simulazione supportata o il Runtime Unified PC di prova. Apri il client Runtime, accedi se necessario e inserisci 0, 50 e 100. Conferma ogni immissione e osserva il liquido.

5. 5

   Controlla dimensioni e riapertura

   Riapri la schermata per verificare il valore attuale. Prova una seconda istanza a una dimensione diversa: il contorno deve restare nitido e il liquido all'interno.

Il cursore qui sotto illustra il risultato atteso. È indipendente da TIA Portal e non comunica con il tuo progetto.

• Non compare nei widget dinamici: verifica UserFiles\SVGControls, l'estensione reale, la validità XML e l'interfaccia HMI, poi aggiorna la tavolozza.
• Il serbatoio compare ma non si riempie: verifica i collegamenti HMI e che FillLevel usi la stessa variabile del campo I/O.
• Il livello cresce verso il basso: la posizione superiore del liquido deve cambiare insieme all'altezza. Il nostro esempio mantiene fisso il fondo.
• L'aspetto differisce dall'editor vettoriale: semplifica effetti non supportati, CSS e dipendenze dai font. Controlla il dispositivo finale oltre all'anteprima nel browser.
• Un aggiornamento perde un collegamento: rinominare, eliminare o cambiare il tipo dei parametri può compromettere le istanze. Conserva l'interfaccia o riconfigura le istanze interessate.

Dopo la prova direttamente nella schermata, puoi esplorare i tipi SVG dinamici di libreria per riutilizzarli in schermate e faceplate. È un passo successivo utile, non un requisito iniziale.

Siemens · Aggiornamento degli SVG dinamiciSiemens · SVG dinamici come tipi di libreria