四角形を配置する

左上にあるRectアイコンをM5Stack画面内にドラッグ＆ドロップします。

四角形が配置されます。四角形の位置やサイズを細かく設定するには配置された四角形をクリックします。

内容を編集するポップアップダイアログが表示されます。

borderColorの欄をクリックすると四角形の枠の色を変更することもできます。

backgroundColorの欄をクリックすると四角形の色を変更することもできます。

widthの欄は四角形の横幅、heightの欄は四角形の縦幅になります。なお、四角形の位置は配置した四角形をドラッグするか、このx欄、y欄に座標値を入力します。座標は画面左上が原点(0,0)で右下に行くに従って大きくなります。最大値はX座標が319、Y座標が239です。

編集後の状態です。再度配置された四角形をクリックすると編集することができます。
ここで作成したタイトルはUIカテゴリ内にある四角形のカテゴリをクリックすると対応するブロックが表示されます。

実行ボタンをクリックします。

M5Stackの画面に四角形が表示されます。