Plotlyを使ったバイナリデータのグラフ表示

本記事ではOMRON NX/NJシリーズのFileWriteVar命令で保存したバイナリファイルをPlotlyで可視化する方法を紹介します。

Plotlyを使ってブラウザでグラフ表示

Plotly

Plotlyはオープンソースのグラフ表示するためのライブラリです。Python、R、JavaScriptなど様々なプログラミング言語で利用できます
今回はJavaScriptでサーバを使わずにPCだけで表示できるようにしました
（ここではネットワーク接続する方法を紹介していますが、ライブラリをダウンロードしてローカルで動作させることもできます）

PLCバイナリデータ可視化の概要

FileWriteVar命令を使って構造体のデータをまるごとSDカードに保存して、ブラウザでグラフ表示する方法を紹介します
ここではサーボの指令位置をプライマリ周期(2ms)で記録して軌跡を3Dグラフで表示してみます
どちらも構造体に記録しナログ入力のデータを0.2ms周期(5kHz)で記録して2Dグラフで表示する方法と
XYZ軸のサーてまるごとバイナリファイルでSDに保存します

手順は

1. PLCでデータを構造体に格納
2. 格納が終わったら構造体を丸ごとFileWriteVar命令でSDカードに保存
3. PCでHTMLを開いて保存したファイルを読み込み
4. グラフ表示される (下のようなグラフを表示します)

2Dグラフ表示例

これはアナログ入力データをグラフ表示した例です

3Dグラフ表示例

これはXYZ軸のサーボの軌跡をグラフ表示した例です

FileWriteVarサンプルによるグラフ表示

サンプルの構造体にデータを収集してファイルに保存します
保存したファイルをサンプルのHTML「plot.html」をブラウザで表示します

とりあえず

HTMLの表示を確認したい方はサンプルをダウンロードして「plot.html」を開いてサンプルに入っているbinデータを読み出すことで確認できます

2Dグラフ

ラダー解説

1. LogWriteフラグの立上りで最初のSTが実行されて、ファイル名の作成とシリアルNoなどの付加データをセットしています
2. 2つ目のSTは毎スキャン実行されて、アナログユニットからのアナログ１と２のデータをを記録しています
3. Indexがスキャン数を数えていて指定のデータ数になったらLogEndフラグを立てて終了します
4. LogEndフラグがONしたら、もしくはLogWriteフラグの立下りでFileWriteVar命令で構造体をまるごとSDに保存します

3Dグラフ

サンプルプロジェクトの「サーボ動作ログ」を実行して構造体にデータを入れてファイルに保存

ラダー解説

1. LogWriteフラグの立上りで最初のSTが実行されて、ファイル名の作成とシリアルNoなどの付加データをセットしています
2. 2つ目のSTは毎スキャン実行されて、各サーボ軸の指令位置（Cmd.Pos）とフィードバック現在位置（Act.Pos）を記録しています
3. Indexがスキャン数を数えていて指定のデータ数になったらLogEndフラグを立てて終了します
4. LogEndフラグがONしたら、もしくはLogWriteフラグの立下りでFileWriteVar命令で構造体をまるごとSDに保存します

保存したファイルをブラウザで表示

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に指定したグラフです

PLCデータ可視化のまとめ

X,Y,Z軸のデータを収集したデータ0-9から選択して様々な表示が可能です
たとえば、サンプルではData9にIndexを入れているのでX軸をIndexにしてY軸を表示したいデータを選択して2D表示することもできます
また、ファイルBの比較するデータを読み込んで比較することも可能なようにしています

ChatGPTでPlotlyグラフツールを作成する

ChatGPTを利用すると、PLCで取得したバイナリデータを解析するHTMLツールを短時間で作成できます。

この"Plot.html"はChatGPTで作成してもらいました

興味のある方はChatGPTに変更箇所などを指定してこのPlot.htmlのHTML文をコピペして投げて見てください

注意

構造体の内容を変更する場合はメンバとメンバの間にパディング（メモリ配置調整用の空き）が作られることがあります
バイナリエディタなどで構造体の各メンバの先頭位置とパディング(Padding)の位置を確認して調整してください

ChatGPTへのPlot.htmlを作成してもらうためのプロンプト例

拡張

プロンプトで指示することでPlotlyのアニメーション機能を付けたりできます

よくある質問

Plotlyとは何ですか？

PlotlyはJavaScriptやPythonなどで利用できるオープンソースのグラフ描画ライブラリです。

FileWriteVarで保存したデータをグラフ表示できますか？

はい。FileWriteVarで保存したバイナリデータを読み込み、Plotlyで2Dグラフや3Dグラフとして表示できます。

PLCのサーボ軌跡を3D表示できますか？

XYZ軸データを記録することでPlotlyの3Dグラフ機能を利用して軌跡表示できます。

ChatGPTでPlotlyのHTMLを作成できますか？

ChatGPTへデータ構造や表示要件を指定することで、Plotlyを利用したHTMLツールを生成できます。

ダウンロード

Sample_FileWriteVarGraph.zip

このサイトが役に立ったと感じたら、ご支援いただけると嬉しいです 寄付ページへ