おびやまロボット研究所ブログ

Javascriptはちょっとしか書いたことがないので、文法が良く分からない。
簡単なことを試すのは、

p5.js

が便利。ブラウザ上で、書いて動かして文法確認できる。
editorに行ってコード書いて動かすと、別に画面表示無くてもコンソールに出力ができるので、文法確認したり、オブジェクトや配列や、関数の動作を確認するのにいいです。

Javascriptとphpを簡単に書いてみてIoTでデータ可視化できるようにしてみた。
X軸に対してY1,Y2の2本分のデータをくっつけたURLを送るとデータがテキストファイルに追記されるphpを書いてデータを送る。

https://cpu4edu.net/ひみつ/dataひみつlog.php?x=10&y1=12&y2=14

さっき書いた、JavaScriptでテキストファイルを読み込む方法のところでサンプルを利用して、追記したデータファイルを読み込む。
そのデータを plotlyに送ってプロットするjavascriptを書いた。

セキュリティ考慮してないので、コードはここでは書きません。

以下のサイトで紹介されてることをやってみた。

JavaScriptでテキストファイルを簡単に読み込む方法7選
https://jp-seemore.com/web/3855/

この中でFetch APIを使った方法が簡単そうだけど、loadボタンは要らないのでその部分を除いてみて、ウインドウがロードされたときに起動するようにしたら動いた。

外部のサービスを利用してデータを可視化する方法をいくつか試したけど、
もっと簡単に実験するには、自分のサーバーにIoTデバイスからデータを送ってファイルに追記して、ファイルをグラフ化して表示できればいいので、サーバーでグラフ表示する方法を探してみた。

参考サイトはこちら。

JavaScriptでグラフ描画入門！全８個のライブラリをコード付きで一挙に解説！

ここに紹介されてる中で、
Canvas.js
https://canvasjs.com/
を試す。
サイトに公開されてるサンプルをコピペして、サーバーにアップロードしてそのファイルを表示せると簡単にグラフが出た。

グラフの種類もいろいろ選べるので、ラインチャートを選んで出てくるサンプルをまたコピペしてアップロードして表示。
https://canvasjs.com/html5-javascript-line-chart/

折角なのでふたつ同時に表示させたいと思って、2つのサンプルを一つのファイルにコピペして表示させようとしても後の方の一つしか出ない。
ソースをみたら、

window.onload = function () {

でグラフを表示させてるので、これは複数処理しようとしても後の方で上書きされてしまうらしい。
方法としては、以下のサイトにあるように

【JavaScript】window.onloadを使用した時に動かなかった話
https://note.com/taito_smile/n/ne45d28e4c176

window.addEventListener('DOMContentLoaded', function() {
または
window.addEventListener("load",function() {

に書き換えればよい。
1行そのまま書き換えたらエラー。カッコの数があってないので、最後に）を追加したら動いて、1画面にグラフが２つ表示された。

使い方はなんとなくわかったので、あとは、サーバーにあるファイルを呼び出しながらグラフ化するスクリプトを書けばいい。

googleのチャートはサイトに行ってコピペで動くサンプルがあったのですぐに円グラフが表示できた。
https://developers.google.com/chart/interactive/docs/quick_start?hl=ja

chart.js 　と　plotly.js も試したら動いた。

解説記事
スマートフォンをIoTデバイスとして試す、Arduino Cloudの実力
https://xtech.nikkei.com/atcl/nxt/column/18/01109/120600037/

カメラにアプリをインストール
Arduino のアカウントでログイン。

PC側もArduino のアカウントでログイン。
https://app.arduino.cc/

左側にdevice　のタブがある。
スマホにアプリをインストールして、ONすると、スマホのセンサ情報がクラウドに送られて、
PCでも表示できる。





Resourcesの所にいくと、ドキュメントありハードやソフトやAPIあり。

ドキュメントをちらっと読むと、Deviceのところで、新しくデバイス追加とある。
ここで、ESP8266を追加しようとすると、Arduinoボード以外のサードパーティのボードを選んで、ESP8266のGenericを選んで、表示される、DeviceIDとSecretKeyを保存しろとあるので、保存して次に進むと、DeviceのところにESP8266に名前を付けたものが追加された。
ESP8266の方は何もつないでないので当然オフライン。この後、ESP8266にどっかにあるサンプルコードで、固有のDeviceIDとSecretKey書き込んで動かすと、スマホの時みたいに、データがArduino　Cloud上に送られて表示できるという仕組みだと思う。

仕組みと手順が分かってしまえば、自分でコードを書くことなく使えるので便利なようだが、見えない部分が多くなってきて自分的にはしっくりこない感じ。