#WioTerminal – Display a countdown progress bar 🚥 for the next #AzureIoT ☁️ refresh data call

Hi !

In today’s post I’ll share an scenario about:

Display a custom progress bar in the Wio Terminal display. The progress bar is a count down until the next request to the Azure Function interacting with Azure Digital Twin.

This is mostly working with strings to create a specific String() that represent the Progress Bar. Here is a working sample, with the countdown at the bottom left of the screen.

In order to do this, I declare a couple of variables. Here I manage how many blocks per second will be used in the progress bar. In example, the refresh interval is 10 seconds, and the progress bar will change the blocks every 2 seconds.

// Refresh Countdown Progress bar
unsigned long lastTimeCounter = 0;
int countdownCounter     = 0;
int blocksPerSecond      = 2000;
String progressBarPrefix = "@> ";

And in the loop() function, if I’m not retrieving data from Azure, I’ll call this function to show the progress bar.

void displayRefreshProgressBar() {
  // display progress timer to next get info
  if ((millis() - lastTimeCounter) > blocksPerSecond) {
    countdownCounter--;
    lastTimeCounter = millis();

    int prefixLength = progressBarPrefix.length();
    int progressBarLength = prefixLength + (timerDelay / blocksPerSecond);
    String progressBar = prefix;
 
    for(int i = prefixLength; i <= progressBarLength - 1 ; i++) {
      if (i <= (countdownCounter + prefixLength) - 1){
        progressBar += '0';
        }
      else {
        progressBar += '.';  
      }
    }    

    // draw progress bar
    tftPrintLineNoClean(row7, progressBar, "");  
  }
}

Super easy, and with a visual clue to check if the app is running. And when the Wio Terminal will request new data from Azure IoT !

I’m close to finish the Wio Terminal application. Next step, let’s interact with the Digital Twin using the Wio Terminal buttons.

References

• Download Arduino IDE
• Wiki Seeed – Historgram
• Wiki Seeed – loading Images
• Wiki Seeed – Installing the File System Library
• Wiki Seed – Wifi Connectivity
• GitHub – Arduino_JSON
• Wikipedia – X BitMap

¿Con ganas de ponerte al día?

En Lemoncode te ofrecemos formación online impartida por profesionales que se baten el cobre en consultoría:

• Si tienes ganas de ponerte al día con Front End (ES6, Typescript, React, Angular, Vuejs…) te recomendamos nuestros Máster Front End: https://lemoncode.net/master-frontend#inicio-banner
• Si te quieres poner al día en Backend (stacks .net y nodejs), te aconsejamos nuestro Bootcamp Backend: https://lemoncode.net/bootcamp-backend#bootcamp-backend/banner
• Y si tienes ganas de meterte con Docker, Kubernetes, CI/CD…, tenemos nuestro Bootcamp Devops: https://lemoncode.net/bootcamp-devops#bootcamp-devops/inicio