Ejercicio paso a paso de App Inventor, con el se pretende programar una apliación Android que permite dibujar sobre una imagen

1. Ejercicio 02
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.
1. Utilizar los componentes “Canvas” y “Horizontal arrangement”.
2. Controlar los eventos relacionados con las pantallas táctiles.
3. Trabajar con variables.
www.chapoyeo.blogspot.com
http://tecnoloxias.webnode.es/
Como objetivos del ejercicio tenemos:
Gabino González Vega
Página 1

2. Ejercicio 02
Ejercicio PASO A PASO.
www.chapoyeo.blogspot.com
http://tecnoloxias.webnode.es/
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
Gabino González Vega
Página 2

3. Ejercicio 02
www.chapoyeo.blogspot.com
http://tecnoloxias.webnode.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:
Gabino González Vega
Página 3

4. http://tecnoloxias.webnode.es/
Ejercicio 02
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
www.chapoyeo.blogspot.com
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.
Gabino González Vega
Página 4

5. www.chapoyeo.blogspot.com
http://tecnoloxias.webnode.es/
Ejercicio 02
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.
Gabino González Vega
Página 5

6. http://tecnoloxias.webnode.es/
Ejercicio 02
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.
www.chapoyeo.blogspot.com
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.
Gabino González Vega
Página 6

7. Ejercicio 02
www.chapoyeo.blogspot.com
http://tecnoloxias.webnode.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
Gabino González Vega
Página 7

8. Ejercicio 02
www.chapoyeo.blogspot.com
http://tecnoloxias.webnode.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á:
Gabino González Vega
Página 8

9. 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:
www.chapoyeo.blogspot.com
http://tecnoloxias.webnode.es/
Ejercicio 02
Gabino González Vega
Página 9

10. Ejercicio 02
www.chapoyeo.blogspot.com
http://tecnoloxias.webnode.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
Gabino González Vega
Página 10

11. Ejercicio 02
www.chapoyeo.blogspot.com
http://tecnoloxias.webnode.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
Gabino González Vega
Página 11

12. Ejercicio 02
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.
www.chapoyeo.blogspot.com
http://tecnoloxias.webnode.es/
programado. Ahora clicamos sobre la parte más clara de Get y
seleccionamos global grosor. Debe quedar de la siguiente manera:
Gabino González Vega
Página 12