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