ESP8266 WiFi 電界強度計 グラフ表示

いろいろと実験をしている、ESP8266 WiFi 電界強度計、結果の過去1分くらいのデータをグラフに表示させることができないか試してみた。私自身は、WEB記述のHTMLに詳しくないので、いろいろと検索。JAVA Script を使えばできそうだが、サンプルを見ても、どうしたらESP8266へ実装できるか良くわからない。

そのなかで、SVG(Scalable Vector Graphics)を使って、XML形式でグラフィックスを定義して表示させることができそう。これなら、HTMLに埋め込むことができるので比較的簡単に実装できそうである。早速、くわしく解説してあるこのページを参考にしながら実験してみた。

試行錯誤の末、なんとか表示できるようにしたのがこの画像、下側の図がSVGで記述して表示させたものである。イメージ 1SVGは比較的新しい言語仕様のせいか、期待通り表示されないものもある。
Internet Explorer ではきちんと表示されるのに、 FireFoxでは、なぜだかY方向150ドット以上は表示されない。また、手持ちの古いスマホは、SVGに対応していないので、ご覧のような表示となる。
イメージ 2

もうひとつ具合が悪いのは、描画に時間がかかりすぎること、50ポイントを表示するのに、20秒くらいかかる。グラフは、SVGのコマンド line を使っている。座標 (X1,Y1)と(X2,Y2)の直線を引くというもので、
 <line x1="5" y1="9" x2="120" y2="95" style="stroke:black; stroke-width:2"/>
という表記。
測定したアナログデータを変換して、このコマンドに落とすのだが、処理に時間がかかっているようだ。実際に上記のコマンドを100行書いたHTMLを作って表示させると、瞬時に表示される。
もうすこし実験、チューニングしてみるが、この方式でグラフを表示させるのは、実用的でないかもしれない。