複数のセンサを搭載したsensorTAGを使おう (5) ビジュアルを工夫

明るさや気圧も表示

 SensorTAGはたくさんのセンサを搭載したデモ・モジュールです。温度湿度以外に、簡単にデータを取り出せる明るさ気圧も追加します。追加すると、dashboardによるビジュアルな表示が縦方向に伸びていき、見やすくなくなります。後半では、表示方法に工夫をします。

明るさセンサ

 前回と同様に、湿度もしくは温度のfunctionをコピーし、そのプログラムを書き換えます。

if (msg.topic === 'sensorTag/luxometer') {
msg.payload = msg.payload.lux;
return msg;
} else {
return null;
}

気圧センサ

if (msg.topic === 'sensorTag/pressure') {
msg.payload = msg.payload.pressure;
return msg;
} else {
return null;
}

 新しいfunctionは、sensorTagとそれぞれ線で結びます。dashboardも適切なものを選びます。その結果を次に示します。

 なんだか縦に表示が伸びて、見やすくないですね。

2段組みにして見やすく

 dashboardは細かくHTMLやCSSで制御できません。2段(2列)で表示するには、グループ化します。この画面は、node-RED0.17.3です。

 画面右にあるdashboardのタブにHome01を表示し、「+tab」をクリックすると2番目のグループができます。

 明るさのdashboardノードをダブルクリックし、Groupの項目で、「私の部屋[Home01]」から「Group2[Home01]」に変更します。

 気圧のdashboardも同様にGroup2に変更すると、次のように表示が2列になります。

※各センサの表示に使っているdashboardの形状は、その値を表示するのに適切かどうかはあまり考慮していません。また単位に間違いがあるかもしれません。

 ここまでのプログラムを次に示します。利用の方法は前回を参照してください。

[{"id":"644de827.f2fde8","type":"debug","z":"dd15e4f.9f5a818","name":"","active":false,"console":"false","complete":"payload","x":530,"y":80,"wires":[]},{"id":"d075d55e.e7a248","type":"function","z":"dd15e4f.9f5a818","name":"周辺温度を抽出","func":"if (msg.topic === 'sensorTag/temperature') {\n msg.payload = msg.payload.ambient;\n return msg;\n} else {\n return null;\n}","outputs":1,"noerr":0,"x":300,"y":60,"wires":[["644de827.f2fde8","2405e2a3.bd723e","1436c7ee.592678"]]},{"id":"2405e2a3.bd723e","type":"ui_gauge","z":"dd15e4f.9f5a818","name":"気温","group":"a35a34f6.e6d578","order":0,"width":0,"height":0,"gtype":"gage","title":"気温","label":"℃","format":"{{value}}","min":0,"max":"60","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":550,"y":120,"wires":[]},{"id":"1436c7ee.592678","type":"ui_chart","z":"dd15e4f.9f5a818","name":"気温","group":"a35a34f6.e6d578","order":0,"width":0,"height":0,"label":"気温","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","ymin":"0","ymax":"100","removeOlder":"10","removeOlderPoints":"","removeOlderUnit":"60","cutout":0,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"x":550,"y":160,"wires":[[],[]]},{"id":"2891cc66.1c67f4","type":"sensorTag","z":"dd15e4f.9f5a818","name":"","topic":"sensorTag","uuid":"","temperature":true,"humidity":true,"pressure":true,"magnetometer":true,"accelerometer":true,"gyroscope":true,"keys":true,"luxometer":true,"x":80,"y":40,"wires":[["d075d55e.e7a248","674713a.afdf7ec","b9418288.be704","cf8a7c7a.10a96"]]},{"id":"674713a.afdf7ec","type":"function","z":"dd15e4f.9f5a818","name":"周辺湿度を抽出","func":"if (msg.topic === 'sensorTag/humidity') {\n msg.payload = Math.round(msg.payload.humidity);\n return msg;\n} else {\n return null;\n}","outputs":1,"noerr":0,"x":300,"y":120,"wires":[["97beb381.2ec16","d5e10a47.67df18"]]},{"id":"97beb381.2ec16","type":"debug","z":"dd15e4f.9f5a818","name":"","active":false,"console":"false","complete":"false","x":530,"y":200,"wires":[]},{"id":"d5e10a47.67df18","type":"ui_gauge","z":"dd15e4f.9f5a818","name":"湿度","group":"a35a34f6.e6d578","order":0,"width":"4","height":"3","gtype":"wave","title":"湿度","label":"%","format":"{{value}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":550,"y":240,"wires":[]},{"id":"b9418288.be704","type":"function","z":"dd15e4f.9f5a818","name":"周辺明るさを抽出","func":"if (msg.topic === 'sensorTag/luxometer') {\n msg.payload = msg.payload.lux;\n return msg;\n} else {\n return null;\n}","outputs":1,"noerr":0,"x":330,"y":260,"wires":[["25de6fa9.97e79","f9a215a1.aad768"]]},{"id":"25de6fa9.97e79","type":"debug","z":"dd15e4f.9f5a818","name":"","active":true,"console":"false","complete":"false","x":530,"y":300,"wires":[]},{"id":"cf8a7c7a.10a96","type":"function","z":"dd15e4f.9f5a818","name":"周辺気圧を抽出","func":"if (msg.topic === 'sensorTag/pressure') {\n msg.payload = msg.payload.pressure;\n return msg;\n} else {\n return null;\n}","outputs":1,"noerr":0,"x":320,"y":380,"wires":[["d63aa6fa.bf0378","4fb7ddca.ddebd4"]]},{"id":"d63aa6fa.bf0378","type":"debug","z":"dd15e4f.9f5a818","name":"","active":true,"console":"false","complete":"false","x":530,"y":420,"wires":[]},{"id":"f9a215a1.aad768","type":"ui_gauge","z":"dd15e4f.9f5a818","name":"ルクス","group":"8ffe5d83.a6fb4","order":0,"width":0,"height":0,"gtype":"donut","title":"明るさ","label":"lux","format":"{{value}}","min":0,"max":"1500","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":550,"y":360,"wires":[]},{"id":"4fb7ddca.ddebd4","type":"ui_gauge","z":"dd15e4f.9f5a818","name":"気圧","group":"8ffe5d83.a6fb4","order":0,"width":0,"height":0,"gtype":"compass","title":"気圧","label":"hPa","format":"{{value}}","min":0,"max":"1200","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":550,"y":480,"wires":[]},{"id":"a35a34f6.e6d578","type":"ui_group","z":"","name":"私の部屋","tab":"70de2c4b.0330c4","disp":true,"width":"6"},{"id":"8ffe5d83.a6fb4","type":"ui_group","name":"Group 2","tab":"70de2c4b.0330c4","order":2,"disp":true,"width":6},{"id":"70de2c4b.0330c4","type":"ui_tab","z":"","name":"Home01","icon":"dashboard"}]