M5Stackでできること〜M5Stack用ディスプレイモジュール(HDMI出力)を使う

「M5Stack用ディスプレイモジュール」という製品を購入しました。

リンク

「M5Stack用ディスプレイモジュール」をM5Stack Basicなどに取り付け、HDMIケーブルでPCモニタなどと接続することで、M5Stackからの制御でPCモニタに文字や図形を表示することができるようになります。
一般的な外径5.5mm、内径2.1mm（センタープラス）のDCジャックも搭載されています。出力電圧9V〜24VのACアダプタをつなぐことで、M5Stackにも電源供給することができます。
その他、電源スイッチも付いており、ACアダプタからの電源供給をON/OFFできます。

M5Stackで何らかの処理を行い、その結果をLCD画面に表示したいというケースはよくあると思いますが、結果を大勢で確認したい時には、小さなLCD画面では不便です。
そのような場面では、本製品はとても有効だと思います。
デモや実機を用いたプレゼンなどの際にも、M5Stackの処理結果を大画面に表示できる本製品はとても役に立ちそうです。

リンク

早速、動作確認してみました。
今回は、M5Stack BasicのLCD画面と外付けのPCモニタに、文字列とJPEG画像を表示させてみたいと思います。

「M5Unified」ライブラリ（実際には「M5Unified」ライブラリと一緒にインストールされる「M5GFX」ライブラリ）に、本製品を使用するためのグラフィックスライブラリが含まれているので、あらかじめ「M5Unified」ライブラリをインストールしておきます。
Arduino IDEの「ツール」＞「ライブラリを管理…」でライブラリマネージャを開き、「M5Unified by M5Stack」をインストールします。

M5Stack Basicに「M5Stack用ディスプレイモジュール」を取り付けます。JPEG画像（msr_icon.jpg）が保存されているSDカードをM5Stack Basicに差し込んでおきます。
HDMIケーブルで「M5Stack用ディスプレイモジュール」とPCモニタをつなぎます。

スケッチは以下のとおりです。

#include "SD.h"
#include <M5ModuleDisplay.h>
#include <M5Unified.h>

void setup() {
  auto cfg = M5.config();
  M5.begin(cfg);

  while(!SD.begin(GPIO_NUM_4, SPI, 15000000)) {
    M5.Log.println("Card error.");
    delay(1);
  }

  // 画面表示
  int displayNumber = M5.getDisplayCount(); // 画面の数を取得
  for(int i=0; i<displayNumber; i++) {
    M5.Displays(i).setTextColor(TFT_BLACK); // 文字色を設定
    M5.Displays(i).setTextDatum(MC_DATUM);  // 文字の原点を設定
    M5.Displays(i).fillScreen(TFT_WHITE);   // 画面を塗りつぶし
    // 画面サイズを取得
    int w = M5.Displays(i).width();
    int h = M5.Displays(i).height();
    // 文字サイズ(倍率)を設定
    if(h >= 720) M5.Displays(i).setTextSize(6);
    else         M5.Displays(i).setTextSize(2);
    // 文字を表示
    String message = String(w) + " x " + String(h);
    M5.Displays(i).drawString(message, w/2, h/2, 4);
    // JPEG画像を表示
    if(h >= 720) M5.Displays(i).drawJpgFile(SD, "/msr_icon.jpg", w/20, h/20, 0, 0, 0, 0, 1.0, 1.0);
    else         M5.Displays(i).drawJpgFile(SD, "/msr_icon.jpg", w/20, h/20, 0, 0, 0, 0, 0.3, 0.3);
  }
}

void loop() {}

M5StackのLCD画面と外付けPCモニタでは画面サイズが異なるので、描画時の座標指定には絶対座標を使わず、画面サイズから計算するようにしています。
また文字や画像の大きさも画面サイズにあわせて調整しています。

結果はこのようになりました。