Plotlyを使ったバイナリデータのグラフ表示
Plotlyを使ってブラウザでグラフ表示
Plotlyはオープンソースのグラフ表示するためのライブラリです。Python、R、JavaScriptなど様々なプログラミング言語で利用できます
今回はJavaScriptでサーバを使わずにPCだけで表示できるようにしました
（ここではネットワーク接続する方法を紹介していますが、ライブラリをダウンロードしてローカルで動作させることもできます）
概略
FileWriteVar命令を使って構造体のデータをまるごとSDカードに保存して、ブラウザでグラフ表示する方法を紹介します
ここではアボの指令位置をプライマリ周期(2ms)で記録して軌跡を3Dグラフで表示してみます
どちらも構造体に記録しナログ入力のデータを0.2ms周期(5kHz)で記録して2Dグラフで表示する方法と
XYZ軸のサーてまるごとバイナリファイルでSDに保存します
手順は
- PLCでデータを構造体に格納
- 格納が終わったら構造体を丸ごとFileWriteVar命令でSDカードに保存
- PCでHTMLを開いて保存したファイルを読み込み
- グラフ表示される (下のようなグラフを表示します)
2Dグラフ表示例
これはアナログ入力データをグラフ表示した例です
3Dグラフ表示例
これはXYZ軸のサーボの軌跡をグラフ表示した例です
サンプルを使って簡単にグラフ表示
サンプルの構造体にデータを収集してファイルに保存します
保存したファイルをサンプルのHTML「plot.html」をブラウザで表示します
とりあえず
HTMLの表示を確認したい方はサンプルをダウンロードして「plot.html」を開いてサンプルに入っているbinデータを読み出すことで確認できます
サンプルの構造体
2Dグラフ
サンプルプロジェクトの「正弦波2D動作サンプル」を実行して構造体にデータを入れてファイルに保存
ラダー解説
- LogWriteフラグの立上りで最初のSTが実行されて、ファイル名の作成とシリアルNoなどの付加データをセットしています
- 2つ目のSTは毎スキャン実行されて、アナログユニットからのアナログ１と２のデータをを記録しています
- Indexがスキャン数を数えていて指定のデータ数になったらLogEndフラグを立てて終了します
- LogEndフラグがONしたら、もしくはLogWriteフラグの立下りでFileWriteVar命令で構造体をまるごとSDに保存します
3Dグラフ
サンプルプロジェクトの「サーボ動作ログ」を実行して構造体にデータを入れてファイルに保存
ラダー解説
- LogWriteフラグの立上りで最初のSTが実行されて、ファイル名の作成とシリアルNoなどの付加データをセットしています
- 2つ目のSTは毎スキャン実行されて、各サーボ軸の指令位置（Cmd.Pos）とフィードバック現在位置（Act.Pos）を記録しています
- Indexがスキャン数を数えていて指定のデータ数になったらLogEndフラグを立てて終了します
- LogEndフラグがONしたら、もしくはLogWriteフラグの立下りでFileWriteVar命令で構造体をまるごとSDに保存します
保存したファイルをブラウザで表示
サンプルに入っている「plot.html」をPCで開きます
2D アナログデータを表示する場合
SDカードに保存されたファイル"logyyyyMMddHHmmss.bin"をPCにコピーして、ファイルA：の[ファイルの選択]ボタンで開きます
下図は"plot2d_1.bin"と"plot2d_2.bin"のファイルを開いてX軸をIndexに指定したグラフです
さらにAとBの差分も表示できます
3D サーボXYZ軸を表示する場合
SDカードに保存されたファイル"logyyyyMMddHHmmss.bin"をPCにコピーして、ファイルA：の[ファイルの選択]ボタンで開きます
下図は"plot2d_1.bin"と"plot2d_2.bin"のファイルを開いてX軸をIndexに指定したグラフです
まとめ
X,Y,Z軸のデータを収集したデータ0-9から選択して様々な表示が可能です
たとえば、サンプルではData9にIndexを入れているのでX軸をIndexにしてY軸を表示したいデータを選択して2D表示することもできます
また、ファイルBの比較するデータを読み込んで比較することも可能なようにしています
Plot.htmlについて
この"Plot.html"はChatGPTで作成してもらいました
興味のある方はChatGPTに変更箇所などを指定してこのPlot.htmlのHTML文をコピペして投げて見てください
注意
構造体の内容を変更する場合はメンバとメンバの間にパディング（メモリ配置調整用の空き）が作られることがあります
バイナリエディタなどで構造体の各メンバの先頭位置とパディング(Padding)の位置を確認して調整してください
ChatGPTへのPlot.htmlを作成してもらうためのプロンプト例
拡張
プロンプトで指示することでPlotlyのアニメーション機能を付けたりできます
ダウンロード
ダウンロードされたときは利用規約に同意したものとみなします