バナー

ノーコードIoT開発 ラズパイでGUIを作る


操作ボタンもメータもNodeRedで簡単制作

dashboardでボタンやスライダを配置

図1　Node-REDのdashboardを使うことで，ノーコードでIoT向けのGUIを簡単に構築可能．buttonやsliderなどのウィジェットを活用し，視覚的に操作できるインターフェースを作成できる．画像クリックで動画を見る．または記事を読む．［提供・著］後閑 哲也
詳細：［VOD/Pi KIT］ラズパイ×Node-REDで作ろう！IoTアプリ開発入門

Node-REDによるノーコードIoT開発

dashboardとは

Node-REDのdashboardは，ブラウザ・ベースのGUIを簡単に作成できるツールです．ウィジェットと呼ばれるGUI要素を利用して，視覚的に操作できるインターフェースを構築できます．

  • 表示や操作用のウィジェットを提供する
  • PCのブラウザ上でGUIを作成できる
  • レイアウトを自由に配置できる

dashboardを利用すると，ボタンやスライダを配置してデータの入力や可視化ができます．

パレットの管理

Node-REDの標準ノードにはdashboardは含まれていません．「パレットの管理」機能を使って追加する必要があります．

  1. メニューから「パレットの管理」を開く
  2. 「ノードを追加」の検索欄に「dashboard」と入力
  3. 「node-red-dashboard」を見つけたら追加ボタンをクリック
  4. 確認ダイアログで「追加」を選択
  5. 完了すると新しいノードが使用可能になる

buttonウィジェットの使い方

buttonウィジェットは，クリック操作でデバイスを制御するためのノードです．LEDのON/OFFを切り替える用途に適しています．

  1. タブとグループを作成する
  2. buttonウィジェットを追加する
  3. ラベルや背景色を設定する
  4. 出力する値を設定する
  5. ノードをデプロイしてGUIを確認する

GUIレイアウトの整理

dashboardのレイアウトは，タブとグループの構成で決まります．

  1. タブを作成し，グループを追加する
  2. ウィジェットを配置し，サイズを調整する
  3. レイアウト・エディタでウィジェットの位置を変更する
  4. デプロイして画面の動作を確認する

キーワード

ウィジェット

ウィジェットとは，dashboardで使用するGUI要素のことです．代表的なものとして，button，slider，text input，gaugeなどがあります．ウィジェットを適切に配置することで，視覚的に分かりやすいインターフェースを構築できます．

  1. 操作用ウィジェット：ボタン，スイッチ，スライダー，入力フォーム
  2. 表示用ウィジェット：テキスト，ゲージ，グラフ，警告表示

レイアウトの管理

Node-REDのdashboardでは，レイアウトの設定が重要です．タブとグループを適切に設定し，ウィジェットの配置を調整することで，使いやすいGUIを作成できます．

  1. タブを作成して大枠を決める
  2. グループを作成してウィジェットを整理する
  3. ウィジェットの配置とサイズを調整する
  4. デプロイしてレイアウトを確認する

〈著：ZEPマガジン〉

動画を見る，または記事を読む

著者紹介

  • 1971年　東北大学　工学部卒　大手通信機メーカにて制御機器開発に従事
  • 1996年　ホームページ「電子工作の実験室」を開設
  • 2003年　有限会社マイクロチップ・デザインラボ設立　代表取締役 計測制御システムコンサルタント，書籍執筆　セミナ講師
  • 2012年　神奈川工科大学　工学部　客員教授

著書

  1. ［VOD/KIT/Book/data］ラズパイPico W×ChatGPT APIで学ぶ 会話型IoTエッジ開発，ZEPエンジニアリング株式会社．
  2. ［VOD/KIT］PICマイコン オールイン1日学習キット ，ZEPエンジニアリング株式会社．
  3. ［VOD/Pi KIT］ラズベリー・パイで学ぶLinux＆Pythonプログラミング超入門，ZEPエンジニアリング株式会社．
  4. ［VOD/Pi KIT］ラズパイ×Node-REDで作ろう！IoTアプリ開発入門，ZEPエンジニアリング株式会社．
  5. 電子工作のための PIC16F1ファミリ活用ガイドブック，技術評論社．

参考文献

  1. ［VOD/KIT］STM32マイコン＆Wi-Fiモジュールで学ぶ C/C++プログラミング入門，ZEPエンジニアリング株式会社．
  2. ［VOD/KIT］M5Stack Core2付き！ESP32で学ぶPython＆Arduinoプログラミング入門，ZEPエンジニアリング株式会社．
  3. ［VOD/KIT］STM32マイコン＆Wi-Fiモジュールで学ぶ C/C++プログラミング入門，ZEPエンジニアリング株式会社．
  4. ［VOD/KIT］M5Stackで一緒に作ろう！IoTセンシング・エッジ×クラウド連携システム開発［改訂版］，ZEPエンジニアリング株式会社．
  5. ［VOD/KIT］実習キットでできる！ラズパイPicoでマイコン入門，ZEPエンジニアリング株式会社．
  6. ［VOD/KIT］LabVIEW×Arduino！初めてのパソコン計測＆制御【改訂版】，ZEPエンジニアリング株式会社．