本記事は、株式会社函館ラボラトリが運営する「Bラボ」における、大人向け「看板アプリ（デジタルサイネージ）を作るコース」用教材テキストです。

作るもの

画面下の緑のバーで、ページが切り替わる大体のタイミングがわかるようになります。

実装準備

まずは、ProgressBarModuleの高さを20pxとして、高さを表す変数を定義します。

DigitalSignage.pde

/* 略 */

final int MODULE_RECT_ROUND = 30;
final int PROGRESSBAR_HEIGHT = 20; /* 追加 */

/* 略 */

新しいファイルM_ProgressBar.pdeを作ります。
ファイルの中で、ProgressBarModuleの描画用関数drawProgressBarModule()を作ります。

M_ProgressBar.pde

/* ここから追加 */
void drawProgressBarModule() {
}
/* ここまで追加 */

塗りつぶす割合を算出

ProgressBarModuleは、1秒ごとに一定の割合で、緑に塗りつぶされる面積が増えていきます。
画面が切り替わるまでの時間感覚が10秒の場合（STAY_SECOND = 10）、9秒経過した時点で100％塗り潰され（下図）、

10秒経過した時点で次のページに切り替わり、ProgressBarModuleは真っ白にリセットされます（下図）。

この割合を算出してみましょう。
0秒時点で0%、9秒時点で100%塗り潰されるとすると、プログラムはこのようになります。

M_ProgressBar.pde

void drawProgressBarModule() {
  float progressRate = (second % STAY_SECOND) / float(STAY_SECOND-1); /* 追加 */
}

progressRateの値は、0.0（0%）〜1.0（100%）の範囲をとります。
このprogressRateを使って、progressBarを描画してみます。

M_ProgressBar.pde

void drawProgressBarModule() {
  float progressRate = (second % STAY_SECOND) / float(STAY_SECOND-1);
  /* ここから追加 */
  noStroke();
  fill(WHITE_COLOR);
  rect(0, height-PROGRESSBAR_HEIGHT, width, PROGRESSBAR_HEIGHT);
  fill(GREEN_COLOR);
  rect(0, height-PROGRESSBAR_HEIGHT, width * progressRate, PROGRESSBAR_HEIGHT);
  /* ここまで追加 */
}

横幅いっぱいに白色バーを表示し、その上にprogressRateに応じた横幅の緑色バーを上乗せしています。
関数が完成したので、drawModules()内で呼び出してみましょう。

DigitalSignage.pde

void drawModules() {
  if (nowPageID == 0) {
    drawFullImageModule(background);
    drawGridModule();
    drawPlaceholderModule();
  } else if (nowPageID == 1) {
    drawFullImageModule(adImage[0]);
  }
  drawDateModule();
  drawLocationModule();
  drawProgressBarModule(); /* 追加 */
}

追加したあとに実行してみると、1秒ごとに緑色の面積が増えていくようになっています。

最後に

これで、ページ切り替えの時間が分かる「ProgressBarModule」が実装できました。
次は、**現在の表示中のページが分かる「PageControlModule」**を実装してみましょう。