PDF de programación - Práctica 3. Componentes visuales SCADA

Informática Industrial

Práctica 3. Interfaz HMI SCADA



Práctica 3

Entorno de programación Visual C#.

Interfaz HMI SCADA

Material: PC y Visual Studio 2013

Duración: 2 horas

Lugar: Laboratorios de prácticas (Laboratorio de Redes-Hardware)



La herramienta de desarrollo que utilizaremos para el desarrollo de las prácticas de la

asignatura será el entorno de programación de Visual C, Microsoft Visual Studio 2013, el cual

permite la creación, compilación y ejecución de programas escritos en lenguaje Visual C#;

tanto en modo consola como en modo gráfico. Se recuerda al alumnado que, para la mejor

comprensión y asimilación de los conocimientos y habilidades desarrollados durante la

práctica, deberá haberse estudiado previamente el material docente disponible.



Introducción:

Como hemos visto durante el trascurso de las clases de teoría, una interfaz hombre/máquina o

HMI (del inglés Human Machine Interface) nos permite presentar gráficamente el estado de un

proceso industrial, al usuario que controla el proceso, es decir, estas interfaces son una

ventana al proceso.

Nuestra interfaz HMI a desarrollar será el software de monitorización y control; deberemos

interpretar la información que recibimos del propio proceso y visualizarla correctamente.

Como comentamos en clase, los sistemas de visualización se rigen en España por el Real

Decreto 488/97 (Normativa), en lo que a formato, tamaño, colores a emplear y otras

características se refiere. Por lo que, trataremos de plasmar dicha normativa en la/s

interfaz/interfaces que diseñaremos durante el trascurso de esta práctica.

Escuela de Ingenieros Industriales de Albacete
Universidad de Castilla-La Mancha


1

Informática Industrial

Práctica 3. Interfaz HMI SCADA



Como también comentamos en clase, la obtención de los datos por el sistema de visualización

SCADA se realiza por medio de algún tipo de red de comunicaciones para, posteriormente,

interpretarla y mostrarla adecuadamente por pantalla. Esta práctica será complementada por

la Práctica 4, por lo que en esta Práctica 3 simularemos la recepción de información y

actualización de los datos mediante un tipo especial de variables, el timer.

Desarrollo de la práctica:

1. Adición de archivos con componentes visuales SCADA.

En esta primera parte de la práctica procederemos a agregar, al entorno Visual Studio, dos

archivos de componentes gráficos para sistemas SCADA, archivos con extensión XAML. Para

ello, y debido a que se trata de archivos que contienen instrucciones para la presentación

gráfica, procederemos de la siguiente forma, con el fin de agregarlos a nuestro entorno de la

forma correcta.

1) Igual que en la Práctica 2, crearemos un proyecto visual nuevo (Aplicación WPF). Consulta la

Práctica 2.

2) Dentro del Cuadro de Herramientas, en donde se muestran los componentes gráficos

disponibles, pulsaremos para cerrar el listado de los mismos, es decir, en la pestaña “Todos los

controles WPF”. De esta forma veremos:

Es decir, hemos cerrado la vista de componentes y tenemos solamente un listado de los



mismos agrupados por tipos.

Escuela de Ingenieros Industriales de Albacete
Universidad de Castilla-La Mancha


2

Informática Industrial

Práctica 3. Interfaz HMI SCADA



3) Sobre dicho Cuadro de herramientas plegado, haremos click con el botón derecho, y

seleccionaremos la opción de Agregar pestaña. Tras ello, le daremos un nombre, por ejemplo:

Componentes Visuales SCADA. Esta será la pestaña en la que ubicaremos lo componentes

específicamente diseñados para la interfaz HMI SCADA, y que nos permitirá localizarlos de

manera independiente al resto de los componentes. Es conveniente que, cuando se agregan

componentes de otros desarrolladores, se proceda de esta manera; con el fin de localizar los

nuevos componentes rápidamente.



Como se muestra en la imagen anterior dicha pestaña aparecerá vacía, pues aún no hemos

agregado ningún elemento a ella.

4) Descargaremos el archivo comprimido, denominado archivos_práctica_3.rar, disponible a

través de Campus Virtual, en donde encontraremos

los

siguientes archivos:

bargraph_horizontal.xaml y cosphi.xaml. Dichos archivos contienen

las

instrucciones

necesarias para generar los elementos visuales que vamos a agregar al entorno Visual Studio.

Lo primero de

todo,

son

archivos

gratuitos proporcionados por COPDATA

(http://www.copadata.com/en/downloads/wpf-elements.html), por lo que debe ser revisada

la documentación de copyright sobre ellos cuando se empleen para desarrollos comerciales.

Recordad que, estos archivos, serán necesarios para cada proyecto en el que hagamos uso de

ellos.

Una vez tengáis dichos archivos los ubicaremos en un directorio conocido, pues accederemos a

ellos para tomar parte de la información contenida en ellos más adelante.

Escuela de Ingenieros Industriales de Albacete
Universidad de Castilla-La Mancha


3

Informática Industrial

Práctica 3. Interfaz HMI SCADA



5) A continuación, pasaremos a preparar el proyecto recién creado para recibir los

componentes que nos acabamos de descargar. Para ello, pulsaremos el botón derecho del

ratón sobre el título del proyecto en el Explorador de soluciones y ejecutaremos la secuencia

Agregar, Control de usuario. Automáticamente, se abrirá una ventana como la que se nos

muestra a continuación:



En dicha pantalla ya aparece seleccionada la opción que debemos utilizar, de las múltiples

opciones que tiene, además de venir indicado el nombre que le dará al componente que

vamos a agregar; podemos dejarlo así o podemos cambiar el nombre (se recomienda

cambiarlo por un nombre intuitivo). Como vamos a agregar un componente de tipo “barra de

progreso”, lo denominaremos barra en este ejemplo. Muy importante, la extensión del archivo

XAML no debe ser cambiada, solamente el nombre. Finalmente, pulsaremos agregar.

Veremos que aparece, en el explorador de soluciones, un nuevo archivo denominado

Barra.xaml, así como su vista de diseño, la cual es cargada automáticamente por el entorno

(evidentemente vacía, no tenemos nada aún en ella). También podemos ver, en la pestaña de

código XAML que nos aparece el siguiente código:



<UserControl x:Class="WpfApplication4.Barra"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>

</Grid>
</UserControl>

Escuela de Ingenieros Industriales de Albacete
Universidad de Castilla-La Mancha


4

Informática Industrial

Práctica 3. Interfaz HMI SCADA

En la pantalla principal, debemos ver algo similar a lo que se muestra a continuación:



5) Una vez creada la plantilla contenedora del componente que vamos a agregar, el

procedimiento para agregar el nuevo componente a nuestro entorno consiste en:

1. Eliminar la instrucción d:DesignHeight="300" d:DesignWidth="300", que marca el tamaño

por defecto del componente. Los componentes que agreguemos tendrán su propio

tamaño. Nota. No borréis el signo “>”.

2. Abrir el fichero denominado bargraph_horizontal.xaml mediante un editor de textos.

3. Copiar el código comprendido entre las marcas <Viewbox …> y </Viewbox>, ambas marcas

incluidas, es decir prácticamente todo el código del archivo.

4. Pegar dicho código entre las marcas <Grid> y </Grid> en la pantalla del visor de código

XAML.

5. Guardar la modificación que acabáis de realizar.



Aunque el componente que acabamos de incluir ya es visible, aún no puede emplearse como

un componente más, de la misma forma que vimos los componentes de la Práctica 2. Para

poder emplearlo debemos ejecutar el proyecto creado, lo que permitirá compilar el

componente y que éste aparezca en la pestaña del Cuadro de herramientas correspondiente a

los Componentes de este proyecto en particular.



Escuela de Ingenieros Industriales de Albacete
Universidad de Castilla-La Mancha


5

Informática Industrial

Práctica 3. Interfaz HMI SCADA



Como vemos en la imagen anterior, ya tenemos nuestro componente en la ventana principal

de la vista de diseño agregado, simplemente arrastrando sobre la misma, igual que con un

componente de tipo botón.

Nota. La explicación que se acaba de ver tiene implícitos muchas consideraciones y

significados, que no se verán ni se justificarán, debido a que excede los requisitos establecidos

para la asignatura (no veremos cómo crear componentes gráficos desde cero, solamente

veremos algún ejemplo muy sencillo). Con todo, el estudiante interesado puede ponerse en

Escuela de Ingenieros Industriales de Albacete
Universidad de Castilla-La Mancha


6

Informática Industrial

Práctica 3. Interfaz HMI SCADA



contacto con los profesores de la asignatura, para obtener información adicional sobre cómo

funciona realmente la adicción de componentes del tipo WPF.

6) Ya tenemos prácticamente los componentes listos para ser utilizados en nuestro proyecto,

¿qué más necesitamos? Recordad que necesitamos dar un nombre o identificador a los

componentes, ig