【Bラボデジタルサイネージ11】現在の表示中のページが分かる「PageControlModule」

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

1. 【Bラボデジタルサイネージ1】Processing+ラズパイでデジタルサイネージを作る！
2. 【Bラボデジタルサイネージ2】ラズパイ初期設定
3. 【Bラボデジタルサイネージ3】準備プログラム作成＆機能実現の方針決定
4. 【Bラボデジタルサイネージ4】レイアウトの基準になるグリッドを表示する「GridModule」
5. 【Bラボデジタルサイネージ5】レイアウトの基準になる枠を表示する「PlaceholderModule」
6. 【Bラボデジタルサイネージ6】画像を全画面表示する「FullImageModule」
7. 【Bラボデジタルサイネージ7】ページの自動切り替え
8. 【Bラボデジタルサイネージ8】設置されている場所の名前を表示する「LocationModule」
9. 【Bラボデジタルサイネージ9】現在の時間を表示する「DateModule」
10. 【Bラボデジタルサイネージ10】ページ切り替えの時間が分かる「ProgressBarModule」
11. 【Bラボデジタルサイネージ11】現在の表示中のページが分かる「PageControlModule」（本記事）
12. 【Bラボデジタルサイネージ12】現在の天気を表示する「WeatherRModule」
13. 【Bラボデジタルサイネージ13】直近2件のバス時刻表を表示する「BusRModule」
14. 【Bラボデジタルサイネージ14】ごみ出しカレンダーを表示する「GomiRModule」
15. 【Bラボデジタルサイネージ15】（発展編）ツイートを表示する「TwitterRModule」
16. 【Bラボデジタルサイネージ16】開店／閉店を表示する「OpenCloseRModule」
17. 【Bラボデジタルサイネージ17】部屋の温度を表示する「TemperatureRModule」
18. 【Bラボデジタルサイネージ18】部屋の明るさを表示する「BrightnessRModule」
19. 【Bラボデジタルサイネージ19】起動画面を表示する「LaunchingScreenModule」
20. 【Bラボデジタルサイネージ20】RModuleの影を実装

作るもの

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」**を実装してみましょう。