Una app de dibujo: MyPaint Para crear una aplicacién que permita dibujar en pantalla o mover determinadas imagenes tenemos que utilizar en MIT App Inventor el componente Lienzo o también denominado en su versién inglesa Canvas. En esta practica vamos a crear una aplicacién que nos va a permitir: ‘© Dibujar en pantalla arrastrando el dedo. * Cambiar el color de la linea utilizando botones. '* Guardar en el dispositivo un fichero con nuestra creacién. La vista de disefio tendré el siguiente aspecto: Mostrar en el Visor los componentes ocultos ‘Componentes nefio de la tablet screen Zavienzo1 oisposiciontorizontalt Boinnegro Dotnrojo Botnamarito Botnazut Botnverde Botncuardar Boinporrar Borsatir ‘\ Notificadort Componentes no visibles fo Gambiarnombre — Borrar Notiicedort Imogen 17 Interfaz de MyPaint Imagen 18 ComponentesComponente Lienzo El componente Lienzo se utiliza siempre que queramos manejar gréficos en pantalla y que estos representen una zona de dibujo para nuestra aplicacidn. Se diferencia en este sentido del componente Imagen en que en el lienzo afiadimos la interactividad con el usuario posibilitando: Dibujar puntos, lineas y circulos con distintos colores. Mostrar otras imagenes que pueden animarse (sprites). Presentar textos. Establecer imagenes de fondo y modificarlas. Guardar en un fichero el propio lienzo. En nuestra aplicacién el usuario deslizara su dedo por el lienzo trazando lineas. Para conseguir esto haremos uso del evento Arrastrado teniendo en cuenta las coordenadas de origen y destino en el desplazamiento del dedo. EuSE yy Lienzot erry Comm uray Lienzol > Beret gerry Fa) marty XPrevio =) yt (tomar Qa Fe VIO = (erry XActual ~ | Imagen 19 La gestin de Arrastrado nos permitié dibujar as lineas sobre el ienza Considera lo siguiente: ‘Ajustar el lienzo para que ocupe el 75% de la altura de la pantalla del dispositivo. Dimensionar los botones que muestran los colores a 30x30 pixeles Configurar el tamajio de la letra de los botones Guardar, Borrar y Salira 8 puntos. Para cada uno de los botones de colores las propiedades serds las mismas exceptuando ColorDeFondo.Para poder mostrar mensajes en un cuadro de didlogo al usuario de la app tendremos que afiadir un componente no visible denominado Notificador. Imagen 20 Vista de los bloques de la cpp MyPoint Observa en sus bloques asociados que utilizando el notificador podremos, no solamente presentar textos en una ventana emergente, sino también solicitar alguna informacién del usuario. En nuestro caso el componente notificador nos permitiré pedirle al usuario el nombre del fichero donde queremos que se almacene el dibujo que haya realizado.Ejercicios 1, Estudia las diferencias entre los argumentos Xinicial, Yinicial, XPrevio, YPrevio y Actual, YActual del evento arrastrado. Haz los cambios que necesites para comprobar qué significa cada pareja de coordenadas en el uso del evento Arrastrado. 2. Realiza los cambios oportunos para almacenar el dibujo en un fichero de nombre "Dibujo.jpg” en el caso de que el usuario no escriba nada en la ventana del notificador. Pista: Usa el bloque integrado de Control Si... entonces respuesta en el notificador no contenia ningtin texto. para comprobar si la 3. Imagina que deseamos conseguir una tonalidad de color rojo determinada. &Cémo la podemos poner sabiendo su cédigo de color RGB en App Inventor? Haz la prueba construyendo un color rojo personalizado. 4, Crea un par de botones que permitan aumentar o disminuir el ancho de la linea de dibujo. 5. Incorpora un nuevo botén que utilizando el componente Cémara permita tomar una foto con el dispositivo mévil y establecerla como fondo del lienzo.Lector de cédigos de barras y QR: LectorQR Los cédigos de barra y QR son especificaciones comunes de casi cualquier tipo de envasado 0 producto de consumo donde se indican referencias al mismo. MIT App Inventor incluye un componente denominado LectorCédigoDeBarras que utilizando la camara del dispositivo nos permitiré leer estos cédigos. Aquf os presentamos un sencillo ejemplo. Disefio de LectorQR Po ee Sa Sees I SE ST Imagen 21 Vista de dlsefo de LectorQh Bloques de LectorQR Erie botnt > hers Ce aural LectorcoaigoDeBaras! > Be etice a) og cuando (oer Fic iee -DespubsDeScanear Oo ae Cd ol er Namar QE Imagen 22 Vista de bloques de LectoraRReconocimiento de voz y traduccién: TraduVoz tras de las grandes posibilidades de MIT App Inventor son los componentes TextoAVoz, ReconocimientoDeVoz y TraductorYandex. Utilizando la sintesis de voz de Google podemos crear una completa y funcional aplicacién traductora en pocos minutos. Disefio de TraduVoz Imagen 23 Vita de seo de a opicacin Todor Bloques de TraduVoz Imagen 24 Vista de bloques de fa opp TraduVozConectividad a Internet y ubicacién GPS: DondeEstoy En esta sencilla aplicacién podemos comprobar el potencial de MIT App Inventor con el uso del sensor de ubicacién y la representacién grafica de mapas utilizando Google. Disefio de DondeEstoy cuando SE vo poner od esa: poner CSAS a |) tomar CATS poner (SSISTES a | tomer po er ior) pay Pe global it~ oe fentonces amar (7ST rALavrt Imagen 26 Vista de bloques de la aplicacion Dondetstoy