Cronómetro en App Inventor 2

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.

images?q=tbn%3AANd9GcQRuf RON7UNn3Y8RTXG0la45JL69IwS719CZKmfGAGaneIm4ym&usqp=CAU - Cronómetro en App Inventor 2

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.

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.

wbRNK2TzI2J4aY6mi3jjvfdvDE sj004o15cEA7rg79XY4iNYtiZyzfj5XMhxyH30UdTyzkVxU z 5EMHYy6tNZQ4Do47xzlb 0CvH6iNE54uLEf QqdL6cc8gRO3xgbmzl 2K0q - Cronómetro en App Inventor 2
jt4EZR6QtTlqRUQz4hi8 d otpIhXfx3XzHoCrs OFL6 eXtKfj 3CoG4PM1mzwhJ6u1kmUo9z6XzI5bGYra9gvi3ErW0oJM3nysLw3uIWN60rfyTjwuqwzcon4xc28Ba Z6B Qm - Cronómetro en App Inventor 2

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.

Q8ck5V6yxxf8gNqTDa2Q0BmXXG rgweM0ZlFBa14dVH1ECjxIt6BBDHGNS5MSa7UPxhO WAa7Bgup0o4mjGDIx5jKW9AVdo8mOHzhY fPSztU0W0lQ7FPRbDXSTJLZ2d5j Y0A8  - Cronómetro en App Inventor 2

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.

phNCbHKDWmpwDaOcyaxjtg5Eowz KXd05qgAyM45lrFKCR4Gt RoV08uLmEo2ExjPO3zYo5LhOt sLvp2UMrlP6jo8nBmuDixpCTCK0qnLfd63zc58bW1qVD QgBA0nTLgFTRqp9 - Cronómetro en App Inventor 2

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.

nI F yxul1APUp6DrB aszz11VUOblNAwwU2C7oNApDycaDAC3gD5RCzFIW5WJ0ef0SlVm82Spx2TDxwqyHhKZYusIHQ8YUUanSG0DoERLX4Hxe ku02scYzqSQrFVrBM0Mewub6 - Cronómetro en App Inventor 2
fDMX6IfoSvk1NPeZYD7OsaMf2HUP64g4JudFAFrFIzeINLrzusK4Aw7aCrWQYry b4cpwS5CXR6apF Enu77RVWuKFDKNDtY9R5lLZmuQqpFgg09qFSPLECWa4XxaX0Iv1beOst4 - Cronómetro en App Inventor 2

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.

ODp5Sx0cPBJrsLZjgk 0n6tH53z6JJZaoZ0JX6GnCXAV XtDYS2g2OcNV D1 6u5wCxbLrLRUKYpuudP4gck5VcIJs1A5frm5t6bYeFFx1eOo6SPr57V8ZMgUsprPhUmM5UYsOQb - Cronómetro en App Inventor 2

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.

ZojnALC3PtShv EZ0acHazYb SkVwH24S e0 SuCJhVeQ23666bMXYTkfN4WCPTXHFdQ57Ah0IRCPrrXt5 CvYTPnEYDJ7RNyb9XBMMIh57nVcuSQNQuI5Ix N3bHCvalt r81vw - Cronómetro en App Inventor 2

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.

lrfLqWVE1O1H YTwAsPOajK0FRE aCtAFDsjcop2ytpJTMqBEmqlj9qar1Q PBHXESkTfUPmzxuZSXLB5LY9Wxe2TzSRXs BAIUFVn9NvRBNrpuMETeY1Bcwn4a61BIT0Bgy8bB6 - Cronómetro en App Inventor 2

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.

XHTO8n9YMvKnrvvaQ0FvfnBZrO7YtNBGRaILvqoexLULJxHpfzYAe  Fz5XWgm izGcicY8OGYWzb8wviJLo42QMNbvfXfxW6nc9y rNVZoorNGzonEfGtrIx2FEgxScnqwCHHEu - Cronómetro en App Inventor 2

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.

qYguGMVapF5su c9aiqcSneWrdVtzv0UPKSx755Ek5jP6qSn8VdVTjuO4K 14RbTcn9DMJW9ji3p7JFtwSEt6gQF4VJ0kdm8hri4edHNQE6GKCPtHTh9Pf6xdG3yJtMSR5gFhggv - Cronómetro en App Inventor 2

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.


5 comentarios en «Cronómetro en App Inventor 2»

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

    Responder
  2. 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.

    Responder
  3. 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.

    Responder
    • 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.

      Responder

Deja un comentario

error: Content is protected !!