下準備

Node-Red とWio Nodeの準備を済ませておきます。
それぞれこちらのエントリを参考にしてください。

・Node-RED
→ https://fabble.cc/asanoqm/nodered-windows

・Wio Node
→ https://fabble.cc/asanoqm/wioxnode-basic

Wio Node用のノードを追加する

Node-REDには色々なノードを追加することができます。

Wio Node もNode-RED用のノードが準備されているので、それを追加しましょう。
専用ノードの詳細はこちらのページにまとまっています。

コマンドラインから追加する

ターミナル/PowerShell で
$ npm install node-red-contrib-wio-seeed
と打ち込むと専用ノードを追加することができます。

が、管理者権限やディレクトリの位置でエラーを吐くこと多数。
https://qiita.com/okohs/items/ced3c3de30af1035242d
うまくいかなかったら以下の方法を試しましょう。

Node-REDの画面から追加する①

Node-REDの起動後にノードを追加することもできます。

まずは画面右上のメニューから「パレットの管理」を選んでください

Node-REDの画面から追加する②

ユーザー設定内の「パレット」タブが開き、現在導入されているノードの一覧を確認することができます。

Node-REDの画面から追加する③

「ノードを追加」タブに移動し、検索エリアに「node-red-contrib-wio-seeed」と打つと専用ノードが表示されます。

右側の「ノードを追加」ボタンを押して、インストールしましょう。

パレットにノードが追加される

専用ノードの追加がうまくいくと、Node-RED画面左側にあるパレットの下の方に、新しいノードが追加され他のノードと同じように扱うことができるようになります。

Wio用ノードの設定

Wio Node用のノード(ややこしいので以下「Wio用ノード」と呼びます)が追加されたら、早速使っていきましょう。
まずはWio Nodeをセットアップしたときと同じように、Seeedアカウントとの紐づけをする必要があります。

① プロパティを開く

適当なノードをFlow側に持っていきます。

配置したWio用ノードをダブルクリックし、プロパティを開いてください。

② Connectionを開く

初めて接続する場合、Connection の欄に「新規にwio-configを追加」と書いてあるはずです。

右側の鉛筆マークを押して設定に移ります。

③ ServerとTokenの設定

Server・Email・Passwordの入力を求められますが、認証がうまくいかないことが多いので「Manual Token」を押して移動します。

③-1 Serverの確認

Serverは初期値だと「iot.seeed.cc」になっていますが、個別に確認する必要があります。

スマートフォンのWioアプリを開いて、サイドメニューの「Setting」からServer URL を確認してください。

https://以降の文字列(写真の例だとus.wio.seeed.io)が入力すべきServerの文字列になります。

③-2 tokenの発行

以下のアドレスにSeeedアカウントを入力してログインし、tokenを取得してください。

https://wio.seeed.io/login

tokenは2つ発行されますが、上のほうを利用します。

③-3 ServerとTokenの登録

確認したServerとTokenをそれぞれの欄に入力し、赤い「追加」ボダンを押せば登録完了。

接続されたWio-Nodeの名前やPortごとのセンサが表示されていれば成功です。

うまくいかない場合はServerやTokenに間違いがないか、Node-REDを開いている端末やWio-Node自体がネットワークにつながっているかを確認してみましょう。

試してみる

0.2秒おきにセンサの値を表示するフローを作ってみます。

タイムスタンプ

「inject」ノードを配置し、プロパティの中身を画像のように設定してください。

繰り返し:指定した時間間隔
時間間隔:0.2秒

Wio用ノード

オンラインになっているWio-Node、取得したい値が入ったPortをそれぞれ選択してください。

デバッグ

「debug」ノードを繋げば、デプロイ後にセンサの値がデバッグエリアに表示されるようになります。

dashboard

dashboard用のノードを使えば、より視覚的に値が確認できます。

① 画面右側のグラフっぽいタブから
② 別ウインドウで確認することができます。

参考にしたサイト
https://qiita.com/takeyan/items/fff5e8d64da25220a0c0