viernes, 11 de mayo de 2018

App Inventor: pintar

Vamos a hacer una aplicación para dibujar en el móvil. Paso a paso, la haremos así:

1. Lienzo para dibujar

Primeramente añadiremos un lienzo (canvas) en el diseño. Le daremos las dimensiones (la anchura que rellene el contenedor, y la altura, por ejemplo, 300 píxeles). Este lienzo lo programaremos para que dibuje un punto al tocarlo, y una línea al arrastrar el dedo sobre él:



2. Definir el grosor de línea

2.1. Componentes

Seguidamente vamos a hacer posible que el usuario elija el grosor de línea con el que quiere dibujar. Para ello utilizaremos el componente deslizador (slider). Desplazándolo a derecha o izquierda modificaremos el grosor de línea.

En el cuadro de propiedades del deslizador pondremos que el valor mínimo será 1 (un grosor de línea de 1 píxel), y el máximo el que deseemos. Yo he puesto 20. Diré que por defecto el deslizador aparezca en la posición 1 (V. recuadro rojo de la imagen). Asimismo será necesario indicar el ancho del deslizador (por ejemplo, 200 píxeles):



Junto al deslizador insertaré una etiqueta en la que aparezca el grosor de línea (en píxeles). A la etiqueta le cambio el nombre por grosor, y hago que inicialmente aparezca un 1 (V. imagen anterior).

2.2. Programación

Ahora voy a declarar una nueva variable (a la que llamo grosor), y la inicio a 1. Posteriormente programo el deslizador. Digo que cuando cambie su posición, cambie el valor de la variable, y que éste aparezca en la etiqueta. El valor indicado por el deslizador tiene dos decimales. Si queremos que en la etiqueta aparezca sin decimales, lo redondeamos:


Por último, tengo que cambiar los bloques programados en el paso 1, de manera que tanto los puntos como las líneas los dibuje con el grosor indicado por esta variable:

3. Borrar

Voy ahora a añadir un botón para borrar lo dibujado. La programación del botón quedaría así:

4. Elegir un color

4.1. Componentes

Para elegir colores voy a añadir estos componentes:

  • Un botón para seleccionar el color, al que he renombrado y he llamado colores.

  • Una disposición horizontal, que tendrá un ancho para rellenar el contenedor, y cuyo contenido estará centrado

  • Un lienzo dentro de esta disposición, en el que colocaré una imagen de fondo de un selector de color, por ejemplo, la de este enlace.

  • Una etiqueta, sin ningún texto, y cuyo color de fondo será el color elegido. Esto me permitirá saber qué color he elegido. A esta etiqueta la cambio el nombre llamándola color elegido.



La disposición horizontal será, por defecto, no visible, por lo que tendré que desactivar la casilla marcada en la imagen anterior (este lienzo se ha puesto en una disposición horizontal para que no toque los bordes de la pantalla, ya que es muy difícil seleccionar los colores ahí).

4.2. Programación

Primero programaremos el botón de elegir colores. Al hacer clic sobre él deberá:

  • Si es visible el lienzo donde pinto, deberá hacerlo invisible, hacer visible la disposición horizontal donde está el lienzo para elegir los colores, y cambiar el texto del propio botón a "volver a pintar"

  • Si no (es visible el lienzo de elegir color), al apretar el botón tengo que hacer invisible la disposición horizontal, hacer visible de nuevo el lienzo de pintar, y cambiar el texto del botón a "elegir color"

Luego programaré el lienzo de elegir color, de manera que al pasar el dedo sobre él cogerá el color de fondo que esté tocando, y hará que sea el color con el que pinte el lienzo de pintar. Además, este color aparecerá como color de fondo en la etiqueta color elegido:


5. Pintar sobre una fotografía

Vamos a hacer ahora que la aplicación pueda tomar una fotografía para pintar sobre ella, para lo que tendré que añadir dos componentes:

  • Un botón para activar la cámara

  • Una cámara
La programación es sencilla. Al apretar el botón se llamará a la cámara para que tome una fotografía. Y cuando la cámara haya tomado la fotografía, se pondrá como imagen de fondo del lienzo de pintar:


miércoles, 2 de mayo de 2018

App Inventor: juego con imágenes (3)

En este caso nuestra aplicación nos va a mostrar una imagen para que digamos lo que representa. La respuesta la elegiremos de una lista. Una vez elegida la respuesta, se nos mostrará otra imagen, aleatoriamente, para que digamos qué es.

1. Diseño

Para nuestra aplicación necesitaremos:

  • Un lienzo

  • Una imagen sprite, donde aparecerá la imagen por la que preguntamos

  • Un desplegable (spinner), donde aparecerá la lista de posibles respuestas para elegir una.

  • Un botón para comenzar el juego

  • Una etiqueta en la que se leerá aciertos: , y otra en la que aparecerá el número de aciertos, y en la que en principio pondrá 0. Esta última etiqueta habrá que programarla, por lo que la he renombrado y la he llamado aciertos.

  • Un componente de sonido (sound). Lo utilizaremos para que el móvil vibre cuando demos una respuesta errónea.
Asimismo subiré las imágenes (en mi caso, son las mismas cuatro de los ejercicios anteriores):


2. Programación

2.1. Variables

Voy a tener que definir cuatro variables:

  • Una para los aciertos, que iniciaremos a 0

  • Otra para las imágenes. Será una lista.

  • Otra para las respuestas. También es una lista, que es la que aparecerá en el desplegable (spinner). Las respuestas deben ponerse en el mismo orden en el que se pusieron las imágenes. Además, hay que añadir una quinta respuesta, que será la que salga por defecto (en mi caso, he escrito selecciona. Hay que tener en cuenta que si por defecto sale la respuesta correcta, se considera que ya está seleccionada, y no me dejaría seleccionarla de nuevo)

  • Otra que va a darnos cuál de las imágenes vamos a preguntar (la 1, 2, 3 ó 4, en mi caso). En este caso la inicio a 1:

2.2. Procedimiento para mostrar una imagen al azar

Ahora vamos a hacer un procedimiento que hará lo siguiente:

  • Cargará los elementos de la lista respuestas en el desplegable (spinner)

  • Mostrará el elemento de la lista "selecciona" en el desplegable

  • Dará un valor aleatorio entre 1 y el número de imágenes (en mi caso 4) a la variable pregunta.

  • Hará aparecer la imagen correspondiente al valor de la variable pregunta en la imagen sprite.

2.3. Inicio del juego

Al apretar el botón comenzar:

  • Se pondrán los aciertos a 0

  • Se llamará al procedimiento preguntar, definido en el paso anterior.
2.4. Tras seleccionar una respuesta:

Una vez se ha preguntado por una imagen y el usuario ha elegido una respuesta, se deberá hacer lo siguiente:

  • Comprobar si la respuesta es correcta (la respuesta correcta es la correspondiente a la posición señalada por la variable pregunta en la lista de respuestas).

  • Si la respuesta es correcta aumentará en 1 los aciertos

  • Si la respuesta no es correcta hará que el teléfono vibre

  • Finalmente, se llamará de nuevo al procedimiento preguntar, para que aparezca una nueva imagen y se repita el proceso.
2.5 Mejoras

Como siempre, introduce mejoras en la aplicación. Corrige posibles errores, pon un diseño atractivo, y añade aquello que se te ocurra para mejorar la programación.

App Inventor: Brújula con localizador

Esta aplicación va a consistir en una brújula, y además nos va a indicar las coordenadas (longitud y latitud) de donde nos encontramos:

1. Diseño:

Vamos a añadir los siguientes componentes:

  • Un lienzo

  • Dentro del lienzo, una imagen sprite, donde vamos a poner la esfera de la brújula

  • El sensor de orientación

  • El sensor de localización

Además, tendré que añadir etiquetas donde me aparecerán las coordenadas. Añado para ello cuatro etiquetas en un arreglo de tabla:


En la etiqueta 1 pondrá Longitud, en la 3 Latitud, y en la 2 y en la 4 los datos de latitud y longitud (por lo que en principio los dejaremos a 0). Además, las etiquetas 2 y 4 las cambio de nombre (y las llamo longitud y latitud), ya que voy a tener que programarlas, y de esta manera puedo saber cuál es cada una:



Imagen brújulaDenelson83 / CC-BY-SA 3.0


2. Programación:

La programación es muy sencilla:

2.1. Brújula

Comenzaremos por la brújula. Quiero que cada vez que el valor medido por el sensor de orientación cambie, cambie a su vez la posición de la imagen sprite (la esfera de la brújula):



2.2. Coordenadas

Cada vez que cambie el valor del sensor de localización, cambiaremos el texto que aparece en las etiquetas longitud y latitud a los valores indicados por el sensor:


Para terminar, haz un diseño atractivo para la aplicación (colores, tipografías, distribución, etc.)

martes, 1 de mayo de 2018

App Inventor: juego con imágenes (1)

Este trabajo consiste en diseñar una aplicación en la que aparecen varias imágenes (en este caso 4); al apretar cada una de ellas aparece una explicación:





Pasos a seguir:

1. Diseño

 En la ventana de diseño hay que añadir:

  • Un lienzo

  • Dentro del lienzo, cuatro imágenes sprite

  • Una etiqueta
 En cada imagen sprite subiremos una de las imágenes:


En la etiqueta podemos eliminar el texto (dejarlo en blanco)

2. Programación

La aplicación debe mostrar una explicación sobre la imagen cada vez que se pulse. Por ello, para cada una de las cuatro imágenes habrá que utilizar los siguientes bloques:

Mejora la aplicación haciendo un diseño atractivo (colores, distribución, etc.)

miércoles, 25 de abril de 2018

App Inventor: juego con imágenes (2)

Este trabajo consiste en un juego en el cual se nos hace una pregunta sobre varias imágenes que aparecen en pantalla. Hay que contestar pulsando sobre la imagen correcta:




Pasos a seguir:

1. Componentes


En la ventana de diseño hay que añadir:

  • Un lienzo

  • Dentro del lienzo, tantas imágenes sprite como queramos (en este caso 4). Las imágenes se deshabilitan, de forma que no puedan pulsarse hasta que se haga la pregunta:

  • Un arreglo horizontal, con dos etiquetas dentro. En una se va a hacer la pregunta ("di cuál es "), y en la otra aparecerá el nombre de la herramienta que preguntemos ("la segueta", por ejemplo). Esta segunda etiqueta, a la que he llamado pregunta, se deja con el texto en blanco de primeras:

  • Un botón para jugar

  • Otra etiqueta, en donde pondrá "ACERTASTE" o "FALLASTE" cuando se haya elegido una respuesta. El texto de esta etiqueta (a la que he llamado notificación) también se deja en blanco de principio.

2. Bloques:

  • Declaramos una variable, a la que yo he llamado herramientas, como una lista con todas las respuestas:
  • Al hacer clic en el botón jugar, se habilitan las cuatro imágenes. De esta manera podemos pulsarlas para elegir la respuesta que creamos correcta:
  • Declaro otra variable, a la que llamo pregunta. Es la que va a almacenar cuál de las cuatro herramientas he preguntado. Puede tomar, por tanto, los valores 1, 2, 3 ó 4. Cuando aprieto el botón jugar, tomará uno de estos cuatro valores al azar:

  • Por último, al pulsar el botón jugar, deberá aparecer la herramienta que pregunto en la etiqueta pregunta. Para ello pondré en la etiqueta el nombre que aparece en el lugar indicado por la variable pregunta (1, 2, 3 ó 4) en la lista herramientas:

  • Una vez que el usuario elija una respuesta (pulsando en una imagen), habrá que comprobar si ha acertado o no. Si hubiera pulsado en la imagen 1...

  • ... habrá que comprobar si ha acertado o no, para poder actuar en consecuencia:
  • Si ha pulsado en la imagen 1, habrá acertado si la pregunta era la correspondiente a esta imagen, es decir, la primera que sale en la lista herramientas:


  • Si ha acertado, haremos aparecer la palabra "ACERTASTE" en la etiqueta notificación. Si no, aparecerá la palabra "FALLASTE":

  • Y, además, habrá que deshabilitar todas las imágenes de nuevo, para que no se pueda pulsar ninguna hasta que no se apriete de nuevo el botón jugar:

  • Hay que hacer lo mismo con las otras tres imágenes:

3. Mejoras:

3.1. Simplificación del código:

Fíjate en la imagen anterior, y observa cómo el código para inhabilitar las imágenes (los cuatro últimos bloques verdes), se repite para cada imagen. Si en lugar de cuatro imágenes fueran más, más se repetiría. Hay una forma más elegante de hacer esto, y es definiendo un método. En este caso lo he llamado inhabilitar:
El método deshabilitar me deshabilita las cuatro imágenes. Cada vez que quiera hacerlo, en lugar de deshabilitar las imágenes una por una, haré una llamada a este método:


3.2. Otras mejoras:

Añade otras mejoras como:

  • Haz un diseño atractivo

  • Añade un marcador que lleve la cuenta de los aciertos

miércoles, 4 de abril de 2018

Ejercicos con App Inventor: Golf

Vamos a hacer un juego consistente en colar una pelota en un agujero. La pelota se moverá al inclinar el teléfono:



1. Damos movimiento a la pelota.


Lo primero que tendremos que hacer será añadir:

  • un lienzo
  • una pelota blanca
  • una pelota negra, algo mayor que la anterior, que será el hoyo.

Además, junto al hoyo he puesto la imagen de una banderita, como en los campos de golf. Puedes descargártela de aquí:






Para mover la pelota hay que comprobar el sensor de orientación; la pelota debe avanzar según la inclinación del teléfono. Por ello hemos de añadir también:

  • el sensor de orientación


Programación:

Al cambiar el teléfono de orientación la aplicación debe:


  • Mover la pelota en la dirección de la inclinación del teléfono
  • Mover la pelota a mayor velocidad cuanto mayor sea el ángulo de inclinación.



El ángulo (magnitud) del sensor de orientación nos da velocidades muy pequeñas, por lo que hay que multiplicarlo por algún número. Cuanto mayor sea el número, mayor será la velocidad. En mi caso lo he multiplicado por 1000.

2. Mejoras


Introduce las siguientes mejoras:

  1. Cuando la pelota llegue al hoyo, que caiga dentro y se pare.

  1. Hay que volver a poner en movimiento la pelota cuando pase algo. Por ejemplo, al pulsar un botón. Habría que añadir un botón en el diseño y programarlo para que al apretarlo la pelota salga del hoyo y se mueva de nuevo con el sensor de orientación.
  1. Añade una puntuación. Cada vez que colemos la pelota en el hoyo obtendremos un punto. Para ello hay que:
    • Crear una variable para almacenar los puntos:

    • Crear una etiqueta para mostrar los puntos en pantalla: 





  1. Añade un temporizador, de manera que cuando pasen 60 segundos el juego se pare. Para ello hay que:

    • Añadir un reloj en el modo diseño

    • Creo una nueva variable, llamada segundos, y la inicio a 60. Esta variable va a almacenar los segundos que quedan para que el juego acabe.

    • En el modo diseño, pongo dos etiquetas más: una en la que ponga "tiempo: ", y otra en la que pongan los segundos que quedan. De esta manera podré ver el valor de la variable tiempo (los segundos que quedan) en la pantalla:


    • Programo el reloj de forma que, cada vez que haga "tic" (en este caso cada segundo, porque está puesto el intervalo a 1000 ms -ver la imagen de arriba-), descuente un segundo al valor de la variable tiempo, y refleje este valor en la etiqueta:

    • Además, por cada "tic" del reloj habrá que comprobar si los segundos han llegado a 0, pues en ese caso el juego ha terminado. Si los segundos han llegado a cero hay que, detener la bola (hacer su velocidad 0), desactivar el sensor de orientación, y desactivar el propio reloj. Además, también deberá desactivar el botón de "nueva tirada", para que no podamos jugar con el reloj a 0.


  1. Finalmente hay que añadir un botón para reiniciar el juego. Lo puedo llamar "reiniciar juego", y al hacer clic en él debe de ocurrir lo siguiente:
    • Se debe llevar la pelota fuera del hoyo, por si acaso estuviera dentro.
    • Se deben poner los puntos a cero, y debe aparecer 0 en la etiqueta "puntuación"
    • Se deben activar el sensor de orientación, el reloj, y el botón de "nueva tirada"