Interfaz grafica

Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09
Universidad de Castilla La Mancha

Tema 5

Interfaz Gráfica de
Usuario (GUI)

1


Resumen de Contenidos

1. Necesidad de los interfaces gráficos
2. Objetivos de un interfaz gráfico (GUI ó Graphical User
Interface)
3. Ejemplos de GUI
4. Diseño de una interfaz gráfica de usuario
5. Entorno de Programación Gráfico de Visual C++ 2005
6. Ejercicios

2


5.1 Necesidad de los interfaces gráficos
• EJEMPLO. Nivel en el depósito de líquidos.

3


5.1 Necesidad de los interfaces gráficos (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 ");
gotoxy(16,7);
if (LeeMotor() == ON)
printf("ON ");
gotoxy(16,8);
if (LeeTermo() == ON) printf("ON ");
gotoxy(16,9);
if (LeeValvula() == ON) printf("ON ");
}
4


5.1 Necesidad de los interfaces gráficos (III)
Ejemplo de interfaz gráfica 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("Melón. ¨Tienes ahí el EGAVGA.BGI? -> %sn",
grapherrormsg(errorcode));
exit(1); /* terminar aplicación devolviendo
ERRORLEVEL 1 a DOS */
}
} /************** fin_gráficos *********/
/* 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");

5


5.1 Necesidad de los interfaces gráficos (IV)

Ejemplo de interfaz gráfica en Windows

6



2. Objetivos de un interfaz gráfico (GUI ó Graphical User
Interface)
3. Ejemplos de GUI
6. Ejercicios

7


5.2 Objetivos de un interfaz gráfico
El interfaz gráfico (GUI o Graphical User Interface) de usuario es uno
de los componentes más importantes para el usuario, pues va a mostrar
de forma intuitiva y precisa el estado de un proceso de producción.

Sensores
Imagen digitales Proceso
Proceso Interfaz Sistema
Interfaz
Sistema proceso Industrial
operador
Industrial Actuadores
digitales

8


5.2 Objetivos de un interfaz gráfico (II)

• Debe permitir parametrizar el comportamiento del sistema
informático industrial.

• Debe permitir monitorizar el estado del proceso, proporcionando al
usuario la información precisa de forma gráfica.

9



2. Objetivos de un interfaz gráfico (GUI o Graphical User
Interface)
3. Ejemplos de GUI
6. Ejercicios

10


5.3 Ejemplos de GUI

Algunos interfaces Gráficos de Usuario comerciales:

– LabView de National Instruments (comercial)

– Genie de Advantech (comercial)

– Ptolemy de la universidad de Berkeley en California (dominio público)

11


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
señales, etc.

12


5.3 Ejemplos de GUI (III)
GENIE

13


5.3 Ejemplos de GUI (IV)
Simulación de un programa mediante iconos en Ptolemy

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

14



Interface)
3. Ejemplos de GUI
6. Ejercicios

15


5.4 Diseño de una interfaz gráfica de usuario
• Debemos ser capaces de construir un interfaz gráfico para el sistema
que estemos desarrollando, representando mediante los elementos
gráficos disponibles de nuestro entorno los estados y las variables del
proceso.
• También se diseñarán los
elementos gráficos que nos
permitan las diferentes acciones
sobre el proceso.

• El interfaz puede estar
orientado a la aplicación (poco
guiado, para expertos en el
proceso) o al usuario (muy
guiado, con pocos conocimientos
del proceso se puede usar).

16


5.4 Diseño de una interfaz gráfica de usuario (II)

• El interfaz gráfico del usuario o GUI ("Graphic Unit Interface") debe
incluir todo el software responsable de representar la información
para el usuario.

• El GUI debe ser un módulo separado del resto de módulos.

• Al ser el resto de módulos y el GUI unidades separadas:
– Deben especificarse, diseñarse, implementarse, verificarse, y
comprobarse cada uno de estos módulos 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 tecnología).

17


5.4 Diseño de una interfaz gráfica de usuario (III)
• El diseño de metodologías para la construcción de interfaces de usuario es
un importante campo de estudio:
– Adaptación al tipo de usuario (conocimientos del tema, habilidades informáticas,
entorno de trabajo, etc).
– Configurable por el usuario.
– Facilidad de manejo.
– Intuitivo.
– Abierto.

• Se han realizado estudios sobre la construcción de modelos de GUI, donde
se especula sobre lo que pasa por la cabeza del usuario cuando utiliza un
programa.
– Deberíamos crear interfaces que ayudasen a los usuarios a crear modelos de
cómo trabaja el programa internamente.

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

18


5.4 Diseño de una interfaz gráfica de usuario (IV)
• Para la creación de los objetos gráficos debemos elegir entre la
manipulación de los objetos mediante:
cajas de diálogos o manipulación directa.

19


5.4 Diseño de una interfaz gráfica de usuario (V)

• A menudo es preferible la manipulación directa porque es más
rápida y más intuitiva. En cambio, en algunos programas se
requiere la precisión que ofrece el utilizar una caja de diálogos.

• Lo ideal sería combinar ambos sistemas a voluntad del usuario.

Centro: 25.23
Radio:45.3

Combinación de manipulación
directa y caja de diálogos

20


5.4. Diseño 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 visualización de los menús

• La información sobre los convenios y estilos de cada plataforma
la proporciona el propio fabricante

21



Interface)
3. Ejemplos de GUI
6. Ejercicios

22



Interface)
3. Ejemplos de GUI
6. Ejercicios

23


6. Ejercicios propuestos
1. Realizar el proceso de embotellado de vinos con una interfaz utilizando las
propiedades y métodos 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 hectáreas en total, donde 400 Htas son de
Cebada, 200 de Girasoles, 300 de viñedo, 100 de patatas, 200 de trigo, 100 de
cebollas y 100 de ajos. Activar el riego en la época del año que corresponda,
controlando la hora del día en que se riega y el estado metereológico.

3. Con el entorno Visual C++ realizar una aplicación que controle un sistema de
alarmas cuando se active un detector de proximidad para un edificio.

4. Utilizando el entorno Visual C++, diseñar un sistema ambiental en un vivero.
Controlar la temperatura del ambiente y si no está entre 18 ºC y 24ºC, activar la
calefacción o activar el sistema de frío respectivamente.

24

Interfaz grafica

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (18)

Similaire à Interfaz grafica

Similaire à Interfaz grafica (20)

Dernier

Dernier (20)

Interfaz grafica