diseño de interfaces

15
World Skills - SENA 1. Intouch La siguiente lista son los tópicos que serán tratados en este tutorial. 1. Introducción a InTouch 2. El Ambiente de Desarrollo 3. Tagname Dictionary 4. Tendencias 5. Interfaz I/O Objetivo del Tutorial Desarrollar interfaces Hombre – Maquina básicas relacionadas con ambientes industriales por medio de las herramientas funcionales del Intouch 1. Introducción a InTouch Corriendo Intouch Para correr intouch se requiere ejecutar el archivo con nombre INTOUCH.EXE. Dicho archivo se lanza seleccionando en Windows: Inicio/programas/Wonderware/InTouch, tal como se muestra en la grafica siguiente. Fig 1. Icono para lanzar al InTouch Si se corre por primera vez Intouch este mostrara una caja de dialogo dándole la bienvenida a Intouch y algunas otras ventanas para la configuración de los directorios de trabajo y directorios raíz donde queda alojado el programa. Lea con detenimiento y defina dichos parámetros básicos. Es recomendable dejar la configuración que el mismo programa propone. En este caso simplemente se da click en el botón next, hasta que aparezca la ventana del Application Manager. La figura siguiente muestra dicha ventana y los elementos más importantes de esta.

Upload: edwin-ramirez

Post on 12-Apr-2016

10 views

Category:

Documents


0 download

DESCRIPTION

interfaces

TRANSCRIPT

Page 1: Diseño de Interfaces

World Skills - SENA

1. Intouch La siguiente lista son los tópicos que serán tratados en este tutorial.

1. Introducción a InTouch 2. El Ambiente de Desarrollo 3. Tagname Dictionary 4. Tendencias 5. Interfaz I/O

Objetivo del Tutorial Desarrollar interfaces Hombre – Maquina básicas relacionadas con ambientes industriales por medio de las herramientas funcionales del Intouch 1. Introducción a InTouch Corriendo Intouch Para correr intouch se requiere ejecutar el archivo con nombre INTOUCH.EXE. Dicho archivo se lanza seleccionando en Windows: Inicio/programas/Wonderware/InTouch, tal como se muestra en la grafica siguiente.

Fig 1. Icono para lanzar al InTouch

Si se corre por primera vez Intouch este mostrara una caja de dialogo dándole la bienvenida a Intouch y algunas otras ventanas para la configuración de los directorios de trabajo y directorios raíz donde queda alojado el programa. Lea con detenimiento y defina dichos parámetros básicos. Es recomendable dejar la configuración que el mismo programa propone. En este caso simplemente se da click en el botón next, hasta que aparezca la ventana del Application Manager. La figura siguiente muestra dicha ventana y los elementos más importantes de esta.

Page 2: Diseño de Interfaces

World Skills - SENA

Fig 2. Application Manager

Donde: Nueva Aplicación. Se usa para crear una nueva aplicación. WindowMaker: Para la edición del proyecto WindowViewer. Para correr la aplicación desarrollada Lista de Aplicaciones. Muestra los nombres de las diferentes aplicaciones que se tienen o se están desarrollando. Creación de una Nueva Aplicación Se creará a continuación una nueva aplicación. Para hacer esto se hace clic sobre el icono “nueva aplicación”, inmediatamente aparce una serie de ventanas de configuración donde usted define el nombre de la aplicación, la ubicación del directorio de trabajo para dicha aplicación y algunos otros aspectos. Las figuras siguientes muestran las ventanas obtenidas en el momento de definir una aplicación de nombre Tutorial

Fig 3. Creación de una nueva aplicación

Después de pasar a través de estas ventanas, nuevamente aparece la ventana del application manager y dentro de la lista de aplicaciones la aplicación que acabamos de crear.

WindowViewer

Lista de Aplicaciones

Nueva Aplicación

WindowMaker

Page 3: Diseño de Interfaces

World Skills - SENA

Las aplicaciones listadas dentro del application manager pueden ser: renombradas (cambiarles el nombre), pueden ser borradas o simplemente se pueden abrir a través de la barra de menús del application manager o usando el otro botón del Mouse. Al hacer esto último aparece el siguiente menú.

Con WindowMaker abro la aplicación, con delete borro la aplicación y con rename, le cambio el nombre. Cabe aclarar que si se borra la aplicación, simplemente se esta borrando el nombre de las aplicaciones disponibles de la lista de aplicaciones pero no se esta borrando el directorio donde se guarda la aplicación en si. Por lo tanto, para borrar completamente una aplicación se requiere, además de borrarla de la lista, borrar el directorio de trabajo de la aplicación. 2. Ambiente de Desarrollo A continuación usaremos la aplicación “Tutorial” para crear un ambiente grafico animado usando las herramientas del WindowMaker. a. Abra la aplicación Tutorial con el WindowMaker, presionando el botón indicado o de doble clic sobre el nombre de la aplicación. Al abrir la aplicación se abre la ventana del windowMaker tal como se muestra en la figura siguiente:

Application Explorer

Barra de Herramientas Superior

Barra de Dibujo Básico

Barra de Herramientas Inferior

Page 4: Diseño de Interfaces

World Skills - SENA

A medida que vayamos desarrollando la aplicación aprenderemos a utilizar las más importantes herramientas de diseño del WindowMaker que se encuentran en el application Explorer y en el menú. Por lo tanto iniciamos a diseñar una interfaz. b. Crear una ventana. El diseño de la interfaz en Intouch se basa en ventanas, las cuales pretenden ser los marcos de los diferentes elementos gráficos que compondrán la GUI. Para crear la ventana hacemos con el otro botón del Mouse sobre el ítem denominado Windows en el application Explorer. Seleccionamos new… y aparece el cuadro de configuración de la nueva ventana o las propiedades de la primera ventana. Tal como se muestra a continuación.

Seleccione el color de su agrado y deje los demás parámetros como viene por default. Estos parámetros pueden ser cambiados luego en tiempo de edición. El botón scripts permite programar tareas específicas para la ventana. Este tópico será detallado posteriormente. Presione OK. Observará que la nueva ventana y las demás que se crea quedan listadas debajo del item Windows en el application Explorer. Es desde allí donde usted podrá editar, abrir, cerrar las diferentes ventanas. c. Lo siguiente es agregar algunos elementos gráficos sobre la nueva ventana. Adicione los elementos necesarios para armar un esquema básico del proceso a desarrollar. En este caso se muestra el esquema de un proceso de llenado de un tanque.

Nombre de la aplicación

Define el color de fondo

Tipo de Ventana Replace. Reemplaza cualquier ventana del mismo tipo y popup al momento de abrirse. Overlay. Abre encima de la ventana actual. Permite cambiar de ventana Popup. Abre encima de la ventana actual pero no permite cambiar de ventana. Se debe cerrar para permitir usar otras ventanas.

Define el tipo de borde la ventana a crearse.

Define si se presenta un titulo a la ventana y permite cambiar el tamaño de la ventana por el usuario

Page 5: Diseño de Interfaces

World Skills - SENA

Las valvulas, la tubería, el transmisor, el tanque se obtienen del icono wizards/símbolo factory .

Para cambiar el tamaño de la mayoría de los elementos, se deben seleccionar y dar clic en el icono denominado break cell de la barra de herramientas inferior del WindowMaker.

Algunas acciones son necesarias para el diseño de la GUI. Acciones como rotar un elemento, mandar al frente o atrás se encuentran en el menú desplegable que se obtiene sobre cualquier elemento al darse un clic sobre él con el otro botón del Mouse. Tal como se muestra en la figura.

Wizards..

Break CellMake Symbol

Page 6: Diseño de Interfaces

World Skills - SENA

El texto se adiciona de la barra de dibujo básico.

El texto se puede editar seleccionando substitute strings en el menú desplegable, al igual que cambiar el tipo de fuente y sus características como el tamaño y estilo. El menú desplegable se muestra en la figura siguiente.

El botón se agrega igualmente de la barra de herramientas de dibujo básico.

Agregue un botón. Cambie el texto de cada uno de ellos.

Luego seleccione el icono Space Vertical de la misma barra para obtener un espaciamiento proporcional entre los botones. Esto mismo se puede realizar de una manera horizontal con Space Horizontal

Texto

Botón

Page 7: Diseño de Interfaces

World Skills - SENA

Guarde su aplicación. Recuerde que en tiempo de edición, el estar gravando le puede ahorrar mucho tiempo y energía Cree una nueva ventana denominada Sintonia que se visualice como se muestra en la figura siguiente.

3. Directorio de Etiquetas. Tagname Dictionary. Los tags o variables del sistema son el alma de la programación en InTouch. En ellas se almacenan los datos o valores que son requeridos para el procesamiento. Como en todos los lenguajes de programación, Intouch tiene diferentes tipos de datos los cuales son usados según la aplicación misma. Por ejemplo, si usted requiere indicar que un motor simplemente se encuentra prendido o apagado requiere de una variable de tipo booleana que almacene true (1) cuando esta prendido y false (0) cuando este apagado. De igual forma, si requiere almacenar una variable que varia continuamente en el tiempo como la temperatura requiere crear una variable del tipo real o flotante para que pueda almacenar un rango de valores decimales. Por lo tanto es necesario conocer los tipos de variables básicos y relacionar el tipo con el requerimiento de su aplicación. A continuación se presenta los diferentes tipos básicos de datos o tags usados en el Intouch. Existen cuatro tipos básicos de tags:

Espaciamiento Vertical

Espaciamiento Horizontal

Page 8: Diseño de Interfaces

World Skills - SENA

1. Discretas (Discrete). Variables que toman el valor de 0 o menor para indicar falso (off) y toma el valor de 1 o mayor para indicar verdadero (On).

2. Enteras (Integer). Son variables que pueden tomar valores numéricos enteros con signo en el rango -2.147.483.648 hasta 2.147.483.647.

3. Reales (Real). Variables que toman valores decimales. Pueden almacenar valores entre -3.4e(38) hasta 3.4e(38).

4. Cadena. (Message). Variables tipo cadena que almacena hasta 127 caracteres.

Los tags en Intouch se dividen prácticamente en tres grupos: • Tags de memoria • Tags de I/O • Tags de uso especial

Tags de Memoria. Estas son las variables internas del programa. Usadas para realizar los cálculos y almacenar datos en la memoria. Tags I/O Son las variables usadas para leer datos de fuentes externas como PLC’s, computadores o redes de datos. Tanto los tags de memoria como los tags de I/O pueden definir entre los cuatro tipos de tags ya definidos. Tags Especiales. Se crean para ejecutar tareas un poco más complejas como es el manejo de históricos y alarmas. A continuación se explica la creación de algunos tags en el Intouch, la manera como se editan y la forma de borrar tags innecesarios. Se recomienda, para crear o modificar tags tener cerrado el windowsViewer. Crear Tags Vamos a crear un tag de memoria tipo discreto. En el windowmaker seleccione del menú el ítem special/tagname dictionary. Este desplegará la ventana de definición de tags. La figura muestra la configuración de la variable discreta denominada AutoMan.

Page 9: Diseño de Interfaces

World Skills - SENA

Los pasos para la creación del tag son: • Presione sobre el boton new. • Asignele un nombre al tag en el cuadro de texto Tagname. • Defina el tipo de tag en el boton type… Al presionar este boton la siguiente ventana es

mostrada

. • Presione save para que la variable sea almacenada en el tagname dictionary.

Los otros elementos de la ventan se explicarán con el desarrollo de la aplicación. El tagname dictionary es la base de datos de todas las variables que tenemos definidas más otras variables necesarias por el sistema. Si queremos ver el tagname dictionary seleccionamos el botón select de la ventana de definición de tags. Una ventana como la mostrada a continuación es visualizada.

Page 10: Diseño de Interfaces

World Skills - SENA

Ahora vamos a crear una variable tipo real. La figura muestra la declaración de la variable.

Edicion de un tag. La edición se realiza en la misma ventana de configuración de tags. Se debe abrir el tag dictionary y buscan entre la lista el tag a editar. Puede usar la opción filter para buscar la variable en el caso que sea una lista muy grande. Ya abierto la ventana de configuración simplemente cambia el parámetro y nuevamente lo guarda. Para este tipo de acción es recomendable tener cerrado el windowviewer. Borrar tags Solo se puede borrar tags que no estén siendo usados en ninguna parte de la aplicación. Asegurandose de esto, debe realizar una actualización de la base de datos que se desarrolla en el menú special/Update use counts … en el windowmaker. Las ventanas siguientes son mostradas en este procedimiento.

Page 11: Diseño de Interfaces

World Skills - SENA

Luego abra la ventana de configuración con la variable a ser borrada. Presione el botón con el nombre erase, este lanza una ventana de confirmación. Luego de esto el tag es borrado.

Cree las siguientes nuevas variables. Nombre de Variable Tipo de Variable Valor Min Valor Max PV Memory Real 0 100 MV Memory Real 0 100 KP Memory Real 0.01 1000 Ti Memory Real 0.1 1000 4. Animaciones

Las animaciones hacen que un objeto o símbolo que se encuentra dentro de una interfaz cambie de aspecto para reflejar los cambios en el valor de un tag o expresión.

Enlaces a Animaciones. Los enlaces a animaciones son usadas para la configuración de las animaciones. La figura siguiente muestra la ventana para la selección de los enlaces de animaciones.

Page 12: Diseño de Interfaces

World Skills - SENA

Intouch tiene dos tipos de enlace a animaciones. • Enlaces de contacto • Enlaces de Visualización.

Los Enlaces de Contacto (Touch Links). Son usadas para proporcionar entradas al sistema. Los enlaces de contacto se encuentran en la primera columna de la ventana de enlaces. Estas entradas normalmente son botones, barras desplazamiento y texto o valores numéricos. Las siguientes figuras muestran los elementos comunes que se usan para entrar datos.

Los enlaces de visualización. Permiten salida al operador. Los enlaces de visualización son; • Enlaces de Color. • Enlaces de Ubicación y tamaño • Enlace de relleno • Enlaces misceláneos • Enlaces para Visualización de valores numéricos

A continuación haremos algunos enlaces para darle vida al proceso ya diseñado. A. Poner Automatico o Manual el Controlador Seleccione de la ventana sintonía el botón denominado A/M y con el otro botón del mouse se abre la ventana desplegable de la cual se selecciona Animation Links… Seleccione de la sección Touch Pushbuttons la opción Discrete Value. Se abre la siguiente ventana. Asegurese que queda configurada de la forma como se muestra en la ventana.

Page 13: Diseño de Interfaces

World Skills - SENA

Presione OK. De esta forma se ha relacionado la variable denominada AutoMan con la acción del botón automatico manual de la ventana. Ahora se relacionan las otras variables con cada uno de los parámetros de la ventana sintonía. A continuación se muestra como se relaciona el parámetro SP. Seleccione de la ventana sintonía el símbolo ##.## que se encuentra junto al texto SP. Haga doble click sobre el símbolo y debe abrir la ventana para definir animaciones. De ella selecione el botón Analog de la sección User inputs. Asegurese que la ventana queda de la forma siguiente.

Realice lo mismo para los demás parámetros de la ventana con los tags anteriormente creadas. Finalmente seleccione la tendencia de la pantalla Sintonia y haga doble clic sobre ella. Se debe abrir la siguiente pantalla. Asegurese que queda definida de la forma siguiente:

Page 14: Diseño de Interfaces

World Skills - SENA

Ahora configure el piloto cuadrado que se encuentra justo al botón A/M. Selecciónelo y haga doble clic. Asegurese que queda configurado de la forma siguiente.

Finalmente se enlazan las ventanas. Para ello seleccione el botón denominado proceso de la ventana sintonía. Haga doble clic sobre ella y selecione Show Window y configure la ventana tal como se muestra a continuación.

Page 15: Diseño de Interfaces

World Skills - SENA

Repita el enlace anterior pero con el botón Sintonia de la ventana Procesos.

5. Correr la aplicación Finalmente grabe la aplicación y seleccione en la parte superior derecha de la ventana del windowmaker el botón que dice Runtime.

Se debe abrir la aplicación Windowviewer y pruebe los botones enlazados en las ventanas procesos y sintonía. Para volver a la edición del proyecto selecione el botón denominado Development en el windowviewer.