Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Ejercicio 02
En este ejercicio vamos a tener nuestro propio lienzo de dibujo, podremos
dibujar líneas de colores, cambiar ...
Ejercicio 02

Ejercicio PASO A PASO.

www.chapoyeo.blogspot.com

http://tecnoloxias.webnode.es/

1. Abrimos APP INVENTOR
2...
Ejercicio 02

www.chapoyeo.blogspot.com

http://tecnoloxias.webnode.es/

5. Le ponemos nombre al proyecto, recordando que ...
http://tecnoloxias.webnode.es/

Ejercicio 02
c. Para comprobar que los botones están bien situados
dentro del Layout debem...
www.chapoyeo.blogspot.com

http://tecnoloxias.webnode.es/

Ejercicio 02

f. Como lo que queremos es que los botones aparez...
http://tecnoloxias.webnode.es/

Ejercicio 02

c. Con el Lienzo seleccionado iremos a la columna
Propierties y le cambiarem...
Ejercicio 02

www.chapoyeo.blogspot.com

http://tecnoloxias.webnode.es/

c. Este evento tiene tres atributos:
i. X= nos da...
Ejercicio 02

www.chapoyeo.blogspot.com

http://tecnoloxias.webnode.es/

f. Ya hemos conseguido dibujar un círculo allí do...
h. Repitiendo las mismas operaciones para el color azul y el rojo.
9. Mejorar la aplicación.
Vamos a añadir funcionalidad ...
Ejercicio 02

www.chapoyeo.blogspot.com

http://tecnoloxias.webnode.es/

c. Como ahora queremos hacer una foto con la cáma...
Ejercicio 02

www.chapoyeo.blogspot.com

http://tecnoloxias.webnode.es/

cargar con la foto que acabamos de realizar, por ...
Ejercicio 02

Ahora debemos programar el valor de los botones, clicamos sobre
BotonGrueso y seleccionamos When BotonGrueso...
Próxima SlideShare
Cargando en…5
×

App Inventor: Ejercicio 2

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

  • Sé el primero en comentar

App Inventor: Ejercicio 2

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

×