这篇文章是对Node-RED的入门指南,我将介绍Node-RED的内容,如何安装,如何使用可视界面创建简单流程以及在树莓派的Node-RED仪表板的介绍。我们将介绍如何安装Node-RED仪表板,并举例说明如何构建图形用户界面。

先决条件:

在开始阅读此博客文章之前,我假设你已经熟悉树莓派,并且知道如何安装操作系统.否则,请到官网上查找一下相关入门教程.

什么是Node-RED?

Node-RED是用于构建物联网(IoT)应用程序的功能强大的开源工具,旨在简化编程组件。它使用可视化编程,连接代码块,称为节点,一起执行任务.
连接在一起的节点称为流。

为什么推荐Node-RED作为解决方案?

Node-RED是开源的,由IBM开发。在树莓派上可以完美运行Node-RED。使用Node-RED的话,你可以花更多的时间来制作有趣的东西,而不用花费无数小时来编写代码.不要误会我的意思。我是业余喜欢编程,本文在整个笔记中都需要编写代码,但是Node-RED可以简单快速构建复杂的家庭自动化系统的原型。

可以用Node-RED来做什么?

  • 访问您的RPi GPIO
  • 与其他开发板(Arduino,ESP8266等)建立MQTT连接
  • 为你的项目创建响应式图形用户界面
  • 与第三方服务(IFTTT.com,Adafruit.io,Thing Speak等)进行通信
  • 从网络上检索数据(天气预报,股票价格,电子邮件等)
  • 创建时间触发的事件
  • 从数据库存储和检索数据

安装Node-RED

在树莓派中安装Node-RED非常简单快,只需要几个命令。
bash <(curl -sL https://raw.githubusercontent.com/node-red/raspbian-deb-package/master/resources/update-nodejs-and-nodered)
几分钟后应完成安装。

引导时自动启动Node-RED

要在Pi启动时自动运行Node-RED,输入以下命令:
sudo systemctl enable nodered.service
然后重启一下你的树莓派

测试安装

重新启动Pi后,可以通过在Web浏览器中输入Pi的IP地址,然后输入1880端口号来测试安装:
http://YOUR_RPi_IP_ADDRESS:1880
我的这里是:http://192.168.1.98:1880
然后加载完成的页面如下:

Node-RED概述

在左侧,您可以看到带有一堆方块的列表。这些块称为节点(nodes),它们按功能分开。如果选择一个节点,则可以在"info "选项卡中查看其工作方式.在中心-Flow(流程),这是放置节点的位置

创建流程

测试一个简单的流程示例。首先将Inject节点拖到流程中。然后,还拖动一个“调试(debug)”节点。

如果将节点连接在一起,你可以拖动它们来确认它们已连接。现在,编辑注入节点。双击节点。在下图中,可以看到可以更改的不同设置。选择字符串,然后键入Hello!

保存的应用程序,您需要单击右上角的部署(deploy)按钮。

测试流程

让我们测试一下我们的简单流程。打开调试窗口并单击Inject节点以触发Hello字符串。

如图所见,我们的消息正在调试窗口中打印。这是一个非常基本的示例,它没有任何用处。但是,这篇文章的目的只是是让你熟悉一下Node-RED接口而已。

Node-RED仪表板入门

一下开始对树莓派的Node-RED仪表板的介绍。我们将介绍如何安装Node-RED仪表板,并举例说明如何构建图形用户界面。

什么是Node-RED仪表板?

Node-RED仪表板是一个模块,提供Node-RED中的一组节点以快速创建实时数据仪表板。

安装Node-RED仪表板

要安装Node-RED仪表板,请运行以下命令:

pi@raspberry:~ $ node-red-stop
pi@raspberry:~ $ cd ~/.node-red
pi@raspberry:~/.node-red $ npm install node-red-dashboard

然后重启
在Web浏览器中键入树莓派的IP地址,然后输入:1880/ui,如:http://Your_RPi_IP_address:1880/ui
目前仪表板是空的(如下图所示),因为我们尚未向仪表板添加任何内容

创建一个UI(用户界面)

在本节中,将向展示如何在Node-RED中创建UI(用户界面)。

仪表板布局

在浏览器中打开另一个选项卡,以使用以下方式访问Node-RED:http://Your_RPi_IP_address:1880
在节点部分上向下滚动。您将看到一组称为dashboard的节点,如下图所示:

“仪表板”部分中的节点提供了显示在您的应用程序用户界面(UI)中的小部件。用户界面按选项卡(tabs)和组进(groups)行组织。选项卡是用户界面上的不同页面,例如浏览器中的多个选项卡。在每个标签内,都有将标签划分为不同部分的组,以便可以组织窗口小部件。每个小部件都应具有一个相关的组,该组确定该小部件应在用户界面上出现的位置。

要创建选项卡和组,请遵循以下说明(请参见下图):

  • 在Node-RED窗口的右上角,有一个名为 dashboard 的选项卡。
  • 选择该选项卡(1)。要将选项卡添加到用户界面,请单击 +选项卡按钮(2)。
  • 创建完成后,您可以点击 “edit” 按钮(3)来编辑标签。

你也可以编辑标签的名称并更改其图标:

创建选项卡后,可以在该选项卡下创建多个组。您需要创建至少一组来添加窗口小部件。要将群组添加到创建的选项卡中,您需要单击 +group 按钮(4)。然后,可以通过单击 edit 按钮(5)编辑创建的组。你可以编辑其名称,选择其相应的选项卡并更改其宽度。

仪表板主题

默认情况下,Node-RED仪表板具有白色背景和浅蓝色条。您可以在右上角的主题(Theme)选项卡中编辑其颜色,如下图所示。

更改样式,部署更改,并查看仪表板UI更改其颜色。例如,如下图所示:

资讯主页

在Node-RED窗口的右上角,您还有另一个名为站点(Site)的选项卡,可用于进行进一步的自定义,如下图所示。

随便更改设置,然后部署更改并查看一下UI外观。目前,您不会看到太大的差异,因为您尚未向仪表板添加任何内容.当你开始将小部件添加到UI时,这些更改就会很明显。

创建用户界面–示例

在本节中,我们将以仪表板示例为例,向您展示如何构建和编辑自己的仪表板-我们实际上不会在小部件中添加功能-我们将在以后的项目中使用.该仪表板将具有以下功能:

  • 两个不同的标签:一个叫做“Room”,另一个叫做“Garden”
  • “房间”选项卡将具有两组,而“花园”选项卡将具有一组
  • 添加一个颜色选择器并切换到房间组
  • 图表添加到“花园”组中

创建标签(Tabs)

在Node-RED窗口的右上角,选择仪表板选项卡,然后通过单击 +tab 按钮创建两个新选项卡。

编辑一个具有以下属性的选项卡:

  • Name: Room
  • Icon: tv

另一个:

  • Name: Garden
  • Icon: local_florist

然后,将两个组添加到“房间”选项卡中,并将一个组添加到“花园”选项卡,如下图.

添加小部件

向流程添加一个开关,一个滑块,一个颜色选择器和一个量规,如下图所示:

双击一下开关会弹出一个新窗口。

在这个新窗口中,可以选择希望按钮小部件出现的位置。在这种情况下,我们需要它显示在“房间”选项卡的第1组中,如上图中红色突出显示。然后,对其他小部件执行相同的操作,但将它们添加到以下组中:

  • slider: Group 1 [Room]
  • colour picker: Group 2 [Room]
  • gauge: Group 1 [Garden]
    部署更改并转到仪表板用户界面看看其外观:http://Your_RPi_IP_address:1880/ui

    这是带有两个组的“房间”标签的显示方式。

    这是“花园”选项卡与一组显示的样子。

总结

由于工作原因,MQTT系列拖到现在,原本这编文章的事前准备应该要先阅读本文和这个


一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。