環境色をリアルタイムに表示する（カラーセンサー）

M5 Stack本体のPORT A（ポートA）にカラーセンサーを接続します。環境センサーはI2C通信のためポートAに接続します。

矢印で示すUnitsの文字の下にある「＋」のボタンをクリックします。

M5 Stackで使えるモジュールの一覧が表示されます。この中からカラーセンサーを選択します。カラーセンサーはCOLORという名前で表示されています。画面に見当たらない場合はスクロールさせると出てきます。

カラーセンサー(COLOR)のアイコンをクリックします。クリックするとチェックマークが表示されます。次に接続したポートであるAを選択します。
選択したら「OK」ボタンをクリックします。

追加されるとUnitsの文字の下にカラーセンサー(COLOR)のアイコンが表示されます。また、Unitsカテゴリ内に「Color」のカテゴリが追加されます。このカテゴリ内に使用できるブロックが表示されます。

LabelのアイコンをM5画面上にドラッグドロップします。ラベル文字に赤の輝度、緑の輝度、青の輝度を表示します。 なお、ラベルは赤の輝度、緑の輝度、青の輝度を表示するため3つを用意します。

Labelの名前をlabel1にします。fontは少し大きめの文字で表示されるフォントを選択します。

2番目のラベルを配置します。 Labelの名前をlabel2にします。fontは少し大きめの文字で表示されるフォントを選択します。

3番目のラベルを配置します。 Labelの名前をlabel3にします。fontは少し大きめの文字で表示されるフォントを選択します。

ラベルが3つ配置されていればUI部分はできあがりです。

ブロックを以下のように組み立てます。この段階では文字しか表示されません。この後、カラーセンサーから読み出した値を表示するブロックをはめこみます。

赤の輝度、緑の輝度、青の輝度のブロックは「Color」のカテゴリにあります。

赤の輝度、緑の輝度、青の輝度を取得するブロックをそれぞれのラベルに表示されるようにはめこみます。

実行ボタンをクリックします。するとM5 Stackにプログラムが転送され実行されます。

環境色が画面に表示されます。もし、画面にエラーが表示される場合は、M5 Stackを最新版のファームウェアにアップデートしてください（ver 1.0.1ではエラーで動作しません）。また、環境色の値が変化しない場合はカラーセンサー内に色のついた紙などを入れてみてください。