Canvas で残像効果を出して、アナログメーターっぽい表示(ArduinoからAndroidへServer-Sent Events使用)

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

スポンサーリンク

こんばんは。
ちょっと遊びです。
前々回記事からのつづきで、HTML(JavaScript)のCanvas要素を使って残像効果を出したアナログメーターもどき表示してみました。
これも、Arduinoプログラムの中にHTMLタグとJavaScriptだけを載せてます。
一切、スマホアプリやPHP、CSS、CGIなどは使ってません。
Server-Sent Events の EventSourceという方法を使うと、こういうことが可能になるんです。
SSE_canvas007
動画はこちらをご覧ください。
例のごとく外国の方も見てるようですので、Google翻訳英語のタイトルです。
それと、著作権が厳しいので、音声無しとしました。

以前アップした動画も、著作権フリーの音源に差し替えてます。
メーターが分かりやすいようにテレビのニュース音声をちょっと拝借しただけなんですけど、やっぱり著作権法上だめみたいです。
音声のないオーディオメーター動画なんてあまり意味ないんですが仕方ないです。
これ、古いCPUスマホで、Android4.2.2 でもこれだけのグラフィックが動きました。
動画の途中のところで一瞬固まりますが、これはしょうがないですね。
でも、あとで復活するんでヨシとします。
最新スマホは全く問題なく動きました。
iOS の iPad は全く問題なし。
残像効果の出し方のポイントは、背景と同じ色の図形を半透明にしてメーター図形と一緒に上書きすることです。
すると自然と残像効果が得られます。
残像効果を出すと一瞬見逃したポイントの位置を確認できるのと、
VUメーターっぽい見方ができるところがいいところでしょうか・・・。
でも、老眼が悪化したのかと勘違いしてしまうかも・・・。
グラデーション効果を使うとレベルが一目で分かっていいですね。
アナログメーターもどきでは、グラデーションを横軸にしているだけですが、いい感じになってます。
針に残像が出るとやっぱイイですね。
これだけのグラフィックになるとArduino Megaでは動かないでしょう。
グラフィックはスマホに任せることで、問題なく動いてくれます。
でも、実は、client.print文がたくさんあるので、それだけでMEGAでもグローバル変数が70%を超えてしまいました。
時計表示や有機ELプログラムもあるからしょうがないのですが・・・。
このclient.print文
けっこう曲者です!!
ちょっと行を追加しただけで、メモリをかなり食います。
あまり使いたくないライブラリですね。
Arduinoとスマートフォンの連携はここまでが限界でしょうか・・・。
近い将来、UNOのサイズでSRAMが64Kにアップしたものが出現してくれることを願ってます。
ということで、お遊びでした。
ではまた・・・
(関連記事)
つづき、メーターをスクロールしてみました(ServerSentEvents使用from Arduino)
つづき、Server-Sent Eventsについて(Arduinoとスマートフォン連携)
ArduinoとスマホブラウザのServer-Sent Eventsで、Canvas要素を使ってグラフ表示してみました。
Server-Sent Eventsを使って、Arduinoからブラウザへリアルタイムデータ送信できました!!
つづき、動画アップしました。Arduinoタイマー付きLED電光掲示板 試作完成 その4
スポンサーリンク

[ホーム(home)]

投稿者:

mgo-tec

Arduino, ESP8266, ESP-WROOM-02 等を使って、主にスマホと連携した電子工作やプログラミング記事を書いてます。ライブラリも作ったりしてます。趣味、独学でやってます。

コメントを残す

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


*