Custom Web Control (CWC) für WinCC Unified & V8 erstellen: Schritt-für-Schritt-Anleitung, von Hand oder mit KI

Ein Custom Web Control, kurz CWC, ist ein maßgeschneidertes Bildobjekt, das mit Webtechnik (HTML, CSS und JavaScript) gebaut wird. Du platzierst es wie eine Schaltfläche oder ein Feld in einem Bild von WinCC Unified, bestimmst aber selbst, wie es aussieht und sich verhält: ein Produktionsdiagramm, eine besondere Tabelle, eine Übersicht mit mehreren Anzeigen …

Unser Beispiel ist ein Kreisdiagramm mit einem Loch in der Mitte, in dem die Summe steht, und drei Segmenten für die Mengen A, B und C. Ändert sich eine Menge, wird ihr Segment größer oder kleiner.

Das Control empfängt jeden Wert über eine Eigenschaft: einen benannten Eingang wie ValueA. In TIA Portal verbindest du diese Eigenschaft mit einer HMI-Variablen, in der das Projekt den Wert speichert. Dem Control ist egal, woher der Wert kommt: In diesem Test gibst du ihn im Bild ein, an einer echten Maschine käme er von einer SPS.

• Setze ein CWC ein, wenn du eine Darstellung oder Bedienung brauchst, die die Standardobjekte von WinCC Unified nicht bieten.
• Soll nur ein Symbol seine Farbe ändern oder ein Tank seinen Füllstand zeigen, beginne mit einem dynamischen SVG: Es besteht aus weniger Teilen.

Siemens · Custom Web Controls programmierenSiemens · Custom Web Controls in WinCC V8

Du arbeitest an zwei Stellen: in einem Texteditor, um das Control vorzubereiten, und in TIA Portal, um es in einem Bild zu platzieren. Die Ausgangsdateien enthalten bereits ein vollständiges, funktionierendes Diagramm. Du musst also keinen Code schreiben: Es reicht, jeden Teil zu verstehen und eine erste Änderung vorzunehmen.

Aktiviere vor dem Start in Windows die Dateinamenerweiterungen (Explorer → Ansicht → Anzeigen → Dateinamenerweiterungen). So siehst du, ob eine Datei wirklich auf .zip oder .json endet, und vermeidest den häufigsten Fehler: Namen wie datei.zip.zip.

• Du brauchst TIA Portal mit WinCC Unified (die Schritte zeigen V21.1) und dessen Simulation oder Unified PC Runtime. Runtime ist das Programm, das das HMI-Bild ausführt.
• Verwende einen Texteditor wie Visual Studio Code und den Windows-Explorer, der ZIP-Dateien bereits selbst erstellen kann. Eine SPS brauchst du nicht.

1. 1

   Wo · TIA Portal → Projektnavigation → HMI-Gerät → Bilder

   Lege ein leeres Bild an

   Öffne oder erstelle ein Testprojekt mit einem WinCC-Unified-Gerät (zum Beispiel Unified PC). Erstelle unter Bilder im Gerät ein Bild namens TestCWC und speichere das Projekt. Notiere dir, wo sein Ordner liegt: Standardmäßig legt TIA Portal ihn unter Dokumente\Automation\<Projektname> an.

   ✓

   Prüfen: Du hast ein leeres Bild und weißt, in welchem Ordner auf deinem PC das Projekt liegt.

2. 2

   Wo · Windows-Explorer

   Lade die Ausgangsdateien herunter und entpacke sie

   Lade das Kreisdiagramm mit der Schaltfläche in diesem Abschnitt herunter: Es ist ein ZIP namens {8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip. Bewahre eine unveränderte Kopie auf. Rechtsklick → Alle extrahieren und ändere im Dialog den Namen des Zielordners in HmixPieChart (Windows schlägt den langen GUID-Namen vor).

   ✓

   Prüfen: In HmixPieChart siehst du manifest.json sowie die Ordner assets und control.

3. 3

   Wo · Visual Studio Code oder dein Texteditor

   Öffne den Ordner im Editor

   Wähle in Visual Studio Code Datei → Ordner öffnen und dann HmixPieChart. Siehst du den Dateibaum nicht, öffne die Explorer-Ansicht (Strg+Umschalt+E). Von dort öffnest du im nächsten Abschnitt jede Datei.

   ✓

   Prüfen: In der Seitenleiste des Editors siehst du den Dateibaum des Controls.

Siemens · CWC installieren und verwenden

Ein CWC besteht aus einer Handvoll Textdateien. Du musst sie nicht auswendig lernen, sondern nur wissen, was jede tut. manifest.json stellt das Control bei TIA Portal vor, index.html enthält das, was du siehst, und code.js bestimmt, wie sich das Diagramm verändert, wenn ein Wert ankommt.

1. 1

   Wo · Editor → Explorer-Ansicht von HmixPieChart

   Prüfe, wo jede Datei hingehört

   Auf der obersten Ebene liegen manifest.json und die Ordner assets und control. In control befinden sich index.html, code.js und webcc.min.js. Letztere ist die offizielle Siemens-Bibliothek, die das Control mit WinCC Unified verbindet: Sie ist bereits enthalten und darf nicht verändert werden. assets enthält ihre Lizenz und kann bei deinen eigenen Controls auch das Symbol aufnehmen.

   Ein Ordner, drei Teile, die zusammenarbeiten

   • HmixPieChart/
     • manifest.json

       Der Steckbrief des Controls: sein Name, seine Kennung (GUID) und die Werte, die es von WinCC Unified empfangen kann.

     • assets/
       • SIEMENS-LICENSE.md

         Die Lizenz, die zur Kommunikationsbibliothek von Siemens gehört.

     • control/
       • index.html

         Die Seite, die das Diagramm zeichnet. Hier steckt auch sein Aussehen: Farben, Größen und Anordnung.

       • code.js

         Die Anweisungen, die das Diagramm aktualisieren, wenn sich ein Wert ändert.

       • webcc.min.js

         Die Kommunikationsbrücke zu WinCC Unified. Das ist die offizielle Siemens-Datei: Bearbeite sie nicht.

   ✓

   Prüfen: Dein Ordner hat denselben Aufbau wie im Schema, ohne Dateien an der falschen Stelle.

2. 2

   Wo · Editor → manifest.json

   Lerne die drei Eingänge des Diagramms kennen

   Öffne manifest.json und suche nach properties. Dort stehen ValueA, ValueB und ValueC. Jeder Eintrag enthält "type": "number" (er empfängt eine Zahl) und einen Anfangswert unter default: 45, 35 und 20. Das sind die drei Eigenschaften, die in TIA Portal erscheinen. Weiter oben findest du unter identity außerdem displayname (den Namen, den TIA Portal anzeigt: HMIx Pie Chart) und type mit der eindeutigen Kennung des Controls. Ändere in dieser Datei für den ersten Test nichts.

   ✓

   Prüfen: Du weißt, welche drei Mengen das Control empfängt, wie sie heißen und wo seine Kennung steht.

3. 3

   Wo · Editor → control/index.html

   Nimm deine erste sichtbare Änderung vor

   Diese Datei ordnet den Inhalt mit HTML an und legt im Tag <style> mit CSS-Regeln Farben und Größen fest. Suche (Strg+F) nach dem Text PIE CHART und ersetze ihn durch PRODUKTION. Ändere nur diese Buchstaben, nicht die umgebenden <span>-Tags, und speichere die Datei (Strg+S).

   ✓

   Prüfen: Die Überschrift des Diagramms lautet PRODUKTION: Du hast dein Control mit einer leicht überprüfbaren Änderung angepasst.

4. 4

   Wo · Editor → control/code.js

   Finde den Teil, der die Werte aktualisiert

   code.js ist in JavaScript geschrieben, der Sprache, die die Aktionen des Controls beschreibt. Suche nach drawChart: Diese Funktion berechnet die Summe und zeichnet die Segmente. Weiter unten stellt WebCC.start die Verbindung zu WinCC Unified her, und onPropertyChanged meldet jede Änderung einer Eigenschaft. Achte darauf, dass ValueA, ValueB und ValueC genau wie im Manifest geschrieben sind. Hier musst du nichts ändern.

   ✓

   Prüfen: Du kannst das Aussehen (index.html) von der Logik unterscheiden, die die Daten empfängt und zeichnet (code.js).

5. 5

   Wo · Windows-Explorer → HmixPieChart → control

   Prüfe das Design vor dem Verpacken

   Doppelklicke auf index.html, um die Datei im Browser zu öffnen. Du solltest die Überschrift PRODUKTION und das Diagramm mit 45, 35 und 20 sehen. Dass es auf nichts reagiert, ist normal: Außerhalb von WinCC hat das Control keine Variablen und zeigt seine Anfangswerte. Siehst du noch PIE CHART, speichere die Änderung im Editor und lade die Seite neu (F5).

   ✓

   Prüfen: Das Diagramm wird gezeichnet und zeigt den Text, den du gerade geändert hast.

6. 6

   Wo · Windows-Explorer → im Ordner HmixPieChart

   Erstelle das ZIP, das TIA Portal importiert

   Öffne HmixPieChart und markiere manifest.json, assets und control gemeinsam (Strg+Klick). Rechtsklick → In ZIP-Datei komprimieren (unter Windows 10: Senden an → ZIP-komprimierter Ordner). Wähle diese drei Elemente aus, nicht den Ordner HmixPieChart. Benenne das entstandene ZIP genau {8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip, einschließlich der geschweiften Klammern: Das ist die GUID unter identity → type im Manifest. Weicht der Name ab, zeigt TIA Portal das Control nicht an.

   Vom Arbeitsordner ins TIA-Portal-Projekt

   1. 1

      Wähle den Inhalt des Ordners aus

      ✓manifest.json

      ✓assets/

      ✓control/

      Öffne HmixPieChart und markiere diese drei Elemente. Der Ordner HmixPieChart selbst kommt nicht ins ZIP.

   2. 2

      Komprimiere und benenne das ZIP nach der GUID

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

      Der ZIP-Name entspricht der GUID in manifest.json. Die geschweiften Klammern gehören zum Namen.

   3. 3

      Kopiere das ganze ZIP an diese Stelle

      • Dein Projekt/
        • UserFiles/
          • CustomControls/
            • {8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip

      Hier liegt das ZIP, weiterhin komprimiert. Lege UserFiles und CustomControls an, falls sie fehlen.

   ✓

   Prüfen: Beim Öffnen des ZIP siehst du direkt manifest.json, assets und control, und sein Name entspricht der GUID.

Behalte für diese Anleitung die Identität des Beispiels bei. Wenn du ein eigenständiges Control erstellst, erzeuge eine neue GUID (zum Beispiel in PowerShell mit [guid]::NewGuid()), trage sie in Großbuchstaben unter identity → type (guid://…) ein und verwende dieselbe GUID in geschweiften Klammern als ZIP-Namen. Nur das ZIP umzubenennen ändert die Identität nicht.

{
  "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 · Aufbau des ManifestsSiemens · WebCC und die Schnittstelle zu RuntimeSiemens · Beispieldateien und WebCC-BibliothekSiemens · ZIP-Datei erstellen

Das Paket ist fertig. Jetzt wechselst du vom Texteditor zu TIA Portal. Das ZIP kommt in einen bestimmten Unterordner des Projektordners, damit TIA Portal es findet.

1. 1

   Wo · Windows-Explorer → Ordner deines TIA-Projekts

   Kopiere das ZIP in seinen Zielordner

   Öffne den Projektordner, den du dir am Anfang notiert hast, und wechsle in UserFiles (lege ihn an, falls er fehlt). Erstelle darin einen Ordner namens CustomControls, falls er nicht existiert, und kopiere das ZIP dorthin. Lass es komprimiert: Entpacke es nicht und kopiere nicht nur index.html.

   ✓

   Prüfen: Der Pfad endet auf UserFiles\CustomControls\{8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip.

2. 2

   Wo · TIA Portal → Bild TestCWC → Task Card Werkzeuge

   Lass TIA Portal das Control finden

   Öffne das Bild TestCWC. Klappe in der Task Card Werkzeuge (Tools) rechts die Palette Meine Controls (My controls) auf und klicke auf deren Schaltfläche Aktualisieren.

   ✓

   Prüfen: HMIx Pie Chart erscheint in der Palette Meine Controls.

3. 3

   Wo · TIA Portal → Meine Controls → Bild TestCWC

   Platziere es im Bild

   Ziehe HMIx Pie Chart aus der Palette in das Bild. Gib ihm eine Größe von etwa 480 × 300 Pixeln und lass seitlich Platz für die drei Zahlenfelder, die du später hinzufügst.

   ✓

   Prüfen: Das Bild enthält eine Instanz deines Diagramms mit der Überschrift PRODUKTION.

4. 4

   Wo · Ausgewähltes Control → Inspektorfenster → Eigenschaften → Eigenschaften → Schnittstelle

   Finde die vorbereiteten Eingänge

   Wähle das Control aus und öffne im Inspektorfenster Eigenschaften → Eigenschaften → Schnittstelle (Interface). Dort findest du ValueA, ValueB und ValueC mit ihren Anfangswerten 45, 35 und 20. Im nächsten Abschnitt ersetzt du diese festen Werte durch Variablen.

   

   ✓

   Prüfen: Du siehst dieselben drei Eigenschaften, die manifest.json definiert.

Siemens · CWC installieren und verwenden

Das Control hat drei Eingänge; jetzt versorgst du sie mit Daten. Du legst drei interne Variablen an (sie liegen in der HMI, ohne SPS) und drei EA-Felder. Ein EA-Feld (Ein-/Ausgabefeld) ist ein Feld im Bild, in dem du eine Zahl lesen und schreiben kannst. Jedes Feld und sein Diagrammsegment verwenden dieselbe Variable.

1. 1

   Wo · TIA Portal → HMI-Gerät → HMI-Variablen → Variablentabelle

   Lege die drei Testvariablen an

   Öffne die Standard-Variablentabelle und füge ProductionA, ProductionB und ProductionC hinzu. Wähle in der Spalte Verbindung Interne Variable und einen numerischen Datentyp, zum Beispiel Real.

   ✓

   Prüfen: Die Tabelle enthält drei numerische interne Variablen mit diesen Namen.

2. 2

   Wo · Bild TestCWC → ausgewähltes CWC → Eigenschaften → Eigenschaften → Schnittstelle

   Verbinde jede Variable mit ihrem Eingang

   Öffne in der Zeile ValueA die Spalte Dynamisierung, wähle Variable und dann ProductionA. „Dynamisieren“ bedeutet, dass die Eigenschaft ihren Wert aus einer Variablen statt aus einer festen Zahl bezieht. Wiederhole das für ValueB → ProductionB und ValueC → ProductionC. Lass Nur lesend aktiviert: Das Diagramm zeigt die Daten nur an; schreiben wirst du sie über die Felder.

   So gelangen die drei Werte zum Diagramm

   1. 1

      Du gibst in jedes EA-Feld eine Zahl ein

      A

      45

      B

      35

      C

      20

      EA steht für Ein-/Ausgabe: Das Feld zeigt einen Wert an und lässt dich ihn während des Tests ändern.

   2. 2

      Die HMI-Variable speichert diese Zahl

      ProductionA

      45

      ProductionB

      35

      ProductionC

      20

      Es sind interne Projektvariablen. Für diesen Test brauchst du keine SPS.

   3. 3

      Die Control-Eigenschaft empfängt den Wert

      ValueA

      45

      ValueB

      35

      ValueC

      20

      Verbinde jede Eigenschaft in der Spalte Dynamisierung der Schnittstelle mit ihrer Variablen.

   4. 4

      Das Diagramm wird neu gezeichnet

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

      Bei 45, 35 und 20 ist die Summe 100. Änderst du eine Zahl, werden alle drei Anteile neu berechnet.

   

   ✓

   Prüfen: Jeder Diagrammeingang erhält eine eigene Variable, wie im Schema gezeigt.

3. 3

   Wo · Bild TestCWC → Werkzeuge → Elemente → EA-Feld

   Füge die Felder für die Zahleneingabe hinzu

   Ziehe drei EA-Felder neben das Diagramm. Wähle bei jedem den Modus Ein-/Ausgabe und verbinde seinen Prozesswert mit ProductionA, ProductionB beziehungsweise ProductionC. Setze die Texte A, B und C daneben, um sie zu unterscheiden.

   ✓

   Prüfen: Du hast das Diagramm und drei Felder: eines für A, eines für B und eines für C.

4. 4

   Wo · TIA Portal → Projektnavigation → HMI-Gerät

   Übersetze und öffne das Bild in Runtime

   Klicke mit der rechten Maustaste auf TestCWC und wähle Als Startbild festlegen (alternativ unter Runtime-Einstellungen → Allgemein). Markiere das HMI-Gerät, übersetze es (Rechtsklick → Übersetzen → Software) und behebe eventuelle Fehler. Klicke dann auf Simulation starten oder lade das Projekt in deine Unified PC Runtime. Der Web-Client öffnet sich: Melde dich mit einem Projektbenutzer an. Hast du keinen, lege ihn unter Security-Einstellungen → Benutzer und Rollen an, weise ihm eine HMI-Rolle zu (zum Beispiel HMI Administrator) und übersetze erneut.

   ✓

   Prüfen: Das Bild läuft und du kannst Zahlen in die EA-Felder eingeben.

5. 5

   Wo · Bild in Runtime → Felder A, B und C

   Prüfe die erste Verteilung und ändere A

   Gib bei A 45, bei B 35 und bei C 20 ein und bestätige jede Zahl mit Enter. Die Summe muss 100 sein. Ändere jetzt nur A auf 90 und bestätige: Sein Segment wächst und die Summe steigt auf 145. Die Zahlen sind Mengen, keine Prozentwerte: Das Control berechnet den Anteil jeder Menge an der Summe.

   ✓

   Prüfen: Das Diagramm ändert sich, sobald du eine Zahl bestätigst, ohne das Bild neu zu laden.

6. 6

   Wo · Bild in Runtime → Felder A, B und C

   Prüfe auch den leeren Zustand

   Gib in alle drei Felder 0 ein: Die farbigen Segmente verschwinden und es bleibt ein leerer Ring mit der Summe 0. Gib wieder 45, 35 und 20 ein und lade die Seite im Browser neu (F5), um zu prüfen, ob das Control beim Öffnen die aktuellen Werte einliest.

   ✓

   Prüfen: Das Control stellt sowohl normale Daten als auch den Fall ohne Produktion dar.

Siemens · CWC installieren und verwendenSiemens · Engineering-Beispiel und Original-Screenshots

• HMIx Pie Chart erscheint nicht unter Meine Controls: Öffne das ZIP; auf seiner obersten Ebene müssen manifest.json, assets und control liegen, ohne Zwischenordner. Prüfe, dass es genau {8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip heißt (mit eingeblendeten Dateinamenerweiterungen, damit es nicht .zip.zip ist), dass es in UserFiles\CustomControls des geöffneten Projekts liegt, und klicke auf Aktualisieren.
• ValueA, ValueB oder ValueC fehlt: Verwende das ZIP dieser Anleitung und benenne in manifest.json nichts um; bei den Namen wird zwischen Groß- und Kleinschreibung unterschieden. Das Produkt Pie Chart im Katalog hat andere Eigenschaften.
• Das Diagramm ändert sich in Runtime nicht: Bestätige die Zahl mit Enter. Prüfe dann, ob das EA-Feld im Modus Ein-/Ausgabe ist und ob Feld und Control-Eigenschaft dieselbe Variable verwenden.
• Du kannst dich nicht in Runtime anmelden: Der Client verlangt einen Projektbenutzer. Lege ihn unter Security-Einstellungen → Benutzer und Rollen mit einer HMI-Rolle an, übersetze und lade erneut.
• Es steht noch PIE CHART da: Speichere index.html, erstelle das ZIP neu und ersetze das im Projekt. Klicke unter Meine Controls auf Aktualisieren: Das Inspektorfenster meldet, dass das Objekt aktualisiert wurde. Übersetze die HMI und lade sie erneut. Änderungen nur im Arbeitsordner ändern nichts an dem, was schon in TIA Portal ist.
• Es funktioniert am PC, aber nicht auf einem Unified Comfort Panel: Stelle sicher, dass alle Abhängigkeiten im ZIP enthalten sind, und prüfe die Siemens-Einschränkungen für dieses Gerät, besonders bei externen Ressourcen und Datenabfragen.

Sobald es funktioniert, ändere immer nur eine Sache: zuerst einen Text oder eine Farbe, dann eine andere Art der Datendarstellung. Benennst du eine Eigenschaft um oder änderst ihren Typ, kann TIA Portal die Konfiguration bestehender Instanzen verlieren. Prüfe das Control immer auf dem Gerät, auf dem es eingesetzt wird.

Siemens · CWC-Einschränkungen auf Unified Comfort Panels

Du weißt jetzt, wie ein CWC innen aufgebaut ist. Um neue Controls zu erstellen, ohne HTML oder JavaScript zu schreiben, kannst du den KI-Generator von HMIx (ai.hmix.tech) verwenden: Beschreibe das Control in eigenen Worten, und die KI erstellt Design, Eigenschaften, manifest.json und das Paket {GUID}.zip, bereit für TIA Portal. Du kannst kostenlos mit dem Community-Plan starten.

Was du hier gelernt hast, gilt weiterhin: Import, Variablenverbindung und Test in Runtime funktionieren genau gleich.

1. 1

   Wo · ai.hmix.tech → Custom Web Control

   Beschreibe das Control, das du brauchst

   Schreibe, was es anzeigen und welche Daten es empfangen soll, zum Beispiel: „Kreisdiagramm mit drei Produktionsmengen A, B und C, Summe in der Mitte und Legende mit Prozentwerten“. Du kannst auch ein Referenzbild anhängen.

   ✓

   Prüfen: Die KI erzeugt eine erste visuelle Version, die du im Chat oder im visuellen Editor verfeinern kannst.

2. 2

   Wo · Generator → Schritte Definition und Simulation

   Prüfe Eigenschaften und Simulation

   Prüfe die Eigenschaften, die die KI vorschlägt (die Entsprechungen von ValueA, ValueB und ValueC), und verändere sie mit den Simulationsreglern, um zu sehen, wie das Control reagiert, bevor du es herunterlädst.

   ✓

   Prüfen: Das Control reagiert in der Simulation wie erwartet.

3. 3

   Wo · Generator → Schritt Generierung und Installation

   Lade das Paket herunter

   Lade das Ergebnis herunter. Das Download-ZIP enthält die Dokumentation und darin das Paket {GUID}.zip des Controls: Diese innere Datei kopierst du, weiterhin komprimiert, nach UserFiles\CustomControls.

   ✓

   Prüfen: Du hast ein {GUID}.zip im selben Format wie das dieser Anleitung.

4. 4

   Wo · TIA Portal → Meine Controls

   Importiere und teste es wie hier

   Folge den Abschnitten „Importiere das CWC in TIA Portal“ und „Variablen verbinden und in Runtime testen“ mit den Namen deines neuen Controls.

   ✓

   Prüfen: Dein mit KI erstelltes Control funktioniert in deinem WinCC-Unified-Bild.

Im kostenlosen Plan werden generierte Controls im HMIx-Katalog veröffentlicht, damit auch andere Nutzer sie verwenden können; mit kostenpflichtigen Plänen bleiben sie privat.