テスト風景

Web で画像を表示

制作開始日

　2021年8月16日
　システムを構築している様子を報告していきます。
　必要な技術については見通しが立っているので、それを組み合わせていきます。

完成日

　2021年8月23日

当初の予定では、プロトコルは MQTT だけの予定でしたが、画像のアップロードを HTPP POST に変更して完成しました。

必要なハード

Grove IoT スターターキット for SORACOM
TTL serial Camera (Adafruit VC0703)

使われる通信プロトコル

MQTT (Web ページとの通信）
HTTP (WioLTE との通信）

必要なサーバー

MQTT ブローカー
MQTT over WebSocket に対応したもの
test.mosquitto.org などの public MQTT もテストには使える
MQTT over WebSocket に対応した mosquitto の設定

システムの要件

定められた時間に自動で撮影する。
例えば日中は10分毎、夜間は1時間毎という撮影ができる。
必要な時には、いつでも手動で撮影ができる。

次の6つのサブシステムで構成されます。

Arduino
　　MQTT Subscribe でシャッター ON の信号を受け
　　画像を撮影
　　画像を MQTT で Publish する。
リモートカメラシステム　（Arduino 部分）

必要な技術

Arduino の TTL Serial カメラで画像を撮影する方法
画像を Base64 で変換
JSON を作成
JSON を MQTT で Publish
MQTT の Subscribe を受けて画像を撮影

考慮が必要な点

Arduino Client for MQTT
The maximum message size, including header, is 128 bytes by default.
WioLTE で大きいデータを MQTT Publish する

Web ページ
　　MQTT Subscribe で画像を取得して表示
　　ボタンクリックで、シャッター ON を Publish
リモートカメラシステム　（Web ページ部分）

必要な技術

MQTT の Subscribe で画像を受信してページに表示
ページにあるボタンをクリックして、MQTTのPublish を行う

検証

MQTT over WebSocket で画像を表示

クローン設定
　　設定に従い　シャッター ON を Publish
リモートカメラシステム　（クローン部分）

必要な技術

クローン設定で MQTTのPublish を行う

HTTP POST を MQTT　に変換する API

http_to_mqtt.py
プログラムはこちらです。
HTTP POST を MQTT Publish に変換する

HTTP POST を file に変換する API

http_to_file.py
プログラムはこちらです。
HTTP POST を file に変換する API

MQTT を file に変換する常駐プログラム

mqtt_to_file.py
プログラムはこちらです。
MQTT を file に変換するプログラム

システム構築で考慮したこと

Arduino のプログラムをシンプルにする
撮影タイミングの制御は Arduino で行わない
Arduino にデータは持たない
SD カードは使わない

先行テストで確認すべきこと

画像の受け渡しが MQTT ブローカー経由でできるか。
画像ファイルは、計測した数値データと較べて、かなり大きい。
リモートカメラシステム（MQTT ブローカーの検証）
リモートカメラシステム（MQTT ブローカーに画像をそのまま送る）
WioLTE で MQTT Publish できる最大サイズを調べる
 HTTP POST を MQTT Publish に変換する

画像表示の Web ページの開発に使います。

各サブシステムについては、個々にページを設けます。