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

Arduino

こんばんは。
ちょっと遊びです。
前々回記事からのつづきで、HTML(JavaScript)のCanvas要素を使って残像効果を出したアナログメーターもどき表示してみました。
これも、Arduinoプログラムの中にHTMLタグとJavaScriptだけを載せてます。
一切、スマホアプリやPHP、CSS、CGIなどは使ってません。
Server-Sent Events の EventSourceという方法を使うと、こういうことが可能になるんです。


スポンサーリンク


動画はこちらをご覧ください。
例のごとく外国の方も見てるようですので、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)]

コメント

タイトルとURLをコピーしました