小白的Node-Red学习系列

目录

一、简介

二、练习

1、B站粉丝数展示

(1)安装UI控件库

(2)教程

(3)展示

2、TTS语音提醒

3、API接口制作

4、温湿度数据平台

5、Mysql数据库&数据展示

6、西门子S7系列PLC通信

7、网络摄像头


一、简介

Node-Red去年就听说了,可以作为个人物联网服务器及页面展示,安装好之后,只需要在网页拖控件,配置信息就可以用了,可以说是不用编程的工具,适用于那些学生项目中,需要用到物联网平台数据展示等。一般来说,是你的硬件部分已经完成了,可以正常的在比如MQTT服务器上收发数据,但是,你还需要弄一个web端的平台进行数据展示,这个时候就很适合用这个东西,很多学生的毕业设计就有这样的需求,但是又只会做硬件,不会服务器的软件程序,这个只需要拖拽控件,设置参数就好了。

我是跟着阿正的视频进行学习,传送门:B站传送门

Node-Red的官网:https://nodered.org/

安装过程就不说了,随便搜一大堆,官网也有教程,我也写有一篇(传送门)。想知道详细的资料,可以去官网看开发手册。下面通过一些练习来学习Node-Red,练习的例子也是从阿正的教程里整理出来的,可以先去看一遍视频下来再过来看着实操。

二、练习

1、B站粉丝数展示

(1)安装UI控件库

在此之前,你要安装好dashboard这个UI控件库,在节点管理中,安装里搜node-red-dashboard,点击安装即可,安装后在这里可以看到。

小白的Node-Red学习系列_第1张图片

小白的Node-Red学习系列_第2张图片

安装完就可以在左边的这些控件最下面看到新安装的dashboard的UI控件。

(2)教程

  • 数据输入

首先我们是需要周期性的发一个http请求,然后服务器返回数据,我们再处理数据,并展示出来。

周期性执行这个功能,用共通控件里的inject控件,双击进去,设置消息流为JSON,然后点后面这个省略号进入编辑具体的JSON内容,写完记得点一下格式化json,检查一下有没有语法错误,然后在最底下选周期性执行,每隔1分钟。如果后面想暂时不用这个功能,可以点左下角的有效。

小白的Node-Red学习系列_第3张图片

小白的Node-Red学习系列_第4张图片

  • http请求

因为我们的http请求是周期性的,所以用网络里面的http request这个控件,有输入也有输出,然后按图中设置参数。

小白的Node-Red学习系列_第5张图片

URL:http://api.bilibili.com/x/relation/stat?vmid=27735202

后面这串数字是你的B站ID号,也可以直接用浏览器访问看看。

小白的Node-Red学习系列_第6张图片

会给你返回这串JSON格式的数据,上面这个URL就叫做API接口+参数。这个API返回的数据比较简洁,需要更多的信息的,可以找找别的API,然后自己做下数据处理。然后每个信息流的尾部,最好都加一个共通里面的debug调试控件来输出信息。

  • UI控件数据展示

用dashboard中的text input控件,Value format中填入{ {msg.payload.data.follower}},显示的就是UP主粉丝数,相应的,following是关注数,名称是要换一个API:https://api.bilibili.com/x/space/acc/info?mid=27735202,这个比较复杂一点,name是UP主名称。

小白的Node-Red学习系列_第7张图片

  • 仪表盘UI控件

仪表盘UI控件是gauge这个,Value format填入{ {msg.payload.data.follower}},然后再填个最小最大值,其他都差不多。

小白的Node-Red学习系列_第8张图片

如果用到按钮、日历、开关等其他控件,也是差不多这样设置,里面的Group是涉及到Web页面展示效果,接下来会讲到。

小白的Node-Red学习系列_第9张图片

  • Web展示

在这右边点这里,然后点Dashboard,会出现这些东西。

小白的Node-Red学习系列_第10张图片

我这里是因为前面就导入了模板,你新弄的应该就只有一个,或者没有,就新建一个Group,把刚刚的控件都设置到这个Group里,再移动一下位置,具体怎么调可以看看阿正的视频提到的,然后再自己尝试。

接着再点这个site,对Web的UI页面进行设置,网页名称、菜单设置等,最后部署,点一下那个分享一样的图标就可以打开网页了,网页实时更新,若有改动,重新部署一下,自己就会变的。

小白的Node-Red学习系列_第11张图片

(3)展示

小白的Node-Red学习系列_第12张图片

 

后续会继续更新。。。。。。

 

 

 

 

你可能感兴趣的:(nodered,nodered)