Tutoriales‎ > ‎

BoteDePintura

En este tutorial se presenta el componente Canvas (Lienzo), útil para la creación de sencillos gráficos de dos dimensiones. Vas a construir una aplicación que te permite dibujar en la pantalla del teléfono en diferentes colores.

Nota histórica: PaintPot fue uno de los primeros programas desarrollados para demostrar el potencial de los ordenadores personales, ya en la década de 1970.

Lo que estás construyendo

Captura de pantalla de aplicación final bote de pintura.

Con la aplicación BoteDePintura, puedes:

  • Sumergir el dedo en un bote de pintura virtual para dibujar en ese color.

  • Arrastrar el dedo por la pantalla para dibujar una línea.

  • Tocar la pantalla para hacer puntos.

  • Usar el botón en la parte inferior para limpiar la pantalla.

  • Incluir una imagen como fondo del dibujo.

Este tutorial asume que has completado el tutorial HolaRonronea Introduce los conceptos siguientes de la aplicación Inventor:
  • El componente canvas para el dibujo.

  • El Designer para la disposición de los componentes.

  • Los controladores de eventos, que toman argumentos.

  • Variables


Antes de comenzar

Asegúrate que tu ordenador y teléfono se han configurado correctamente para utilizar App Inventor, y de navegar por el sitio web de App Inventor en http://beta.appinventor.mit.edu/ Inicia un nuevo proyecto en el Designery asígnale el nombre de BoteDePintura Abre el Blocks Editor y haz clic en connect to phone (Conectar con teléfono). Asegúrate de que en el teléfono se ha iniciado la aplicación App Inventor.

Título de la pantalla

Para empezar, acude a properties (Propiedades), en el panel de la derecha del designer (diseñador) y cambia el título de la pantalla a BoteDePintura. Verás este cambio en el teléfono, con el nuevo título que se muestra en la barra de título.

Hay tres nombres en App Inventor que se pueden confundir:
  1. El nombre que elijas para el proyecto, a medida que se trabaja en él. Este será también el nombre de la aplicación del paquete para el teléfono.
  2. El nombre de "Screen1", que verá en el panel que muestra los componentes de la aplicación. No se puede cambiar este nombre en la versión actual de App Inventor.
  3. El título de la pantalla, que es lo que verás en la barra de título del teléfono. Esto empieza siendo "Screen1", que es lo que has utilizado en HolaRonronea. Pero se puede cambiar, pues ya lo has hecho en BoteDePintura.

Configuración de los componentes

Vamos a usar estos componentes para hacer BoteDePintura:

  • Tres botones para la selección de pintura roja, azul o verde, y otro botón para limpiar el dibujo.
  • Un canvas (lienzo), la superficie de dibujo. Esta tela tiene un una imagen de fondo (BackgroundImage, que es el gatito del tutorial HolaRonroneaTambién puedes dibujar en un canvas en blanco. Eso es sólo un canvas sin una imagen de fondo.
  • También hay un componente que no se ve: se utiliza un  HorizontalArrangement  (alineamiento horizontalpara las tres líneas de botones de arriba.

Eso hace cinco componentes en total. Vamos a desarrollar y compilar la aplicación.

Botones de colores

  • Arrastra un componente Button al visor (Viewer) y cambia el atributo texto (text) del botón, que verás como Button1, a "Rojo" y modifica su color de fondo (BackgroundColor) a rojo.
  • Haz clic en Button1 en components o en el viewer para resaltarlo (puede que ya se halle resaltado) y pulsa sobre el botón Rename, situado en la parte inferior de la sección components para cambiar su nombre de Button1 BotonRojo .
  • Del mismo modo, hacer dos botones más para el azul y el verde, con el nombre BotonAzul BotonVerde , que quedarán colocándolos verticalmente respecto al botón rojo.
Así se vera en el diseñador, con los nombres de los botones que aparecen en la lista de los componentes del proyecto. En este proyecto estamos cambiando los nombres de los componentes, en lugar de dejarlos con los nombres por defecto, como lo hicimos en HolaRonroneaEl uso de nombres significativos hace tus proyectos más legibles para a ti mismo y para los demás.


Si lanzas el editor de bloques y conectas el teléfono o el emulador, también verás los botones en la pantalla de los mismos.

Diseño con alineamiento de pantalla

Ahora debes tener tres botones, uno encima del otro. El siguiente paso es hacer que se alineen horizontalmente. Para ello, utiliza un componente HorizontalArrangement.

  1. Desde el panel Palette arrastra un HorizontalArrangement y colócalo debajo de los botones. Cambia el nombre de este componente de HorizontalArrangement1 TresBotones.
  2. En el panel Properties  cambia el ancho (Width) de  TresBotones  de forma que ocupe todo el ancho de la pantalla (a Fill Parent).
  3. Mueve los tres botones al interior del HorizontalArrangement  TresBotones . Sugerencia: Verás una línea azul vertical cuando estes colocando en un elemento de alineamiento, que nos indica donde caerá el botón.

Si nos fijamos en la lista de los componentes del proyecto, podrá ver los tres botones debajo de  TresBotones  con sangríalo que nos indica que son ahora sus subcomponentes. Tenga en cuenta que todos los componentes se insertan debajo de BoteDePintura.


También puedes ver la línea de tres botones en una fila en la pantalla del teléfono, aunque las cosas podrían no ser exactamente igual que en el Designer Por ejemplo, la línea periférica del horizontalArrangement se muestra en el Designer, pero no en el teléfono.

En general, se utiliza alineamiento de pantalla para crear sencillos diseños verticales u horizontales. Puedes crear diseños más complejos por la anidación de estos componentes. También hay un componente TableArrangement (que no se incluye en este tutorial).

Lienzo y botón de borrar

Los dos últimos componentes son el Canvas y el botón de borrar.

  1. Desde Palette  arrastra un Canvas al ViewerCambia su nombre por el Lienzo Establece su ancho (Width) fill parent. Establece su altura (Height) a 300 píxeles.
  2. Agregar una imagen de fondo al LienzoHaz clic en el campo que contiene None ... junto a BackgroundImage en las Properties de LienzoPuedes utilizar el archivo kitty.png que usaste en el tutorial de Nuestra primera aplicación, si todavía lo tienes almacenado. O puedes utilizar otra imagen.
    Puede utilizar cualquier imagen que quieras, pero obtendrá los mejores resultados si el tamaño de la imagen (en píxeles) está cerca del tamaño en el que se le de muestra en el teléfono. Además, las imágenes grandes se tardan mucho en cargar, y podría superar la capacidad de memoria que los teléfonos asignan para las aplicaciones.
  3. Desde Palette, arrastra otro Button a la pantalla, colocándolo bajo el LienzoCambia su nombre a BotonBorra pulsando el botón Rename situado bajo ComponentsCambia su atributo text situado en Properties a Borrar .

Has completado los pasos para configurar el aspecto de la aplicación. He aquí cómo verás el Designer A continuación, vamos a definir el comportamiento de los componentes.


Añadir comportamientos a los componentes

Si no has abierto ya el editor de bloques, hazlo ahora pulsando sobre el boton Open the Blocks Editor. En primer lugar vamos a configurar los botones que cambian el color de la pintura.

Agregar controladores de eventos de botón

En el Blocks editor:

  1. Cambia a la columna My Blocks.
  2. Abrir el cajón de BotonRojo y arrastra el bloque  BotonRojo.Click al área de trabajo.

  3. Abre el cajón LienzoArrastra el bloque set Lienzo.PaintColor to  (puede que tengas que desplazarte por la lista de bloques en el cajón para encontrarlo) y colócalo encajado a  BotonRojo.Click . Cambia a la columna Built-inAbre el cajón Colors y arrastra el bloque del color Red y ponlo en el  set Lienzo.PaintColor to que llevaste antes al área de trabajo.

    Un modo más rápido de seleccionar el bloque Red, una vez has colocado set Lienzo.PaintColor to, todavía en  My Blocks pulsas en una zona vacía del área de trabajo, y verás que te apareces los mismos cajones que te aparecerían al pulsar Built-in. Seleccionas Colors y en la lista que aparece seleccionas Red.

  4. Repita los pasos 1-3 para los botones de color azul y verde. Fíjate que, para tu comodidad, puedes tomar el bloque set Lienzo.PaintColor to, tal como se indica en el paso 3, o bien puedes copiarlo desde el área de trabajo, seleccionando con el ratón el que pusiste antes y pulsando (en Windows) las teclas Ctrl+c (Ctrl y c a la vez, que es copiar) y, posteriormente Ctrl+v (que es pegar). Lo copias 2 veces y encajas en los bloques  BotonAzul.Click y BotonVerde.Click 

    También puedes copiar y pegar los bloques Lienzo.PaintColor to Red ya unidos y encajarlos, ya que posteriormente puedes modificar el color del bloque Red. Si situas el ratón sobre el mismo verás que aparece un indicador de lista desplegable que, si lo pulsas, te permite cambiar el color del bloque a azul y a verde, según tus necesidades.

  5. El botón para crear al final es el de BorrarVuelve a My Blocks. Haz un controlador de eventos BotonBorra,Click arrastrándolo. Desde el cajón de Lienzo arrastra call Lienzo.Clear y encájalo en   BotonBorrar,Click  .

Los bloques para los botones deberían tener este aspecto:


Agregar evento táctil controladores

Ahora para el siguiente paso: dibujar en el LienzoVas a arreglar las cosas de manera que al tocar el Lienzo, ​​se obtienga un punto en el lugar donde se toca. Si se arrastra el dedo lentamente por el Lienzo, dibuja una línea.

  • En el Editor de bloques, abrir el cajón para el  Lienzo y arrastra el bloque Lienzo.Touched al área de trabajo.

Tan pronto como se arrastra el bloque al área de trabajo, los tres conectores de su lado derecho se rellenar automáticamente con los bloques llamados x , y , y touchedSprite .

Ya hemos visto eventos de botón clic. Clicks son simples, porque no hay nada que saber sobre el clic que no sea que haya sucedido. Otros controladores de eventos, tales como when ...Touched necesita información sobre el evento. En App Inventor, esta información se expresa como el valor de los argumentos relacionados con el controlador de eventos. Para el caso de when ...Touched, los dos primeros argumentos X  e representan las coordenadas del lugar donde ocurrió el contacto. Vamos a dejar el argumento touchedSprite para un tutorial más adelante.

Para este evento haremos que el lienzo dibuje un pequeño círculo en el punto situado en las coordenadas .

  • Arrastra una llamada al comando  Lienzo.DrawCircle desde el cajón del lienzo y colócala en la sección do del bloque  Lienzo.TouchedEn el lado derecho del bloque   Lienzo.DrawCircle hay 3 conectores donde especificar los valores para   e y, las coordenadas donde el círculo se dibujará, y , que es el radio del círculo.

Para x e vamos a usar los valores de los argumentos que fueron suministrados al tocar la pantalla y que fueron recogidos por el controlador Lienzo.Touched:

  1. Abrir el cajón My Definitions en la parte superior de la columna My Blocks localiza los bloques de  value  x , y value yLos bloques se crearon automáticamente cuando arrastaste el controlador  Lienzo.Touched.
  2. Arrastra los bloques value  x , y value y  y conéctalos a los conectores correspondientes en el bloque  Lienzo.DrawCircleAsegúrate de arrastrar los bloques Value x y, no los correspondientes bloques Name x e y, que se ven muy similares.

También tendrás que especificar el radio del círculo a dibujar. Cinco (píxeles) es un buen valor para esta aplicación:
  • Haga clic en un área vacía de la pantalla para abrir el menú activable y seleccionar Math (verde). Selecciona 123 de la lista desplegable que aparece, para crear un bloque de Number. Pulsa sobre el 123 contenido dentro del bloque Number, y cámbialo a 5. Finalmente encájalo en el conector r, del radio.

    También puedes simplemente escribir 5 seguido de retorno, para crear un bloque de números con un valor de 5. Este es un ejemplo de typeblocking : si usted comienza a escribir, el editor de bloques muestra una lista de bloques cuyos nombres coincidan con lo que está escribiendo, y si se escribe un número se crea un bloque de números.

Así es como el controlador de eventos Lienzo.Touched debe quedar:

Prueba lo que tenemos hasta ahora en el teléfono. Toca un botón de color. Ahora toca el lienzo, ​​y el dedo debe dejar una mancha en cada lugar que toque. Al tocar el botón borrar debe desaparecer el dibujo.

Añadir eventos de arrastre

Por último, agregar el controlador de evento de arrastre. Aquí está la diferencia entre un toque y arrastre:

  • Tocar es cuando se coloca el dedo sobre el lienzo y la levanta sin moverlo.
  • Arrastrar es cuando se coloca el dedo sobre el lienzo y de mueve el dedo mientras se mantiene en contacto.

Al arrastrar el dedo por la pantalla, parece trazar una línea larga, que se curva donde se movió el dedo. En realidad estamos pintando cientos de pequeñas líneas rectas: cada vez que mueves el dedo, aunque sea un poco, se extiende la línea desde la posición inmediata anterior del dedo a su nueva posición.

Un evento de arrastre viene con 6 argumentos. Se trata de tres pares de coordenadas que son:

  • La posición del dedo donde comenzó el arrastre.
  • La posición actual del dedo.
  • La posición inmediatamente anterior del dedo.

También hay un objeto Sprite, que de momento vamos a idejar para este tutorial.

Ahora posibilitaremos trazar una línea entre la posición anterior y la posición actual del dedo mediante la creación de un manejador de arrastre:

  1. Desde el cajón Lienzo, arrastra el bloque Lienzo.Dragged al área de trabajo.

  2. También desde el cajón Lienzo, arrastra el bloque de llamada Lienzo.DrawLine y encájalo en el sector do del bloque Lienzo.Dragged

  3. Haz clic en el cajón My DefinitionsVerás los bloques de los argumentos que necesitas. Arrastra los  valores de los bloques a los conectores correspondientes  Lienzo.Dragged:  x1 y1 debe ser prevx prevY x2 y2 debe ser CurrentX CurrentY

Aquí está el resultado:

Pon a prueba tu trabajo, verificándolo en el teléfono: arrastra el dedo por la pantalla para dibujar líneas y curvas. Toca la pantalla para hacer puntos. Utiliza Borrar para limpiar la pantalla.

Resumen

Estas son algunas de las ideas que se tratan en este tutorial:

  • Puede utilizar los componentes de alineamiento de la pantalla para especificar formatos de pantalla diferentes a la simple ubicación de los componentes uno debajo del otro.
  • El componente Canvas te permite dibujar sobre ella. También puede detectar toques y arrastres.
  • Algunos controladores de eventos devuelven información sobre el evento, tales como las coordenadas de la pantalla donde se ha tocado con el dedo. Esta información viene contenida en los argumentos. Cuando se selecciona un controlador de eventos que tiene argumentos, App Inventor crea bloques Value para operar ese información y los coloca en el cajón My Definitions.
En la Parte 2 , verá cómo utilizar variables globales para crear puntos de diferentes tamaños.
Comments