SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

.NET nanoFrameworkとESP32でIoTプログラミング

スマホアプリで環境データを可視化しよう! .NET nanoFrameworkとESP32でIoTプログラミング

.NET nanoFrameworkとESP32でIoTプログラミング 第8回

  • X ポスト
  • このエントリーをはてなブックマークに追加

MAUIでのAndroid対応アプリの作成(3)

観測値の変換とUI更新

 続いて、Manufacturer Specific DataからJSON文字列を抜き出し、観測値に変換します。そして、画面のLabelに設定します。

[リスト4]MainPage.xaml.csの一部
~中略~
// JSONデータを格納するクラス(9)
public class Sensor
{
    public required List<float> d { get; set; }
}
~中略~

// センサー値を解析してUIを更新する(6)
if (data != null)
{
    // バイト配列を文字列に変換する(7)
    // 先頭2バイトは企業識別子のため、除外する
    var jstr = Encoding.GetEncoding("UTF-8").GetString(data[2..]);

    // JSON文字列をSensorオブジェクトに変換する(8)
    Sensor? jdata = JsonSerializer.Deserialize<Sensor>(jstr)

    // LISTから値を取り出してUI更新(10)
    var temperature = jdata?.d[0];
    var humidity = jdata?.d[1];
    var pressure = jdata?.d[2]; 
    var gas = jdata?.d[3];

    TempLabel.Text = $"{temperature:F1} ℃";
    HumidLabel.Text = $"{humidity:F1} %";
    PressureLabel.Text = $"{pressure:F0} hPa";
    GasLabel.Text = $"{gas:F0} KΩ";
    LastUpdat.Text = $"最終更新: {DateTime.Now.ToString("HH:mm:ss")}";
}

 Manufacturer Specific Dataから取り出したデータは、バイト配列になっていて、先頭2バイトには、企業識別子が含まれています。そのため、3バイトめ以降のデータを、文字列に変換します(7)。JSON文字列からSensorオブジェクトに変換するには、System.Text.JsonのJsonSerializer.Deserializeメソッドを用います(8)。

 なお、JSON文字列に応じたSensoクラスをあらかじめ定義しておきます(9)。flot型変数のLIST配列のSensorオブジェクトの値は、UI要素のLabelのTextプロパティに設定します(10)。

バイナリ値の場合

 JSON文字列以外ではなく、観測値をそのままバイト配列として格納した場合は、BitConverter.ToSingleメソッドを利用して変換します。

var temperature = BitConverter.ToSingle(data,2);
var humidity = BitConverter.ToSingle(data, 6);
var pressure = BitConverter.ToSingle(data, 10);
var gas = BitConverter.ToSingle(data, 14);

 BitConverter.ToSingleメソッドの第1引数は、変換元のバイト配列で、第2引数は、バイト配列の起点となる位置を指定します。観測値は3バイトめ以降のため、第2引数は、2から指定し、6、10、14とします。flot型は4バイトのため、4つ増加することになります。

タイマーとボタンハンドラー

 最後に、タイマーの設定とボタンハンドラーです。

[リスト5]MainPage.xaml.csの一部
~中略~
readonly IDispatcherTimer _timer;

~中略~
// タイマーの作成(1)
_timer = Dispatcher.CreateTimer();
_timer.Interval = TimeSpan.FromSeconds(5);
_timer.Tick += (s, e) => StartScan();
~中略~

// ボタンハンドラー(2)
private void OnClicked(object sender, EventArgs e)

   // タイマーが停止している場合
   if (!_timer.IsRunning)
   {
       _timer?.Start();
       BtnNamet.Text = "停止";
   }
   else
   {
       _timer?.Stop();
       BtnNamet.Text = "センサーデータ取得";
   }
}

 IDispatcherTimerクラスを利用して、5秒毎にStartScan()が実行されるタイマーを作成します(1)。ボタンハンドラーでは、タイマーの停止、開始と、ボタン名の書き換えを行っています(2)。ボタンを押すたびに、観測値の取得の開始、停止が切り替わります。

動作の確認

 別途ESP32のプログラムを動作させた後、スマホアプリを起動します。

起動時のAndroidアプリ
起動時のAndroidアプリ

 ボタンをクリックした後、観測値が表示されるはずです。停止を押すまで、定期的に観測値が更新されます。

観測値の表示
観測値の表示

最後に

 3回にわたって、環境データをモニタリングするプログラムを作成しました。C#でも、ESP32の制御やスマホアプリの開発が手軽に実現できることをお伝えできたかと思います。

 今回で連載はいったん終了となります。本連載を通じて、.NET nanoFrameworkでマイコンモジュールを制御する楽しさや可能性を感じていただけたなら幸いです。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
.NET nanoFrameworkとESP32でIoTプログラミング連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 高江 賢(タカエ ケン)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/21424 2025/04/28 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング