{"id":3010,"date":"2021-07-07T07:50:00","date_gmt":"2021-07-07T06:50:00","guid":{"rendered":"https:\/\/sereingeniera.ugr.es\/?p=3010"},"modified":"2022-03-15T11:50:00","modified_gmt":"2022-03-15T10:50:00","slug":"7-de-julio-dia-4-disenemos-y-mostremos-el-temporizador","status":"publish","type":"post","link":"https:\/\/sereingeniera.ugr.es\/index.php\/2021\/07\/07\/7-de-julio-dia-4-disenemos-y-mostremos-el-temporizador\/","title":{"rendered":"7 de Julio (D\u00eda 4): Dise\u00f1emos y mostremos el temporizador"},"content":{"rendered":"\n

\u00a1Buenos d\u00edas! Resolvamos los retos de ayer, los pod\u00e9is encontrar en el apartado D\u00cdA 3: Pantalla de leds<\/strong> dentro de Classroom en Trabajo de Clase<\/strong> (Soluci\u00f3n retos 1, 2 y 3 matrices de leds).<\/p>\n\n\n\n

Reto 1<\/strong>: Encontrar las figuras ocultas<\/strong><\/p>\n\n\n\n

La figura que resultaba de rellenar las casillas de la matriz es la siguiente:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Reto 2<\/strong>: \u00a1Dise\u00f1a tu propio dibujo de leds!<\/strong><\/p>\n\n\n\n

Para este reto, al ser totalmente personalizable, nuestra soluci\u00f3n no tiene mucho sentido. No obstante, os adjuntamos c\u00f3mo podr\u00eda quedar el c\u00f3digo si se usan funciones:<\/p>\n\n\n\n

\u00a0 \/\/RETO 2 : Dise\u00f1ar un icono propio\u00a0<\/span><\/p>\n\n\n\n

mostrarDibujo<\/span>();<\/strong><\/p>\n\n\n\n

Si ten\u00e9is dudas o quer\u00e9is mostrar vuestros iconos en clase, \u00a1podemos echarle un vistazo!<\/p>\n\n\n\n

Reto 3<\/strong>: Icono que se desplaza<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Reto 4 (opcional)<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Hoy vamos a seguir con la idea de la clase anterior, unificando los conocimientos aprendidos y usando la mayor\u00eda de los componentes que hemos usado hasta ahora. Tened a mano los dos pulsadores, el buzzer y la matriz de leds.<\/strong><\/p>\n\n\n\n

La idea es seguir complementando el temporizador<\/strong>. En este caso se va a mostrar la cuenta atr\u00e1s de activaci\u00f3n de la alarma mediante la pantalla dise\u00f1ada con matrices leds. Cuando termine la cuenta atr\u00e1s, el buzzer comenzar\u00e1 a sonar. Para pararlo, tendremos que pulsar el primer bot\u00f3n. Si queremos que vuelva a comenzar la cuenta atr\u00e1s, se deber\u00e1 pulsar el otro bot\u00f3n restante, y as\u00ed tantas veces queramos.<\/p>\n\n\n\n

Para ello, antes del bucle asociado a que el buzzer emita sonidos, a\u00f1adiremos una funci\u00f3n asociada a generar un temporizador-contador que muestre el tiempo que queda en pantalla para que la alarma suene.  Ese tiempo ser\u00e1 10 segundos. Cuando pase dicho tiempo, se mostrar\u00e1 \u201cBOOM\u201d<\/strong> en pantalla y comenzar\u00e1 a sonar la alarma. La configuraci\u00f3n del circuito es la siguiente:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Poco a poco vamos a dise\u00f1ar el c\u00f3digo. El primer paso es ir viendo qu\u00e9 variables son necesarias para inicializar los componentes (definici\u00f3n de pines y de variables que conozcamos):<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Como veis, es unir las variables<\/strong> del c\u00f3digo que ya tenemos hecho del buzzer, del pulsador y de las matriz de leds. Con respecto al void setup()<\/strong>, esta vez va a ser un poco m\u00e1s completo:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Al comenzar el programa, adem\u00e1s de configurar los pines, se van a mostrar varias frases en la pantalla. Adem\u00e1s, las dos funciones que hay asociadas a las interrupciones de los botones son las siguientes:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

La funci\u00f3n pararAlarma()<\/strong> como su nombre indica, la usaremos para controlar si queremos que la alarma contin\u00fae o no. Como cuando pulsamos el despertador por la ma\u00f1ana para que deje de sonar. La funci\u00f3n activarAlarma()<\/strong> vendr\u00eda a ser como el interruptor de la alarma, que dejamos por la noche activado para que por la ma\u00f1ana suene la alarma. Cuando pulsemos el bot\u00f3n asociado al pin pinActivarAlarma<\/em>, seg\u00fan la interrupci\u00f3n la alarma se activar\u00e1, y comenzar\u00e1 a funcionar el temporizador (que ahora despu\u00e9s lo veremos).<\/p>\n\n\n\n

Ahora vamos a analizar el void loop()<\/strong>:<\/p>\n\n\n\n

void loop() {\n \n  \/\/Si la alarma no est\u00e1 OFF, es decir, la alarma est\u00e1 activa, lanzamos el temporizador\n  if (alarmaOFF == false) {\n \n    lanzarTemporizador();\n    pantalla.escribirFrase(\"BOOM\");\n    while (alarmaOFF == false) {  \/\/M\u00e1s eficiente si ponemos while(!alarmaOFF){...}\n      sonarNota(nTonoActual);\n      nTonoActual = (nTonoActual + 1) % 10;\n    }\n  }\n}\n<\/code><\/pre>\n\n\n\n
\u00a1Qu\u00e9 pocas l\u00edneas! Eso es porque cada vez sabemos programar de forma m\u00e1s eficiente y compacta. Veamos qu\u00e9 significan:<\/p>\n\n\n\n
1.       Primero se comprueba si la alarma est\u00e1 activada o no. Se comprueba el valor de la variable alarmaOFF<\/em>, que inicialmente la hab\u00edamos colocado como false<\/em>. Ese valor cambiar\u00e1 cuando pulsemos el bot\u00f3n<\/strong> y se ejecute activarAlarma(). En el primer ciclo, directamente saltar\u00e1 la alarma sin pulsar ning\u00fan bot\u00f3n, al haber inicializado la variable con ese mismo valor<\/p>\n\n\n\n
2.       Cuando ya se haya pulsado, se cumplir\u00e1 la condici\u00f3n y pasar\u00e1 a ejecutarse la siguiente l\u00ednea: lanzarTemporizador()<\/strong>. El c\u00f3digo asociado a esta funci\u00f3n lo vamos a ir construyendo poco a poco (\u00a1pod\u00e9is considerarlo como un reto!), es m\u00e1s a priori os lo vamos a dar como plantilla para que lo rellen\u00e9is:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
La idea es intentar mostrar en la pantalla una cuenta atr\u00e1s del n\u00famero de segundos de la alarma. Es decir, que si la alarma se pone en 10 segundos en nuestra pantalla aparezca 00:10 -> 00:09 -> 00:08 -> 00:07 -> 00:06 -> 00:05 … 00:00.<\/p>\n\n\n\n
Para representar estos minutos y segundos os hemos proporcionado dos funciones mostrarMinutosSegundos()<\/strong> y separadorDosPuntos()<\/strong> que se explicaron brevemente ayer (est\u00e1n copiadas de nuevo aqu\u00ed abajo). <\/p>\n\n\n\n
\n
  • La funci\u00f3n mostrarMinutosSegundos() <\/strong>utiliza las dos variables declaradas (minutos y segundos) para representar sus valores en la pantalla. Es una funci\u00f3n especial porque si los valores de minutos o segundos son m\u00e1s peque\u00f1os que dos cifras, los muestra siempre con dos cifras. Por ejemplo, si el n\u00famero de minutos es 0 y de segundos es 7, le pone un 0 delante a ambas variables para poder mostrar 00 y 07. <\/li><\/ul>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    • La funci\u00f3n separadorDosPuntos()<\/strong> dibuja \u00bb : \u00bb sobre la matriz 1 (minutos) para visualmente separar los d\u00edgitos de los minutos de los segundos.<\/li><\/ul>\n<\/div><\/div>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      Para resolver este reto os proponemos tres pasos:<\/p>\n\n\n\n
      a) Estableciendo la variable minutos a 0. Controlar los valores que tiene la variable segundos (siempre entre 59 y 0) desde la funci\u00f3n que hace la cuenta atr\u00e1s llamada lanzarTemporizador()<\/strong>. Es decir, en cada vuelta debes decrementar la variable segundos y llamar a la funci\u00f3n mostrarMinutosSegundos. Por otro lado, como la pantalla funciona un poco lenta, el tiempo de espera no es 1000 ms sino algo menos porque la pantalla tarda en representar los n\u00fameros. Nosotras estamos utilizando 775ms, \u00a1pero pod\u00e9is cronometrarlo para que sea m\u00e1s exacto! Puedes hacerlo con el bucle for de la funci\u00f3n cuentaAtrasEnSegundos() o bien, lo que te recomendamos, hacerlo con el bucle while()<\/strong> que se muestra en la plantilla, que es la estructura para resolver la siguiente parte de este reto….<\/p>\n\n\n\n
      b) \u00bfQu\u00e9 ocurre si ponemos m\u00e1s de 59 segundos? Por ejemplo 1 minuto 30 segundos. La secuencia ser\u00eda algo como 01:30 -> … -> 01:01 -> 01:00 -> 00:59 -> 00:58 . \u00a1F\u00edjate qu\u00e9 ocurre cuando los segundos llegan a 0!<\/strong> Es necesario decrementar el n\u00famero de minutos y entonces poner a 59 los segundos… \u00a1Intenta programar c\u00f3mo controlar\u00edas los minutos cuando los segundos llegan a 0!<\/p>\n\n\n\n
      \u00a1IDEAS!<\/strong><\/p>\n\n\n\n
      Idea<\/strong>: Cuando finalice la cuenta atr\u00e1s, antes de la melod\u00eda puedes mostrar por pantalla alg\u00fan mensaje de alarma o explosi\u00f3n. <\/p>\n\n\n\n
      Idea 2<\/strong>: Alrededor del delay() puedes encender y apagar el led RGB del color que m\u00e1s te guste.<\/p>\n\n\n\n
      En nuestro ejemplo (y para hacer pruebas), el temporizador est\u00e1 planteado para durar 10 segundos. Dicho tiempo va a ir disminuyendo hasta que llegue el contador a 0. Como la idea es que se muestre en la pantalla el tiempo, pod\u00e9is ver que usa la funci\u00f3n \u201cString()\u201d<\/strong>, que permite que la pantalla entienda los n\u00fameros. <\/p>\n\n\n\n
      \u00a1Sigamos con el c\u00f3digo principal!<\/strong><\/p>\n\n\n\n
      3.       En nuestro dise\u00f1o, cuando el temporizador finalice, en la pantalla aparecer\u00e1 el mensaje: \u00abBOOM\u00bb<\/strong><\/p>\n\n\n\n
      4. \u00a0 \u00a0 \u00a0 Por \u00faltimo, se comprueba si hemos pulsado el bot\u00f3n para que pare la alarma o no. En caso de que no<\/strong>, el buzzer comenzar\u00e1 a sonar mediante la funci\u00f3n sonarNota()<\/em>, y los tonos se ir\u00e1n cambiando. Esto ya lo tenemos dise\u00f1ado de d\u00edas previos.<\/p>\n\n\n\n
      Un resumen de todo lo que hemos visto lo ten\u00e9is en el siguiente v\u00eddeo<\/strong>.<\/p>\n\n\n\n
      \n