【Bラボデジタルサイネージ5】レイアウトの基準になる枠を表示する「PlaceholderModule」

![](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」（本記事）**
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」](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)


# 作るもの

モジュールを配置する場所の「枠」を表示できるようにします。
完成後は下図のような枠が表示されます。

![0007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/d425ab4b-fed5-d596-a231-799a28f73912.png)


# モジュールの高さと幅を定める

モジュール（**RM**）の大きさは「S」「M」「L」の三段階に定義します。
下図の「角丸四角」1個を大きさの単位として説明します。

![0007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/d425ab4b-fed5-d596-a231-799a28f73912.png)

完成時のスクリーンショットを例にします。

![](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)

- Sにあたるのが「室温」「明るさ」の部分で、「角丸四角」**1個分**
- Mにあたるのが「現在の天気」の部分で、「角丸四角」**2個分**
- Lにあたるのが「函館バス」の部分で、「角丸四角」**4個分**

以降、「S」「M」「L」は、角丸四角がそれぞれ1、2、4個分と覚えておいてください。

このサイズをあらわすプログラムを書きます。
enum（列挙型）を使い、3つのサイズを列挙します。

``` java:DigitalSignage.pde
enum Size {
  S, 
  M, 
  L
}
```

定義したサイズを使い、モジュールの幅や高さをあらわす関数を定義します。
まずはモジュールの幅から定義します。

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

int moduleWidth(Size size) {
  if (size == Size.S) return 405;
  if (size == Size.M || size == Size.L) return 850;
  return 0;
}
```

同様に高さも定義します。

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

int moduleHeight(Size size) {
  if (size == Size.S || size == Size.M) return 400;
  if (size == Size.L) return 830;
  return 0;
}
```

定義した関数`moduleWidth`と`moduleHeight`を使い、枠を作ります。
「GridModule」のときと同様に、「PGraphics」を使います。

# 枠の生成と表示

枠をあらわす変数を宣言します。

``` java:DigitalSignage.pde
PGraphics grid;
PGraphics placeholder; /* 追加 */

/* 略 */
```

角丸の四角を描画するため、角の丸さを定義します。

``` java:DigitalSignage.pde
PGraphics grid;
PGraphics placeholder;

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

/* 略 */
```

`MODULE_RECT_ROUND`は、角丸の四角を描画するときに、関数`rect`の第5引数で使います。

``` java:例
rect(0, 0, 100, 100, MODULE_RECT_ROUND);
```

`Initialize.pde`内に、枠作成用の新しい関数を作ります。

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

void initializePlaceholder() {
}
```

この関数を`initialize()`内で呼び出すようにします。

``` java:Initialize.pde
void initialize() {
  initializeGrid();
  initializePlaceholder(); /* 追加 */
}

/* 略 */
```

これで、枠を生成する処理は`initializePlaceholder()`内に追記すれば良い状態になりました。
再掲しますが、`initializePlaceholder()`で生成したい画像は下図です。

![0007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/d425ab4b-fed5-d596-a231-799a28f73912.png)

この画像を生成する処理を書きます。

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

void initializePlaceholder() {
  placeholder = createGraphics(width, height);
  
  placeholder.beginDraw();
  
  placeholder.colorMode(HSB, 360, 100, 100, 100);
  for (Area area: Area.values()) {
    // モジュール配置エリアに角丸四角の枠を描く
    placeholder.noFill();
    placeholder.stroke(0, 0, 50);
    placeholder.strokeWeight(5);
    placeholder.rect(layoutGuideX(area), layoutGuideY(area),
                     moduleWidth(Size.S), moduleHeight(Size.S),
                     MODULE_RECT_ROUND);
  }
  
  placeholder.endDraw();
}
```

for文（拡張for文と呼ぶ）を使うことでエリアの個数回（8回）処理を繰り返され、グレーの枠が8つ描画されています。
枠は「S」サイズを基準に描画されています。

続いて、枠を表示する処理を作ります。
PlaceholderModule用の新しいファイル`M_Placeholder.pde`を作ってください。
その中に関数`drawPlaceholderModule()`を作ります。

``` java:M_Placeholder.pde
void drawPlaceholderModule() {
  image(placeholder, 0, 0);
}
```

関数`image`を使い、すでに生成してある`placeholder`を描画する関数です。
あとはこの`drawPlaceholderModule()`を呼び出すようにすれば、枠が表示されるようになります。

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

void draw() {
  background(0, 0, 100);
  drawGridModule();
  drawPlaceholderModule(); /* 追加 */
}

/* 略 */
```

ここまで記述したら、一度実行してみましょう。
下図のように出力されれば成功です。

![0008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/e07eb854-5d99-cba7-cfb8-1de632f0523a.png)



# 最後に

これでグリッドと枠まで表示できるようになりました。
次は、**[画像を全画面表示する「FullImageModule」](https://qiita.com/ohayota/items/4a9c8423459c251f4911)**を作ってみましょう。

https://qiita.com/ohayota/items/4a9c8423459c251f4911