More than 1 year has passed since last update.

株式会社函館ラボラトリ

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

Last updated at 2022-07-05Posted at 2021-10-22

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

作るもの

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

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

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

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

DigitalSignage.pde

enum Area {
  area1, 
  area2, 
  area3, 
  area4, 
  area5, 
  area6, 
  area7, 
  area8
}

/* 略 */

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

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

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

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座標も同様に定義します。

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により画像を生成し表示するプログラムの例です。

例

// 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を使い、グリッドを表示する画像を作成します。

グリッドの生成と表示

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

DigitalSignage.pde

PGraphics grid;

/* 略 */

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

Initialize.pde

/* 略 */

void initializeGrid() {
}

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

Initialize.pde

void initialize() {
  initializeGrid(); /* 追加 */
}

void initializeGrid() {
}

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

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

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を使っています。

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

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

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

M_Grid.pde

void drawGridModule() {
  image(grid, 0, 0);
}

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

DigitalSignage.pde

/* 略 */

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

/* 略 */

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

最後に

これでグリッドが表示できるようになりました。
次は、**レイアウトの基準になる枠を表示する「PlaceholderModule」**を作ってみましょう。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up