2019年04月13日

Node-Red Dashboardテンプレート

今回はNode-Red Dashboardテンプレートの使用方法について紹介します。


Node-Red Dashboardテンプレートを使用すると標準で用意されているUIよりもリッチで多彩なUIを実現することができます。
テンプレートはAngularJSベースで実装されているため、Angularのスクリプトやhtml記述を利用することができます。
Node-Red上でmsg.payloadの値を受けて表示を変えたり、ボタンを押してmsg.payloadへ値を渡すこともできます。



■要素紹介
・ボタン

ui5-4.jpg

<md-button ng-click="send({payload: {index_name:model_name}})" layout-align="start center" >
登録
</md-button>

model_nameには送りたい情報のモデルを入れて使用する

・トグルボタン
ui5-5.jpg
<md-switch ng-model="model_enable" ng-change="send({payload: {enable:model_enable}})" layout-align="start center" >
トグルボタン1
</md-switch >

ng-changeを指定することでボタン操作でmsg.payloadに情報が渡される

・数字入力

ui5-2.jpg

<input type="number" ng-model="model_id" />


・テキスト入力

ui5-3.jpg

<input type="text" ng-model="model_name" />

・日付選択

ui5-1.jpg

<input type="date" ng-model="mydate" ng-change="send({payload: mydate})">


■msg.payload受け取り方


ui1-2.jpg


・手前のfunctionノード
var nowDate=new Date();
msg.payload=nowDate.toLocaleString("ja-JP",{hour12:false});
return msg;

・テンプレートノード
<div>
更新日時:{{msg.payload}}
</div>

ui1-1.jpg

timestampボタンを押すと更新日時が表示されます。

■mas.payload送り方

ui2-3.jpg

・テンプレートノード
<body>
 <input type="number" ng-model="model_id" />
 <input type="text" ng-model="model_name" />
 <md-button ng-click="send({payload: {index_id:model_id, index_name: model_name}})" layout-align="start center" >
 登録
 </md-button>
</body>

ui2-1.jpg


ui2-2.jpg

登録ボタンの際に、数字入力と文字入力のモデルから情報を受け取ってpayloadに格納しています。


■応用編
・表に要素を並べる例

ui3-2.jpg


・手前のfunctionノード
var source_array = new Array();
source_array.push({ enable:true, id:1, name:"Name1"});
source_array.push({ enable:false, id:2, name:"Name2"});
msg.payload = source_array;
return msg;


・テンプレートノード
<table id="table" border="1" align="center">
 <tr>
  <th>無効/有効</th>
  <th>番号</th>
  <th>名</th>
  <th>テキスト</th>
  <td align="center" colspan="2">
   ボタン
  </td>
 </tr>
<tbody>
 <tr ng-repeat="row in msg.payload" align="center">
 <td align="center">
 <md-switch tr ng-model="row.enable" ng-change="send({payload: {row}})">
   </md-switch>
 </td>
 <td>{{row.id}}</td>
 <td>{{row.name}}</td>
 <td>
 <input tr type="text" ng-model="row.text1" />
 </td>
 <td>
 <md-button tr ng-click="send({payload:[{row},{update:1,delete:0}]})">更新
 </md-button>
 </td>
 <td>
 <md-button tr ng-click="send({payload:[{row},{update:0,delete:1}]})">削除
 </md-button>
 </td>
 </tr>
</tbody>
</table>



ui3-1.jpg

受け取った配列を表として表示することができます。
配列の数に応じて表の行が自動的に変化します。
例えば、データベースやセンサから受け取った情報を並べて表示するといったことができます。
また、表の中のボタンを押すことでボタンを押した行の情報をmsg.payloadとして次のノードに渡すことができます。

Node-Red Dashboardテンプレートを使用するとこのように動的なUIを実現することができます。
今回紹介したNode-Redのフローをこちらから利用できます。


posted by Crescent at 00:00| Comment(0) | ナレッジ | このブログの読者になる | 更新情報をチェックする

2019年04月06日

シリアルBLE5モジュール

今回は簡単に使用できるBLE5のモジュールを紹介します。


Bluetoothを使った通信をマイコン等で行う場合は電波法等の関係から技適取得済モジュールを使用することが多いと思います。
一般的なBluetoothモジュールはベースとなるファームを書き換えて、任意のプログラムを書き込んで使用します。

この場合、Bluetoothモジュール単体でセンサ情報を処理して送信するといったことができるため、他のマイコン等が不要で消費電力を抑えて低コストでBluetoothセンサを実現することができます。
ただ、この方法の場合はBluetoothモジュール毎に専用の開発環境を構築する必要やファームの開発、書き込みが必要なため、敷居が高いのが問題です。


世の中にはこのような問題に対して、予めファーム書き込み済でUARTシリアルからコマンドを送ることで設定変更できるBluetoothモジュールが販売されています。
例えば、Bluetooth2.1、BLE4などではシリアルで設定変更できるモジュール(RN42,RN4020)が売られています。
ただ、UARTシリアルで設定変更できる、かつ最近のBLE5のモジュールはほとんどありませんでした。


今回紹介するのはBLE5に対応したUARTシリアルで設定変更できるBLE5のモジュール、Silicon Labs製 BGX13P です。
なお、似たシリーズにBGM13がありますが、こちらは別途ファーム書き込みが必要なタイプです。

アンテナ内蔵でUSBの幅程度のサイズです。


IMG_0042.JPG

BGX13Pは様々なプロファイルに変更可能なファームが予め書き込まれているため、STM32マイコンやArduinoといったマイコンのUARTシリアルからコマンドを送ることで簡単にBLE5通信をすることができます。
いくつかマクニカのサイトでも事例が紹介されていました。

UARTシリアルで設定変更できるため、マイコン側のファーム書き換えのみで様々な機能を実現できるというのは魅力的です。
時間を見つけて試食してみたいと思います。

posted by Crescent at 00:00| Comment(0) | 電子部品 | このブログの読者になる | 更新情報をチェックする

2019年03月23日

NodeJS Portableで気軽にNode-Redを始める方法

Windows環境でNode-Redを使用する場合、DockerやUbuntuをVM上で動作させて使用することが多いと思います。
ただ、初心者にとってDockerの設定、VM導入は少し敷居が高いです。

WindowsにNodeJSを直接インストールしてNode-Redを使用することもできないことはないですが、UnixベースのOSでNodeJSが開発されていることもありうまくインストールできないことが多々あります。また、PC毎にインストール作業が必要で構築に労力を要します。


ここで紹介するのはNodeJS Portableを活用する方法です。
NodeJS Portableはその名の通り、Portableなので
一度、Portable版でNode-Redをインストールすれば、
そのフォルダ毎コピーで別のPCでも動きます。

フォルダで管理することができるため、
同じPC上でもバージョンやアプリケーションごとに分けて
フォルダ管理するということも可能です。


■NodeJS PortableにNode-Redを導入する手順
@NodeJS Portableをダウンロードする

AダウンロードしたNodeJS Portableを実行し、
NodeJS Portableフォルダを生成する
※注意点としてNodeJS Portableフォルダは浅いディレクトリで実行してください
フォルダの階層が深いとファイル生成に失敗する可能性があります。
例:C:\Users\XXXXの直下にフォルダを生成する XXXXはユーザー名

BNodeJSをダウンロードする
デフォルトのNodeJS Portableはv5.7.0でNodeJSのバージョンが非常に古いです。
そのままではNode-Redがインストールできても実行できません。

今回はNodeJSサイトからnode-v8.15.1-win-x86.zip をダウンロードしました。
なお、デフォルトのNodeJSがx86のため、同様にx86版のv8を選択しています。

Cnode-v8.15.1-win-x86.zipを解凍する

DNodeJSの置き換え
\NodeJSPortable\App\NodeJS内のnode.exeを削除し、先ほど解凍したnode-v8.15.1-win-x86内のnode.exeに置き換えてください。

また、\NodeJSPortable\App\DefaultData\node_modules内のnpmフォルダを削除し、先ほど解凍したnode-v8.15.1-win-x86.zip\node-v8.15.1-win-x86\node_modules内のnpmフォルダに置き換えてください。

ENodeJSPortable起動
\NodeJSPortable内のNodeJSPortable.exeを実行します。
コンソール画面が表示され、置き換えしたNodeJSバージョンが表示されれば置き換え成功です。


node.jpg

NodeJS Portableのデフォルトはv5.7.0ですが、
置き換えをしてv8.15.1と表示されています。

FNode-Redインストール
npm install -g --unsafe-perm node-redと打ち込んでインストールします。
数分でインストールが完了します。

GNode-Red起動
node-redと打ち込んでEnterで実行されます。

初回は下記のようにファイアウォールの設定が自動で表示されます。
「アクセスを許可する」をクリックしてください。

firewall.jpg

起動に成功すると下記のようにNode-Redのコンソールが表示されます。

node-red2.jpg

HNode-Redにアクセス
ブラウザ(FirefoxもしくはChrome、IEは非推奨)から下記のアドレスにアクセスします。

お馴染みの画面が表示されればあとはNode-Red三昧です。

node-red3.jpg


I終了する
コンソールウインドウを閉じるか、
Ctrl+cを押してy、exit、yで終了させてください。

■NodeJS Portable固有の情報
・インストール時にnode-gyp系のエラーがでる場合は
WindowsのビルドツールPython2をインストールしてください。

・置き換え後にNode-Redのインストールに失敗する場合、先にNode-Redをインストールしてからnode.exeを置き換えして起動させてください。

・フローの保存場所について
\NodeJSPortable\Data\.node-red内のflows_XXXX.jsonが作成して保存されたフローです。XXXXにはPC名が入ります。
他のPCであらかじめ作成したフローを開く場合はXXXXを動かすPCのPC名に書き換えてから起動させてください。

・NodeJSPortableはSerial Port Nodeを使用することができます。
 DockerやVMのNode-RedではUSBデバイスやシリアルノードを使用することが簡単にはできません。
NodeJSPortable版は簡単にUSB Serial等をNode-Redから操作できます。
これは組込系の機器と連携することができるため、非常に魅力的です。

・デプロイがうまくできなくなってしまう場合やNode-Red画面の応答がない場合、コンソール画面でEnterキーを連打して溜まったログを出力させてください。


posted by Crescent at 00:00| Comment(0) | ナレッジ | このブログの読者になる | 更新情報をチェックする

2019年03月16日

組込ソフトウェア開発で便利なマクロ

今回は組込ソフトウェア開発で便利なマクロを簡単に紹介します。

まずはビルド管理に便利なマクロ、
__DATE__と__TIME__です。

例えば起動時に下記のコードを仕込んでおけば
ビルド時にビルド日時が埋め込まれます。
printf("Build: %s %s \n\r",__DATE__, __TIME__);

例えばシリアルから出力すると下記のようになります。
Build: May 6 2019 13:56:47

自動でビルドの度に埋め込まれるため、
ビルド管理やファームウェアバージョン管理が容易になります。



続いてエラー処理等で便利なマクロ、
__FILE__、__FUNCTION__、__LINE__です。

エラーは発生した際にこれらのマクロを使用するとエラーの出た処理が記述されたファイル名、関数、何行目か出力することができます。

printf("ERR-> File: %s Func: %s Line: %d\n\r",__FILE__,__FUNCTION__, __LINE__);

例えばシリアルから出力すると下記のようになります。
ERR-> File: ../Src/main.c Func: main Line: 264

これらのマクロを仕込むことでデバッグがし易くなります。
posted by Crescent at 00:00| Comment(0) | 電子工作 | このブログの読者になる | 更新情報をチェックする

2019年03月09日

アンプ内蔵アナログ出力MEMSマイク変換基板

以前からアナログ出力MEMSマイク変換基板を販売しておりましたが、
アンプを内蔵しておらず、外部で別途アンプが必要でした。

外付けアンプの場合、拾う音の対象に応じてアンプのゲインを変えて対応できるというメリットはありますが、回路が別途必要となるのが面倒でした。

そのため、現在のラインアップに加えて、アンプ内蔵アナログ出力MEMSマイク変換基板を設計してみました。


img1.jpg


img2.jpg



デフォルトではアンプゲインを約50倍に設定しています。
大きな音の場合は飽和する場合がありますが、部屋の音などを拾う分にはちょうどよいゲインに設定しました。
また、出力中立電圧を電源電圧/2に設定しました。
アンプ内蔵のため、Arduinoといったマイコンのアナログ入力(ADC)にそのまま接続することが可能です。

もし、拾う対象の音が大きく、出力が飽和してしまう場合はゲインのR4をデフォルトの500kohmから例えば100kohmにすれば、ゲイン約10倍となります。1608サイズの抵抗を使用してください。

基板のサイズ、固定穴径はこれまでのアナログ出力MEMSマイク変換基板と同じにしています。


設計に問題なければ1個2000円弱程度で販売開始予定です。
詳細についてはこちら
posted by Crescent at 00:00| Comment(0) | 電子工作 | このブログの読者になる | 更新情報をチェックする