備忘録

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

Node-REDで線グラフ

センサーから得られた値を表示するためのグラフを作成方法を確認します。
今回は、Node-REDでグラフを出すだけです。

1.ライブラりgoogle chart nodeのインストール
http://flows.nodered.org/node/node-red-contrib-googlechart
こちらのライブラリをインストールします。

$npm install node-red-contrib-googlechart

↑をすると、カレントディレクトリにディレクトリnode_modulesができて、
その中にディレクトリnode-red-contrib-googlechartができます。

カレントディレクトリ
  ┗ node_modules
     ┗ node-red-contrib-googlechart

このディレクトリ構造を、
$HOME直下にあるディレクトリ.node-redにも作ってあげます。

.node-red
  ┗ node_modules
     ┗ node-red-contrib-googlechart

まぁ面倒なら、ディレクトリ.node-redで
$cd $HOME/.node-red
$npm install node-red-contrib-googlechart
をしてください。

2.Node-RED立ち上げ
Node-RED立ち上げ、再起動します。
右側のノードリストに、
chart requestノード、chart responseノードが追加されているのが
確認できるようになります。

ChartRequest

3.ノード組みあげ
今回はグラフを作るだけです。
それぞれドラッグでノードをおいていきます。今回はグラフの値も決めうちです。

全体のフロー
function

ChartRequestノードの設定
今回は線グラフにするので、LineChartを設定
Pathは、/LineChartに設定
Attributesでは、+Addボタンを押して、値となる要素を登録しておきます。
ChartResponse

functionノードの設定
今回はグラフの値を決めうちです。
それぞれグラフの要素と値を書いておきます。
googleのLineChartサンプルの値ですが、なんですかね?これ、映画の観客数でしょうか?
追加されたノード

Chart Response
特に設定するところはないですね
作成したフロー


4.ブラウザで閲覧
http://192.168.0.8:1880/LineChart
パスは、Node-redのIPアドレスと、ChartRequestで設定したPathの設定ですね
できたグラフ

とグラフにできました。
次回は実際に取得したセンサのデータを使って、グラフを出します


続きを読む
スポンサーサイト

テーマ:ハードウェア - ジャンル:コンピュータ

  1. 2016/06/20(月) 18:13:27|
  2. Raspberry Pi
  3. | トラックバック:0
  4. | コメント:0

Node-REDでセンサーの値をWebに出す

Node-REDを起動させて、
ブラウザアクセスをトリガとして、Webにセンサーの値を出してみたいと思います。

1.Node-REDを起動させます。
$node-red ./html.json

2.ブラウザからNode-REDにアクセスします
今回の場合は、Node-REDを立ち上げているラズベリーパイの
IPアドレスが192.168.0.8なので、ブラウザのURLに↓を入れます
http://192.168.0.8:1880/

3.ノードの作成
それぞれ以下のノードを作成しました。
テストのセンサー値取得

左から、それぞれ以下のように設定しました。
httpノード
 Method:GET
 URL:/bme280

execノード
 Command: $HOME/proj_python/bme280_sample.py
 Append: msg.payloadにチェック

functionノード
 Name:function
 Function:
  var m="";
  m=m+" ";
  m=msg.payload;
  m=m+"
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。
";
  m=m+" ";
  msg.payload=m;
  return msg;

http responseノード
 特に何も設定なし

あとはそれぞれをつないであげれば良いですが、
execノードからfunctionノードへの接続は、
execノードの出力○の一番上と繋いでください、

execノードのinfoにも記載されていますが、
出力は、上から標準出力、エラー出力、戻り値になっています。
今回は、標準出力に出てくるものを次のfunctionに渡したいので、上のに繋ぎます。

httpのGETアクセスをトリガとして、
execのコマンドを実行して、コマンドの標準出力を
functionでHTMLの形にしてあげて、
最後にGETのレスポンスとして返す....という形です。

4.ブラウザでセンサーの値を取得

ブラウザから↓にアクセスしてみます
http://192.168.0.8:1880/bme280

temp : 29.79 ℃
pressure : 1016.28 hPa
hum : 45.22 %

とブラウザに表示されました。

テーマ:ハードウェア - ジャンル:コンピュータ

  1. 2016/06/20(月) 13:30:10|
  2. Raspberry Pi
  3. | トラックバック:0
  4. | コメント:0
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。