スマホでNode-RED! 神アプリ RedMobile

お父ちゃん  2019.3.17 
Home > 電子工作 > スマホでNode-RED! 神アプリ RedMobile
すき 1
うんこ 0

お父ちゃんはプログラミングが苦手なので、パソコンに仕事をさせる際にはNode-REDを多用します。前回のブログでもバーサライタ装置に表示する画像をWiFi転送させて、画像の選択ボタンUIの構築にNode-REDを使用しています。

ESP32でバーサライタ 高分解能化

いろいろな機能を持ったノードを配置して配線するだけでコーディングできてしまうので、モノづくりの目的や熱意を損なうことなくスピーディーにやりたいことができてしまいます。

ただパソコンでできるならスマホでもやりたいと思うのが現代人のSAGA。ネットまさぐっていたら見つけたのです。
RedMobileという名の神がかったアプリを。

スマホ上でNode-REDの機能がほぼまんま使えてしまいます。便利で今後のヘビーユーズが予想されますので、これまで使用した例を記載いたします。

 

 
 

RedMobile基本動作

アプリをインストールしてアカウント登録ですぐ使えます。

アプリ起動後、登録したユーザ名とパスワードを入力して”START”をクリックします。しばし待つとNode-REDのページが作成されます。

“192.168.xxx.xxx:1880/red”

 

作成されたリンクをクリックするとパソコンと同じNode-REDの画面が開きます。
使用できるノードも初めからたくさん用意されています。

スマホ上では結線しにくいのでパソコンでリンクにアクセスしてノードを編集するのをお勧めします。

動作

スマホからパソコンへUDP通信で文字列を送信しています。一瞬でできました。マジ便利。

バーサライタ表示画像の色を制御

RedMobileのDashboardのカラーピッカーノードで色を選択してバーサライタ装置に表示する画像の色を変えます。

RedMobileのDashboardカラーピッカーノードで色を選択しUDPでRGB情報をパソコンに転送。パソコンで色情報を受け取りPythonで選択された画像の色変換とバーサライタ用のデータ変換を実施してバーサライタ装置へUDP送信しています。

動作

3.14のπの日に作成・投稿しました。

RedMobile設定 (Android)

RedMobileのDashboardのカラーピッカーノードで色を選択して、RGB色情報をUDPで送信します。

 

①ダッシュボード カラーピッカーノード

node-red-dashboardのcolour picker nodeでカラーピックUIを表示します。

Group:ダッシュボードノードを表示させるグループ名を決めて選択します。
Label:ノード名の表記
Format:ここではRGB形式で色情報を出力します。

 

Dashboardタグを選択して表示ボタンでダッシュボード画面が表示されます。


 

ダッシュボード

 

②ダッシュボード カラーピッカーノード

RGB色情報をudp out nodeでUDP送信します。

ポート:UDP送信ポートを設定します。
アドレス:送信先のパソコンのIPを指定

 

Node-RED設定 (PC)

パソコン上のNode-REDで受け取った色情報をPythonに送ります。

 

①ダッシュボード ボタン表示

udp in nodeでRedMobileからの色情報を受け取ります。

on Port:UDP受信ポートを設定します。
Output:受信内容を文字列で出力します。

 

② Python実行

exec nodeでPythonコードを起動させます。

Command:Pythonコード実行させるバッチファイルを指定。(Windows PC使用)
Append:引数にPayloadをチェック入れて受け取った色情報文字列を送っています。

 

以下がバッチファイルpython_pi.batの内容です。引数をもってpythonコードを起動します。

Pythonコード

RedMobileで選択された色情報を受けて、画像の色を変換してUDPでバーサライタに映像情報を送信します。

元画像

白黒で表示したい画像を白(255, 255, 255)で作成しました。

 

 

Arduinoコード

pythonから送られた画像データを受けてバーサライタに表示させます。

前回ブログと全く同じコードです。

 

コメントはこちらから

メールアドレスが公開されることはありません。コメントのみでもOKです。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください