2023年03月11日

Web BLE API

以前にWebシリアルAPIとUSBシリアルI2C変換基板を用いてI2Cデバイスをブラウザから制御して、取得したデータからChart.jsで可視化するデモツールを紹介しました。今回はBLE5モジュール変換基板BLE5モジュール変換基板V2とブラウザを介してシリアル通信できるツールを紹介したいと思います。BLE5モジュール変換基板BLE5モジュール変換基板V2Wireless Xpressファームウェアが実装されているため、簡単にスマートフォン等と通信することが可能です。スマートフォン向けにはBGX Commanderアプリ(iOS/Android)が提供されています。

一方、PC版は提供されていないため、今回はWeb Bluetooth APIを用いて、ブラウザを介してシリアル通信できるツールを実装してみました。ツールはこちらから利用できます。


webbleapi.png

Web Bluetooth APIの制約で事前にOS側の設定画面でBluetoothデバイス追加が必要です。追加後、接続ボタンを押すと検出されたBLE5モジュール変換基板もしくはBLE5モジュール変換基板V2が表示されます。接続後は双方向に文字列を送ることが可能です。今回はモジュールをUSBシリアルに接続してテストしてみました。ブラウザから文字列を送信したり、逆にTeratermからUARTに文字列を送信して、ブラウザに文字列が表示されることを確認しました。デフォルトはシリアル通信を双方向に行うためのストリームモードとなっていますが、モードをコマンドモードに設定することでBLEモジュールの設定を遠隔で行うことも可能です。

実際にはBLE5モジュール変換基板をマイコン等に接続し、BLE5モジュールとペアリングしたPCのブラウザから遠隔でデバッグして使用します。Web Bluetooth APIの制約でOS側で事前にBluetoothデバイスの追加しない場合、データ書き込み時にGATT Error: Not pairedの例外エラーが発生します。事前のデバイス追加が必要なものの、ブラウザから簡単にBLEデバイスと通信することができるのは非常に便利だと思いました。なお、WebシリアルBLEツールのjsコードやcss含めてすべてhtml内に記述しているため、本ツールにアクセスして右クリックで「ページのソース表示」でソースを確認することができます。今後は他にも応用的な機能を実装したいと思います。
posted by Crescent at 00:00| Comment(0) | TrackBack(0) | 電子工作 | このブログの読者になる | 更新情報をチェックする

2022年12月17日

プログラマブルデバイスGreenPak

気が付いたら12月に入ってしまいました。今回はプログラマブルデバイスGreenPakを紹介したいと思います。デジタルの論理回路やアナログのコンパレータ、カウンタ、遅延、タイマといった比較的簡易な機能を実現するために特化したデバイスです。1個200円弱で16bit/32bitのマイコンよりも安く実現することが可能です。1個100円前後の8bitマイコンと比べると少し高いですが、アナログ系とデジタル系の簡易な機能が備わっているため、8bitマイコン単体+論理ICやアナログICを組み合わせる場合にはGreenPak1つで代替できる可能性があります。また、マイコンの周辺回路をGreenPakで統合するといったことが可能です。


greenpak.jpg

GreenPakシリーズ内ではAD搭載モデルやロードスイッチ搭載モデル、レギュレータ搭載モデル等、他にも様々ありますが、多くのモデルは製品への組込を目的としており、書き込みが1回のみの焼き切りタイプ(OTP)です。ホビーユースや試作目的では何度も書き換え可能な下記のタイプ(MTP)に制限されます。

 電源電源2コンパレータCNT/DLYLUTSDFF
SLG468242.3-5.51.71-5.5281917
SLG468262.3-5.51.71-5.5481917
SLG470042.4-5.5372018


SLG4682Xは2電源タイプのため、電圧レベル変換ICとしても利用できます。SLG46826のみ温度センサを搭載。SLG47004はオペアンプ、プログラマブルな基準電圧を搭載しています。

開発環境は無料で利用可能な専用のGo Configure Software Hubというソフトウェアを用いて設定します。ノーコードでGUI画面からモジュールを組み合わせて実装します。書き込みは専用のデバッガを介してI2C経由で書き込みを行うことが一般的ですが、昨今の半導体不足でデバッガが長期間在庫なし状況です。デバッガの代替としてArduinoを介して書き込みを行うことが可能です。

ide.jpg

sim.jpg

Go Configure Software Hubは設定の他、信号のシミュレーションもすることが可能なため、書き込み前に意図した信号処理ができているか確認することが可能です。

実際に使ってみると、コンパレータやLUT等の各モジュールで利用可能なポートの制約等ですべてのモジュールをフルに使うことはできないため、実装には工夫は必要であると分かりました。玉に瑕な点として、SLG4682Xは設定データ書き換え時のメモリ削除処理にエラッタがあり、I2Cに準拠しない挙動をします。その対処としてシステム内で書き換えを行う場合、書き換え時I2Cエラー処理が必須である点です。また、設定メモリの書き込みや削除は1ページ16byte単位となっており、1ページ毎に書き換える必要があります。8byteとか1byteとか細かく書き換えできればより便利だと思いました。

デバッガは入手しにくいものの、GreenPakIC自体は半導体不足の環境下でも在庫が豊富なため、今後はGreenPakを使ってちょっとしたデバイスを検討してみたいと思います。
posted by Crescent at 00:00| Comment(0) | TrackBack(0) | 電子工作 | このブログの読者になる | 更新情報をチェックする

2022年10月29日

Webシリアルプロッター

以前にWebシリアルAPIとUSBシリアルI2C変換基板を用いてI2Cデバイスをブラウザから制御、取得したデータからChart.jsで可視化するデモツールを紹介しました。今回はUSBシリアルI2C変換基板に限らず、ArduinoやRP2040等のUSBシリアル通信のデータをグラフとして可視化するシリアルプロットツールを実装してみました。ツールはこちらから利用できます。

例えばセンサデータ等を下記のようなフォーマットでUSBシリアル通信から出力させると最大8つのカンマ区切りのセンサデータをグラフに可視化できます。

XX.XX,YY.YY,ZZ.ZZ,\r\n
XX.XX,YY.YY,ZZ.ZZ,\r\n
XX.XX,YY.YY,ZZ.ZZ,\r\n
XX.XX,YY.YY,ZZ.ZZ,\r\n
※X,Y,Zは各センサ数値文字列


実際に2つの適当なデータを可視化してみました。

SerialPlotter.jpg

ボーレート設定の他、csvとしてダウンロードする機能、グラフをクリアする機能を実装してみました。ArduinoのIDEのシリアルプロッタ機能のように簡単にシリアル通信のデータを可視化することが可能です。WebシリアルAPIを使用しているため、ソフトのインストールなしでWebブラウザ(Edge、Chromeのみ対応)から本ツールにアクセスするだけで簡単に利用できます。また、ブラウザ単体とChart.jsライブラリで実現できるため、一度、ページを読み込んで表示すればオフライン環境でも動作可能です。なお、WebシリアルAPIの部分等のjsコードやcss含めてすべてhtml内に記述しているため、本ツールにアクセスして右クリックで「ページのソース表示」でソースを確認することができます。今後は他にも応用的な機能を実装したいと思います。
posted by Crescent at 00:00| Comment(0) | TrackBack(0) | 電子工作 | このブログの読者になる | 更新情報をチェックする

2022年10月15日

USBカメラ変換基板 白黒ビットマップ保存モード

今回はUSBカメラ変換基板に追加した新機能について紹介したいと思います。

ちょっとした機械学習等で画像データを利用する場合、データ処理を軽くするため、2値化した画像を用いることが多くあります。実際に160x120のビットマップ画像を保存すると16ビットカラーで1ファイル37.5kB程度となります。一方、同じ160x120のビットマップ画像でも白黒ビットマップの場合、1ファイル2.4kBと1/10以下にファイル容量自体も減らすことができます。

そのような用途にも容易に導入できるようにUSBカメラ変換基板側で白黒ビットマップの保存ができる機能を追加してみました。機能としてはUSBカメラで取得したカラービットマップ画像を大津の2値化を用いて閾値を求め、白黒ビットマップに変換し、SDカード等に保存できる機能です。


実際に白黒ビットマップ保存機能を実装して取得したイメージを紹介したいと思います。

221004_191332_0.bmp

160x120のカラービットマップ画像


221004_191342_0.bmp

白黒モード有効時に160x120の白黒ビットマップ画像

光の反射や陰の部分等、2値化によって少しカラー画像と比べて変化している部分がありますが、大津の2値化として上手く働いており、概ね意図した白黒変換ができていることが確認できました。今回追加した白黒ビットマップ保存の新機能はgithub上のv1.1.0以降のファームウェアにSDカードを用いてアップデートすることで利用可能です。なお、白黒ビットマップ保存はデフォルトでは無効化されています。monコマンドで白黒ビットマップ保存を有効化した場合でも電源再投入やリセット等で設定が無効化されるため、利用する場合は再度、有効化する必要があります。今後も機会を見つけてUSBカメラ変換基板の応用例や機能等紹介したいと思います。
posted by Crescent at 00:00| Comment(0) | TrackBack(0) | 電子工作 | このブログの読者になる | 更新情報をチェックする

2022年09月24日

WebシリアルAPI+Chart.js +USBシリアルI2C変換基板

今回はWebシリアルAPIを用いたツールの応用編として、Chart.jsを組み合わせてみました。USBシリアルI2C変換基板を介してI2Cデバイスをブラウザから制御、取得したデータからChart.jsで可視化するデモツールを実装してみました。実際に作成したツールをgithub.ioに公開しています。

温度湿度センサSHT31、温度湿度気圧センサBME280について、2秒間隔でデータを取得し、取得したデータをChart.jsで可視化するツール(SHT31用BME280用)を実装してみました。


Graph.jpg


データはサーバ等を介さずにブラウザ内で保持され、そのままグラフ化しています。そのたえめ、オフライン環境でも一度、Chart.jsライブラリ含めてダウンロードすれば、オフライン環境でも動作可能です。また、ブラウザ内で保持された変数をcsvとして出力できる機能も合わせて実装してみました。

初めてChart.jsを使ってみましたが、最近のバージョンではAPIの仕様が変わっているようで少し実装に戸惑いました。例えば、各軸の軸ラベルはxAxes、scaleLabelではなく、下記のx、title、textのようにChart.jsバージョン3.xから変更になっているようです。


let options = {
 scales: {
  x:{title:{display: true, text: 'x軸'}},
  y:{title:{display: true, text: 'y軸'}}
 },
 plugins:{legend:{display: false}}
};


また、グラフのデータをクリアする場合はchartXX.destroy()では再度、グラフ設定や軸のオプション等を設定し直す必要があります。そのため、単に描画のみをクリアする場合は下記のようにグラフデータの変数をx軸、y軸ともに配列をクリアして、グラフ更新すると簡単にクリアできることが分かりました。

data.labels=[];
data.datasets[0].data=[];
chartXX.update();


その他、I2Cデバイスのレジスタアドレスを指定した読み書きのツールも実装してみました。


I2CReadWrite.jpg

Chart.js等と組み合わせて簡単にグラフを描画できるのはWebAPIならではの活用だと思いました。今後は他のライブラリやAPI、センサ等にも対応したいと思います。
posted by Crescent at 00:00| Comment(0) | TrackBack(0) | 電子工作 | このブログの読者になる | 更新情報をチェックする