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

作るもの

ProgressBarModuleの上に、「現在表示しているページが何ページ目か」を示す点が表示されます。

実装準備

新しくファイルM_PageControl.pdeを作ります。
ファイルの中で、関数drawPageControlModule()を作ります。

M_PageControl.pde

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

点を描画

PageConteolModuleの点は、存在するページの数だけ描画されます。
まずは、存在するページ数だけ処理を繰り返すfor文を書きます。

M_PageControl.pde

void drawPageControlModule() {
  /* ここから追加 */
  for (int page = 0; page < PAGE_ALL_COUNT; page++) {
  }
  /* ここまで追加 */
}

点が描画される座標を定義します。
y座標はすべての点で変わりませんが、x座標は30px間隔でずれるものとします。

M_PageControl.pde

void drawPageControlModule() {
  for (int page = 0; page < PAGE_ALL_COUNT; page++) {
    /* ここから追加 */
    float x = width/2 + 30 * (page-(PAGE_ALL_COUNT-1)/2.0);
    float y = 1020;
    /* ここまで追加 */
  }
}

いま表示されているページの部分のみ、緑の枠がついた白い点として描画します。

M_PageControl.pde

void drawPageControlModule() {
  for (int page = 0; page < PAGE_ALL_COUNT; page++) {
    float x = width/2 + 30 * (page-(PAGE_ALL_COUNT-1)/2.0);
    float y = 1020;
    /* ここから追加 */
    if (page == nowPageID) {
      fill(WHITE_COLOR);
      stroke(GREEN_COLOR);
      strokeWeight(5);
      circle(x, y, 20);
    } else {
      fill(GREEN_COLOR);
      noStroke();
      circle(x, y, 15);
    }
    /* ここまで追加 */
  }
}

これで関数ができたので、drawModules()内で呼び出すように変更します。

DigitalSignage.pde

/* 略 */

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

/* 略 */

ここで実行してみると、ProgressBarModuleの上に点が表示され、ページが切り替わると連動するようになります。

最後に

これで、現在の表示中のページが分かる「PageControlModule」が実装できました。
次は、**現在の天気を表示する「WeatherRModule」**を実装してみましょう。