More than 1 year has passed since last update.

株式会社函館ラボラトリ

【Bラボデジタルサイネージ6】画像を全画面表示する「FullImageModule」

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

（本記事は、10/22現在執筆中です。）

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

作るもの

読み込んだ画像を画面全体に表示する機能を作ります。
完成後は背景画像が表示できるようになります。

画像を読み込む

まずは、背景画像として表示したい画像を用意し（上図は例です）、「background.jpg」という名前に変更します。
（.png形式など別の形式の場合は、.jpg形式に変換してください。）
背景画像は1920x1080px以上のサイズが必要です。

Processingの画面上のタブで、「スケッチ > スケッチフォルダーを開く」を選ぶと、開いている.pdeファイルが一覧で表示されます。
これと同じ階層に「data」フォルダを作り、表示したい画像を「data」フォルダの直下においてください。（ドラッグ＆ドロップ）

次に、Processingで画像「background.jpg」を読み込みます。
読み込んだ画像を保存するための変数backgroundを用意します。

DigitalSignage.pde

/* 略 */

PImage background; /* 追加 */

void settings() {
  size(1920, 1080);
  //fullScreen();
}

/* 略 */

backgroundへ画像を読み込みます。
setup()内に読み込むための処理を記述します。

DigitalSignage.pde

/* 略 */

void setup() {
  frameRate(1);
  noCursor();
  colorMode(HSB, 360, 100, 100, 100);
  
  background = loadImage("background.jpg"); /* 追加 */
  
  initialize();
}

/* 略 */

これで画像が読み込めるようになったので、backgroundを全画面表示する処理を書きます。
新しいファイルM_FullImage.pdeを作成し、その中に関数drawFullImageModuleを作ります。

M_FullImage.pde

void drawFullImageModule(PImage pImage) {
  image(pImage, 0, 0, width, height);
}

関数が作れたので、関数draw()で呼び出します。

DigitalSignage.pde

void draw() {
  drawFullImageModule(background); /* background(0, 0, 100);を削除し追加 */
  drawGridModule();
  drawPlaceholderModule();
}

この時点で実行してみましょう。

これで全画面表示が出来ていますね。
しかし何か違和感がありませんか？

元の画像が縦／横に引き伸ばされている場合の対処

出力結果の「違和感」というのは、今回の例では**「元の画像に比べて、表示された画像が横に引き伸ばされている」**ことです。
これは、元の画像が16:9の比率でない場合に起こります。
元の画像が16:9の比率でない場合には、16:9の比率になるよう切り取ることが必要になります。

本テキストで使っているbackground.jpgの解像度は2048x1536、比率にして4:3になっています。
この画像から、解像度1920x1080、比率にして16:9になるように切り出した画像を使えるよう、新しい関数を定義します。

関数を実装するにあたり、下図のような方針にします。
仮に、画像の真ん中から1920x1080だけ切り取るとします。

まず横方向に1920pxだけ確保し（赤くなっている部分）、この部分だけにします。

次に縦方向に1080pxだけ確保し（赤くなっている部分）、この部分だけにします。

このようにして、1920x1080の画像を得ます。
画像を必要な部分だけ切り抜くには、PImageの関数getが使えます。
画像を切り抜く関数として、PImage型の変数を返す関数pImageCutを作ります。

DigitalSignage.pde

/* 略 */

PImage pImageCut(PImage image, int modeX, int modeY, int afterWidth, int afterHeight) {
  return image;
}

modeXやmodeYは、画像を切り取るときにどこを基準に切り取るのかを指します。
Processingに標準で用意されている値である、TOP BOTTOM CENTER LEFT RIGHTを使います。
たとえばmodeXにCENTERが指定されていた場合には、真ん中が切り取られます。
modeXにLEFTが指定されていれば、ぴったり左端から切り取られます。
modeYについても同様の考え方です。

afterWidthとafterHeightは、切り取られたあとのサイズを示します。

例

pImageCut(background, CENTER, CENTER, 1920, 1080);

たとえば上のように書いた場合、「backgroundという画像が、真ん中を基準にして、1920x1080のサイズで返ってくる」という意味になります。

画像を切り取る処理は、PImageの関数getを使って書くと、このように書けます。

DigitalSignage.pde

/* 略 */

PImage pImageCut(PImage image, int modeX, int modeY, int afterWidth, int afterHeight) {
  /* ここから追加 */
  int w = image.width;
  int h = image.height;
  
  if (modeX == LEFT) image = image.get(0, 0, afterWidth, h);
  if (modeX == CENTER) image = image.get(w/2-afterWidth/2, 0, afterWidth, h);
  if (modeX == RIGHT) image = image.get(w-afterWidth, 0, afterWidth, h);
  
  if (modeY == TOP) image = image.get(0, 0, afterWidth, afterHeight);
  if (modeY == CENTER) image = image.get(0, h/2-afterHeight/2, afterWidth, afterHeight);
  if (modeY == BOTTOM) image = image.get(0, h-afterHeight, afterWidth, afterHeight);
  /* ここまで追加 */
  
  return image;
}

返り値のimageで、切り取られた画像が返ってきます。
関数pImageCutを実装したので、使って画像を正しい比率で表示できるようにしましょう。
setup()内のbackground.jpgを読み込む処理を変更します。

DigitalSignage.pde

/* 略 */

void setup() {
  frameRate(1);
  noCursor();
  colorMode(HSB, 360, 100, 100, 100);
  
  background = pImageCut(loadImage("background.jpg"), CENTER, CENTER, width, height); /* 変更 */
  
  initialize();
}

/* 略 */

書き換えたら再度実行してみましょう。
今度は、背景画像が正しい出力結果になっているはずです。

最後に

これで背景画像が表示できるようになりました。
次は、**ページの自動切り替え**を実装してみましょう。

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