Ejercicio 02

G a b i n o G o n z á l e z V e g a

Página 1

ww

w.c

hap

oye

o.b

logs

po

t.co

m

htt

p:/

/te

cno

loxi

as.w

eb

no

de

.es/

En este ejercicio vamos a tener nuestro propio lienzo de dibujo, podremos

dibujar líneas de colores, cambiar los grosores de las líneas e incluso hacer fotografías

para dibujar sobre ellas.

Como objetivos del ejercicio tenemos:

1. Utilizar los componentes “Canvas” y “Horizontal arrangement”.

2. Controlar los eventos relacionados con las pantallas táctiles.

3. Trabajar con variables.

Ejercicio 02

G a b i n o G o n z á l e z V e g a

Página 2

ww

w.c

hap

oye

o.b

logs

po

t.co

m

htt

p:/

/te

cno

loxi

as.w

eb

no

de

.es/

Ejercicio PASO A PASO. 1. Abrimos APP INVENTOR

2. En la página de la aplicación clicamos sobre el botón

3. Accedemos con nuestra cuenta de gmail

4. App Inventor arranca con la última aplicación en la que estuvimos trabajando,

para iniciar un nuevo proyecto debemos ir a Projects Start new project

Ejercicio 02

G a b i n o G o n z á l e z V e g a

Página 3

ww

w.c

hap

oye

o.b

logs

po

t.co

m

htt

p:/

/te

cno

loxi

as.w

eb

no

de

.es/

5. Le ponemos nombre al proyecto, recordando que APP INVENTOR no permite ni

espacios ni caracteres especiales.

6. Botones de Color

a. Lo primero que vamos a colocar son tres

botones que nos permitirán escoger el color

con el que vamos a dibujar. Esto botones

estarán en la parte superior y uno al lado del

otro, para que esto sea posible necesitamos un

Layout, estos son los que nos permiten agrupar

elementos en horizontal

(HorizontalArrangement), vertical

(VerticalArrangement) o en forma de tabla

(TableArrangement).

Para ello iremos en la columna Palette a la

sección Layout y arrastraremos un HorizontalArrangement hasta el

Viewer

b. Una vez situado el HorizontalArrangement

debemos introducir en él un botón, si recordamos

el botón lo podemos encontrar en User Interface

Repetimos dos veces más la operación hasta

tener dentro del organizador horizontal tres

botones.

La apariencia de los tres botones dentro del

Layout sería:

Ejercicio 02

G a b i n o G o n z á l e z V e g a

Página 4

ww

w.c

hap

oye

o.b

logs

po

t.co

m

htt

p:/

/te

cno

loxi

as.w

eb

no

de

.es/

c. Para comprobar que los botones están bien situados

dentro del Layout debemos ir a la columna

Components, en ella aparecerá el componente Screen1

(es la pantalla de trabajo), debajo y un poco hacia la

derecha el componente HorizontalArrangement1 y

dentro de él los tres botones, tal y como muestra la

figura.

d. Debemos cambiar el nombre de los botones para

poderlos diferenciar en el código, para ello,

seleccionamos el botón en la columna Components y

clicando sobre el botón Rename les cambiamos uno a

uno el nombre de los botones por BotonRojo,

BotonVerde, BotonAzul

e. Hay que cambiar la apariencia del botón, para ello,

seleccionando botón a botón vamos a cambiar en la

columna Properties las propiedades de color de fondo

(BackgroundColor), negrita (FontBold), tamaño de

fuente (FontSize), forma (Shape), texto (Text) y color

de texto (TextColor) para que cada botón haga

referencia al color que tiene asignado.

Ejercicio 02

G a b i n o G o n z á l e z V e g a

Página 5

ww

w.c

hap

oye

o.b

logs

po

t.co

m

htt

p:/

/te

cno

loxi

as.w

eb

no

de

.es/

f. Como lo que queremos es que los botones aparezcan en

la parte superior y centrados en pantalla debemos ir a las

propiedades del HorizontalArrangement1, para ello es

necesario seleccionarlo en la columna Components y

luego en la columna Propierties cambiar los valores de

Width (ancho) a Fill parent… y de Align Horizontal

(alineación horizontal) a Center, tal y como muestra la

figura.

g. El resultado final debe parecerse a:

7. Crear el lienzo.

a. El elemento Canvas que encontraremos en

Palette Drawing and Animation es el que

nos permitirá dibujar sobre las imágenes.

Lo seleccionamos y los arrastramos hacia la

columna Viewer.

b. En la columna Components le cambiamos el

nombre por Lienzo, para ello repetiremos la

misma operación que con los botones.

Ejercicio 02

G a b i n o G o n z á l e z V e g a

Página 6

ww

w.c

hap

oye

o.b

logs

po

t.co

m

htt

p:/

/te

cno

loxi

as.w

eb

no

de

.es/

c. Con el Lienzo seleccionado iremos a la columna

Propierties y le cambiaremos sus propiedades de tal

manera que el ancho sea el de la pantalla (Width a

Fill Parent…), el alto se lo vamos a dar de 300

pixeles (Height a 300) y lo cargaremos con una

imagen, para ello cambiaremos la propiedad

Backgroundimage y subiremos una imagen.

8. Programar.

Con los elementos que tenemos en pantalla estamos listos para

poder dibujar sobre la imagen y cambiar el color de las líneas.

a. Encima de la columna Propierties nos aparece el botón

Blocks, clicamos sobre él y nos aparecerá la pantalla de

programación.

b. Lo primero que vamos a programar es que se dibuje un punto en la

imagen justo donde posamos el dedo, para ello clicamos sobre el

elemento Lienzo y buscamos when lienzo.Touched do, este es el

evento que marca cuando tocamos el lienzo.

Ejercicio 02

G a b i n o G o n z á l e z V e g a

Página 7

ww

w.c

hap

oye

o.b

logs

po

t.co

m

htt

p:/

/te

cno

loxi

as.w

eb

no

de

.es/

c. Este evento tiene tres atributos:

i. X= nos da la posición X donde posamos el dedo.

ii. Y= nos da la posición Y donde posamos el dedo.

iii. toucheSprite (lo veremos en próximo ejercicios)

d. Lo que pretendemos es dibujar en ese punto un círculo, para ello

volvemos a clicar sobre Lienzo y buscamos la rutina Call

Lienzo.DrawCircle y la colocamos dentro del evento. Esta rutina. nos

pide las coordenadas del centro del círculo (X e Y) y el radio

Para el centro (coordenadas X

e Y) vamos a seleccionar la X e

Y del evento, debemos clicar

sobre la X y tomar la

propiedad get X (toma el valor

de X) y la colocamos en la X

del DrawCircle, repetimos

operación para la Y, al final

nos quedará

e. El valor del radio r, es un

número que tomamos de la

columna Blocks, en la sección

Built-in, clicamos sobre Math

y seleccionamos la primera

opción, esta la arrastramos

hasta el atributo r de

drawCircle y cambiamos el

valor 0 por el valor 5

Ejercicio 02

G a b i n o G o n z á l e z V e g a

Página 8

ww

w.c

hap

oye

o.b

logs

po

t.co

m

htt

p:/

/te

cno

loxi

as.w

eb

no

de

.es/

f. Ya hemos conseguido dibujar un círculo allí donde clicamos, pero si lo

que queremos en dibujar una línea por donde pasamos el dedo

debemos ir al Lienzo y allí buscar la opción When Lienzo.Dragged

Esta opción tiene varios atributos:

startX e startY, nos dan la coordenada X e Y del lugar donde

iniciamos el arrastre

en el cado de prevX y prevY la coordenada que nos devuelve es

la del punto justamente anterior al actual

por el contrario currentX y currentY nos dan el punto actual

Como lo que queremos dibujar es una línea debemos buscar en Lienzo

el procedimiento Call Lienzo.DrawLine, este nos pide 4 atributos que

son las dos coordenadas del primer punto y las dos del último. A x2 e y2

debemos asignarle las coordenadas actuales del dedo (currentX y

currentY) dependiendo de los valores que asignemos a x1 e y1 el

resultado varía:

Si asignamos startX e startY nos dibujara una línea recta perfecta

con inicio en el punto en que apoyamos el dedo y fin el punto

donde lo levantamos.

Si asignamos prevX e prevY dibuja una línea que sigue

perfectamente la trayectoria del dedo sobre la pantalla.

g. Nos queda por programar los botones de color, para ello debemos ir a

BotonVerde y seleccionar When BotonVerde.click, como lo que

queremos cambiar es el color de la línea sobre el lienzo, debemos clicar

sobre Lienzo y buscar Set Lienzo.PaintColor to, para cargar el color

debemos clicar en la columna de la izquierda Built-In sobre Colors y allí

seleccionar el color verde. El resultado será:

Ejercicio 02

G a b i n o G o n z á l e z V e g a

Página 9

ww

w.c

hap

oye

o.b

logs

po

t.co

m

htt

p:/

/te

cno

loxi

as.w

eb

no

de

.es/

h. Repitiendo las mismas operaciones para el color azul y el rojo.

9. Mejorar la aplicación.

Vamos a añadir funcionalidad a la aplicación para conseguir variar el ancho de

la línea de dibujo, poder borrar todo e incluso poder trabajar sobre una foto

que hagamos nosotros.

a. Clicamos sobre el botón Designer situado en la

parte superior derecha de la pantalla.

b. Ahora añadiremos debajo del lienzo un HorizontalArrangement y

dentro colocar 4 botones que llamaremos BotonFoto, BotonBorrar,

BotonGrueso y BotonFino. El resultado final debe ser parecido al de la

figura:

Ejercicio 02

G a b i n o G o n z á l e z V e g a

Página 10

ww

w.c

hap

oye

o.b

logs

po

t.co

m

htt

p:/

/te

cno

loxi

as.w

eb

no

de

.es/

c. Como ahora queremos hacer una foto con la cámara del

teléfono debemos añadir el componente Camera que se

encuentra en la columna Palette, en la sección Media

d. El objeto Camera se incluye como elemento no visible, al

terminar de incluir todos los elementos la apariencia de la

pantalla debe ser similar a la que sigue:

e. Ahora debemos programar la acción de cada botón, para

ello debemos clicar sobre el botón Blocks

f. BotonFoto:

Con este botón pretendemos poder tomar una foto y cargarla en la

aplicación como foto sobre la que dibujar. Para ello lo primero es hacer

la foto, así que debemos ir en la columna Blocks, clicar sobre BotonFoto

y seleccionar When BotonFoto.click, dentro debemos indicarle que

queremos hacer una foto para ello debemos ir a Camera1 y buscar el

procedimiento Call Camera1.TakePicture.

Hasta aquí está el código necesario para hacer una foto, ahora debemos

indicarle a la aplicación que la cargue como imagen de trabajo, para ello

debemos clicar sobre Camera1 y buscar When Camera1.AfterPicture y

dentro debemos colocar Set Lienzo.BackgroundImage to, que nos

permite cambiar la imagen de fondo de Lienzo, imagen que debemos

Ejercicio 02

G a b i n o G o n z á l e z V e g a

Página 11

ww

w.c

hap

oye

o.b

logs

po

t.co

m

htt

p:/

/te

cno

loxi

as.w

eb

no

de

.es/

cargar con la foto que acabamos de realizar, por lo que debemos cargar

la variable Image del procedimiento AfterPicture.

g. BotonBorrar.

Con este botón pretendemos borrar todas las

líneas dibujadas sobre el lienzo, así que, clicamos

sobre BotonBorrar, buscamos When

BotonBorrar.Click.

Dentro debemos colocar Call Lienzo.Clear que encontraremos al clicar

sobre Lienzo.

h. BotonGrueso y BotonFino.

Con estos botones

pretendemos cambiar el

ancho de la línea, por un

ancho más grueso o por un

ancho más fino, es decir, el

ancho de línea será variable,

por lo que lo tendremos que

definir como una variable.

Para ello, en la columna

Blocks buscamos al sección

Variables, clicamos y

buscamos la opción

Initialize global name to, clicamos sobre name y cambiamos el nombre

de la variable por Grosor. Solo queda cargar la variable con un valor,

para ello vamos a Math e incluimos el valor sobre la variable.

Ahora vemos cambiar el valor de r por la variable, para ello eliminamos

el valor dado (3) y clicamos en Variables seleccionando Get, lo

colocamos sobre el atributo r de When Lienzo.Touched que ya estaba

Ejercicio 02

G a b i n o G o n z á l e z V e g a

Página 12

ww

w.c

hap

oye

o.b

logs

po

t.co

m

htt

p:/

/te

cno

loxi

as.w

eb

no

de

.es/

programado. Ahora clicamos sobre la parte más clara de Get y

seleccionamos global grosor. Debe quedar de la siguiente manera:

Ahora debemos programar el valor de los botones, clicamos sobre

BotonGrueso y seleccionamos When BotonGrueso.click, ahora clicamos

sobre Variables y tomamos Set …. to, en la parte más clara clicamos y

seleccionamos global grosor, sólo queda darle el valor matemático de

10. Ahora debemos indicar que ha variado el grosor de la línea, para ello

clicamos sobre Lienzo, buscamos Set Lienzo.LineWidth to, clicamos

sobre Variables y seleccionamos get, en la parte más clara clicamos y

seleccionamos global grosor.

Repetimos las operaciones para el BotonFino, cambiando el valor 10

por 3. Al final debe quedarnos como en la imagen.