Arduino Uno Qの利用 ⑨ 入門編 従来のArduinoと互換性を保ち新しい機能を追加されたArduino Uno Q＜Detect Object on Cameraで画像を確認＞
今回は、サンプルのDetect Object on Cameraを確認してみます。
このサンプルは、次に示すようにArduino Uno QにUSBカメラを接続し、読み込まれた映像から、人、cat、cell phone、 clock、 cup、 dog、 potted plant のイメージを検出し、その確かさを表示します。
●USBカメラの接続
Arduino Uno QはType-CのUSBポートが一つあります。今回はUSBカメラの接続ですから、USBタイプAのポートがあれば接続できます。
このほかに後々のテストでは、マウス、キーボード、モニタ（HDMI）などの接続が想定されます。連載3回で紹介したDST-S060BPSVを使用するか、より安価なUSBハブなども利用して、Type-CのUSBポートから複数のUSBタイプAのポートを拡張しておきます。
●それぞれのプログラムの分担
Pythonのmain.pyでは、Arduino App Labの中核となるモジュール、WebUIから必要なBrickのモジュール、カメラからのデータを処理するためのBrickのモジュール、処理の現在時刻を得るためのBrickのモジュールを取り込む指定を最初に行っています。
次に ui= WebUI() Brickを利用して、画面表示を行うためのオブジェクトを生成します。
次の11行では、ビデオ・データから目的のオブジェクトを検出するための確度をデフォルトで0.5に設定します。
13行では、bricksから7行で読み込みを指定したObjectDetection のクラスから、実際に処理ができるオブジェクトobject_detectionを生成します。
16行～26行で、カメラからのデータをもとにオブジェクトを検出するためのデータを準備します。
27行から表示するための現在時刻を取得し、28行でobject_detectionと対象を検出するメソッドdetectionで、カメラからのデータから対象の検出を行います。28行で経過時間を算出します。
エラー処理などを行い、その後に35行でdraw_bounding_boxesメソッドを用いてWebブラウザに転出された対象のイメージに枠と検出名を追加します。
この後、58行までが関数 on_detect_objects()の範囲です。
この関数はWebUIで初期化を行ったあと、ui.on_messageでWebブラウザから'detect_objects'のメッセージが送られてきたら、この関数on_detect_objects()が起動するように設定されます。
ui = WebUI()
ui.on_message('detect_objects', on_detect_objects)
App.run()
App run()は、プログラムを待機状態にしてイベントの発生を待ちます。
●Webブラウザの表示
Webブラウザの表示処理の基本の枠組みはindex.htmlで記述し、style.cssはHTML文の修飾を行います。app.jsはjavascriptで記述され、Webブラウザの表示に動きを与えるプログラムです。
●app.jsの初期化処理
このapp.jsは次のような内容となっています。
// Start the applicationの記述の前までは、各種の定数の設定、通信処理のためのBrickの初期化などを行っています。
その後、Webブラウザの表示画面の右側部分の表示内容の初期化を行います。右側の画面の上からスライダの画面、feedbackの画面、確認されたオブジェクトの経過などが表示されます。
// Popover Logcに続く二つの定数の設定は、スライダとfeedbackの画面のhelpのための i の表示にマウスを乗せたときに表示されるhelpのテキストを設定しています。
document.querySelectorAllに続く命令は、マウスがconfidenceのヘルプのアイコンを選択したときに先ほどのメッセージを表示するためのものです。
次は feedback のhelpの処理のためのものです。
●initSocketIO()
サーバとの間のリアルタイムの通信を行います。
connect時は接続しているのでエラー表示を非表示にします。disconnect時には切断状態を示す表示を行います。detectionではデータが受信したことを示しているので、受信したデータで右側の表示を更新します。
●printDetection()
検出された新しいオブジェクトを表示するための配列の先頭に追加します。元からの配列の要素は一つ分シフトします。配列の要素数も一つ増加します。要素数が最大値（5）を超えたら末尾の要素を削除し配列の要素数を最大値内にします。
●renderDetections
105行～115行で表示の初期化を行います。まだ検出されたオブジェクトがない場合は、その旨を表示します。
検出されたオブジェクトがある場合は、printDetectionで検出されたオブジェクトが格納された配列の内容をWebブラウザに表示します。
●updateFeedback
検出されたオブジェクトの結果を得て、右側の中段のfeedbackの表示内容を更新します。
●initializeConfidenceSlider()
スライダの初期化処理とマウスの操作を検出して、スライダの操作が行えるようにaddEventListenerの設定も行っています。最初に起動する関数の中で起動するように設定されています。
●handleConfidenceInputChange()
右側のconfidenceの欄のスライダとテキスト入力の設定値として入力された値の範囲をチェックし、所定の範囲内の値として処理します。設定値が入力されたときにこの関数が起動されます。
●validateConfidenceInput()
右側のconfidenceの欄のテキスト入力の設定値として入力された値の範囲をチェックし、所定の範囲内の値として処理します。値の入力が終わったときに、この関数は起動されます。
●updateConfidenceDisplay()
スライダ、テキストなどで設定される値を渡しオブジェクトが検出されるのを待ちます。
渡されたオブジェクトの値は、即座にWebブラウザの表示に反映されます。
●resetConfidence()
オブジェクトの検出基準の設定値をデフォルトの設定値0.5にリセットします。
●動作確認
腕時計とディジタル時計を並べてみました。腕時計は検出されましたが、ディジタル時計は並べていても反応はありません。
針のついた柱時計は遠く離れていても時計として検出しました。
ディジタル時計は、cell phoneと認識されました。
犬は現在いないので、以前いた犬の写真を持ってきたら、しっかりと75％と高確度で犬と認識してくれました。
写真で確認できたので、人の姿が載ったチラシを試してみました。チラシの人物も人と認識しました。
画像イメージを検出対象とするサンプルDetect object on imageのテストと同様なことが確認できました。
体の一部でも人と認識するようです。手だけでもpersonと認識しました。その他、腕だけ、背中の一部なども人となりました。
いろいろ試すことができます。
神崎 康宏
