Publicado el 17 de Agosto del 2019
1.123 visualizaciones desde el 17 de Agosto del 2019
2,4 MB
17 paginas
Creado hace 8a (15/09/2015)
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
Comentarios de: Práctica 3. Componentes visuales SCADA (0)
No hay comentarios