Interfaz grafica

1

Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos

Universidad de Castilla La Mancha

Interfaz Gráfica de

Usuario (GUI)

Tema 5

2



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

3



5.1 Necesidad de los interfaces gráficos

• EJEMPLO. Nivel en el depósito de líquidos.

4



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 ");


}

5



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? -> %s\n",

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.1 Necesidad de los interfaces gráficos (III)

6



Ejemplo de interfaz gráfica en Windows

5.1 Necesidad de los interfaces gráficos (IV)

7





2. Objetivos de un interfaz gráfico (GUI ó Graphical User

Interface)

3. Ejemplos de GUI



6. Ejercicios

8



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.

Interfazoperador

Interfazproceso

ImagenProcesoSistema

Industrial

ProcesoSistema

Industrial

Actuadoresdigitales

Sensoresdigitales

5.2 Objetivos de un interfaz gráfico

9



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.

10





2. Objetivos de un interfaz gráfico (GUI o Graphical User

Interface)

3. Ejemplos de GUI



6. Ejercicios

11



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)

12



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.

13



GENIE

5.3 Ejemplos de GUI (III)

14



Simulación de un programa mediante iconos en Ptolemy

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

5.3 Ejemplos de GUI (IV)

15






Interface)

3. Ejemplos de GUI



6. Ejercicios

16



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).

17



• 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).

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

18



• 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.

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

19



• 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.

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

20



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.23Radio:45.3

Combinación de manipulación

directa y caja de diálogos

21



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

22






Interface)

3. Ejemplos de GUI



6. Ejercicios

23






Interface)

3. Ejemplos de GUI



6. Ejercicios

24



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.

Interfaz grafica

Education

Transcript of Interfaz grafica