WinCC Unified Custom Web Controls

Antes de empezar este artículo, las gracias a Cesar Fernandez, porque sino , no seria posible la realización de esté y otros muchos artículos.

Así que Gracias Amigo, porque cuando una persona da sin pedir nada a cambio, se puede decir que es un amigo, verdad? Gracias :-).

Y ahora vamos a pasar a la explicación y lo que vamos a tener que aprender para darle a nuestras aplicaciones un valor añadido.

De esta manera y dependiendo de lo que interese al cliente y con este conocimiento vamos a poder ofrecer nuevas soluciónes.

Si abrimos nuestra aplicación dentro de My Controls, por defecto tenemos dos controles.

 

Estos controles que son por defecto y para todos los proyectos que creemos en TIA Portal, estan en la siguiente directorio.

Pregunta ¿Si hay tres archivos, porque hay dos controles? Porque no en los tres archivos está todo definido para que TIA Portal al abrir una pantallo lo cargue.

 

Bien, aqui es donde vamos a tener que insertar los controles que hayamos creado, y con el siguiente formato:

-Un archivo comprimido, con el nombre de un GUID único e irrepetible y tal cual aparece en la imagen, en formato zip

 

Ahora cerramos nuestro proyecto TIA Portal

 

Cuando volvemos a abrirlo, por defecto en My Controls, ya ha cargado el control que hemos insertado y esta listo para utilizarse

 

Ya lo podemos arrastrar como cualquier otro objeto, donde tendra las propiedades que se hayan definidos, eventos , etc...

 

Seguiendo con la explicación, que hay dentro de ese archivo comprimido? Cada Control que hayamos creado consta de esta estructura

-Una carpeta llamada assets.

-Una carpeta llamada control

-Un archivo manifest.json (JavaScript Object Notation)

 

Dentro del directorio assets, lo que tenemos es el logo que vamos a ver en TIA Portal

 

El directorio control, esta todo el código que hemos generado al crear el control, mas un archivo webcc.min.js

 

En el archivo principal de nuestro controls, en este caso index.html, es donde vamos a llamar a esta libreria, y donde se definen propiedades , eventos y métodos del control que hemos creado.

 

Y por ultimo el archivo manifest.json , donde esta la definición de nuestro control, subdividido

 

Y para finalizar, vamos a hechar una partida ...

 

Para no extender este artículo demasiado, ya tenemos la base de como funciona, y lo próximo que espero poder hacer , es la creación de un simple control desde cero, asi ya sabremos como implementar todo lo que acabamos de ver.

15-03-2020

Todas las marcas comerciales, softwares, logos son propiedad de sus respectivos titulares.