【Bラボデジタルサイネージ4】レイアウトの基準になるグリッドを表示する「GridModule」

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


# 作るもの

いろいろなモジュールを配置するときの基準となる座標を示すための「グリッド」を表示できるようにします。
完成後は下のようなグリッドが表示されます。

![0003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/7d7f277c-c6dc-b500-8386-2b83b05d1144.png)


# モジュール表示に使う基準座標を定める

https://qiita.com/ohayota/items/41a746d2258673726541

上の記事で挙げたモジュールのうち、**RM**に分類されるものが配置できる場所を基準にします。
8つのエリアがあり、それぞれに番号を振ります。

![0038e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/fbc1ffa1-5fa7-67eb-caee-6d9a0d1efa53.png)

このエリアをあらわすプログラムを書きます。
enum（列挙型）を使い、8つのエリアを列挙します。

``` java:DigitalSignage.pde
enum Area {
  area1, 
  area2, 
  area3, 
  area4, 
  area5, 
  area6, 
  area7, 
  area8
}

/* 略 */
```

これは後に、座標に関わる関数などで使用します。

この8つのエリアの「左端のx座標」「上端のy座標」を示すように直線を引くと、下の図のようになります。

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

これらの直線が引かれている座標を、関数を使って定義します。
まずはx座標から定義します。

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

int layoutGuideX(Area area) {
  if (area == Area.area1 || area == Area.area5) return 90;
  if (area == Area.area2 || area == Area.area6) return 535;
  if (area == Area.area3 || area == Area.area7) return 980;
  if (area == Area.area4 || area == Area.area8) return 1425;
  return 0;
}
```

y座標も同様に定義します。

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

int layoutGuideY(Area area) {
  if (area == Area.area1 || area == Area.area2 ||
      area == Area.area3 || area == Area.area4) return 130;
  if (area == Area.area5 || area == Area.area6 ||
      area == Area.area7 || area == Area.area8) return 560;
  return 0;
}
```

定義した`layoutGuideX`と`layoutGuideY`を使い、グリッドを作ります。
ここでグリッドを作るには、Processingの「PGraphics」も使います。

# 「PGraphics」の使い方

「PGraphics」を使うと、画像を生成することができます。
PGraphicsにより画像を生成し表示するプログラムの例です。

``` java:例
// 900px四方の画像を生成する
PGraphics pg = createGraphics(900, 900);

// PGraphicsを編集するには、beginDraw()とendDraw()で囲む
pg.beginDraw();
pg.rect(0, 0, 100, 100); // このようにしてPGraphics内に図形などを描いていく
pg.endDraw();

// (0,0)を基準にPGraphicsを表示する
image(pg, 0, 0);
```

このPGraphicsを使い、グリッドを表示する画像を作成します。


# グリッドの生成と表示

グリッドをあらわす変数を宣言します。

``` java:DigitalSignage.pde
PGraphics grid;

/* 略 */
```

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

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

void initializeGrid() {
}
```

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

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

void initializeGrid() {
}
```

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

![0003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/7d7f277c-c6dc-b500-8386-2b83b05d1144.png)

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

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

void initializeGrid() {
  grid = createGraphics(width, height);
  
  grid.beginDraw();
  
  grid.colorMode(HSB, 360, 100, 100, 100);
  grid.stroke(0, 0, 50);
  grid.strokeWeight(3);
  
  // 垂直の基準線
  grid.line(layoutGuideX(Area.area1), 0, layoutGuideX(Area.area1), height);
  grid.line(layoutGuideX(Area.area2), 0, layoutGuideX(Area.area2), height);
  grid.line(layoutGuideX(Area.area3), 0, layoutGuideX(Area.area3), height);
  grid.line(layoutGuideX(Area.area4), 0, layoutGuideX(Area.area4), height);
  // 水平の基準線
  grid.line(0, layoutGuideY(Area.area1), width, layoutGuideY(Area.area1));
  grid.line(0, layoutGuideY(Area.area5), width, layoutGuideY(Area.area5));
  
  grid.endDraw();
}
```

画面と同じ大きさの画像を生成し、グレーの線を6本引いています。
線を引くときに呼び出している下記の記述の例では、関数`layoutGuideX`を使っています。

``` java
  grid.line(layoutGuideX(Area.area1), 0, layoutGuideX(Area.area1), height);
```

`layoutGuideX(Area.area1)`という記述は、「エリア1の左端のx座標を返す」という意味になります。
このようにして、`layoutGuideX`や`layoutGuideY`を使い、あらかじめ定めてある座標を使うことができるようになっています。
これで、グリッドの生成ができました。

続いて、グリッドを表示する処理を作ります。
GridModule用の新しいファイル`M_Grid.pde`を作ってください。
その中に関数`drawGridModule()`を作ります。

``` java:M_Grid.pde
void drawGridModule() {
  image(grid, 0, 0);
}
```

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

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

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

/* 略 */
```

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

![0003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/7d7f277c-c6dc-b500-8386-2b83b05d1144.png)


# 最後に

これでグリッドが表示できるようになりました。
次は、**[レイアウトの基準になる枠を表示する「PlaceholderModule」](https://qiita.com/ohayota/items/f52a10660009794afd9f)**を作ってみましょう。

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