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

![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fuser-images.githubusercontent.com%2F29194025%2F137117015-af05fe4f-7c32-4e38-876f-e153ff2f2f7d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&w=1400&fit=max&s=2bbf46fb5c1d8dec16f2fcb5d089fde2)

https://github.com/ohayota/BLabo-digital-signage

本記事は、[株式会社 函館ラボラトリ](http://www.hakolab.co.jp)が運営する「[Bラボ](http://www.hakolab.co.jp/b-lab/index.html)」における、大人向け「看板アプリ（デジタルサイネージ）を作るコース」用教材テキストです。

http://www.hakolab.co.jp/b-lab/index.html

1. [【Bラボデジタルサイネージ1】Processing+ラズパイでデジタルサイネージを作る！](https://qiita.com/ohayota/items/f4aa3e1b452060eb52ad)
2. [【Bラボデジタルサイネージ2】ラズパイ初期設定](https://qiita.com/ohayota/items/88fbcf177e6606311efb)
3. [【Bラボデジタルサイネージ3】準備プログラム作成＆機能実現の方針決定](https://qiita.com/ohayota/items/41a746d2258673726541)
4. [【Bラボデジタルサイネージ4】レイアウトの基準になるグリッドを表示する「GridModule」](https://qiita.com/ohayota/items/df704f523b5aa4dbb180)
5. [【Bラボデジタルサイネージ5】レイアウトの基準になる枠を表示する「PlaceholderModule」](https://qiita.com/ohayota/items/f52a10660009794afd9f)
6. [【Bラボデジタルサイネージ6】画像を全画面表示する「FullImageModule」](https://qiita.com/ohayota/items/4a9c8423459c251f4911)
7. [【Bラボデジタルサイネージ7】ページの自動切り替え](https://qiita.com/ohayota/items/9d2c28f9cbf2f559be31)
8. [【Bラボデジタルサイネージ8】設置されている場所の名前を表示する「LocationModule」](https://qiita.com/ohayota/items/046b361d945a709c4605)
9. [【Bラボデジタルサイネージ9】現在の時間を表示する「DateModule」](https://qiita.com/ohayota/items/6b80137e33bfb4172de6)
10. [【Bラボデジタルサイネージ10】ページ切り替えの時間が分かる「ProgressBarModule」](https://qiita.com/ohayota/items/9f3b6f9f32b7d93ef2a7)
11. **【Bラボデジタルサイネージ11】現在の表示中のページが分かる「PageControlModule」（本記事）**
12. [【Bラボデジタルサイネージ12】現在の天気を表示する「WeatherRModule」](https://qiita.com/ohayota/items/d9b1d21037dcedcfd78c)
13. [【Bラボデジタルサイネージ13】直近2件のバス時刻表を表示する「BusRModule」](https://qiita.com/ohayota/items/93d7c9b5328188b3c5b6)
14. [【Bラボデジタルサイネージ14】ごみ出しカレンダーを表示する「GomiRModule」](https://qiita.com/ohayota/items/40ed5db352a688637f83)
15. [【Bラボデジタルサイネージ15】（発展編）ツイートを表示する「TwitterRModule」](https://qiita.com/ohayota/items/6367fad7beaf9ad9ea1c)
16. [【Bラボデジタルサイネージ16】開店／閉店を表示する「OpenCloseRModule」](https://qiita.com/ohayota/items/284b5c7e7101f602016f)
17. [【Bラボデジタルサイネージ17】部屋の温度を表示する「TemperatureRModule」](https://qiita.com/ohayota/items/386c27a021601fb3ccfd)
18. [【Bラボデジタルサイネージ18】部屋の明るさを表示する「BrightnessRModule」](https://qiita.com/ohayota/items/76279927b4ef35eaf628)
19. [【Bラボデジタルサイネージ19】起動画面を表示する「LaunchingScreenModule」](https://qiita.com/ohayota/items/0b6bdeda68c36707f762)
20. [【Bラボデジタルサイネージ20】RModuleの影を実装](https://qiita.com/ohayota/items/57242f18653ccf7eb83b)


# 作るもの

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

![0020.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/a2b5fa32-9d66-97c6-1975-34d39fa5c43c.png)


# 実装準備

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

``` java:M_PageControl.pde
/* ここから追加 */
void drawPageControlModule() {
}
/* ここまで追加 */
```


# 点を描画

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

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

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

``` java: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;
    /* ここまで追加 */
  }
}
```

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

``` java: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()`内で呼び出すように変更します。

``` java:DigitalSignage.pde
/* 略 */

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

/* 略 */
```

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

![0020.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/a2b5fa32-9d66-97c6-1975-34d39fa5c43c.png)

![0871.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/86b33301-6fa9-7f64-7a5f-24cb9c5411f1.png)

# 最後に

これで、現在の表示中のページが分かる「PageControlModule」が実装できました。
次は、**[現在の天気を表示する「WeatherRModule」](https://qiita.com/ohayota/items/d9b1d21037dcedcfd78c)**を実装してみましょう。

https://qiita.com/ohayota/items/d9b1d21037dcedcfd78c