【Bラボデジタルサイネージ10】ページ切り替えの時間が分かる「ProgressBarModule」

![](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」**
11. [【Bラボデジタルサイネージ11】現在の表示中のページが分かる「PageControlModule」](https://qiita.com/ohayota/items/23acc993dca47286fffb)
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)


# 作るもの

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

![0038.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/27a0c0be-92ff-3b97-f0fe-ff30d724a797.png)

![0042.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/ab119241-c54d-a3a3-338b-28f5a127aca9.png)


# 実装準備

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

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

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

/* 略 */
```

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

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

# 塗りつぶす割合を算出

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

![0041.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/946b27fa-d6a1-e5fc-b91a-fa3fc2199f48.png)

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

![0042.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/5994b587-d1a8-81d1-02a1-0d7832c79ba7.png)

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

``` java:M_ProgressBar.pde
void drawProgressBarModule() {
  float progressRate = (second % STAY_SECOND) / float(STAY_SECOND-1); /* 追加 */
}
```

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

``` java: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()`内で呼び出してみましょう。

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

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

![0038.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/27a0c0be-92ff-3b97-f0fe-ff30d724a797.png)

![0042.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/ab119241-c54d-a3a3-338b-28f5a127aca9.png)


# 最後に

これで、ページ切り替えの時間が分かる「ProgressBarModule」が実装できました。
次は、**[現在の表示中のページが分かる「PageControlModule」](https://qiita.com/ohayota/items/23acc993dca47286fffb)**を実装してみましょう。

https://qiita.com/ohayota/items/23acc993dca47286fffb