Come creare un Custom Web Control (CWC) per WinCC Unified & V8: guida passo passo, a mano o con l'IA

Un Custom Web Control, abbreviato CWC, è un oggetto di schermata su misura realizzato con tecnologie web (HTML, CSS e JavaScript). Lo inserisci in una schermata di WinCC Unified come qualsiasi pulsante o campo, ma sei tu a decidere aspetto e comportamento: un grafico di produzione, una tabella speciale, un pannello con più indicatori…

Il nostro esempio è un grafico a torta con un foro al centro che mostra il totale e tre segmenti per le quantità A, B e C. Quando una quantità cambia, il suo segmento si allarga o si restringe.

Il controllo riceve ogni valore attraverso una proprietà: un ingresso con un nome, come ValueA. In TIA Portal collegherai quella proprietà a una variabile HMI, cioè il punto in cui il progetto conserva il valore. Al controllo non importa da dove arrivi il valore: in questa prova lo scrivi tu nella schermata; su una macchina reale arriverebbe da un PLC.

• Usa un CWC quando ti serve una visualizzazione o un'interazione che gli oggetti standard di WinCC Unified non offrono.
• Se vuoi solo che un simbolo cambi colore o che un serbatoio mostri il suo livello, comincia da un SVG dinamico: ha meno componenti.

Siemens · Programmazione dei Custom Web ControlSiemens · Custom Web Control in WinCC V8

Lavorerai in due ambienti: un editor di testo per preparare il controllo e TIA Portal per inserirlo in una schermata. I file di partenza contengono già un grafico completo e funzionante, quindi non devi scrivere codice: ti basta capire ogni parte e fare una prima modifica.

Prima di iniziare, attiva le estensioni dei file in Windows (Esplora file → Visualizza → Mostra → Estensioni nomi file). Così vedrai se un file termina davvero in .zip o .json ed eviterai l'errore più comune: nomi come file.zip.zip.

• Ti serve TIA Portal con WinCC Unified (i passaggi sono illustrati in V21.1) e la sua simulazione o Unified PC Runtime. Runtime è il programma che esegue la schermata HMI.
• Usa un editor di testo come Visual Studio Code ed Esplora file di Windows, che sa già creare file ZIP. Non ti serve un PLC.

1. 1

   Dove · TIA Portal → albero del progetto → dispositivo HMI → Pagine

   Prepara una schermata vuota

   Apri o crea un progetto di prova con un dispositivo WinCC Unified (per esempio, Unified PC). Nel dispositivo, sotto Pagine (Screens), crea una schermata chiamata ProvaCWC e salva il progetto. Annota dove si trova la sua cartella: per impostazione predefinita, TIA Portal la crea in Documenti\Automation\<NomeProgetto>.

   ✓

   Verifica: Hai una schermata vuota e sai in quale cartella del PC si trova il progetto.

2. 2

   Dove · Esplora file di Windows

   Scarica ed estrai i file di partenza

   Scarica il grafico a torta con il pulsante di questa sezione: è uno ZIP chiamato {8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip. Conservane una copia intatta. Fai clic destro → Estrai tutto e, nella finestra di dialogo, cambia il nome della cartella di destinazione in HmixPieChart (Windows propone il lungo nome con il GUID).

   ✓

   Verifica: Dentro HmixPieChart vedi manifest.json e le cartelle assets e control.

3. 3

   Dove · Visual Studio Code o il tuo editor di testo

   Apri la cartella nell'editor

   In Visual Studio Code scegli File → Apri cartella e seleziona HmixPieChart. Se non vedi l'albero dei file, apri il pannello Esplora risorse (Ctrl+Maiusc+E). Da lì aprirai ogni file nella sezione successiva.

   ✓

   Verifica: Vedi l'albero dei file del controllo nella barra laterale dell'editor.

Siemens · Installazione e uso dei CWC

Un CWC è un piccolo gruppo di file di testo. Non devi impararli a memoria, ti basta sapere che cosa fa ciascuno. manifest.json presenta il controllo a TIA Portal, index.html contiene ciò che vedi e code.js decide come cambia il grafico quando arriva un valore.

1. 1

   Dove · Editor → pannello Esplora risorse di HmixPieChart

   Controlla dove va ciascun file

   Al primo livello ci sono manifest.json e le cartelle assets e control. Dentro control si trovano index.html, code.js e webcc.min.js. Quest'ultimo è la libreria ufficiale Siemens che collega il controllo a WinCC Unified: è già inclusa e non va modificata. assets conserva la sua licenza e, nei tuoi controlli, può contenere l'icona.

   Una cartella, tre parti che lavorano insieme

   • HmixPieChart/
     • manifest.json

       La carta d'identità del controllo: il suo nome, il suo identificatore (GUID) e i valori che può ricevere da WinCC Unified.

     • assets/
       • SIEMENS-LICENSE.md

         La licenza che accompagna la libreria di comunicazione Siemens.

     • control/
       • index.html

         La pagina che disegna il grafico. Qui c'è anche il suo aspetto: colori, dimensioni e disposizione.

       • code.js

         Le istruzioni che aggiornano il grafico quando cambia un valore.

       • webcc.min.js

         Il ponte di comunicazione con WinCC Unified. È il file ufficiale Siemens: non modificarlo.

   ✓

   Verifica: La tua cartella ha la stessa struttura dello schema, senza file fuori posto.

2. 2

   Dove · Editor → manifest.json

   Riconosci i tre ingressi del grafico

   Apri manifest.json e cerca properties. Vedrai ValueA, ValueB e ValueC. Ognuno indica "type": "number" (riceve un numero) e un valore iniziale in default: 45, 35 e 20. Sono le tre proprietà che compariranno in TIA Portal. Più in alto, sotto identity, trovi anche displayname (il nome che mostra TIA Portal, HMIx Pie Chart) e type, con l'identificatore univoco del controllo. Durante la prima prova non modificare nulla in questo file.

   ✓

   Verifica: Sai quali tre quantità riceve il controllo, come si chiamano e dove si trova il suo identificatore.

3. 3

   Dove · Editor → control/index.html

   Fai la tua prima modifica visibile

   Questo file usa HTML per organizzare il contenuto e, dentro il tag <style>, regole CSS che definiscono colori e dimensioni. Cerca (Ctrl+F) il testo PIE CHART e sostituiscilo con PRODUZIONE. Cambia solo quelle lettere, non i tag <span> che le circondano, e salva il file (Ctrl+S).

   ✓

   Verifica: L'intestazione del grafico dice PRODUZIONE: hai personalizzato il tuo controllo con una modifica facile da verificare.

4. 4

   Dove · Editor → control/code.js

   Individua la parte che aggiorna i valori

   code.js è scritto in JavaScript, il linguaggio che descrive le azioni del controllo. Cerca drawChart: questa funzione calcola il totale e disegna i segmenti. Più sotto, WebCC.start si collega a WinCC Unified e onPropertyChanged segnala ogni volta che cambia una proprietà. Nota che ValueA, ValueB e ValueC sono scritti esattamente come nel manifesto. Qui non devi toccare nulla.

   ✓

   Verifica: Distingui l'aspetto (index.html) dalla logica che riceve e disegna i dati (code.js).

5. 5

   Dove · Esplora file di Windows → HmixPieChart → control

   Controlla il disegno prima di creare il pacchetto

   Fai doppio clic su index.html per aprirlo nel browser. Dovresti vedere l'intestazione PRODUZIONE e il grafico con 45, 35 e 20. È normale che non reagisca a nulla: fuori da WinCC il controllo non ha variabili e mostra i suoi valori iniziali. Se vedi ancora PIE CHART, salva la modifica nell'editor e ricarica la pagina (F5).

   ✓

   Verifica: Il grafico viene disegnato e mostra il testo che hai appena cambiato.

6. 6

   Dove · Esplora file di Windows → dentro HmixPieChart

   Crea lo ZIP che TIA Portal importerà

   Entra in HmixPieChart e seleziona insieme manifest.json, assets e control (Ctrl+clic). Fai clic destro → Comprimi in file ZIP (in Windows 10: Invia a → Cartella compressa). Seleziona quei tre elementi, non la cartella HmixPieChart. Rinomina lo ZIP ottenuto esattamente {8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip, parentesi graffe comprese: è il GUID indicato in identity → type del manifesto. Se il nome è diverso, TIA Portal non mostrerà il controllo.

   Dalla cartella di lavoro al progetto di TIA Portal

   1. 1

      Seleziona il contenuto della cartella

      ✓manifest.json

      ✓assets/

      ✓control/

      Entra in HmixPieChart e seleziona questi tre elementi. La cartella HmixPieChart in sé non va nello ZIP.

   2. 2

      Comprimi e dai allo ZIP il nome del GUID

      {8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip

      Il nome dello ZIP coincide con il GUID di manifest.json. Le parentesi graffe fanno parte del nome.

   3. 3

      Copia lo ZIP intero in questa posizione

      • Il tuo progetto/
        • UserFiles/
          • CustomControls/
            • {8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip

      Lo ZIP va qui, ancora compresso. Crea UserFiles e CustomControls se non esistono.

   ✓

   Verifica: Aprendo lo ZIP vedi direttamente manifest.json, assets e control, e il suo nome coincide con il GUID.

Per seguire questa guida mantieni l'identità dell'esempio. Quando crei un controllo indipendente, genera un nuovo GUID (per esempio in PowerShell con [guid]::NewGuid()), scrivilo in maiuscolo in identity → type (guid://…) e usa lo stesso GUID, tra parentesi graffe, come nome dello ZIP. Rinominare solo lo ZIP non cambia l'identità.

{
  "mver": "1.2.0",
  "control": {
    "identity": {
      "name": "HmixPieChart",
      "version": "1.0",
      "displayname": "HMIx Pie Chart",
      "type": "guid://8D821B43-4EF5-4BF1-A31D-931D283C7C04",
      "start": "./control/index.html"
    },
    "metadata": {
      "author": "HMIx",
      "description": "Educational read-only three-value pie chart"
    },
    "contracts": {
      "api": {
        "methods": {},
        "events": {},
        "properties": {
          "ValueA": { "type": "number", "default": 45 },
          "ValueB": { "type": "number", "default": 35 },
          "ValueC": { "type": "number", "default": 20 }
        }
      }
    },
    "types": {}
  }
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>HMIx Pie Chart</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        padding: 20px;
        background: #171e26;
        color: #f3f5f6;
        font:
          14px system-ui,
          sans-serif;
      }
      header {
        display: flex;
        justify-content: space-between;
        color: #bac5ce;
        font-size: 11px;
        letter-spacing: 0.14em;
      }
      main {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        min-height: 240px;
      }
      svg {
        width: 55%;
        max-width: 300px;
        flex-shrink: 0;
      }
      ul {
        list-style: none;
        padding: 0;
        min-width: 110px;
      }
      li {
        display: grid;
        grid-template-columns: 10px 1fr auto;
        align-items: center;
        gap: 10px;
        padding: 14px 0;
        border-bottom: 1px solid #35404a;
      }
      .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }
      small {
        display: block;
        margin-top: 4px;
        color: #bac5ce;
        font-variant-numeric: tabular-nums;
      }
      strong {
        font-variant-numeric: tabular-nums;
      }
      @media (max-width: 360px) {
        body {
          padding: 12px;
        }
        main {
          gap: 12px;
        }
      }
    </style>
  </head>
  <body>
    <header><span>HMIx</span><span>PIE CHART</span></header>
    <main>
      <svg viewBox="0 0 220 220" role="img" aria-labelledby="chart-title">
        <title id="chart-title">Distribution of A, B and C</title>
        <circle
          cx="110"
          cy="110"
          r="76"
          fill="none"
          stroke="#35404a"
          stroke-width="28"
        />
        <g transform="rotate(-90 110 110)" fill="none" stroke-width="28">
          <circle id="ValueA" cx="110" cy="110" r="76" stroke="#47d2c8" />
          <circle id="ValueB" cx="110" cy="110" r="76" stroke="#79a9ed" />
          <circle id="ValueC" cx="110" cy="110" r="76" stroke="#f5c16c" />
        </g>
        <text
          id="total"
          x="110"
          y="115"
          text-anchor="middle"
          fill="#f3f5f6"
          font-size="30"
          font-weight="600"
        >
          100
        </text>
        <text
          x="110"
          y="139"
          text-anchor="middle"
          fill="#bac5ce"
          font-size="10"
          letter-spacing="2"
        >
          A + B + C
        </text>
      </svg>
      <ul aria-label="Values and shares">
        <li>
          <i class="dot" style="background: #47d2c8"></i
          ><span>A<small id="ValueA-amount">45</small></span
          ><strong id="ValueA-percent">45%</strong>
        </li>
        <li>
          <i class="dot" style="background: #79a9ed"></i
          ><span>B<small id="ValueB-amount">35</small></span
          ><strong id="ValueB-percent">35%</strong>
        </li>
        <li>
          <i class="dot" style="background: #f5c16c"></i
          ><span>C<small id="ValueC-amount">20</small></span
          ><strong id="ValueC-percent">20%</strong>
        </li>
      </ul>
    </main>
    <script src="webcc.min.js"></script>
    <script src="code.js"></script>
  </body>
</html>

/* HMIx educational pie chart. Values are amounts, not required percentages. */
var values = { ValueA: 45, ValueB: 35, ValueC: 20 };
var keys = ['ValueA', 'ValueB', 'ValueC'];
var circumference = 2 * Math.PI * 76;

function drawChart() {
  // Normalize before adding to avoid overflow for very large finite values.
  var maximum = Math.max(values.ValueA, values.ValueB, values.ValueC, 1);
  var sum = keys.reduce(function (n, key) {
    return n + values[key] / maximum;
  }, 0);
  var offset = 0;
  keys.forEach(function (key) {
    var fraction = sum ? values[key] / maximum / sum : 0;
    var arc = document.getElementById(key);
    var length = fraction * circumference;
    arc.setAttribute('stroke-dasharray', length + ' ' + circumference);
    arc.setAttribute('stroke-dashoffset', String(-offset));
    arc.setAttribute('visibility', fraction ? 'visible' : 'hidden');
    document.getElementById(key + '-amount').textContent = String(values[key]);
    document.getElementById(key + '-percent').textContent =
      Math.round(fraction * 100) + '%';
    offset += length;
  });
  var total = values.ValueA + values.ValueB + values.ValueC;
  document.getElementById('total').textContent = isFinite(total)
    ? String(total)
    : '—';
}

function setValue(key, value) {
  if (keys.indexOf(key) === -1 || typeof value !== 'number' || !isFinite(value))
    return;
  values[key] = Math.max(0, value);
}

drawChart();
if (typeof WebCC !== 'undefined') {
  WebCC.start(
    function (connected) {
      if (!connected) return;
      keys.forEach(function (key) {
        setValue(key, WebCC.Properties[key]);
      });
      drawChart();
      WebCC.onPropertyChanged.subscribe(function (change) {
        setValue(change.key, change.value);
        drawChart();
      });
    },
    {
      methods: {},
      events: [],
      properties: { ValueA: 45, ValueB: 35, ValueC: 20 },
    },
    ['HMI'],
    10000,
  );
}

Siemens · Struttura del manifestoSiemens · WebCC e interfaccia con RuntimeSiemens · File di esempio e libreria WebCCSiemens · Creazione del file ZIP

Il pacchetto è pronto. Ora passi dall'editor di testo a TIA Portal. Lo ZIP va dentro la cartella del progetto, in una sottocartella precisa, perché TIA Portal possa trovarlo.

1. 1

   Dove · Esplora file di Windows → cartella del tuo progetto TIA

   Copia lo ZIP nella cartella di destinazione

   Apri la cartella del progetto che hai annotato all'inizio ed entra in UserFiles (creala se non esiste). Al suo interno crea una cartella chiamata CustomControls, se non esiste, e copia lì lo ZIP. Lascialo compresso: non estrarlo e non copiare solo index.html.

   ✓

   Verifica: Il percorso termina con UserFiles\CustomControls\{8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip.

2. 2

   Dove · TIA Portal → schermata ProvaCWC → task card Tool

   Fai in modo che TIA Portal lo trovi

   Apri la schermata ProvaCWC. Nella task card Tool (Tools), a destra, espandi la tavolozza I miei controlli (My controls) e fai clic sul suo pulsante Aggiorna (Update).

   ✓

   Verifica: HMIx Pie Chart compare nella tavolozza I miei controlli.

3. 3

   Dove · TIA Portal → I miei controlli → schermata ProvaCWC

   Inseriscilo nella schermata

   Trascina HMIx Pie Chart dalla tavolozza alla schermata. Dagli una dimensione di circa 480 × 300 pixel e lascia spazio a lato per i tre campi numerici che aggiungerai più avanti.

   ✓

   Verifica: La schermata contiene un'istanza del tuo grafico con l'intestazione PRODUZIONE.

4. 4

   Dove · Controllo selezionato → Finestra di ispezione → Proprietà → Proprietà → Interfaccia

   Trova gli ingressi che hai preparato

   Seleziona il controllo e, nella Finestra di ispezione (Inspector window), apri Proprietà → Proprietà → Interfaccia. Lì trovi ValueA, ValueB e ValueC con i valori iniziali 45, 35 e 20. Nella prossima sezione sostituirai questi valori fissi con variabili.

   

   ✓

   Verifica: Vedi le stesse tre proprietà definite in manifest.json.

Siemens · Installazione e uso dei CWC

Il controllo ha tre ingressi; ora gli fornirai i dati. Creerai tre variabili interne (vivono dentro la HMI, nessun PLC) e tre campi I/O. Un campo I/O (ingresso/uscita) è una casella della schermata in cui puoi leggere e scrivere un numero. Ogni casella e il suo segmento del grafico condivideranno la stessa variabile.

1. 1

   Dove · TIA Portal → dispositivo HMI → Variabili HMI → tabella delle variabili

   Crea le tre variabili di prova

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

   ✓

   Verifica: La tabella contiene tre variabili interne numeriche con questi nomi.

2. 2

   Dove · Schermata ProvaCWC → CWC selezionato → Proprietà → Proprietà → Interfaccia

   Collega ogni variabile al suo ingresso

   Nella riga ValueA apri la colonna Dinamizzazione, scegli Variabile (Tag) e seleziona ProductionA. «Dinamizzare» significa che la proprietà prende il suo valore da una variabile invece che da un numero fisso. Ripeti con ValueB → ProductionB e ValueC → ProductionC. Lascia attivo Sola lettura: il grafico si limita a mostrare i dati; li scriverai dalle caselle.

   Come viaggiano i tre valori fino al grafico

   1. 1

      Scrivi un numero in ogni campo I/O

      A

      45

      B

      35

      C

      20

      I/O significa ingresso/uscita: il campo mostra un valore e permette di cambiarlo durante la prova.

   2. 2

      La variabile HMI conserva quel numero

      ProductionA

      45

      ProductionB

      35

      ProductionC

      20

      Sono variabili interne del progetto. Per questa prova non serve un PLC.

   3. 3

      La proprietà del controllo riceve il valore

      ValueA

      45

      ValueB

      35

      ValueC

      20

      Collega ogni proprietà alla sua variabile nella colonna Dinamizzazione dell'Interfaccia.

   4. 4

      Il grafico viene ridisegnato

      A: 45% · B: 35% · C: 20%

      Con 45, 35 e 20 la somma è 100. Se cambi un numero, tutte e tre le quote vengono ricalcolate.

   

   ✓

   Verifica: Ogni ingresso del grafico riceve una variabile diversa, come mostra lo schema.

3. 3

   Dove · Schermata ProvaCWC → Tool → Elementi → Campo I/O

   Aggiungi le caselle per scrivere i numeri

   Trascina tre campi I/O (I/O field) accanto al grafico. In ognuno scegli la modalità Ingresso/uscita e collega il suo Valore di processo rispettivamente a ProductionA, ProductionB e ProductionC. Aggiungi accanto i testi A, B e C per distinguerli.

   ✓

   Verifica: Hai il grafico e tre campi: uno per A, uno per B e uno per C.

4. 4

   Dove · TIA Portal → albero del progetto → dispositivo HMI

   Compila e apri la schermata in Runtime

   Fai clic destro su ProvaCWC e scegli Definisci come pagina iniziale (puoi impostarla anche in Impostazioni Runtime → Generale). Seleziona il dispositivo HMI, compilalo (clic destro → Compila → Software) e correggi eventuali errori. Poi fai clic su Avvia simulazione oppure carica il progetto nel tuo Unified PC Runtime. Si apre il client web: accedi con un utente del progetto. Se non ne hai, creane uno in Impostazioni di sicurezza → Utenti e ruoli, assegnagli un ruolo HMI (per esempio, HMI Administrator) e compila di nuovo.

   ✓

   Verifica: Vedi la schermata in esecuzione e puoi scrivere numeri nei campi I/O.

5. 5

   Dove · Schermata in Runtime → campi A, B e C

   Controlla la prima ripartizione e cambia A

   Scrivi 45 in A, 35 in B e 20 in C, confermando ogni numero con Invio. Il totale deve essere 100. Ora cambia solo A in 90 e conferma: il suo segmento cresce e il totale diventa 145. I numeri sono quantità, non percentuali: il controllo calcola la quota di ciascuna sul totale.

   ✓

   Verifica: Il grafico cambia non appena confermi un numero, senza ricaricare la schermata.

6. 6

   Dove · Schermata in Runtime → campi A, B e C

   Controlla anche lo stato vuoto

   Inserisci 0 in tutti e tre i campi: i segmenti colorati scompaiono e rimane un anello vuoto con totale 0. Scrivi di nuovo 45, 35 e 20 e ricarica la pagina del browser (F5) per verificare che il controllo legga i valori attuali all'apertura.

   ✓

   Verifica: Il controllo mostra sia i dati normali sia il caso senza produzione.

Siemens · Installazione e uso dei CWCSiemens · Esempio di configurazione e schermate originali

• HMIx Pie Chart non compare in I miei controlli: apri lo ZIP; al primo livello devono esserci manifest.json, assets e control, senza cartelle intermedie. Controlla che si chiami esattamente {8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip (con le estensioni visibili, così non è .zip.zip), che si trovi in UserFiles\CustomControls del progetto aperto, e fai clic su Aggiorna.
• Manca ValueA, ValueB o ValueC: usa lo ZIP di questa guida e non rinominare nulla in manifest.json; i nomi distinguono maiuscole e minuscole. Il prodotto Pie Chart del catalogo ha proprietà diverse.
• Il grafico non cambia in Runtime: conferma il numero con Invio. Poi controlla che il campo I/O sia in modalità Ingresso/uscita e che il campo e la proprietà del controllo usino la stessa variabile.
• 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.
• Compare ancora PIE CHART: salva index.html, ricrea lo ZIP e sostituisci quello nel progetto. Fai clic su Aggiorna in I miei controlli: la Finestra di ispezione segnala che l'oggetto è stato aggiornato. Compila e carica di nuovo la HMI. Modificare solo la cartella di lavoro non cambia ciò che è già in TIA Portal.
• Funziona sul PC ma non su un Unified Comfort Panel: assicurati che ogni dipendenza viaggi dentro lo ZIP e verifica le restrizioni Siemens per quel dispositivo, in particolare per le risorse esterne e le richieste di dati.

Quando funziona, cambia una cosa alla volta: prima un testo o un colore, poi un altro modo di mostrare i dati. Se rinomini una proprietà o ne cambi il tipo, TIA Portal può perderne la configurazione nelle istanze esistenti. Verifica sempre il controllo sul dispositivo su cui verrà usato.

Siemens · Restrizioni dei CWC sugli Unified Comfort Panel

Ora sai com'è fatto un CWC al suo interno. Per creare nuovi controlli senza scrivere HTML o JavaScript puoi usare il generatore IA di HMIx (ai.hmix.tech): descrivi il controllo a parole e l'IA prepara il design, le proprietà, il manifest.json e il pacchetto {GUID}.zip pronto per TIA Portal. Puoi iniziare gratis con il piano Community.

Ciò che hai imparato qui resta valido: importazione, collegamento delle variabili e prova in Runtime funzionano esattamente allo stesso modo.

1. 1

   Dove · ai.hmix.tech → Custom Web Control

   Descrivi il controllo che ti serve

   Scrivi che cosa deve mostrare e quali dati riceve, per esempio: «Grafico a torta con tre quantità di produzione A, B e C, totale al centro e legenda con le percentuali». Puoi anche allegare un'immagine di riferimento.

   ✓

   Verifica: L'IA genera una prima versione visiva che puoi perfezionare nella chat o nell'editor visuale.

2. 2

   Dove · Generatore → passaggi di definizione e simulazione

   Controlla proprietà e simulazione

   Verifica le proprietà proposte dall'IA (gli equivalenti di ValueA, ValueB e ValueC) e modificale con i comandi della simulazione per vedere come reagisce il controllo prima di scaricarlo.

   ✓

   Verifica: Il controllo risponde nella simulazione come ti aspetti.

3. 3

   Dove · Generatore → passaggio di generazione e installazione

   Scarica il pacchetto

   Scarica il risultato. Lo ZIP del download contiene la documentazione e, al suo interno, il pacchetto {GUID}.zip del controllo: è questo file interno che copi, ancora compresso, in UserFiles\CustomControls.

   ✓

   Verifica: Hai un {GUID}.zip nello stesso formato di quello di questa guida.

4. 4

   Dove · TIA Portal → I miei controlli

   Importalo e provalo come qui

   Segui «Importa il CWC in TIA Portal» e «Collega le variabili e prova in Runtime» usando i nomi del tuo nuovo controllo.

   ✓

   Verifica: Il tuo controllo generato con l'IA funziona nella tua schermata di WinCC Unified.

Con il piano gratuito, i controlli generati vengono pubblicati nel catalogo HMIx perché anche altri utenti possano usarli; i piani a pagamento ti permettono di mantenerli privati.