Tema 03 - Interfaz Con El Usuario

Interfaz con el Usuario
TEMA 3
Índice
1 Objetivos
2 Conceptos básicos sobre GUI
3 Ejemplos de Sistemas Gráficos de Usuario
4 Ejemplos de Interfaces de Usuario
5 Diseño de un Interfaz de Usuario
6 Entorno de Programación Gráfico de Builder C++
7 Actividades
8 Bibliografía
INFORMÁTICA Interfaz gráfica de usuario (GUI) 2

INDUSTRIAL
1 - Objetivos

INDUSTRIAL
1 - Objetivos
• Lograr una interfaz de usuario gráfica intuitiva y precisa

INDUSTRIAL
1 - Objetivos
• Productos que integran una interfaz gráfica de usuario

INDUSTRIAL
2 – Conceptos básicos sobre GUI

INDUSTRIAL
• Tarjeta gráfica: Tarjeta dotada de una circuiteria electrónica capaz de

visualizar en el monitor información de tipo texto y de tipo gráfico
• Pixel: Picture element (elemento del dibujo)

• Resolución: Cantidad de pixels representables en la pantalla. A mayor
resolución mayor calidad gráfica.

INDUSTRIAL
• Modo Texto: Visualiza 80 caracteres en horizontal x 25

líneas
• Modo Gráfico: Visualiza Pixels, 640x480, 1024x768,
1152x864,..
X

INDUSTRIAL
• Paleta de colores: Conjunto de matices de colores visualizables

en la pantalla (2, 16, 256, 32.000 ó 16 millones)
RGB
Las impresoras y artes gráficas emplean otros patrones como

CMYK: Cyan, Magenta, Yellow, Black

INDUSTRIAL
• Memoria de vídeo: cantidad de memoria necesaria para soportar

un modo gráfico.
ejemplo:
Una imagen de 640 x 480 píxeles con 24 bits de color:
640 x 480 x 24 = 7.372.800 bits

7.372.800 / 8 = 921.600 bytes
921.600 / 1.024 = 900 kilobytes = 900 kb
• Una pantalla de baja resolución ocupa casi un Megabyte de
información.

INDUSTRIAL
Historia
CGA
Resolución (horizontal x vertical) Colores
320x200 4
640x200 2 (monocromo)
EGA
320x200 16
640x200 16
640x350 16

INDUSTRIAL
Historia
VGA
640x480 256
Modo de vídeo Máxima resolución y máximo número de colores
SVGA 800x600 y 256 colores
XGA 1024x768 y 65.536 colores
IBM 8514/A 1024x768 y 256 colores (no admite 800x600)

INDUSTRIAL
• Actualmente resoluciones
Ejercicio: Calcular la
– HD, FHD, QHD, 4K
memoria para cada
• Tecnologías resolución para 24 bits
– LCD, TFT, TN, IPS, PLS, OLED, AMOLED
• Aspect Ratio
– 4:3 (1024x768), 16:10 (1280x800), 16:9 (1920x1080)
4K o UHD
QHD, Quad HD
FHD, Full HD
HD

INDUSTRIAL
3 - Ejemplos de Sistemas Gráficos de Usuario

INDUSTRIAL
Algunos interfaces Gráficos de Usuario:
– LabView (LV) de National Instruments (comercial)
– Genie de Advantech (comercial)
– Ptolemy de la universidad de Berkeley en California (dominio público)

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

INDUSTRIAL
GENIE

INDUSTRIAL
Simulación de un programa mediante iconos en Ptolemy
Dirección de web:
http://ptolemy.eecs.berkeley.edu

INDUSTRIAL
4 - Ejemplos de Interfaces de Usuario

INDUSTRIAL
Interfaz No gráfica de usuario
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 "); else
printf ("OFF");
gotoxy(16,9);
if (LeeValvula() == ON) printf("ON "); else
printf ("OFF");
}
INDUSTRIAL
Interfaz gráfica de usuario: Proyecto del depósito
• Debemos ser capaces de construir un interfaz gráfico para nuestro

proyecto, representando mediante los elementos gráficos disponibles
de nuestro entorno, esquemas, bitmaps, graficos, etc:
– los estados, las variables del proceso.
– Elementos gráficos que nos permitan las diferentes acciones sobre el
proceso: botones, menús

INDUSTRIAL
5- Diseño de un interfaz de usuario
• Características
• Recomendaciones
• Manipulación de objetos
• Plataformas
• Ejemplo en TC++

INDUSTRIAL
5- Diseño de un interfaz de usuario:
Características
• El interfaz gráfico del usuario o GUI ("Graphic Unit Interface") incluye

todo el software responsable de representar la información para el
usuario, debe proporcionar al usuario la información precisa del
programa de forma gráfica
• 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
comprobar 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)

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

INDUSTRIAL
Recomendaciones
• Primero decidimos si queremos un interfaz 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)
• Para resolver el diseño con una interfaz orientada a la

aplicación, deben analizarse los módulos del proceso con los
que el usuario tiene que interactuar
• En el diseño de la interfaz de usuario se deben representar los

módulos relevantes para el usuario, y habilitar la interacción
requerida entre dichos módulos

INDUSTRIAL
Lista de comprobación para una buena interfaz
• Fácil instalación de la aplicación

• Al instalar no se obliga a reiniciar el sistema
• Los usuarios no tienen que leer un archivo “Léame” antes de usar la
aplicación
• Los archivos generados por el usuario se guardan de manera
predeterminada en la carpeta “Mis documentos”
• No se crean carpetas fuera de la carpeta “Archivos de Programa” ni archivos
en el directorio raíz
• No se instalan iconos en el escritorio de Windows sin permiso del usuario
• La aplicación es accesible mediante el teclado
• La aplicación funciona correctamente si el usuario aumenta el tamaño de la
fuente predeterminada
• Existe un proceso de desistalación que no deja archivos en el disco ni
entradas en el registro de Windows

INDUSTRIAL
Manipulación de objetos
• 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.

INDUSTRIAL
Manipulación de objetos
• La manipulación directa es preferible a menudo porque es más rápida

y más intuitiva. En cambio, en algunos programas se requiere la
precisión que ofrece 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

INDUSTRIAL
Plataformas
• Cada plataforma tiene su propio conjunto de convenios

– Casi todas las aplicaciones de plataformas Windows siguen
ciertas normas para observar los menús
– La API ("Application Programming Interface") de Windows es quien
se ocupa de las cajas de diálogos, para proporcionarlas al usuario
desde cualquier punto
• La información sobre los convenios de cada plataforma la proporciona

el propio fabricante:
– “Diseño de interfaz de usuario para aplicaciones Windows”.
Ed. McGraw Hill-Microsoft. ISBN: 84-481-2768-4
– "The Microsoft Visual Design Guide" incluida en el Visual Basic
3.0, es una guía escrita para Windows 3.x
– "Books Online" de Microsoft", en el Visual Basic 5.0
• Sección 1 de la parte 2, "Creando un interfaz de usuario"

INDUSTRIAL
Ejemplo de diseño en Turbo C (MsDOS)
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");

INDUSTRIAL
6- Entorno de programación gráfico
de Builder C++
- Control Shape
- Control Image
- Control Canvas

INDUSTRIAL
6- Entorno de programación gráfico de Builder C++:
El Control Shape
– El control se encuentra en la paleta Aditional de los componentes
– Podemos realizar figuras básicas (Shape): Cuadrados, rectángulos

(con esquinas redondeadas o no), círculos y elipses.
– La entidad gráfica (Shape), que se dibuja depende del valor

asignado cuando se diseña la ficha, pero también se puede
modificar en tiempo de ejecución las dimensiones, el color, el tipo
de relleno y el borde.

INDUSTRIAL
El Control Shape
– La posición y dimensiones del objeto (Shape) se consiguen mediante las
propiedades Left y Top que determinan la posición de la esquina
superior izquierda.
– Width y Height, son las magnitudes que hay que sumar a Left y Top
para determinar la esquina opuesta (la inferior derecha) del objeto.
(Left,Top) (Left+Width,Top)
– Ejemplo:
(Left,Top+Height) (Left+Width,Top+Height)
/*Dibuja un cuadrado con los vértices redondeados*/

Shape1 -> Shape = stRoundSquare;
/*Posición inicial en la ficha, (coordenada 0,0 es esquina superior
izquierda)*/
Shape1 -> Top = 40;
/*Altura del objeto en pixels*/
Shape1 -> Height = 80;

INDUSTRIAL
El Control Shape

INDUSTRIAL
El Control Shape

INDUSTRIAL
El Control Shape

INDUSTRIAL
Propiedad “Top” del objeto “Shape”
• La medida es en pixels (72 ó 40)

INDUSTRIAL
Propiedad “Height” del objeto “Shape”
• La medida es en pixels (65 ó 90)

INDUSTRIAL
El Control Shape: Propiedades “Color”, “Pen” y “Brush”
– El color se asigna con la propiedad Color, que puede ser cualquiera de la
paleta de colores, o bien cualquier otro dado por la propiedad
(Tcolor)RGB(i,j,k); con 0 i, j, k  255.
– El color de los objetos (Shape) se le asigna bien sea, al contorno o de

dibujo mediante la pluma (propiedad Pen), o bien al relleno del objeto
mediante la propiedad Brush.
– Otra propiedad de la pluma (Pen) nos permite dibujar con más o menos
anchura, es el estilo (Style) que puede ser: psSolid (línea continua),
psDash (guiones), psDot (puntos), psDashDot (punto+guión),
psDashDotDot (línea+punto+guión), psClear (sin línea) , psInsideFrame
(línea contínua, si ancho>1 puede usar diferente color).
– Ejemplos:
Form1 -> Shape1 -> Pen -> Color = clLime; /*Color lima*/
Form1 -> Shape1 -> Pen -> Color = (TColor)RGB(0,0,255);
Form1 -> Shape1 -> Brush -> Color = clRed;
Form1 -> Shape1 -> Pen -> Style = psSolid; /*Trazo continuo*/
INDUSTRIAL
El Control Shape: Propiedad “Pen” y “Color”

INDUSTRIAL
El Control Shape
–La propiedad Mode de Pen, indica la combinación entre el color y el pincel

con el fondo.
–Existen diferentes valores: pmBlack (siempre negro), pmWhite (siempre

blanco), pmNop (sin cambios), pmNot (Inversa del color del fondo de canvas),
pmCopy (Color del Pen especificado en la propiedad Color), pmNotCopy (Inversa
del color del Pen), pmMergePenNot (Combinación del color del pen y la inversa del
fondo de canvas), pmMaskPenNot (Combinación de colores comunes al pen and la
inversa del fondo de canvas), pmMergeNotPen (Combinación de fondo de canvas y
la inversa del color de pen), pmMaskNotPen (Combinación de colors común al
fondo de canvas y la inversa de pen), pmMerge (Combinación del color de pen y el
color del fondo de canvas), pmNotMerge (Inversa de pmMerge), pmMask
(Combinación de colores común a pen y al fondo de canvas), pmNotMask (Inversa
de pmMask), pmXor (Combinación de colores en cualquiera, pen o fondo de canvas,
pero no en ambos), pmNotXor (Inversa de pmXor).

INDUSTRIAL
El Control Shape
–La propiedad Width de Pen, indica el ancho del pincel en pixels.
–Otra propiedad de la brocha Brush, que muestra el tipo de superficie relleno, puede
ser de alguno de los siguientes: bsSolid (relleno sólido), bsClear (sin relleno),
bsHorizontal (líneas horizontales), bsVertical (líneas verticales), bsFDiagonal (diagonal),
bsBDiagonal (diagonal), bsCross (cuadrícula), bsDiagCross (cuadrícula diagonal).
Ejemplos:
/*dibuja el color real de la pluma especificado por la propiedad Color*/
Shape1 -> Pen -> Mode = pmCopy;
Shape1 -> Brush -> Style = bsCross; /*dibuja un relleno con trama cruzada*/
Shape1 -> Pen -> Width = 8; /*establece el grueso del pincel*/

INDUSTRIAL
El Control Shape: Propiedad “Brush” y “Color”

INDUSTRIAL
El Control Shape: Propiedad “Brush” y “Style”

INDUSTRIAL
Actividades
Actividad:
Dibujar una elipse de posición y tamaño como los que se indican:
90,130 120 (ancho)
60 (alto)
Haciendo uso de C++ Builder, insertando código en un programa:
• Modificar el tamaño y la posición de la elipse.

• Probar varias opciones de color para el contorno (Pen).
• Idem. para el relleno (Brush).
• Probar varias opciones de estilo de línea de contorno y relleno.
• Verificar el funcionamiento de la propiedad Mode con sus opciones.
• Modificar el grosor de la línea de contorno dándole varios valores y
comparando la diferencia.

INDUSTRIAL
El Control Image

INDUSTRIAL
El Control Image
–Es la forma más sencilla de dibujar un objeto (o insertar una foto). Para
ello se utiliza el icono de la izquierda del que está al lado de Shape, en
la paleta Aditional de los componentes

INDUSTRIAL
El Control Image
– La propiedad Picture de este control, es un objeto Tpicture, que

permite utilizarse para cargar una imagen.
– Para ello debemos de hacer un doble “click” sobre el objeto que

hemos incorporado sobre la ficha, al seleccionar nuestro fichero de
dibujo con la extensión “.bmp” aparece sobre la misma el dibujo o
la foto que hayamos diseñado desde nuestro editor gráfico.
– Si la imagen está en un formato distinto al soportado por este

control, deberemos convertirlo mediante un editor gráfico que lo
soporte (Corel Draw, Adobe Photoshop, ...).

INDUSTRIAL
El Control Image
Doble “Click”

INDUSTRIAL
El Control Image

INDUSTRIAL
El Control Image
– Con AutoSize la imagen toma el tamaño del control que

hayamos definido
(a false) (a true)
– Con Stretch el control toma el tamaño de la imagen
(a false) (a true)

INDUSTRIAL
El Control Image
– La propiedad Center hace que la imagen se sitúe en el centro del

control que hemos dibujado en nuestra ficha.
(a false) (a true)
– Ejemplos:
Form1 -> Image1 -> AutoSize = true;

Form1 -> Image1 -> Stretch = true;
Form1 -> Image1 -> Center = true;

INDUSTRIAL
El Control Image
Actividad:
Haciendo uso de C++ y de las herramientas que sean necesarias

(editor gráfico), para crear una imagen que se corresponda a una
cubeta con un aspecto similar al mostrado:
Nota: Generar un fichero con extensión “.bmp”

INDUSTRIAL
La superficie de dibujo de la Form:
El Canvas

INDUSTRIAL
El Canvas
– Las fichas de trabajo, poseen una superficie de dibujo denominadas

Canvas. En ella es posible dibujar en tiempo de ejecución.
– La superficie de dibujo está representada por un objeto del tipo

TCanvas que apunta a la propiedad Canvas del componente.
– Si se quiere pintar por toda la ficha no es necesario incluir un control

del tipo Image, se utiliza directamente la propiedad Canvas de la
ficha.
– Las propiedades del tipo TCanvas determinan alguna de las

características de los elementos de dibujo como la pluma, la brocha
o el tipo de letra: Por ejemplo, Brush, determina el color del canvas
empleado para rellenar formas gráficas y fondos.
– Tutorial: http://www.yevol.com/bcb/Lesson12.htm

INDUSTRIAL
El Canvas
– Actividad: A la cubeta realizada anteriormente, añadir una línea que indique

el nivel máximo
/* Coloca la pluma para dibujar en la posición indicada 5 pixels a la derecha de la

Imagen1 */
Canvas->MoveTo(Imagen1->Left+Imagen1->Width+5, Imagen1->Top);
/* Dibuja una línea desde el origen anterior, y de longitud 95 pixels más a la derecha */
Canvas->LineTo(Imagen1->Left+Imagen1->Width+100,Imagen1->Top);

INDUSTRIAL
El Canvas
Nota: Deberemos crear un evento para poder dibujar estas líneas. Por ejemplo,
en el “clik” de un botón.
Al pulsar el
botón aparece
la línea de nivel

INDUSTRIAL
El Canvas
Podemos utilizar los siguientes métodos para dibujar:
– Ellipse: Dibuja una elipse.

– void __fastcall Ellipse(int X1, int Y1, int X2, int Y2);
– FillRect: Rellena el rectángulo especificado con el canvas utilizando brush
activo.
void __fastcall FillRect(const Windows::TRect &Rect);
– FloodFill: Rellena un área de canvas utilizando brush activo.
void __fastcall FloodFill(int X, int Y, TColor Color, TFillStyle
FillStyle);
– FrameRect: Dibuja un rectánglo utilizando brush de canvas para dibujar el
borde.
void __fastcall FrameRect(const Windows::TRect &Rect);
– LineTo: Dibuja una línea desde la posición actual hasta (X,Y).
void __fastcall LineTo(int X, int Y);

INDUSTRIAL
El Canvas
– Arc: Dibuja un arco.

void __fastcall Arc(int X1, int Y1, int X2, int Y2, int X3, int Y3,
int X4, int Y4);
– BrushCopy: Copia una porción de un bitmap en un rectángulo en canvas
sustituyendo uno de los colores del bitmap con el de brush de canvas.
void __fastcall BrushCopy(const Windows::TRect &Dest, TBitmap*
Bitmap, const Windows::TRect &Source, TColor Color);
– Chord: Dibuja una figura cerrada representada por la intersección de una
línea y una elipse.
void __fastcall Chord(int X1, int Y1, int X2, int Y2, int X3, int
Y3, int X4, int Y4);
– CopyRect : Copia parte de una imagen desde otro canvas.
void __fastcall CopyRect(const Windows::TRect &Dest, TCanvas*
Canvas, const Windows::TRect &Source);
– Draw: Parte el gráfico especificado en la posición indicada por las
coordenadas (X, Y).
void __fastcall Draw(int X, int Y, TGraphic* Graphic);
– DrawFocusRect: Dibuja un rectángulo usando el estilo para indicar que el
objeto interior tiene un foco.
void __fastcall DrawFocusRect(const Windows::TRect &Rect);

INDUSTRIAL
El Canvas
– MoveTo: Cambia la posición para dibujar a (X,Y).

void __fastcall MoveTo(int X, int Y);
– Pie: Dibuja una “porción de tarta”.

void __fastcall Pie(int X1, int Y1, int X2, int Y2, int X3, int
Y3, int X4, int Y4);
– Polygon: Dibuja un polígono.
void __fastcall Polygon(const POINT *Points, const int
Points_Size);
– Polyline: Dibuja una polilínea.
void __fastcall Polyline(const POINT *Points, const int
Points_Size);
– Rectangle: Dibuja un rectángulo.

void __fastcall Rectangle(int X1, int Y1, int X2, int Y2);
– Refresh: Deselecciona el Pen, Brush, y Font.

void __fastcall Refresh(void);

INDUSTRIAL
El Canvas
– RoundRect: Dibuja un rectángulo con las esquinas redondeadas.

void __fastcall RoundRect(int X1, int Y1, int X2, int Y2, int X3,
int Y3);
– StretchDraw: Dibuja el gráfico especificado en el parámetro en el

rectángulo especificado en “Rect”.
void __fastcall StretchDraw(const Windows::TRect &Rect, TGraphic*
Graphic);
– Tcanvas: Crea una nueva instancia de TCanvas.

__fastcall TCanvas(void);

INDUSTRIAL
El Canvas
– TextOut: Escribe un string en canvas, comenzando en (X,Y).

void __fastcall TextOut(int X, int Y, const System::AnsiString
Text);
– TextRect: Escribe texto dentro de un rectángulo

void __fastcall TextRect(const Windows::TRect &Rect, int X, int
Y, const System::AnsiString Text);
– TextWidth: Devuelve el ancho, en pixels, del string especificado utilizando

el tipo de letra actual.
int __fastcall TextWidth(const System::AnsiString Text);
– TextHeight: Devuelve la altura, en pixels, del string especificado

utilizando el tipo de letra actual.
int __fastcall TextHeight(const System::AnsiString Text);

INDUSTRIAL
Actividades
Actividad:
En el C++ Builder, acceder a la ayuda de TCanvas y hacer un repaso de
los distintos métodos y demás opciones disponibles.
Actividad:
Añadiendo un botón para cada apartado y uso de TCanvas, dibujar:
• En la coordenada (150,70) el mensaje “Hola Mundo”. usar fuente Arial de

18 puntos.
• Dibujar un rectángulo de 160 pixels de altura, 200 pixels de ancho y con

esquina superior izquierda en (300,200). Verificar opción de relleno.
• Haciendo uso de la ayuda del C++ Builder intentar dibujar un arco en las
coordenadas que se quieran.
Solución

INDUSTRIAL
Objetos: CheckBox y RadioButton

INDUSTRIAL
Entorno de programación gráfico de Builder C++:
CheckBox
• Permite al usuario activar o desactivar una cierta opción sin

necesidad de escribir nada, bastará con que realice una pulsación
sobre el control:

INDUSTRIAL
CheckBox
if (Form1->CheckBox1->Checked==true) . . .

INDUSTRIAL
CheckBox
• Actividad:
Haciendo uso de un Edit y de un CheckBox, realizar la

programación para que al activar el CheckBox se ponga la letra
con un tamaño de 12 puntos. Si no está activado deberá estar a
un tamaño de 8 puntos

INDUSTRIAL
RadioButton
• El aspecto de este control es circular, y sólo uno de los controles que

insertemos en la ficha podrá estar activo.

INDUSTRIAL
RadioButton
if (Form1->RadioButton1->Checked==true) . . .
else if (Form1->RadioButton2->Checked==true) . . .
else . . .
INDUSTRIAL
RadioButton
• Actividad:
Haciendo uso de un Edit y de 3 RadioButton como se muestra

en la diapositiva anterior, realizar la programación para que al
activar el RadioButton correspondiente se ponga la letra del Edit
a un tamaño de 12, 10, ó 8 puntos respectivamente.

INDUSTRIAL
Objetos: GroupBox y RadioGroup

INDUSTRIAL
GroupBox
• Permite actuar como padre de otros controles agrupándolos. Se

puede utilizar para agrupar cualquier conjunto de controles sin
importar su tipo.
• Los controles se deberán insertar dentro del GroupBox.

INDUSTRIAL
GroupBox

INDUSTRIAL
GroupBox
• Actividad:
Haciendo uso de un Edit y de un GroupBox con 3 CheckBox,

realizar la programación para que al activar el CheckBox
correspondiente se ponga la letra del Edit con las opciones
siguientes:
- CheckBox1: Tipo de fuente: Arial.

- CheckBox2: Tamaño de 12 puntos.
- CheckBox3: Color Rojo.

INDUSTRIAL
RadioGroup
• Facilita el tratamiento de grupos de botones de radio

(RadioButton). Dispone de funciones adicionales a las del
control anterior, ya que con una sola propiedad se puede
conocer cuál está seleccionado.
• Mediante la propiedad Items podemos incluir los botones que
necesitemos.

INDUSTRIAL
RadioGroup

INDUSTRIAL
RadioGroup

INDUSTRIAL
RadioGroup
• Actividad:
Haciendo uso de un Edit y de un RadioGroup con 3 elementos

(Items), realizar la programación para que al activar el elemento
siguientes:
- Item 1: 12 puntos.

INDUSTRIAL
Objetos: MainMenu y PopupMenu

INDUSTRIAL
MainMenu
• Permite crear un menú como una barra de opciones en la parte

superior de la ficha.
• Primero insertaremos el componente MainMenu y luego con la
propiedad Items diseñaremos los elementos y sub-elementos.
• Al teclear el nombre deberemos añadir el prefijo “&” para que se
pueda acceder a la opción con la combinación de teclas
‘Alt’+Inicial_correspondiente.

INDUSTRIAL
MainMenu

INDUSTRIAL
MainMenu
• Actividad:
Haciendo uso de un Edit y de un MainMenu con 3 elementos

(Items), realizar la programación para que al activar el elemento
siguientes:
- Tipo de letra: Arial, Roman, Courier

- Tamaño de letra: 12, 14 ó 18 puntos
- Color de letra: Rojo, Azul, Verde
Añadir opciones de acceso rápido mediante el teclado.

INDUSTRIAL
PopupMenu
• Permite la creación de menús contextuales o emergentes que

aparecen al pulsar el botón derecho del ratón.
• Se deberá asociar a un determinado componente (ejemplo al
formulario) mediante la activación de la propiedad PopupMenu.
• Los distintos elementos se insertan con la propiedad Items.

INDUSTRIAL
PopupMenu

INDUSTRIAL
PopupMenu

INDUSTRIAL
PopupMenu
Al pulsar el botón derecho

del ratón

INDUSTRIAL
PopupMenu
• Actividad:
Realizar un menú contextual asociado al formulario para

cambiar el color del mismo. Las opciones que tendrá
disponibles serán: Rojo, Verde, Amarillo, Azul
Se deberán incluir opciones de acceso rápido por teclado.

INDUSTRIAL
Objeto: ScrollBar

INDUSTRIAL
ScrollBar
• Permite crear barras de desplazamiento que se moverán entre

un valor mínimo y otro máximo.
• El icono para la creación es:

INDUSTRIAL
ScrollBar

INDUSTRIAL
ScrollBar
(Left,Top) (Left+Width,Top)
• Actividad:
Mediante un objeto ScrollBar

controlar la altura de un Shape (Left,Top+Height) (Left+Width,Top+Height)
tal y como se muestra en las
figuras:

INDUSTRIAL
7- Actividades

INDUSTRIAL
7- Actividades
Actividades
Se trata de utilizar las propiedades y métodos de Builder C++, para

realizar un dibujo como el de la figura, con los siguientes elementos:
– Una cuba ON/OFF

– Una tubería
– Una válvula (ON-OFF) (Image)
– el líquido de color azul (Shape) Máx.
– el nivel inferior y superior (LineTo)
– las etiquetas Min y Max (TextOut)
En una segunda fase, añadir un botón de forma

que al apretar simule el llenado y otro para el vaciado. Min.
Ejemplo:
Llenar

INDUSTRIAL
7- Actividades
Actividades
Se trata de utilizar las propiedades y métodos de Builder C++, para

realizar un dibujo como el de la figura, con los siguientes elementos:
– Una cuba ON/OFF

– Una tubería
– Una válvula (ON-OFF) (Image)
– el líquido de color azul (Shape) Máx.
– el nivel inferior y superior (LineTo)
– las etiquetas Min y Max (TextOut)
En una segunda fase, añadir un botón de forma

que al apretar simule el llenado y otro para el vaciado. Min.
Llenar

INDUSTRIAL
7- Actividades: solución
void __fastcall TForm1::BonClick(TObject *Sender)
{
Form1 -> Label1 -> Color = clGreen;
Form1 -> Label1 -> Caption = "ON";
Shape2 -> Visible = true;
Shape4 -> Visible = false;
Canvas-> MoveTo(Objeto1-> Left + Objeto1 -> Width +5, Objeto1 -> Top);
Canvas-> LineTo(Objeto1-> Left + Objeto1 -> Width +10, Objeto1 -> Top);
Canvas-> MoveTo(Image1-> Left + Image1 -> Width +5, Image1 -> Top);
Canvas-> LineTo(Image1-> Left + Image1 -> Width +10, Image1 -> Top);
Canvas-> TextOut(Image1-> Left + Image1 -> Width +25, Image1 -> Top-5, "Maxímo");
Canvas-> TextOut(Objeto1-> Left + Objeto1 -> Width +25, Objeto1 -> Top-5,
"Mínimo");
Objeto1-> Height= - altura;
Forma2-> Height= 32;
Forma2-> Top= 240-altura;
}
//---------------------------------------------------------------------------
void __fastcall TForm1::BoffClick(TObject *Sender)
{
Form1 -> Label1 -> Color = clRed;
Form1 -> Label1 -> Caption = "OFF";
}

INDUSTRIAL
7- Actividades
Actividad para el seminario:
Cada grupo de trabajo debe proceder a la realización del

Diseño de los objetos gráficos necesarios para el
miniproyecto.

INDUSTRIAL
Solución
Actividad:
Añadiendo un botón para cada apartado y uso de TCanvas, dibujar:
• En la coordenada (150,70) el mensaje “Hola Mundo”, usar fuente Arial de
18 puntos
Canvas->Font->Name="Arial";
Canvas->Font->Size = 18;
Canvas->TextOut (150,70,"Hola Mundo");
• Dibujar un rectángulo de 160 pixels de altura, 200 pixels de ancho y con
esquina superior izquierda en (300,200). Verificar opción de relleno.
Canvas->Rectangle(300,200,500,360);
Canvas->Brush->Color = clRed;
Canvas->FloodFill(400,300,clWhite,fsSurface);
Haciendo uso de la ayuda del C++ Builder intentar dibujar un arco en las
coordenadas que se quieran.
Canvas->Arc (10,20,100,200, 50,60, 5,50);

INDUSTRIAL
8. Bibliografía
– Diseño de interfaz de usuario para aplicaciones Windows. Ed.

McGraw Hill-Microsoft. ISBN 84-481-2768-4.
– "The Microsoft Visual Design Guide“. Books Online de
Microsoft.
– “C++ Builder 3” Francisco Charte Ojeda. Ed. Anaya, 1998.
• Webs:
http://ptolemy.eecs.berkeley.edu
http://www.labview.com

INDUSTRIAL

Tema 03 - Interfaz Con El Usuario

Cargado por

Copyright:

Formatos disponibles

Tema 03 - Interfaz Con El Usuario

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tema 03 - Interfaz Con El Usuario

Cargado por

Copyright:

Formatos disponibles

Interfaz con el Usuario

INFORMÁTICA Interfaz gráfica de usuario (GUI) 2

INFORMÁTICA Interfaz gráfica de usuario (GUI) 3

• Lograr una interfaz de usuario gráfica intuitiva y precisa

INFORMÁTICA Interfaz gráfica de usuario (GUI) 4

• Productos que integran una interfaz gráfica de usuario

INFORMÁTICA Interfaz gráfica de usuario (GUI) 5

INFORMÁTICA Interfaz gráfica de usuario (GUI) 6

• Tarjeta gráfica: Tarjeta dotada de una circuiteria electrónica capaz de

• Pixel: Picture element (elemento del dibujo)

INFORMÁTICA Interfaz gráfica de usuario (GUI) 7

• Modo Texto: Visualiza 80 caracteres en horizontal x 25

INFORMÁTICA Interfaz gráfica de usuario (GUI) 8

• Paleta de colores: Conjunto de matices de colores visualizables

Las impresoras y artes gráficas emplean otros patrones como

INFORMÁTICA Interfaz gráfica de usuario (GUI) 9

• Memoria de vídeo: cantidad de memoria necesaria para soportar

640 x 480 x 24 = 7.372.800 bits

INFORMÁTICA Interfaz gráfica de usuario (GUI) 10

INFORMÁTICA Interfaz gráfica de usuario (GUI) 11

Modo de vídeo Máxima resolución y máximo número de colores

SVGA 800x600 y 256 colores

XGA 1024x768 y 65.536 colores

IBM 8514/A 1024x768 y 256 colores (no admite 800x600)

INFORMÁTICA Interfaz gráfica de usuario (GUI) 12

INFORMÁTICA Interfaz gráfica de usuario (GUI) 13

INFORMÁTICA Interfaz gráfica de usuario (GUI) 14

Algunos interfaces Gráficos de Usuario:

– LabView (LV) de National Instruments (comercial)

– Genie de Advantech (comercial)

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

INFORMÁTICA Interfaz gráfica de usuario (GUI) 15

INFORMÁTICA Interfaz gráfica de usuario (GUI) 16

INFORMÁTICA Interfaz gráfica de usuario (GUI) 17

Simulación de un programa mediante iconos en Ptolemy

INFORMÁTICA Interfaz gráfica de usuario (GUI) 18

INFORMÁTICA Interfaz gráfica de usuario (GUI) 19

• Debemos ser capaces de construir un interfaz gráfico para nuestro

INFORMÁTICA Interfaz gráfica de usuario (GUI) 21

INFORMÁTICA Interfaz gráfica de usuario (GUI) 22

• El interfaz gráfico del usuario o GUI ("Graphic Unit Interface") incluye

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

INFORMÁTICA Interfaz gráfica de usuario (GUI) 23

• Se han realizado estudios sobre la construcción de modelos de

• Deberíamos crear interfaces que ayudasen a los usuarios a

• Por tanto, el interfaz de usuario a desarrollar debiera ser

INFORMÁTICA Interfaz gráfica de usuario (GUI) 24

• Primero decidimos si queremos un interfaz orientado a la

• Para resolver el diseño con una interfaz orientada a la

• En el diseño de la interfaz de usuario se deben representar los

INFORMÁTICA Interfaz gráfica de usuario (GUI) 25

• Fácil instalación de la aplicación

INFORMÁTICA Interfaz gráfica de usuario (GUI) 26

• Para la creación de los objetos gráficos debemos

INFORMÁTICA Interfaz gráfica de usuario (GUI) 27

• La manipulación directa es preferible a menudo porque es más rápida

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

INFORMÁTICA Interfaz gráfica de usuario (GUI) 28

/Dibuja un cuadrado con los vértices redondeados/