Arduinoの電圧をiOSやAndroidブラウザにグラフィック表示(Server-Sent Events,Canvas使用)

記事公開日:2015年7月11日
最終修正日:2016年12月26日

スポンサーリンク

こんばんは。
前回の記事からのつづきで、
今回はArduinoからスマホのブラウザにJavaScriptのServer-Sent Eventsで送られてきたデータを
Canvas要素 を使ってオーディオレベルメーターをリアルタイムストリーミングでグラフィック表示してみました。
ServerSentEvents003
動画もありますのでご覧ください。
例のごとく、海外の方も見られるようですので、Google翻訳した英語テロップ出してます。
(著作権の関係上、音声をフリー音楽に差し替えてますのでご了承ください)

前回はビットデータをテキストで表示させてみましたが、今回はレベルアップしてグラフィック表示してみました。
前回の記事でArduinoのanalog入力データを送信さえできれば、そのデータをいろんな形に加工できます。
Canvas要素でグラデーションを使うと、見栄えが断然変わりますね。
さすがにArduinoと違って、スマホ側はこんなグラフでもテキストと変わらないスピードでリアルタイムに表示してくれます。
Arduino直結のI2C通信のLED表示よりは少々遅れますけどね。
でも、これくらいなら実用範囲内だと思います。
Server-Sent Events を使ったプログラムのソースコードは前回の記事にアップしてますので、ご覧ください。
これで使用した環境は前回の記事と同様で、
・Arduino Mega
・Ethernet Shield2
・スマートフォン(Android 4.2.2)
・ブラウザ Google Chrome最新バージョン
・自作オーディオレベルメーター回路
iPad (iOS8.4) でも問題なく動作しました。 最新iPadは処理速度が速かったです。さすがですね。
Canvas要素は Internet Explore9 では対応してないようですので、ご注意ください。
最新版Chrome か Safari なら大丈夫です。
これができれば、Arduinoで遠隔無線でデータ確認ができますね。
スマホのアプリを開発しないで済むというのはスゴイことです。
何か役立つものができそうですよね・・・。
ちなみに、ここまでのJavaScriptをArduinoのClient.Print で作ると、UNOでは無理です。
MEGAなどのSRAMが十分な容量のものを使用してください。
まだソースプログラムを掲載できないのですが、このCanvas要素は独特の使用方法があって、
なかなか思ったとおりのグラフィック表示ができません。
いつかまとめて記事に書きたいと思っております。
あと、このオーディオレベルメーター回路ですが、以前の記事よりも精度をアップしてます。
まだ掲載できないのですが、オペアンプを使って元のオーディオ信号の電圧を5V付近まで昇圧させてます。
ダイナミックレンジが 25dB くらいになりました。
今回のご報告はこれくらいにしておきます。
この詳細は近々アップしたいと思いますので、しばらくお待ちください。
それでは、また・・・
スポンサーリンク

mgo-tec電子工作 関連コンテンツ ( 広告含む )
(関連記事)
つづき、メーターをスクロールしてみました(ServerSentEvents使用from Arduino)
つづき、Server-Sent Eventsについて(Arduinoとスマートフォン連携)
Server-Sent Eventsを使って、Arduinoからブラウザへリアルタイムデータ送信できました!!
ステレオレベルメーターを作ってみました。
ちょっと変なレベルメーターも作ってみました。
オーディオレベルメーターを作ってみました。
つづき、動画アップしました。Arduinoタイマー付きLED電光掲示板 試作完成 その4

[ホーム(home)]

投稿者:

mgo-tec

Arduino , ESP32 ( ESP-WROOM-32 ) , ESP8266 ( ESP-WROOM-02 )等を使って、主にスマホと連携した電子工作やプログラミング記事を書いてます。ライブラリも作ったりしてます。趣味、独学でやってますので、動作保証はしません。 電子回路やプログラミングの専門家ではありません。 畑違いの仕事をしてます。 でも、少しだけ電気の知識が必要な仕事なので、電気工事士や工事担任者等の資格は持ってます。

コメントを残す

メールアドレスが公開されることはありません。

*画像の文字を入力してください。(スパム防止の為)