Ｍ　はじめての M5StickC_Plus (2)　〜UIFowでプログラミング

ｂｙ　ｆｊｋ

　前回に引き続きUIFlowプログラミングを行った。なお、［・・］はブロックを表す。

1．ボタン入力と文字の表示　(内蔵電池の電圧表示）

画面に文字を表示するには、ラベル(Label)とグラフィック(Graphic)が使える。

・ラベルは文字が上書きされるが、グラフィックは文字が重ねて追加される。

　(a) テキスト"Hellow M5"を表示

�@ 左側のLabelを選びUI画面（機種画面）にドロップ

�A [UI／ラベル／ラベルlabel0に"Hello M5"を表示]をプログラム画面のSetupに結合

�B 右下の”Run"をクリックすると、画面に”Hello M5”と表示

※ テキスト"Hello M5"の代わりに他の文字列を入れてみてください

※ 漢字を表示するにはフォントに"Unicode16”を指定(★7/10追加）

「UI／ラベル」ブロック

（Labelで）テキスト表示プログラム

テキスト表示画面 漢字表示画面

　(b) タイトルバー付きで内蔵電池の電圧を表示する

上記(a)に引き続き、

�@ 左側のTitleを選びUI画面にドロップ

�A Title上でマウス右クリックし、Textに”Power"と入力

�B [ハードウェア／Power／Get battery voltage]をlabel0の変数にはめる

�C 左側のLableをUIマネージャーのlabel0の横にドロップ

�D Label1上でマウス右クリックし、Textに"V"と入力

�E 右下の”Run"をクリックすると、画面に電池電圧が表示

※ 電圧値と単位の表示がかぶる場合は、単位の表示位置をマウスで調整(補助線が表示されるので参考に）

「Power」ブロック	内臓電池電圧表示プログラム
タイトル設定	タイトルと電圧表示

　(c) Aボタンを押すと、内蔵電池の電圧を取り込み表示する

・タイトルバーを追加

�@ 左のTitleをUI画面にドロップすると、タイトルバーが追加される

�A タイトルtextを"Power"にする
　

・上記(b)のプログラムに、ボタン機能を追加する。

�@ [イベント／ボタン〜がwaspressedのとき]をプログラム画面にドロップ(Setupと離す）

�A [UI／ラベル／ラベルlabel0に〜を表示」を選び、ボタンA内にはめる

�B [ハードウェア／Power／Get battery voltage]をlabel0の変数にはめる

　※ 電圧の変化がないと値が変わらないのでBボタンを押すと電圧値をクリアする

�C [イベント／ボタン〜がwaspressedのとき]をプログラム画面にドロップ、ボタンを"B"に変更

�D [UI／ラベル／ラベルlabel0に〜を表示]を選び、テキストを"0.00"に変更

�E 右下の”Run"をクリックすると、画面に内蔵電池電圧が表示される

�F Bボタンを押すと、電圧値が"0.00"となる

�G Aボタンを押すと内蔵電池電圧が表示される

※ 数値の変化が判りやすいように、Bボタンが押されると、ラベルの色も変わるようにした

「イベント」ブロック

ボタン付き電圧表示プログラム

Bボタンを押すと

　

2．グラフィックの表示

　(d) 電池残量のグラフィック表示

上記(b)のプログラムに、電池残量表示アイコンをタイトルバー上に追加

�@ [変数／変数の作成]で”v電池”を宣言する（変数名に日本語が使える。Pythonにすると判りにくいが）

�A [関数／関数dosomething]をプログラム画面にドロップ(Setupとは結合しない）

�B [UI／ラベル／ラベルlabel0に〜を表示]を結合し、変数に［v電池］をはめる
　　※小数点以下4桁表示のため、[テキスト／"Ｖ電池"の小数点以下"4"桁までのテキスト]を追加

�C [グラフィック／四角形を・・]を結合し、（119,3）から（4.3)の四角を白で描く

�D [論理／もし〜であれば〜そうでなければ](if〜do〜else〜)を結合

※ stickCの電池は3.1〜4.1V程度で、3.0Vを下回ると電源が切れるので、4つの段階で表示
　・4.0V以上（枠：白、Fill：緑）、3,7V以上（枠：白、Fill4/1：黒、Fill4/3白）、
　　3.4V以上（枠：白、Fill1/2：黒、Fill1/2：黄）、3.4V未満(枠：白、Fill3/4：黒、Fill1/4：赤）
　・4.0V未満は中黒で白の枠を描いてから、各色の四角を描画
　・上記条件に合うように、[論理／もし〜であれば〜そうでなければ]を使ってブロックを結合

�E Setupには、[v電池]＝[Get battery voltage」、[関数／ｖBicon]を結合

�F ボタンAのブロックは、[v電池]＝[Get battery voltage]、[関数／ｖBicon]を結合。文字色の指定は削除

�G ボタンBのブロックはテスト用で、ボタンBを押すたびに表示電圧が変わる（ブロックの説明は省略）

�H Runを実行すると、電池の電圧と、その時のアイコンを表示

�I Aボタンを押すと現在の電圧を表示する
　

注）塗りつぶし(fill)はボーダー部を除いて実行される（ボーダーはフォアカラー色）ので、
　　図形の全てを塗りつぶすにはボーダー色を指定して、さらに描画する必要がある。

※ Pythonを使うと、以下のようにフォアカラーも同時に指定することができる
　　　　lcd.rect(117, 12, 8, 6, fillcolor=0xffff00, color=0xffff00)

電池容量グラフィック表示プログラム（vBat-i.m5f）

4.0V以上

3.7〜4.0V

3.4〜3.7V

3.4V未満

タイトルバーにアイコン表示

　

3．「転がるボール」（加速度センサー）

内部の加速度センサーを利用し、StickCを傾けると、傾いた方向にボールが転がる。
　

　(e) 内部加速度センサーの取得と表示

加速度値はそのまま表示することも出来るが、後段があるので一端変数に格納する

�@ 左のLabelからLabelを3個UI画面にドロップ

�A 加速度値を変数に格納したいので、[変数／作成]から、accX、accY、accZを宣言

�B 繰り返し表示したいので、[イベント／ずっと](Loop)をドロップ

�C [変数／〜を〜にする]をドロップ

�D 変数名に[accX]、変数に[ハードウェア／加速度＆ジャイロ／X軸の加速度]をはめる

�E [UI／ラベル／ラベル〜に〜を表示]をドロップ

�F ラベル名を label0 、変数に[accX]をはめる

�G 左のLableからLabelをUI画面の加速度値の表示前にドロップし、Textを"X:"に変更

�H 同様に、accY、accZについても、�C〜�Gを行う

�I ちらつき防止に、加速度データの取り込みにデレー時間を設けた

　・[タイマー／〜ミリ秒停止]をドロップし、数値を"500"に

�J Runを実行すると、xyz軸の加速度が表示される

「加速度＆ジャイロ」ブロック	加速度取得＆表示プログラム
「タイマー」ブロック	3軸加速度表示

　(f) 転がり落ちるボール

上記(e)のプログラムにボールを追加する

�@ 左のCircleアイコンから円をUI画面の（67，120）にドロップ(半径10）

�A ボールの位置を格納するため、変数posX、posYを宣言

�B [変数／posXを〜にする]を2つドロップし、変数に［数学／数値］をはめる

�C 上記で、[posX]＝67、[posY]＝120とする（UI画面上のボールの初期X、Y位置）

�D [変数／accXを〜にする]をドロップし、accXには[変数／X軸の加速度]をはめる

�E 同様に、accYに[変数／Y軸の加速度]、accZに[変数／Z軸の加速度]と�Dを繰り返す

�F [UI／ラベル／ラベルlabel0に〜を表示]をドロップ

�G [テキスト／〜の小数点以下"0"桁までのテキスト]をlabel0の変数にはめる

�H 上記の変数名にaccX、小数点以下桁数に"3"をセット

�I 同様に、label1にaccY、label2にaccZと�F〜�Hを行う（「複製」の利用が便利 ）

�J ボールの次の位置(posX、posY）を加速度値（accX、AccY）を加えて計算する

　※ 加速度値(単位はG）は小さいので定数倍(±20倍）している。
　　・ [変数／〜を〜増やす]をドロップ
　　・ 増分は整数でなければならないので[数学／整数に変換する]を変数にはめる
　　・ [数学／〜＋〜]ブロックを選んで［整数変換ブロック]の後に結合
　　・ [計算ブロック]の変数名にaccX、変数に"-20"をはめ、演算子を"×"に変更
　　・ Y方向(accY)も同様にブロックを作成する（但し定数倍の値は"20"）

�K ボールの位置が画面をはみ出さないようにチェック

　※ はみ出していたら、画面の中に収まるようにする
　　・ [論理／もし〜であれば〜そうでなければ〜](if〜do〜else〜)をドロップ
　　・ [論理／〜＝〜 ]を "もし"の後に結合
　　・ 変数名にposX、変数に"10"(ボールの半径）をはめ込み、比較演算子を"＜"に
　　・ [変数／posXを〜にする]を "であれば"に結合し、 [数学／数値］を選び、数値を"10"する
　　・ さらに、[論理／もし〜であれば]（if〜do〜）を選び、”そうでなければ”にはめる
　　・ [論理／〜＝〜 ]を "もし"の後に結合
　　・ 変数名にposX、変数に"125"(135−ボールの半径）をはめ込み、比較演算子を"＞"に
　　・ [変数／posXを〜にする]を "であれば"に結合し、[数学／数値]を選び、数値を"125"する

�L 同様に、posYについても範囲をチェックする（10＜posY＜230）

�M 新しく計算した位置にボールを描く
　　・ [UI／円形／円形からの中心位置をｘ〜ｙ〜に移動]をドロップ、posX/posYをはめる

�N デレータイムを"50" msに（ボールの移動速度を速くするため）

�O Runを実行すると、黄色いボールが傾けた本体の重力方向に移動する。

「転がり落ちるボール」プログラム（ballaction.m5f）

※ 右の例では、 　見やすくするため、 　文字色も指定した

本体を傾けると転がるボール

★ 表示加速度に軸名を表示したが、ボールがその上を通過すると、何故か文字が消えてしまう。
　再描画するように［ラベル〜の表示をshowに設定する］を追加したところ、消えなくなった。
　（加速度データは消えないが、ラベルの表示データが変わらない場合は再表示されないのかな？）

Ｗ　Wordのチップス　〜タブ設定

ｂｙ　ｆｊｋ

　（以下の記事はword2019で記述しています）
　Wordで文字に並びを綺麗にしたいことがある。この時に便利なのが「タブ」を使う方法である。
　Tabキーを押すとデフォルトで4文字単位の場所にカーソルが移動し、文字の位置合わせを行うことが出来るが、もっと細かく指定したときは、�@「ルーラを使う」方法と、�A「ダイアログボックス」を使う方法がある。

　1．ルーラーを使う場合

�@ タブセレクターをクリックしタブの種類を選択。

�A 水平ルーラーをクリックしてタブを設定する。

�B タブ位置を間違えた時は、タブマークをルーラー上で左右に移動し調節。

�C 不要なタブは、ルーラーから下にドラッグすると削除できる。

※ ルーラが非表示の場合、[表示][ルーラー]でチェックを付ける

※ セレクターは、クリックするたびに、「左揃え」「中央揃え」「右揃え」「小数点揃え」「縦棒」「一行目のインデント」「ぶら下げインデント」の順に切り替わる。
　

　2．ダイアログボックスを使う場合

�@ [ホーム]、[段落]の右下の矢印をクリック

�A 左下の「タブ設定」をクリック

�B タブ位置に行の先頭からの位置を入力

�C タブの種類を5種類から選択

�D リーダー（タブ間の空白を表示する線）を5種類から選択

�E 「設定」をクリック

�F 必要であれば�B〜�Eを繰り返す

�G 全ての設定が終わったならば、「OK」

※ 規定のタブ間隔（4文字）を変更したい場合は、規定値を変更

※ ルーラー上のタブをクリックしてもタブ設定画面となる。

「段落」ダイアログ

「タブ設定」ダイアログ

タブ設定したword画面

---

※ 本レポートの参考・利用は、あくまでも自己責任でお願いします。

---

StickC_Plus〜UIFlow Wordのタブ設定

---