Cómo crear un Custom Web Control (CWC) para WinCC Unified y V8: guía paso a paso, manual o con IA

Un Custom Web Control, abreviado CWC, es un objeto de pantalla hecho a medida con tecnología web (HTML, CSS y JavaScript). Lo colocas en una pantalla de WinCC Unified como un botón o un campo más, pero tú decides su aspecto y su comportamiento: un gráfico de producción, una tabla especial, un panel con varios indicadores…

Nuestro ejemplo es un gráfico circular (pie chart) con un hueco central que muestra el total y tres segmentos para las cantidades A, B y C. Cuando una cantidad cambia, su segmento crece o se reduce.

El control recibe cada dato a través de una propiedad: una entrada con nombre, como ValueA. En TIA Portal conectarás esa propiedad a una variable HMI, que es donde el proyecto guarda el valor. Al control le da igual de dónde llegue el dato: en esta prueba lo escribirás tú en la pantalla; en una máquina real vendría de un PLC.

• Usa un CWC cuando necesites una visualización o interacción que los objetos estándar de WinCC Unified no ofrecen.
• Si solo quieres que un símbolo cambie de color o que un tanque muestre su nivel, empieza por un SVG dinámico: tiene menos piezas.

Siemens · Programación de Custom Web ControlsSiemens · Custom Web Controls en WinCC V8

Vas a trabajar en dos sitios: en un editor de texto prepararás el control y en TIA Portal lo colocarás en una pantalla. Los archivos base ya contienen un gráfico completo y funcional, así que no tienes que escribir código: solo entender cada pieza y hacer un primer cambio.

Antes de empezar, activa en Windows la opción de ver las extensiones de archivo (Explorador → Vista → Mostrar → Extensiones de nombre de archivo). Así verás si un archivo termina realmente en .zip o .json, y evitarás el error más habitual: nombres como archivo.zip.zip.

• Necesitas TIA Portal con WinCC Unified (los pasos se muestran en V21.1) y su simulación o Unified PC Runtime. Runtime es el programa que ejecuta la pantalla HMI.
• Usa un editor de texto como Visual Studio Code y el Explorador de archivos de Windows, que ya sabe crear archivos ZIP. No necesitas un PLC.

1. 1

   Dónde · TIA Portal → árbol del proyecto → dispositivo HMI → Imágenes (Screens)

   Deja preparada una pantalla vacía

   Abre o crea un proyecto de prueba con un dispositivo WinCC Unified (por ejemplo, Unified PC). Dentro del dispositivo, en Imágenes, crea una pantalla llamada PruebaCWC y guarda el proyecto. Anota dónde está su carpeta: por defecto, TIA Portal la crea en Documentos\Automation\<NombreDelProyecto>.

   ✓

   Comprueba: Tienes una pantalla vacía y sabes en qué carpeta de tu PC está el proyecto.

2. 2

   Dónde · Explorador de archivos de Windows

   Descarga y extrae los archivos base

   Descarga el pie chart con el botón de este apartado: es un ZIP llamado {8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip. Guarda una copia sin tocar. Haz clic derecho → Extraer todo y, en la ventana que aparece, cambia el nombre de la carpeta de destino por HmixPieChart (Windows propone el nombre largo del GUID).

   ✓

   Comprueba: Dentro de HmixPieChart ves manifest.json y las carpetas assets y control.

3. 3

   Dónde · Visual Studio Code o tu editor de texto

   Abre la carpeta en tu editor

   En Visual Studio Code, elige Archivo → Abrir carpeta y selecciona HmixPieChart. Si no ves el árbol de archivos, abre el panel Explorador (Ctrl+Mayús+E). Desde ahí abrirás cada archivo en el siguiente apartado.

   ✓

   Comprueba: Ves el árbol de archivos del control en el lateral del editor.

Siemens · Instalación y uso de CWC

Un CWC son unos pocos archivos de texto. No hace falta memorizarlos: basta con saber qué hace cada uno. manifest.json presenta el control a TIA Portal, index.html contiene lo que se ve y code.js decide cómo cambia el gráfico cuando llega un dato.

1. 1

   Dónde · Editor → panel Explorador de HmixPieChart

   Comprueba dónde va cada archivo

   En el primer nivel están manifest.json y las carpetas assets y control. Dentro de control están index.html, code.js y webcc.min.js. Este último es la biblioteca oficial de Siemens que comunica el control con WinCC Unified: ya viene incluida y no debes modificarla. assets guarda su licencia y, en tus propios controles, puede guardar el icono.

   Una carpeta, tres piezas que trabajan juntas

   • HmixPieChart/
     • manifest.json

       La ficha del control: su nombre, su identificador (GUID) y los valores que puede recibir de WinCC Unified.

     • assets/
       • SIEMENS-LICENSE.md

         La licencia que acompaña a la biblioteca de comunicación de Siemens.

     • control/
       • index.html

         La página que dibuja el gráfico. Aquí también está su aspecto: colores, tamaños y distribución.

       • code.js

         Las instrucciones que actualizan el gráfico cuando cambia un valor.

       • webcc.min.js

         El puente de comunicación con WinCC Unified. Es el archivo oficial de Siemens: no lo edites.

   ✓

   Comprueba: Tu carpeta tiene la misma estructura que el esquema, sin archivos fuera de su sitio.

2. 2

   Dónde · Editor → manifest.json

   Reconoce las tres entradas del gráfico

   Abre manifest.json y busca properties. Verás ValueA, ValueB y ValueC. Cada una indica "type": "number" (recibe un número) y un valor inicial en default: 45, 35 y 20. Son las tres propiedades que después aparecerán en TIA Portal. Más arriba, en identity, verás también displayname (el nombre que mostrará TIA Portal, HMIx Pie Chart) y type, con el identificador único del control. No cambies nada en este archivo durante la primera prueba.

   ✓

   Comprueba: Sabes qué tres cantidades recibirá el control, cómo se llaman y dónde está su identificador.

3. 3

   Dónde · Editor → control/index.html

   Haz tu primera modificación visible

   Este archivo usa HTML para organizar el contenido y, dentro de la etiqueta <style>, reglas CSS que definen colores y tamaños. Busca (Ctrl+F) el texto PIE CHART y cámbialo por PRODUCCIÓN. Cambia solo esas letras, no las etiquetas <span> que las rodean, y guarda el archivo (Ctrl+S).

   ✓

   Comprueba: La cabecera del gráfico dice PRODUCCIÓN: has personalizado tu control con un cambio fácil de comprobar.

4. 4

   Dónde · Editor → control/code.js

   Identifica la parte que actualiza los valores

   code.js está escrito en JavaScript, el lenguaje que describe las acciones del control. Busca drawChart: esa función calcula el total y dibuja los segmentos. Más abajo, WebCC.start establece la comunicación con WinCC Unified y onPropertyChanged avisa cada vez que cambia una propiedad. Fíjate en que ValueA, ValueB y ValueC se escriben exactamente igual que en el manifiesto. No hace falta tocar nada aquí.

   ✓

   Comprueba: Distingues la apariencia (index.html) de la lógica que recibe y dibuja los datos (code.js).

5. 5

   Dónde · Explorador de Windows → HmixPieChart → control

   Comprueba el diseño antes de empaquetarlo

   Haz doble clic en index.html para abrirlo en tu navegador. Debes ver la cabecera PRODUCCIÓN y el gráfico con 45, 35 y 20. Es normal que no reaccione a nada: fuera de WinCC el control no tiene variables y muestra sus valores iniciales. Si todavía ves PIE CHART, guarda el cambio en el editor y recarga la página (F5).

   ✓

   Comprueba: El gráfico se dibuja y muestra el texto que acabas de cambiar.

6. 6

   Dónde · Explorador de Windows → dentro de HmixPieChart

   Crea el ZIP que importará TIA Portal

   Entra en HmixPieChart y selecciona a la vez manifest.json, assets y control (Ctrl+clic). Haz clic derecho → Comprimir en archivo ZIP (en Windows 10: Enviar a → Carpeta comprimida). Selecciona esos tres elementos, no la carpeta HmixPieChart. Renombra el ZIP resultante exactamente como {8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip, con las llaves: es el GUID que aparece en identity → type del manifiesto. Si no lo nombras así, TIA Portal no mostrará el control.

   De la carpeta de trabajo al proyecto de TIA Portal

   1. 1

      Selecciona el contenido de la carpeta

      ✓manifest.json

      ✓assets/

      ✓control/

      Entra en HmixPieChart y selecciona estos tres elementos. La carpeta HmixPieChart no va dentro del ZIP.

   2. 2

      Comprime y nombra el ZIP con el GUID

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

      El nombre del ZIP coincide con el GUID de manifest.json. Las llaves también forman parte del nombre.

   3. 3

      Copia el ZIP completo en esta ubicación

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

      Aquí va el archivo ZIP sin descomprimir. Crea UserFiles y CustomControls si no existen.

   ✓

   Comprueba: Al abrir el ZIP aparecen directamente manifest.json, assets y control, y su nombre coincide con el GUID.

Para seguir esta guía conserva la identidad del ejemplo. Cuando crees otro control independiente, genera un GUID nuevo (por ejemplo, en PowerShell con [guid]::NewGuid()), escríbelo en mayúsculas en identity → type (guid://…) y usa el mismo, entre llaves, en el nombre del ZIP. Renombrar solo el ZIP no cambia la identidad.

{
  "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 · Estructura del manifiestoSiemens · WebCC e interfaz con RuntimeSiemens · Archivos de ejemplo y biblioteca WebCCSiemens · Preparar el archivo ZIP

El paquete está listo. Ahora pasas del editor de texto a TIA Portal. El ZIP se guarda dentro de la carpeta del proyecto, en una subcarpeta concreta, para que TIA Portal lo encuentre.

1. 1

   Dónde · Explorador de Windows → carpeta de tu proyecto TIA

   Copia el ZIP en su carpeta de destino

   Abre la carpeta del proyecto que anotaste al principio y entra en UserFiles (créala si no existe). Dentro, crea una carpeta llamada CustomControls si no existe y copia allí el ZIP. Déjalo comprimido: no lo extraigas ni copies solo index.html.

   ✓

   Comprueba: La ruta termina en UserFiles\CustomControls\{8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip.

2. 2

   Dónde · TIA Portal → pantalla PruebaCWC → task card Herramientas (Tools)

   Haz que TIA Portal lo encuentre

   Abre la pantalla PruebaCWC. En la task card Herramientas, a la derecha, despliega la paleta Controles propios (My controls) y pulsa su botón Actualizar (Update).

   ✓

   Comprueba: Aparece HMIx Pie Chart en la paleta Controles propios.

3. 3

   Dónde · TIA Portal → Controles propios → pantalla PruebaCWC

   Colócalo en la pantalla

   Arrastra HMIx Pie Chart desde la paleta hasta la pantalla. Dale un tamaño aproximado de 480 × 300 píxeles y deja espacio a un lado para los tres campos numéricos que añadirás después.

   ✓

   Comprueba: La pantalla contiene una instancia de tu gráfico con la cabecera PRODUCCIÓN.

4. 4

   Dónde · Control seleccionado → ventana de inspección → Propiedades → Propiedades → Interfaz (Interface)

   Localiza las entradas que preparaste

   Selecciona el control y, en la ventana de inspección, abre Propiedades → Propiedades → Interfaz. Ahí están ValueA, ValueB y ValueC con sus valores iniciales 45, 35 y 20. En el siguiente apartado sustituirás esos valores fijos por variables.

   

   ✓

   Comprueba: Ves las mismas tres propiedades que definía manifest.json.

Siemens · Instalación y uso de CWC

El control ya tiene tres entradas; ahora les darás datos. Crearás tres variables internas (viven dentro de la HMI, sin PLC) y tres campos E/S. Un campo E/S (entrada/salida) es una casilla de la pantalla en la que puedes leer y escribir un número. Cada casilla y su segmento del gráfico compartirán la misma variable.

1. 1

   Dónde · TIA Portal → dispositivo HMI → Variables HMI (HMI tags) → tabla de variables

   Crea las tres variables de prueba

   Abre la tabla de variables estándar y añade ProductionA, ProductionB y ProductionC. En la columna Conexión (Connection) elige «Variable interna» (Internal tag) y como tipo de datos uno numérico, por ejemplo Real.

   ✓

   Comprueba: La tabla contiene tres variables internas numéricas con esos nombres.

2. 2

   Dónde · Pantalla PruebaCWC → CWC seleccionado → Propiedades → Propiedades → Interfaz

   Conecta cada variable con su entrada

   En la fila ValueA, abre la columna Dinamización (Dynamization), elige Variable (Tag) y selecciona ProductionA. «Dinamizar» significa que la propiedad toma su valor de una variable en lugar de un número fijo. Repite con ValueB → ProductionB y ValueC → ProductionC. Deja activada la opción Solo lectura (Read only): el gráfico solo muestra los datos; los escribirás desde las casillas.

   El recorrido de los tres valores hasta el gráfico

   1. 1

      Escribes un número en cada campo E/S

      A

      45

      B

      35

      C

      20

      E/S significa entrada/salida: el campo muestra un valor y te permite cambiarlo durante la prueba.

   2. 2

      La variable HMI guarda ese número

      ProductionA

      45

      ProductionB

      35

      ProductionC

      20

      Son variables internas del proyecto. Para esta prueba no necesitas un PLC.

   3. 3

      La propiedad del control recibe el valor

      ValueA

      45

      ValueB

      35

      ValueC

      20

      Enlaza cada propiedad a su variable en la columna Dinamización de la Interfaz.

   4. 4

      El gráfico se redibuja

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

      Con 45, 35 y 20, la suma es 100. Si cambias un número, se recalculan las tres porciones.

   

   ✓

   Comprueba: Cada entrada del gráfico recibe una variable distinta, tal como muestra el esquema.

3. 3

   Dónde · Pantalla PruebaCWC → Herramientas → Elementos (Elements) → Campo E/S (I/O field)

   Añade las casillas para escribir los números

   Arrastra tres campos E/S junto al gráfico. En cada uno, elige el modo Entrada/salida (Input/output) y enlaza su Valor de proceso (Process value) a ProductionA, ProductionB y ProductionC, respectivamente. Añade al lado los textos A, B y C para distinguirlos.

   ✓

   Comprueba: Tienes el gráfico y tres campos: uno para A, otro para B y otro para C.

4. 4

   Dónde · TIA Portal → árbol del proyecto → dispositivo HMI

   Compila y abre la pantalla en Runtime

   Haz clic derecho en PruebaCWC y elige Definir como imagen inicial (también puedes fijarla en Ajustes de Runtime → General). Selecciona el dispositivo HMI, compílalo (clic derecho → Compilar → Software) y corrige los errores que aparezcan. Después pulsa Iniciar simulación o carga el proyecto en tu Unified PC Runtime. Se abrirá el cliente web: inicia sesión con un usuario del proyecto. Si no tienes ninguno, créalo en Ajustes de seguridad → Usuarios y roles (Security settings → Users and roles), asígnale un rol HMI (por ejemplo, HMI Administrator) y vuelve a compilar.

   ✓

   Comprueba: Ves la pantalla en ejecución y puedes escribir números en los campos E/S.

5. 5

   Dónde · Pantalla en Runtime → campos A, B y C

   Comprueba el primer reparto y cambia A

   Escribe 45 en A, 35 en B y 20 en C, confirmando cada número con Intro. El total debe ser 100. Ahora cambia solo A a 90 y confirma: su segmento crece y el total pasa a 145. Los números son cantidades, no porcentajes: el control calcula qué parte del total corresponde a cada una.

   ✓

   Comprueba: El gráfico cambia en cuanto confirmas un número, sin recargar la pantalla.

6. 6

   Dónde · Pantalla en Runtime → campos A, B y C

   Comprueba también el estado vacío

   Introduce 0 en los tres campos: desaparecen los segmentos de color y queda el anillo vacío con total 0. Vuelve a escribir 45, 35 y 20 y recarga la página del navegador (F5) para comprobar que el control lee los valores actuales al abrirse.

   ✓

   Comprueba: El control representa tanto datos normales como el caso sin producción.

Siemens · Instalación y uso de CWCSiemens · Ejemplo de ingeniería y capturas originales

• No aparece HMIx Pie Chart en Controles propios: abre el ZIP; en su primer nivel deben estar manifest.json, assets y control, sin una carpeta intermedia. Comprueba que se llama exactamente {8D821B43-4EF5-4BF1-A31D-931D283C7C04}.zip (con las extensiones visibles, que no sea .zip.zip), que está en UserFiles\CustomControls del proyecto abierto y pulsa Actualizar.
• Faltan ValueA, ValueB o ValueC: usa el ZIP de esta guía y no cambies los nombres de manifest.json; distinguen mayúsculas y minúsculas. El producto Pie Chart del catálogo tiene otras propiedades.
• El gráfico no cambia en Runtime: confirma el número con Intro. Después revisa que el campo E/S está en modo Entrada/salida y que el campo y la propiedad del control usan la misma variable.
• No puedes entrar en Runtime: el cliente pide un usuario del proyecto. Créalo en Ajustes de seguridad → Usuarios y roles con un rol HMI, compila y vuelve a cargar.
• Sigue apareciendo PIE CHART: guarda index.html, vuelve a crear el ZIP y sustituye el del proyecto. En Controles propios pulsa Actualizar: la ventana de inspección indicará que el objeto se ha actualizado. Compila y vuelve a cargar la HMI. Editar la carpeta de trabajo no cambia por sí solo lo que ya está en TIA Portal.
• Se ve en el PC pero falla en un Unified Comfort Panel: comprueba que todas las dependencias viajan dentro del ZIP y revisa las restricciones de Siemens para ese dispositivo, especialmente recursos externos y peticiones de datos.

Cuando funcione, cambia una cosa cada vez: primero un texto o un color, después otra forma de mostrar los datos. Si cambias el nombre o el tipo de una propiedad, TIA Portal puede perder su configuración en las instancias existentes. Valida siempre el control en el dispositivo en el que se utilizará.

Siemens · Restricciones de CWC en Unified Comfort Panels

Ya sabes cómo es un CWC por dentro. Para crear controles nuevos sin escribir HTML ni JavaScript puedes usar el generador de IA de HMIx (ai.hmix.tech): describes el control en lenguaje natural y la IA prepara el diseño, las propiedades, el manifest.json y el paquete {GUID}.zip listo para TIA Portal. Puedes empezar gratis con el plan Community.

Lo aprendido en esta guía sigue siendo útil: la importación, la conexión de variables y la prueba en Runtime se hacen exactamente igual.

1. 1

   Dónde · ai.hmix.tech → Custom Web Control

   Describe el control que necesitas

   Escribe qué debe mostrar y qué datos recibe, por ejemplo: «Gráfico circular con tres cantidades de producción A, B y C, total en el centro y leyenda con porcentajes». También puedes adjuntar una imagen de referencia.

   ✓

   Comprueba: La IA genera una primera versión visual que puedes ajustar por chat o con el editor visual.

2. 2

   Dónde · Generador → pasos de definición y simulación

   Revisa propiedades y simulación

   Comprueba las propiedades que propone la IA (los equivalentes a ValueA, ValueB y ValueC) y muévelas con los controles de simulación para ver cómo reacciona el control antes de descargarlo.

   ✓

   Comprueba: El control responde en la simulación como esperas.

3. 3

   Dónde · Generador → paso de generación e instalación

   Descarga el paquete

   Descarga el resultado. El ZIP de descarga contiene la documentación y, dentro, el paquete {GUID}.zip del control: ese archivo interior es el que se copia, sin descomprimir, en UserFiles\CustomControls.

   ✓

   Comprueba: Tienes un {GUID}.zip con el mismo formato que el de esta guía.

4. 4

   Dónde · TIA Portal → Controles propios

   Impórtalo y pruébalo como aquí

   Sigue los apartados «Importa el CWC en TIA Portal» y «Conecta variables y pruébalo en Runtime» con los nombres de tu nuevo control.

   ✓

   Comprueba: Tu control generado con IA funciona en tu pantalla de WinCC Unified.

En el plan gratuito los controles generados se publican en el catálogo de HMIx para que otros usuarios también puedan usarlos; los planes de pago permiten mantenerlos privados.