Interfaz grafica
Transcript of 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
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
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
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
5.1 Necesidad de los interfaces gráficos
• EJEMPLO. Nivel en el depósito de líquidos.
4
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
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 ");
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");
}
5
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
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
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
Ejemplo de interfaz gráfica en Windows
5.1 Necesidad de los interfaces gráficos (IV)
7
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
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
8
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
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
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
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
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
Resumen de Contenidos
1. Necesidad de los interfaces gráficos
2. Objetivos de un interfaz gráfico (GUI o 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
11
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
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
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
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
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
GENIE
5.3 Ejemplos de GUI (III)
14
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
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
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
Resumen de Contenidos
1. Necesidad de los interfaces gráficos
2. Objetivos de un interfaz gráfico (GUI o 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
16
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
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
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
• 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
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
• 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
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
• 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
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
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
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
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
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
Resumen de Contenidos
1. Necesidad de los interfaces gráficos
2. Objetivos de un interfaz gráfico (GUI o 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
23
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
Resumen de Contenidos
1. Necesidad de los interfaces gráficos
2. Objetivos de un interfaz gráfico (GUI o 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
24
Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Departamento de Sistemas Informáticos
Universidad de Castilla La Mancha
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.