Show a time countdown on OLED with option to exit countdown

[acabrera2012]

Hello, again. I would like to show a minute:second countdown timer on one of my OLED menu screens. Here is the code in my current project:

Note: I had trouble pasting the full code so I have removed it from this post (something with the formatting).

Here is the project on Wokwi: https://wokwi.com/projects/392458742047807489.

As you can see on line 312, I am sending the countdown to the serial monitor. I would like to show that countdown, in large text, on one of the screens after the user picks the Start item from the main menu. Almost like the "Let's Rock" girl rocker graphic in one of the demos except I just need text. To be clear, I don't believe this is the same as a menu item like in most of the examples but it is the result of clicking one of the main menu items.

I would also like to let the user know that they can exit the countdown back to the previous menu by pushing the rotary button. Can anyone point me to the area in the docs or an example that might get me moving in the right direction?

Thank you for any guidance.

[Spirik]

👋

I think I will be able to look into it on a weekend.

For starters, this task seems more in line with Blink example rather than Party Hard!, although they bear a lot of similarities in terms of using context.

And you probably wouldn't want to use U8g2 built-in key detection here (line 297, byte key = u8g2.getMenuEvent();), since you already rely on KeyDetector. So in order to detect rotary encoder button press you would have to do something along the following lines:

    myKeyDetector.detect();
    if (myKeyDetector.trigger == ROTARY_BUTTON_SIGNAL_KEY) {
      menu.context.exit();  
    } else {
      // Code to draw timer on the screen
    }

[acabrera2012]

Hello, Alexander.

I thought this would be a simple thing but maybe not based on your notes above. I'm so close to being done that I was hoping I could use the code I already have in place with just some modifications. Everything else is working fabulously, thanks to your earlier help.

Thanks again for looking into this. I will wait to hear from you.

Have a great weekend!

[acabrera2012]

You were right about not using byte key = u8g2.getMenuEvent(). I changed it to:
myKeyDetector.detect(); if (myKeyDetector.trigger == ROTARY_BUTTON_SIGNAL_KEY) { menu.context.exit(); } else { // Code to draw timer on the screen }

Now, it detects perfectly when the rotary button is pushed and goes back to the main menu.

[acabrera2012]

I think I have it. See the following code section:

void startLoop() {

  unsigned long now = millis();

  myKeyDetector.detect();
  if (myKeyDetector.trigger == ROTARY_BUTTON_SIGNAL_KEY) {
    menu.context.exit();  
  } else {
    if (now - countdownPreviousMillis >= countdownRefreshInterval) {
      if (currentCountdownSeconds <= 0) {
        //drawFrame(true);
        turnOn(level, duration);
        Serial.println(F("Countdown complete!"));
        getRandomMinute();                                // Start timer again
      } else {
        //drawFrame(true);
        byte minutes = (currentCountdownSeconds / 60) % 60;
        byte actualSeconds = currentCountdownSeconds % 60;

        u8g2.firstPage();
        do {
          u8g2.setCursor(33, 5);
          u8g2.print("COUNTDOWN");

          u8g2.setCursor(45, 28);
          u8g2.print(minutes);
          u8g2.setCursor(58, 28);
          u8g2.print(":");
          u8g2.setCursor(65, 28);
          if (actualSeconds < 10) {
            u8g2.print("0");
          }
          u8g2.print(actualSeconds);

          u8g2.setCursor(17, 50);
          u8g2.print("Push knob to exit");

        } while (u8g2.nextPage());
      }
      countdownPreviousMillis = now;
      currentCountdownSeconds--;
    }
  }
}

It is working but can you confirm that the code is correct? I am unsure about the do loop.

If it looks good, I only need help with the text sizing.

https://wokwi.com/projects/392458742047807489

[Spirik]

Looks good to me! U8g2 do loop looks fine.

If by text sizing you mean larger font for countdown, U8g2 got you covered. You can use any of the supported fonts shipped with U8g2 library (assuming it will fit into memory). Just call u8g2.setFont(); with font name of your choice before printing to the screen. For example, modified version of do loop can look like this:

u8g2.firstPage();
do {
  if (currentCountdownSeconds <= 0) {
    //u8g2.clear();
    u8g2.setCursor(33, 5);
    u8g2.print("TRANSMITTING...");
    u8g2.setCursor(14, 50);
    u8g2.print("Push knob to exit");
    Serial.println(F("Countdown complete!"));
    turnOn(level, duration);
    delay(2000);
    getRandomMinute();                                // Start timer again
  } else {
    u8g2.setCursor(33, 5);
    u8g2.print("COUNTDOWN");
    
    u8g2.setFont(u8g2_font_profont29_mn);  // Set custom font here
    u8g2.setCursor(30, 22);
    u8g2.print(minutes);
    u8g2.setCursor(46, 22);
    u8g2.print(":");
    u8g2.setCursor(60, 22);
    if (actualSeconds < 10) {
      u8g2.print("0");
    }
    u8g2.print(actualSeconds);
    
    u8g2.setFont(u8g2_font_6x12_tr);  // Reset font to default one here
    u8g2.setCursor(14, 50);
    u8g2.print("Push knob to exit");
  }
} while (u8g2.nextPage());

[acabrera2012]

Working great but can you tell me why the "TRANSMITTING..." text does not overwrite the "COUNTDOWN" text in the display? Is it the delay(2000) causing me issues?

I really just want to show the user that something is happening right before starting the countdown again:

      u8g2.firstPage();
      do {
        u8g2.setFont(u8g2_font_6x12_tr);
        u8g2.setCursor(33, 5);
        if (currentCountdownSeconds >= 1) {
          u8g2.print("COUNTDOWN");
          u8g2.setFont(u8g2_font_profont29_mn);
          u8g2.setCursor(30, 22);
          u8g2.print(actualMinutes);
          u8g2.setCursor(46, 22);
          u8g2.print(":");
          u8g2.setCursor(60, 22);
          if (actualSeconds < 10) {
            u8g2.print("0");
          }
          u8g2.print(actualSeconds);
        } else {
          u8g2.print("TRANSMITTING...");
          u8g2.setCursor(45, 28);
          u8g2.print("00:00");
          delay(2000);
          turnOn(level, duration);
          getRandomMinute();                                // Start timer again
        }
        u8g2.setFont(u8g2_font_6x12_tr);
        u8g2.setCursor(14, 50);
        u8g2.print("Push knob to exit");
      } while (u8g2.nextPage());
      countdownPreviousMillis = now;
      currentCountdownSeconds--;

Or, may I can just clear the screen and blink the word "TRANSMITTING..." for a few seconds before starting a new countdown.

[Spirik]

Oh, you can not use delay() inside U8g2 do loop (it should not contain dynamic content: content that may change during do loop, or delays - they simply won't work there). Sorry for not noticing it earlier. And also using delay() makes it more difficult to detect button press reliably (as demonstrated in Blink example). Consider using millis-based delay there. You may have to be creative=)

[acabrera2012]

Sounds good. I'll get creative. Thanks for all of your help.