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

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

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

本記事は、[株式会社 函館ラボラトリ](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」（本記事）**
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)


# 作るもの

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

![0006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/6fa2b0a6-7f02-c4bf-304c-b6959e1f443f.png)


# 画像を読み込む

![background.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/7d8c693f-8773-0e0d-b5bf-a1c94d924b1a.jpeg)

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

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

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

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

PImage background; /* 追加 */

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

/* 略 */
```

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

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

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

/* 略 */
```

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

``` java:M_FullImage.pde
void drawFullImageModule(PImage pImage) {
  image(pImage, 0, 0, width, height);
}
```

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

``` java:DigitalSignage.pde
void draw() {
  drawFullImageModule(background); /* background(0, 0, 100);を削除し追加 */
  drawGridModule();
  drawPlaceholderModule();
}
```

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

![0015.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/d1833a6d-ac90-25e0-300b-6182b1fdb0b4.png)

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


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

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

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

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

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

![0083.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/434c495f-b053-dc63-0aff-11b30deda64c.png)

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

![0139.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/760fc207-2042-9ef6-7d50-03b0c3387cfa.png)

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

``` java: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`は、切り取られたあとのサイズを示します。

``` java:例
pImageCut(background, CENTER, CENTER, 1920, 1080);
```

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

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

``` java: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`を読み込む処理を変更します。

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

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

/* 略 */
```

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

![0006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/368192/6fa2b0a6-7f02-c4bf-304c-b6959e1f443f.png)

# 最後に

これで背景画像が表示できるようになりました。
次は、**[ページの自動切り替え](https://qiita.com/ohayota/items/9d2c28f9cbf2f559be31)**を実装してみましょう。

https://qiita.com/ohayota/items/9d2c28f9cbf2f559be31