はつねの日記

Kinect, Windows 10 UWP, Windows Azure, IoT, 電子工作

.NET nanoFrameworkでM5StickC Plusの時刻合わせをしてみる

前回

hatsune.hatenablog.jp

前回は7セグメントでの数字表示の最適化について説明しました。
今回は、その最適化を活用して「時刻合わせ」および「時刻表示」について説明します。

事前準備

Install the nanoFramework firmware

M5StickC PlusにはnanoFrameworkは標準インストールされていないので、nanoFrameworkをインストールします。

接続ポート番号の確認

USBでM5StickC PlusをPCに接続したら、USB Serial Portのポート番号を確認します。今回の環境では「COM6」が該当しました。

Flasherアプリケーションのインストール

OSの[スタート]メニューから「Developer PowerShell for VS2022」を起動します。

dotnet tool install --global nanoff

nanoFrameworkfファームウェアをインストール

M5StickC Plusをターゲットにして「COM6」経由でnanoFrameworkをアップロードします。

nanoff --target M5StickCPlus --update --serialport COM6

Visual Studioの準備

Visual Studioを機能拡張する

Visual Studioには.NET nanoFramework Extensionをインストールして機能拡張しておきます。
この機能拡張によりnanoFrameworkアプリのテンプレートが追加されます。
このテンプレートで作成したプロジェクトには、NuGetから自動的に「nanoFramework.CoreLibrary」ライブラリが追加されています。

「nanoFramework.M5StickCPlus」ライブラリを追加する

M5StickC Plusの画面などハードウェアにアクセスするために、M5StickC Plus用のライブラリを追加します。

ここまでが、M5StickC Plusを使うアプリ開発を行う上での共通の事前準備となります。

横表示

.NET nanoFrameworkでは画面の回転(ローテート)は、まだサポートされていないのでコードで対応します。

コードの変更部分は「Screen.Write」メソッドで描画するushort配列への格納時のこの図にあるような縦横変換を実施します。

バッファへの格納の縦横変換対応

Buffer[x + y * Width] = color;

となっているところを次のようにします。

Buffer[(Height - y) + x * Height] = color;

スクリーンへの描画の縦横変換対応

Screen.Write((ushort)x, (ushort)y, Width, Height, Buffer);

となっているところを次のようにします。

Screen.Write((ushort)(135 - Height - y), (ushort)x, Height, Width, Buffer);

実行結果

www.youtube.com

4桁表示

今回のサンプルは「分秒」の4桁を表示します。
そこで「描画の最適化」「横表示」に加えて「4桁表示の最適化」についても検討します。

4桁表示の最適化

1桁の7セグメント表示を位置をずらしながら4回描画すれば4桁表示は可能です。
しかしその方法では1桁ずつ描画しているのがやはり分かってしまいます。
そこで1桁の時と同様に「1桁」「余白」「1桁」「余白」「1桁」「余白」「1桁」のような感じでushort配列の中に描画してからScreenWriteで4桁分の矩形に描画します。

数値を4桁化して描画する

gist.github.com
今回、余白は5dotとしているので、余白込みの幅は次のように定数設定しています。

const int DigitsWidth = Width + 5;

ここをかえれば余白の変更が可能です。

ushort配列にずらしながら格納する

ループの中でOffsetを「DigitsWidth * Height」ずつ増分していますがこの「Offset」はushort配列に描画するときの位置決めに使用しています。
gist.github.com
これで、1桁描画するごとに「DigitsWidth * Height」の領域をスキップした位置に描画開始位置がずれてくれます。

対策済の動作

www.youtube.com

時刻合わせ

.NET nanoFrameworkを使った時刻合わせは非常に簡単です。
Wi-Fi経由でインターネットに接続すれば数秒と待たずに自動的にNTP(Network Time Protocol)を使って時刻合わせを実施してくれます。

Wi-Fiに接続する

ライブラリ追加

Wi-Fiへの接続方法ですが、まずは、NuGetからWi-Fi用のライブラリを追加します。

コード記述

ライブラリ追加が終われば、以前、M5Stack Core 2でAzure IoT Centralに接続したときのWi-Fi接続部分がそのまま使えます。
hatsune.hatenablog.jp
該当部分のコードをみてみましょう。
gist.github.com

明示的に時刻合わせを実行する

改めて時刻合わせを行いたいときは

nanoFramework.Networking.Sntp.UpdateNow();

を実行します。
今回のサンプルではM5ボタンをクリックすると時刻合わせを実行するようになっています。
www.youtube.com
起動した直後でまだ自動時刻合わせが完了していないタイミングで「急いで」M5ボタンをクリックしています。
Wi-Fi接続が完了したら猶予は数秒しかありませんでした。もたもたしているとすぐに自動的に時刻があってしまいます。

次回

今回の記事は如何でしたでしょうか。
.NET nanoFrameworkでの時刻合わせは非常に簡単で「Wi-Fiにつなぐコードだけ」で実現できます。
今回の記事でも記事の大半は7セグメント表示など表示に関する部分が大半でした。
このあたりライブラリ化したりNuGetから取得できる描画ライブラリが拡充すると更に手軽につくることができるようになります。

さて次回ですが、GROVE端子関係について確認していきます。

ドット絵を描くにはExcel方眼紙が最強

.NET nanoFrameworkで7セグメント表示を行うサンプルコードの中でマジックナンバーだらけです。
nanoFramework.M5StickCPlus.RTCSample.Lcd7Segment.cs · GitHub

特に縦セグメントを描画するDisplaySegV、横セグメントを描画するDisplaySegHなどは最たるものです。
ではこの中でつかっている点描画の部分の範囲はどうやって決めたのでしょうか。

//0,6 - 0,35
for (var posY = y + 6; posY <= y + 35; posY++) WriteBuffer((ushort)(x + 0), (ushort)posY, color16bit);

これは非常に原始的な方法でマジックナンバーを決めています。
Excelを開いて、そのセルサイズがある程度小さくないように行と列のサイズをまとめて小さくします。
そのうえで、各セルを塗り分けてよい感じの見た目をつくります。

あとは、このセルの列位置をX、行位置をYとして読み取っていきます。

これを応用すればドット絵をExcelで作成してそれをコードに転記することで、.NET nanoFrameworkでドット絵アニメーションでのキャラ絵なんてのも作れそうですね。

.NET nanoFrameworkでのM5StickC Plusの描画について考察してみる

前回

hatsune.hatenablog.jp

前回は、取得した加速度をグラフとしてM5StickC Plusの画面に描画しました。
その予告で次回はRTC(RealTimeClock)について取り上げるとしましたが、その前にM5StickC Plusでの描画の最適化について考えてみたいと思います。

発端

今回、描画最適化をまずはクリアしたいと思ったのは、RTCの結果表示を7セグメントの数字表示で描画しようと考えて、まずは1桁の描画を試したときの気づきからです。
.NET nanoFrameworkでのM5 StickC Plusの描画は1ドットづつ「Screen.Write」メソッドで描画して実現します。
その方法で7セグメントでの数字表示を試してみると、かなりレトロな感じのセグメント表示順が感じられる表示となりました。
www.youtube.com

これはこれで味わい深いのですが、RTCの結果を表示するのに桁数が増えてきたらかなり時間がかかることが予想されます。
もう少しシャキシャキ表示してほしいところです。

対策

そこで、7セグメントの各セグメントをScreen.WriteでLCDに直接描画するのではなく、7セグメントの表示領域をushort配列で確保して、この配列に表示色を設定してから、Screen.Writeで7セグメントの矩形領域を指定して配列から一気に描画してみることにしました。
gist.github.com

結果

その結果として、セグメントの表示順が分からない描画が実現できました。
www.youtube.com

次回

次回こそは、この描画最低化を踏まえてRTCで取得した現在時刻を表示してみたいと思います。
hatsune.hatenablog.jp
hatsune.hatenablog.jp

.NET nanoFrameworkで色指定の定義値がRedとBlueで逆なのかもしれない

.NET nanoFrameworkで作成していて、テキストカラーを指定したいときは次のように指定します。

Console.ForegroundColor = nanoFramework.Presentation.Media.Color.White;

赤なら「Color.Red」青なら「Colre.Blue」と指定します。

M5StickC Plusだと指定したとおりの色にならない

しかし、実際に動作させてみると、Color.Redと指定したときは青文字で、Color.Blueと指定したときは赤文字で表示されます。
このColorのenumは、「nanoFramework.Graphics」クラスライブラリの「nanoFramework.Presentation.Media」名前空間に定義があります。

定義値をみてみると
Red = 0x0000ff
Blue = 0xff0000
となっています。

でもM5StackCore2だとColor.RedはRed

一方、M5StackCore2ではColor.Redと指定したときは赤文字で表示されるので、Color定義コードが間違えているわけではないようです。

結論

nanoFrameworkのDiscordで質問したところM5StackC Plusのディスプレイドライバーの問題かもとのことなので、そのあたり調査してみたいと思います。

.NET nanoFrameworkでM5StickC Plusにグラフを描画してみる

前回

hatsune.hatenablog.jp


前回は、.NET nanoFrameworkで加速度と角速度の情報を取得しました。
今回は、取得した加速度をグラフとしてM5StickC Plusの画面に描画します。

事前準備

Install the nanoFramework firmware

M5StickC PlusにはnanoFrameworkは標準インストールされていないので、nanoFrameworkをインストールします。

接続ポート番号の確認

USBでM5StickC PlusをPCに接続したら、USB Serial Portのポート番号を確認します。今回の環境では「COM6」が該当しました。

Flasherアプリケーションのインストール

OSの[スタート]メニューから「Developer PowerShell for VS2022」を起動します。

dotnet tool install --global nanoff

nanoFrameworkfファームウェアをインストール

M5StickC Plusをターゲットにして「COM6」経由でnanoFrameworkをアップロードします。

nanoff --target M5StickCPlus --update --serialport COM6

Visual Studioの準備

Visual Studioを機能拡張する

Visual Studioには.NET nanoFramework Extensionをインストールして機能拡張しておきます。
この機能拡張によりnanoFrameworkアプリのテンプレートが追加されます。
このテンプレートで作成したプロジェクトには、NuGetから自動的に「nanoFramework.CoreLibrary」ライブラリが追加されています。

「nanoFramework.M5StickCPlus」ライブラリを追加する

M5StickC Plusの画面などハードウェアにアクセスするために、M5StickC Plus用のライブラリを追加します。

ここまでが、M5StickC Plusを使うアプリ開発を行う上での共通の事前準備となります。

加速度をグラフ表示する

前回の記事で、M5StickC Plusには、6軸姿勢センサーMPU6886が内蔵されていて、画面を上にしておいた時の上下方向の加速度はZ軸の加速度であるという点について説明しました。

今回は、このZ軸方向の加速度を画面にグラフとして描画します。

Z軸の値について

Z軸の加速度は重力加速度を1Gとして、初期状態の測定範囲は±2Gで、0Gが自由落下状態となります。

今回のグラフについて

M5StickC Plusは縦の解像度が240dot、横の解像度が135dotとなります。
よって、±2Gの範囲を0~239dotにマッピングすればグラフが収まることになります。
1dot=0.016Gなので少しの揺れではグラフが変化しないかもしれないので、今回、グラフに描画する測定範囲は0~2Gの範囲にしてみたいと思います。
これであれば、Z軸方向には常に1Gの加速度が測定されるので、何もしなければ真ん中あたりに値がプロットされ、そこを中心として上下振動に応じたグラフの上下が描画されるはずです。

0~2Gを0~239dotにマップング

minValue=0、maxValue=2G、screenHeigh=240としたときに加速度をドットにマップングするには次のような式を使います。

(((value - minValue) * screenHeigh) / (maxValue - minValue))

グラフを描画する

「nanoFramework.M5StickCPlus」ライブラリには、点を描画するScreen.Writeメソッドはありますが、残念ながら直線などを描画するメソッドがありません。そこで、1つ前の測定値と現測定値を直線で結ぶ代わりに、その範囲を1ドットづつ点で描画することで疑似的にグラフを描画します。
今回は、20msごとにZ軸方向の加速度を取得してグラフ描画します。
gist.github.com
www.youtube.com

次回

次回はRTC(RealTimeClock)について調べてみたいと思います。
hatsune.hatenablog.jp

.NET nanoFrameworkでM5StickC Plusの加速度と角加速度を取得してみる

前回

hatsune.hatenablog.jp


前回は、.NET nanoFrameworkで電源状態を取得しました。
今回は、加速度と角速度の情報を取得します。

事前準備

Install the nanoFramework firmware

M5StickC PlusにはnanoFrameworkは標準インストールされていないので、nanoFrameworkをインストールします。

接続ポート番号の確認

USBでM5StickC PlusをPCに接続したら、USB Serial Portのポート番号を確認します。今回の環境では「COM6」が該当しました。

Flasherアプリケーションのインストール

OSの[スタート]メニューから「Developer PowerShell for VS2022」を起動します。

dotnet tool install --global nanoff

nanoFrameworkfファームウェアをインストール

M5StickC Plusをターゲットにして「COM6」経由でnanoFrameworkをアップロードします。

nanoff --target M5StickCPlus --update --serialport COM6

Visual Studioの準備

Visual Studioを機能拡張する

Visual Studioには.NET nanoFramework Extensionをインストールして機能拡張しておきます。
この機能拡張によりnanoFrameworkアプリのテンプレートが追加されます。
このテンプレートで作成したプロジェクトには、NuGetから自動的に「nanoFramework.CoreLibrary」ライブラリが追加されています。

「nanoFramework.M5StickCPlus」ライブラリを追加する

M5StickC Plusの画面などハードウェアにアクセスするために、M5StickC Plus用のライブラリを追加します。

ここまでが、M5StickC Plusを使うアプリ開発を行う上での共通の事前準備となります。

加速度計とジャイロ計の情報を取得する

M5StickC Plusには、6軸姿勢センサーMPU6886が内蔵されています。
6軸とは、X軸Y軸Z軸方向の加速度に加えて、X軸Y軸Z軸の角加速度も取得できるので6軸となります。

これによりどちら方向に進んでいるのか、どちら向きに(画面の)方向を変えようとしているのかが分かります。

キャリブレーション

MPU6886を使うときは起動時にキャリブレーション(補正)を実行します。
例えば、100回試行して補正するときは次のようにします。

M5StickCPlus.AccelerometerGyroscope.Calibrate(100);

もちろん補正中はM5StickC Plusを静止させておくことが必要ですから、今回は初期だけではなくM5ボタンをクリックしたときも補正できるようにしておきます。

加速度を取得する

「M5StickCPlus.AccelerometerGyroscope」で加速度を取得するには「GetAccelerometer」メソッドを実行します。

M5StickCPlus.AccelerometerGyroscope.GetAccelerometer();

初期設定の範囲は±2G(重力加速度の2倍まで測定)となります。
測定範囲は「AccelerometerScale」で±2G、±4G、±8G、±16Gから選択できます。測定範囲が大きいほど精度は下がります。

角加速度を取得する

「M5StickCPlus.AccelerometerGyroscope」で加速度を取得するには「GetGyroscope」メソッドを実行します。

M5StickCPlus.AccelerometerGyroscope.GetGyroscope();

初期設定の範囲は±250dps (degree per second=1秒間に250度の回転まで測定=1分間に約41回転以下なら測定可)となります。
測定範囲は「GyroscopeScale」で±250 dps、±500 dps、±1000 dps、±2000 dpsから選択できます。測定範囲が大きいほど精度は下がります。

コード全体(0.5秒ごとに表示)

gist.github.com

次回

次回はスクリーン描画について調べてみたいと思います。
hatsune.hatenablog.jp

2022/08/06現在のnanoFramework.M5StickCPlusライブラリのバージョンについて

2022/08/06 (日本時間は多分2022/08/07)にnanoFramework.M5StickCPlusライブラリの最新バージョンは「v1.1.32」となっています。

また、ファームウェアのバージョンは、「1.8.0.469」となります。