Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

Tema 5 Interfaz Grfica de Usuario (GUI)

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

Resumen de Contenidos
1. Necesidad de los interfaces grficos 2. Objetivos de un interfaz grfico (GUI Graphical User Interface) 3. Ejemplos de GUI 4. Diseo de una interfaz grfica de usuario 5. Entorno de Programacin Grfico de Visual C++ 2005 6. Ejercicios

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

5.1 Necesidad de los interfaces grficos

EJEMPLO. Nivel en el depsito de lquidos.

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

5.1 Necesidad de los interfaces grficos (II)

void informar(void) { rueda(); gotoxy(16,2); printf("%2.1f",LeeTemp()); gotoxy(16,3); printf("%2.1f",LeeNivel()); gotoxy(16,4); if (LeeAlarmaRebose() == ON) printf("ON "); else printf ("OFF"); gotoxy(16,5); if (LeeAlarmaTermo() == ON) printf("ON "); else printf ("OFF"); gotoxy(16,7); if (LeeMotor() == ON) printf("ON "); else printf ("OFF"); gotoxy(16,8); if (LeeTermo() == ON) printf("ON "); else printf ("OFF"); gotoxy(16,9); if (LeeValvula() == ON) printf("ON "); else printf ("OFF"); }
4

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

5.1 Necesidad de los interfaces grficos (III)

Ejemplo de interfaz grfica en Turbo C++ (MS-DOS)
static void inicio_graficos(void) { int gdriver, gmode, errorcode; gdriver = VGA; /* seleccionar el driver y el modo grafico */ gmode = VGAHI; /* en este caso, 640x480x16 colores */ initgraph(&gdriver,&gmode,""); errorcode = graphresult(); /* ver si se ha podido iniciar el modo grafico*/ if (errorcode != grOk) /* si ha habido un error */ { printf("Meln. Tienes ah el EGAVGA.BGI? -> %s\n", grapherrormsg(errorcode)); exit(1); /* terminar aplicacin devolviendo ERRORLEVEL 1 a DOS */ } } /************** fin_grficos *********/ /* cerrar el modo grafico */ static void fin_graficos(void) { closegraph(); } /* deposito */ line(250,100,250,300); line(250,300,400,300); line(400,300,400,100); line(390,139,400,139); outtextxy(350,130,"Nivel");

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

5.1 Necesidad de los interfaces grficos (IV)

Ejemplo de interfaz grfica en Windows

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

Resumen de Contenidos
1. Necesidad de los interfaces grficos 2. Objetivos de un interfaz grfico (GUI Graphical User Interface) 3. Ejemplos de GUI 4. Diseo de una interfaz grfica de usuario 5. Entorno de Programacin Grfico de Visual C++ 2005 6. Ejercicios

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

5.2 Objetivos de un interfaz grfico

El interfaz grfico (GUI o Graphical User Interface) de usuario es uno de los componentes ms importantes para el usuario, pues va a mostrar de forma intuitiva y precisa el estado de un proceso de produccin.

Interfaz operador

Imagen Proceso Sistema Industrial

Sensores digitales Interfaz proceso Actuadores digitales

Proceso Sistema Industrial

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

5.2 Objetivos de un interfaz grfico (II)

Debe permitir parametrizar el comportamiento del sistema informtico industrial. Debe permitir monitorizar el estado del proceso, proporcionando al usuario la informacin precisa de forma grfica.

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

Resumen de Contenidos
1. Necesidad de los interfaces grficos 2. Objetivos de un interfaz grfico (GUI o Graphical User Interface) 3. Ejemplos de GUI 4. Diseo de una interfaz grfica de usuario 5. Entorno de Programacin Grfico de Visual C++ 2005 6. Ejercicios

10

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

5.3 Ejemplos de GUI

Algunos interfaces Grficos de Usuario comerciales:
LabView de National Instruments (comercial)

Genie de Advantech (comercial)

Ptolemy de la universidad de Berkeley en California (dominio pblico)

11

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

5.3 Ejemplos de GUI (II)

LABVIEW
-Lenguaje de iconos. -Generador de aplicaciones para interfaz de usuario. -Se pueden visualizar muchos tipos de botones, aparatos de medida, ventanas de seales, etc.

12

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

5.3 Ejemplos de GUI (III)

GENIE

13

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

5.3 Ejemplos de GUI (IV)

Simulacin de un programa mediante iconos en Ptolemy

Se puede encontrar en http://ptolemy.eecs.berkeley.edu

14

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

Resumen de Contenidos
1. Necesidad de los interfaces grficos 2. Objetivos de un interfaz grfico (GUI o Graphical User Interface) 3. Ejemplos de GUI 4. Diseo de una interfaz grfica de usuario 5. Entorno de Programacin Grfico de Visual C++ 2005 6. Ejercicios

15

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

5.4 Diseo de una interfaz grfica de usuario

Debemos ser capaces de construir un interfaz grfico para el sistema que estemos desarrollando, representando mediante los elementos grficos disponibles de nuestro entorno los estados y las variables del proceso. Tambin se disearn los elementos grficos que nos permitan las diferentes acciones sobre el proceso. El interfaz puede estar orientado a la aplicacin (poco guiado, para expertos en el proceso) o al usuario (muy guiado, con pocos conocimientos del proceso se puede usar).
16

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

5.4 Diseo de una interfaz grfica de usuario (II)

El interfaz grfico del usuario o GUI ("Graphic Unit Interface") debe incluir todo el software responsable de representar la informacin para el usuario. El GUI debe ser un mdulo separado del resto de mdulos. Al ser el resto de mdulos y el GUI unidades separadas:
Deben especificarse, disearse, implementarse, verificarse, y comprobarse cada uno de estos mdulos independientemente. Deben mantenerse y ampliarse cada uno independientemente del otro. Pueden reutilizarse en otros sistemas. Deben poder intercambiarse (p.e. un GUI por otro, cuando haya nuevos avances de la tecnologa).

17

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

5.4 Diseo de una interfaz grfica de usuario (III)

El diseo de metodologas para la construccin de interfaces de usuario es un importante campo de estudio:
Adaptacin al tipo de usuario (conocimientos del tema, habilidades informticas, entorno de trabajo, etc). Configurable por el usuario. Facilidad de manejo. Intuitivo. Abierto.

Se han realizado estudios sobre la construccin de modelos de GUI, donde se especula sobre lo que pasa por la cabeza del usuario cuando utiliza un programa.
Deberamos crear interfaces que ayudasen a los usuarios a crear modelos de cmo trabaja el programa internamente.

Por tanto, el interfaz de usuario a desarrollar debiera ser intuitivo y preciso.

18

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

5.4 Diseo de una interfaz grfica de usuario (IV)

Para la creacin de los objetos grficos debemos elegir entre la manipulacin de los objetos mediante: cajas de dilogos o manipulacin directa.

19

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

5.4 Diseo de una interfaz grfica de usuario (V)

A menudo es preferible la manipulacin directa porque es ms rpida y ms intuitiva. En cambio, en algunos programas se requiere la precisin que ofrece el utilizar una caja de dilogos. Lo ideal sera combinar ambos sistemas a voluntad del usuario.

Centro: 25.23 Radio:45.3

Combinacin de manipulacin directa y caja de dilogos

20

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

5.4. Diseo de un interfaz de usuario (VI)

Cada plataforma suele seguir el mismo estilo Casi todas las aplicaciones de plataformas Windows siguen ciertas normas para los visualizacin de los mens La informacin sobre los convenios y estilos de cada plataforma la proporciona el propio fabricante

21

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

Resumen de Contenidos
1. Necesidad de los interfaces grficos 2. Objetivos de un interfaz grfico (GUI o Graphical User Interface) 3. Ejemplos de GUI 4. Diseo de una interfaz grfica de usuario 5. Entorno de Programacin Grfico de Visual C++ 2005 6. Ejercicios

22

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

Resumen de Contenidos
1. Necesidad de los interfaces grficos 2. Objetivos de un interfaz grfico (GUI o Graphical User Interface) 3. Ejemplos de GUI 4. Diseo de una interfaz grfica de usuario 5. Entorno de Programacin Grfico de Visual C++ 2005 6. Ejercicios

23

Departamento de Sistemas Informticos Universidad de Castilla La Mancha

Escuela de Ingenieros Industriales de Albacete- Informtica Industrial 2008-09

6. Ejercicios propuestos
1. Realizar el proceso de embotellado de vinos con una interfaz utilizando las propiedades y mtodos de Visual C++. Llenar botellas dependiendo del tipo de vino, rosado, tinto y blanco. 2. Realizar un programa con el entorno Visual C++ que controle un sistema de 140 bocas de riego en una finca de 1400 hectreas en total, donde 400 Htas son de Cebada, 200 de Girasoles, 300 de viedo, 100 de patatas, 200 de trigo, 100 de cebollas y 100 de ajos. Activar el riego en la poca del ao que corresponda, controlando la hora del da en que se riega y el estado metereolgico. 3. Con el entorno Visual C++ realizar una aplicacin que controle un sistema de alarmas cuando se active un detector de proximidad para un edificio. 4. Utilizando el entorno Visual C++, disear un sistema ambiental en un vivero. Controlar la temperatura del ambiente y si no est entre 18 C y 24C, activar la calefaccin o activar el sistema de fro respectivamente.

24