私たち「組込屋（エンジニア）」はどこへ行く？（その6）　展示会で802.11ah(WiFi HaLow) の実物を見てみませんか？

前回の記事 [私たち「組込屋（エンジニア）」はどこへ行く？（その５）展示会でリアルに会いましょう！　サポートの「中の人」と技術交流しましょう。](https://qiita.com/Cente_mw/items/89da7aa0886889baa20d) で、中の人が [EdgeTech+2023](https://www.jasa.or.jp/expo/) のITbookテクノロジー Centeブースに立ちますよ、とお話しました。そこででどんな情報を得られるのか、一部をご紹介します。


# 802.11ahの動展示

[株式会社メガチップス](https://www.megachips.co.jp/) 様のご協力をいただきまして、802.11ah通信を動展示します。構成は以下の通りです。

![et2023_demo_system.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032022/164c484d-dfe8-8c6a-44a2-2b0c969f88f5.png)

図中(1)～(3)の各装置の機能はこんな感じです。

-   **(1)802.11ahステーション:** IoTエッジ端末をイメージした802.11ahステーションから、加速度データを、RSK+RX65Nウェブサーバに送信する。
-   **(2)RSK+RX65Nウェブサーバ:** RSK+RX65Nウェブサーバは直接接続した照度センサのデータを得る。
-   **(3)スマホ/PC:** スマホ/PCのウェブブラウザからRSK+RX65Nウェブサーバへアクセスすると、照度と加速度を「組込WebUI」によるグラフ表示で見ることができる。

## 802.11ahステーション

802.11ahステーションは、[SparkFun MicroMod](https://www.sparkfun.com/micromod) STM32F405にメガチップス様の802.11ah RFモジュールを乗せ、802.11ahアクセスポイントと通信します。MicroMod基板としては、[SparkFun MicroMod mikroBUS Carrier Board DEV-18710](https://www.sparkfun.com/products/18710) と [SparkFun MicroMod STM32 Processor DEV-17713](https://www.sparkfun.com/products/17713) の組み合わせです。

[株式会社メガチップス](https://www.megachips.co.jp/) 様のRFモジュールをご紹介するとこんな感じです( <https://www.megachips.co.jp/product/modules/wifi-halow/> )。

![RF.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032022/3ab32eaf-2f9b-5d48-9ef0-64c0cb37c7ce.jpeg)


ファームウェアは、以下のCenteミドルウェアを活用しました。その上でアプリケーションを動作させ、RSK+RX65Nへ加速度データを送信します。

| ミドルウェア                                                                                                      | 機能                   |
|:------------------------------------------------------------------------------------------------------------------|:-----------------------|
| [Cente TCP/IPv4](https://www.cente.jp/product/cente-middle/tcpip/tcp-ipv4/tcpipv4/)                               | TCP/IPプロトコルスタック|
| Cente 802.11ah for MegaChips(仮称。開発中)                                                                        | 802.11ah無線LANドライバ|

加速度センサのデータがどんなふうに見えるかは、[組込WebUI](#org4adbef8)にて。


## RSK+RX65Nウェブサーバ

RSK+RX65Nウェブサーバは [組込WebUI](#org4adbef8) で詳しく説明します。


## スマホ/PC

スマホ/PCのウェブブラウザからRSK+RX65Nのウェブサーバにアクセスすると、組込機器の操作、監視ができます。ウェブブラウザがあればOK、特別なアプリケーションは不要です。

今回のデモでは、照度、加速度などのデータをグラフで見ることができます。


<a id="org4adbef8"></a>

# 組込WebUI


## 組込WebUIの表示

[RX65N-2MB-Starter-Kit-Plus](https://www.renesas.com/jp/ja/products/microcontrollers-microprocessors/rx-32-bit-performance-efficiency-mcus/rx65n-2mb-starter-kit-plus-renesas-starter-kit-rx65n-2mb) (RSK+RX65N)はウェブサーバとして動作します。先にご紹介した802.11ahのステーションから加速度データがやってきます。また、照度センサがあります。照度と加速度を、[React](https://ja.react.dev/) や [Chart.js](https://ja.react.dev/) を利用して、見た目にわかりやすい、インタラクティブなUIで表示します。PCのブラウザでRSK+RX65Nに接続すると、以下のように表示されます。

![et2023_demo_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032022/56589f9c-829f-2ed9-de77-083fe6f1fe67.png)

802.11ahステーションの加速度センサを傾けたり、RSK+RX65Nの照度センサに光を当てたりすると、それがグラフにリアルタイムに反映されます。

横に長いPC画面では上のように表示されますが、スマホのような縦長画面ではこんなふうにいい感じに表示されますよ。

<img width="200" alt="et2023_demo_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032022/7b0b0d38-fb0f-c019-22e1-009b3aa2d9eb.png">
<br>
<img width="200" alt="et2023_demo_3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032022/d6debc3b-7323-17fb-bafa-8869e8f0f7a2.png">

## ファームウェアについて

ファームウェアを図示すると以下の通りです。

****ミドルウェア構成****

![et2023_demo_system_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032022/67c5af9f-b1f6-4e67-f5f8-4e1c5c3853f0.png)

****動作の流れ****

![et2023_demo_system_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032022/87df3d8d-a26b-c7f5-90ac-a78f4848dba1.png)

今回実装した組込WebUIの動作を説明します(以下の番号は上図のものと対応)。

-   **(1):** PC、スマホなどのウェブブラウザから、RSK+RX65NウェブサーバのIPアドレスにアクセスします。
-   **(2):** サーバは、USBメモリにあるWebUIコンテンツ(JavaScriptコード)をブラウザに送信します。これはReactやChart.jpを利用して実装しています。サーバはJavaScriptのコードをブラウザに送信するだけであり、PC、スマホのブラウザが(PC、スマホのCPU能力を使って)JavaScriptを実行します。
-   **(3)-(5):** PC、スマホのブラウザは、JavaScriptコードに従って、サーバのCGIへアクセスします。サーバは、CGIに応答してデータを送信します。
-   **(6):** ブラウザはJavaScriptコードを実行しグラフを描画します。

****ここが注目!****

コンテンツ(グラフ)の描画について、組込機器側ではなく、ブラウザ側のCPU能力を使う事に注目! 組込CPUは、CGIアクセスに対応してプロットされるデータを送信するだけで、リッチなグラフ表示が実現できるわけです。

組込系は限られたCPU性能やリソース、表示系はCPUパワーやグラフィック能力が高い表示装置という構成だからこそ、マイコン系の組込CPUでもリッチなユーザインタフェースが実現できるのです。


# ご来場ください

「こんな感じに使えるんだ」「こんなふうに動くんだ」「簡単にできちゃうんだ」ということをお伝えしたいのですが、文字ではなかなか難しいです。ぜひご来場いただき、実物をご覧ください。


# 展示会情報

-   展示会: [EdgeTech+2023](https://www.jasa.or.jp/expo/)
-   会期: 2023年11月15日(水)～17日(金) 10:00～17:00（※16日(木)は18:00まで）
-   会場: パシフィコ横浜 展示ホール
-   ITbookテクノロジー Centeブース 小間番号：B-C08


# 今日の閑話

私がいうのもちょっと変ですが、今回のこのご紹介を書いてみて、意外にいろいろ組み合わさっているなと思いました。加速度センサと照度センサのドライバ、WebUI(ウェブサーバのコンテンツ)は今回のデモのために新規作成しましたが、以下のミドルウェアを活用したよい例と思います(自画自賛)。

-   HTTPサーバ
-   TCP/IPプロトコルスタック
-   802.11ah無線LANドライバ
-   ファイルシステム
-   USBホストドライバ
-   USBマスストレージクラスドライバ

ポイントがぼけるので伏せましたが、動展示にはもうちょっと面白い機能があります。ぜひご来場いただき、見てみてください。

Cente: [https://www.cente.jp/](https://www.cente.jp/)

お問合せはこちら: [https://www.cente.jp/otoiawase/](https://www.cente.jp/otoiawase/)