Interfaz grafica

5,712 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
5,712
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
79
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Interfaz grafica

  1. 1. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09Universidad de Castilla La Mancha Tema 5 Interfaz Gráfica de Usuario (GUI) 1
  2. 2. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La ManchaResumen 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
  3. 3. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La Mancha5.1 Necesidad de los interfaces gráficos• EJEMPLO. Nivel en el depósito de líquidos. 3
  4. 4. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La Mancha5.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"); } 4
  5. 5. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La Mancha 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
  6. 6. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La Mancha5.1 Necesidad de los interfaces gráficos (IV)Ejemplo de interfaz gráfica en Windows 6
  7. 7. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La ManchaResumen 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 7
  8. 8. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La Mancha5.2 Objetivos de un interfaz gráfico El interfaz gráfico (GUI o Graphical User Interface) de usuario es unode los componentes más importantes para el usuario, pues va a mostrarde 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
  9. 9. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La Mancha5.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
  10. 10. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La ManchaResumen 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 10
  11. 11. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La Mancha5.3 Ejemplos de GUIAlgunos 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
  12. 12. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 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. 12
  13. 13. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La Mancha5.3 Ejemplos de GUI (III) GENIE 13
  14. 14. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La Mancha5.3 Ejemplos de GUI (IV) Simulación de un programa mediante iconos en Ptolemy Se puede encontrar en http://ptolemy.eecs.berkeley.edu 14
  15. 15. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La ManchaResumen 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 15
  16. 16. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La Mancha5.4 Diseño de una interfaz gráfica de usuario• Debemos ser capaces de construir un interfaz gráfico para el sistemaque estemos desarrollando, representando mediante los elementosgráficos disponibles de nuestro entorno los estados y las variables delproceso.• También se diseñarán loselementos gráficos que nospermitan las diferentes accionessobre el proceso.• El interfaz puede estarorientado a la aplicación (pocoguiado, para expertos en elproceso) o al usuario (muyguiado, con pocos conocimientosdel proceso se puede usar). 16
  17. 17. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La Mancha5.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
  18. 18. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La Mancha5.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
  19. 19. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La Mancha5.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
  20. 20. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La Mancha5.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
  21. 21. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La Mancha5.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
  22. 22. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La ManchaResumen 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 22
  23. 23. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La ManchaResumen 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
  24. 24. Departamento de Sistemas Informáticos Escuela de Ingenieros Industriales de Albacete- Informática Industrial 2008-09 Universidad de Castilla La Mancha6. 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

×