Muchas veces mirando en la red me he encontrado muchos tutoriales de como crear un cronometro en App Inventor 2 y todos o la gran mayoría utilizan un método que aunque válido no es el correcto, recuerda que en programación no hay una única manera de hacer las cosas y que dos programadores pueden obtener el mismo resultado creando distinto código.
En el artículo de hoy vamos a ver como crear un cronometro haciendo uso de los bloques que nos ofrece el componente no visible Reloj.
Vamos a crear una aplicación en la que tendremos dos contadores, uno de ellos contara hacia delante (Cronometro) y otra hacia atras (Cuenta atras) que se activaran a la vez cuando pulsemos el botón inicio, podremos pausar la cuenta pulsando al botón correspondiente y reiniciarla.
Índice del contenido
Creando el diseño del cronómetro en App Inventor 2
El diseño de la pantalla se a creado utilizando una DisposicionVertical y dentro de esta una etiqueta con el título cronómetro, más abajo una DisposiciónHorizontal donde introduciremos la etiqueta que mostrará el cronómetro, seguido y más abajo meteremos otra etiqueta con el título cuenta atrás y más abajo de esta colocaremos otra DisposiciónHorizontal donde introduciremos la etiqueta que mostrará la cuentra atrás, abajo volveremos a colocar una DisposiciónHorizontal donde colocaremos tres botones que contendrán los textos inicio pausa y reiniciar, el botón de pausa lo dejaremos oculto desmarcando en sus propiedades la casilla visible.
También necesitaremos un componente no visible reloj , que se encuentra en Paleta → Sensores → Reloj. Arrastra el componente Reloj al lienzo.
Al final de este articulo podras descargar el archivo AIA para abrir en App Inventor y de esta manera poder ver más detenidamente el ejemplo.
Programación de la aplicación de cronómetro en App Inventor 2
Lo primero que vamos a necesitar es crear tres variables globales para el control de nuestra aplicación, la primera la nombraremos contador y la inicializamos a cero. La segunda la nombraremos milisegundos y la inicializamos con un cuadro de texto vacío. Y por último nombraremos a nuestra tercera variable global como cronómetro y terminaremos este paso dándole un valor booleano de falso.
Los siguiente será dar el valor a la variable global milisegundos de la hora actual al inicializar la aplicación, para ello utilizaremos el bloque del componente no visible reloj, que devuelve un instante de la hora actual obtenida del reloj del teléfono.
Ahora lo que vamos hacer es programar la lógica de nuestros botones, recordar que ya dejamos oculto el botón pausa en nuestro layout. El primero que programaremos es el botón que hará disparar nuestros cronómetros, para ello al hacer click al botón inicio pondremos la variable global Cronómetro con el valor lógico cierto. Seguido ocultaremos el botón de reinicio y haremos visible el botón de pausa.
Seguido programaremos el botón pausa, este revertirá o hara exactamente lo contrario que el anterior cambiará el valor lógico de la variable global Cronómetro a falso, también hará visible el botón de reinicio y ocultaremos el botón de pausa.
Ahora toca el botón de reinicio, lo primero pondremos la variable global Cronómetro con el valor lógico falso esto hará parar nuestros cronómetros, ahora tanto la etiqueta TxtCónometro como TxtCuentaatrás las uniremos con un bloque de texto que en su interior pondremos el siguiente texto 00:00:00:00 y pondremos la variable contador a cero, el uso de esta variable lo veremos más adelante.
Antes de empezar a programar nuestro cronómetro y cuenta atrás, tenemos que asegurarnos de que el componente no visible reloj en sus propiedades tiene marcado todas sus opciones y que el valor del intervalo del temporizador es 100, de lo contrario la aplicación no funcionará correctamente.
Ahora si vamos a comenzar a programar los cronómetros. Necesitamos que cada vez que se dispara el reloj, se compruebe que la variable global cronómetro tenga el valor de cierto y si esto es así, a la variable contador le sumaremos 100, de esta manera estaremos creando un bucle en el que cada vez que se dispare el reloj se sumará 100 a la variable contador y parará cuando el valor de la variable global cronómetro sea falso.
Vamos a comenzar por el funcionamiento del cronómetro, para ello asignaremos la la etiqueta TxtConómetro el valor de de un instante representado en el formato de hora, minuto, segundo y centésimas que lo expresaremos de la siguiente manera “HH:mm:ss:SS”. Puedes ver los formatos posibles aquí. El instante que utilizaremos lo tenemos que sacar en milisegundos y estos milisegundos lo sacaremos de hacer la operación de la duración o diferencia del momento actual con la suma de la variable contador más el momento actual. Recuerda que el momento actual se lo asignamos a la variable global milisegundos al inicializar la aplicación.
Fijate que a la operación matemática del final de los bloques le he restado 3600000, que equivale a al número de milisegundos que tiene una hora, esto lo hago para evitar que el cronómetro se inicie con una hora de más, efecto que no le encuentro explicación, pero que con esto se resuelve.
El funcionamiento de la cuentra atrás es igual, para ello asignaremos la etiqueta TxtCuentraAtras el valor de de un instante representado en el formato de hora, minuto, segundo y centésimas que lo expresaremos de la misma manera “HH:mm:ss:SS” el instante que utilizaremos lo tenemos que sacar de milisegundos y estos milisegundos lo sacaremos de hacer la operación de la duración o diferencia del momento actual, con la resta de la variable contador, más el momento actual. recuerda que el momento actual se lo asignamos a la variable global milisegundos al inicializar la aplicación.
De esta manera tenemos un código bastante optimizado haciendo uso del componente reloj y que a mi manera de entender es la manera correcta de crear un cronometro.
Me gustaría que participarán en este blog dejando un comentario, también puedes compartir este artículo en las redes sociales y seguirnos en las mismas un saludo.
Descarga el proyecto en formato AIA.
Ola, muito bom seu cronometro, porem eu não entendi como fazer para começar do zero ao invés de 20:00:00. Muito obrigado por compartilhar teu conhecimento. Gracias
Estupendo, he fusionado el podometro con el cronometro y me ha quedado algo muy curioso. Gracias por el tutorial. Por cierto el cronómetro me empieza desde cero horas, supongo que será por la versión de App Inventor 2.
Gracias a ti Fran. Da gusto cuando veo que no solo se copia lo que hago si no que se experimenta con lo aprendido.
Un saludo
hola, estoy buscando por todos lados y creo que encontre una de las mejores y mas claras explicaciones, pero aun asi no he podido hacer que funcione mi proyecto, se trata de un invernadero en donde quiero regar las plantas mediante aspersores, durante 10 minutos, hasta alli todo bien , con la adptacion de tu explicacion lo puedo hacer , el problema es que necesito un tiempo de 5 minutos adicionales para poder salir del invernadero para no terminar mojado yo, aclaro que esta aplicacion esta conectado mediante bluetooth al sistema de riego.
Entonces mi idea es tener 2 opciones de tiempo, 10 y 20 minutos de riego, que al apretar cualquiera de las 2 me adicione 5 minutos y estos sean visibles en la pantalla del celular, pero no puedo hacer que empieze a decrementar los 5 y luego los 10 o 20 minutos.
ojala puedas entenderme y ayudarme, muchas gracias anticipadas.
Hola Javier
Muy interesante tu proyecto, me gusta. Bueno a si de pronto se me ocurre que una vez seleccionado el tiempo de 10 o 20 minutos se le añada 5 mas automáticamente siendo 15 o 25 el tiempo de espera. Espero que sea de ayuda.
Un saludo.