node-red教程 7dashboard简介与输入型仪表板控件的使用

node-red 专栏收录该内容
15 篇文章 40 订阅

  Node-red基于JS,这是前端技术的“三驾马车”之一。前端技术主要负责界面呈现,与用户交互等等,很多炫酷的特效都是前端呈现的。Node-red技术有这样的“基因”,界面当然不会差劲。它只需要一个控件就可以实现一个页面。由于本书讲述的应用与页面关系不大,就不讲HTTP与websocket相关的控件了。强烈建议感兴趣的读者自己研究一下。
  Node-red支持自定义节点,当然也就支持自定义图形化的节点。也有优秀的开发者把自己建立的图形化节点无偿分享。这里给出一个股票界面的例子,让大家看一看优秀的node-red界面能做到什么样子。
这里写图片描述

7.1 仪表板安装与介绍

7.1.1 仪表板的安装

  我们常用的图形化节点叫做仪表板,dashboard,也能做出效果不错的界面,例如
这里写图片描述
  Dashboard还有一些其它控件,例如
这里写图片描述
  仪表板的安装与串口类似,在安装节点的输入框内输入“dashboard”,找到名为“node-red-dashborad”的控件并点击安装即可。
这里写图片描述
  安装完以后在屏幕左边会多出很多新的控件
这里写图片描述

7.1.2 检验安装结果

  我们从中随便选择一个控件来检验安装好的控件是否能够使用。在deshboard的控件区找到“date picker”控件,拖入工作区,然后双击节点,点击Group输入框后边的编辑按钮,如图所示,把Group节点与Tab节点分别命名为Group与Tab。
这里写图片描述
这里写图片描述
这里写图片描述
  拖入一个debug节点并连线部署。在浏览器中输入地址http://localhost:1880/ui
  能正确打开此网页,已经可以说明安装成功了。
  然后可以看到名为date的一行内容。
这里写图片描述
  我们可以随便选择一个日期,例如北京奥运会开幕
这里写图片描述
  在调试窗口下就可以看到一个时间戳。
这里写图片描述
能用一个控件很简单地就搭建出一个看上去还不错的网页,这就是dashboard的方便之处。

7.1.3 仪表板简介

  在已经使用过仪表板以后再来看它的简介,不容易被弄糊涂。
  dashboard主要用于快速创建实时数据仪表板。它需要node-red版本为0.14或更高。
  仪表板的布局依赖于Tab和Group属性。Tab可以理解为页面,Group是分组。Tab可以包含Group。我们在选择“北京开幕式”那天的图片里,就有一个名为Group的分组。每个组的元素默认宽度是6个单位。每个单位默认宽度是48PX,间距6PX。一个页面里可以有多个分组,建议使用多个分组,而不是一个大组。因为node-red可以根据页面的大小动态调整分组的位置。
  使用dashboard节点时,屏幕右侧“调试窗口”的旁边会多一个名为dashborad的小标签,下边有Layout,Theme和Site三个选项。
  Layout意思是布局,在Layout里可以重新排列Tab,Group与控件,并编辑其属性。也可以把其它网页添加到Tab中。
  Theme意思是主题。可以选明亮的,或者暗的,或者自定义。
  Site意为地址,可以设置标题的UI,或者选择标题栏。也能够以像素为单位设置网格布局的基本图形,就是刚刚提到默认是48像素的那个“单位”,或者单独设置控件,组的大小。
这里写图片描述
这里写图片描述
这里写图片描述
  Dashboard的控件一般都可以设置Label或名字,Label和名字也可以通过传入消息的属性来指定或修改。其实控件的内容都可以用消息来配置,这属于比较高阶的用法,感兴趣的可以参考https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md
Dashboard带有的控件简介见下表。
名称 中文名 详细信息
button 按钮 可以点击,发送一个msg
dropdown 下拉菜单 可以指定标签与值的对应关系
switch 开关 添加一个开关到用户界面,开关变化的切换可以产生一个msg
slider 滑块 水平滑块,可变步长
numeric 数字选择 带有上、下按钮的数字输入控件
text input 文本输入 带有可选标签的文本,还可以支持密码,电子邮件和颜色模式
date picker 日期选择器 用于选择日期
colour picker 拾色器 用于选择颜色
form 表单 一个可由多个子小部件组成的小部件。提交时,所有值均作为单个消息提交。
text 文本 一个只读控件,可以配置Label和Value
gauge 仪表 有四种模式,标准,甜甜圈,指南针和波形。可以指定标准仪表或甜甜圈测量仪的颜色范围
chart 图表 具有折线、条形与饼图模式,可以使用日期格式化程序字符串来自定义X轴标签
audio out 音频输出 用于播放音频或发送文本到语音客户端
notification 通知 为用户创建警报,可以是弹出窗口或是报警框
ui control UI控制 允许对仪表板进行动态控制
template 模板 模板节点允许用户使用HTML,Javascript在框架内创建自己的小部件。

7.2 常见的输入型仪表板控件应用

  从仪表板的简介表中可以看出,仪表板控件的类型可以分为两种:一种是输入型,功能类似于inject控件,用于生成msg。另一种是显示型,或者说是输出型,与debug控件类似,用于展示某些数据。本章节只讲述输入型的控件。

7.2.1 按钮button简介

  按钮的帮助信息
    向用户界面添加一个按钮。
    单击该按钮会生成带有载荷的消息。如果没有指定载荷,则使用节点id。
    按钮的图标、文字、背景都可以自定义,也可以使用消息属性来设置,例如msg.background,msg.topic。还可以使用 msg.enabled来使能或禁用按钮。
    使用msg来设置的方法要用到函数节点,比如在函数节点内使用代码设置msg.background为“black”,并返回msg。此处对于使用函数来设置控件的方法不做讲解。
  在工作区拖入一个按钮节点,并把Tab和Group分别设置为home和control。
这里写图片描述
这里写图片描述
这里写图片描述
  再拖入一个debug节点,连线并部署。
这里写图片描述
  在http://localhost:1880/ui页面下就可以看到刚刚设置的的按钮,点击按钮,可以在调试窗口看到以下信息。
这里写图片描述
这里写图片描述
  这说明,点击按钮以后,按钮可以给流注入一个数据包。

7.2.2 使用按钮实现简易电话拨号界面

  我们在编辑按钮节点时,其实有很多选项都空着,例如尺寸、图标、标签、颜色等等。合理使用这些选项,即便是只用按钮控件也能做出来一些有意思的东西,例如做一个简易的电话拨号界面。
这里写图片描述
  接下来结合这和拨号界面,来讲讲我们设置了哪些参数。以下是button节点可以设置的参数。
这里写图片描述
  首先,很直观可以看到,数字的背景是不一样的,123的背景是灰色,456的背景是浅蓝,
  所以123控件的Background处应当填写“gray”。
这里写图片描述
  按键的大小也是不一样的。一般来说,按键的大小默认是自动,也就是长度跟随Group,宽度是1。Group的宽度是多少呢?默认是6,可以修改,拨号界面就改成了3。修改的界面在屏幕右侧的dashboard界面下:
这里写图片描述
这里写图片描述
  Width就是宽度。顺带提一下,下边的两个选项分别是显示组的名字,和允许收缩。效果就是这样的:
这里写图片描述
  显而易见,普通数字按钮的宽度都是1,拨号键的宽度是2。
  还有文字的颜色不一样。这个就很简单了,修改colour即可,比如数字的文字都是black。
这里写图片描述
  另外,还可以看出,拨号的按键上有一个小小的电话图标;按键0的大小好像比别的数字也大一点,这其实也是一个图标。图标如何设置?
  在别的软件里,设置图标可能需要一个本地的图片。Node-red使用的是一个在线的图标库(不联网的时候显然没办法使用),地址是https://material.io/tools/icons/?style=baseline
  这个网页里有很多图标,我截取一些放在这里:
这里写图片描述
这里写图片描述
  每个图标下边都有名字,如果你需要使用这个图标,把名字输入到Icon后边即可,例如按键0的图标:
这里写图片描述
  既然是电话拨号按键,当然要有拨号的功能。我们让每一个数字按键被按下去的时候,都可以把数字发送到流里边去;再按下“CALL”的时候,就把之前按下的数字全部打印出来,暂时用debug节点来显示。
  分析以后,发现需要一个函数节点利用context功能保存之前按下的数字,等到收到CALL的命令以后,一次性打印出来。函数节点的程序如下:

var temp = context.get('num')||"";
if (msg.topic != "call"){
    temp = temp + ""+msg.payload;
    context.set('num',temp);
}
else{
    msg.payload = temp;
    return msg;
}

  如图设置流:
这里写图片描述
  如果在仪表板的界面,有数字的顺序是颠倒的,可以再屏幕右侧dashboard页面下通过拖拽节点调整顺序:
这里写图片描述
  我们来“拨打”友道(我的公司)的电话,借以观察现象:按下数字按键时,并不会显示单个数字;按下CALL以后,一串电话号码都能显示出来。
这里写图片描述
  我们举例子详细地介绍了按钮控件的各个选项的作用,其它仪表板控件的选项功能类似,聪明的读者要学会举一反三哦。
  代码在这里,导入你的node-red工作区好好研究下吧。

[{"id":"e9614f74.8d223","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":1,"width":"1","height":"1","passthru":false,"label":"1","color":"black","bgcolor":"gray","icon":"","payload":"1","payloadType":"num","topic":"","x":190,"y":60,"wires":[["cc35b265.c22d"]]},{"id":"b98d8139.972c8","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":2,"width":"1","height":"1","passthru":false,"label":"2","color":"black","bgcolor":"gray","icon":"","payload":"2","payloadType":"num","topic":"","x":190,"y":100,"wires":[["cc35b265.c22d"]]},{"id":"ded462b1.c2e2b","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":3,"width":"1","height":"1","passthru":false,"label":"3","color":"black","bgcolor":"gray","icon":"","payload":"3","payloadType":"num","topic":"","x":190,"y":140,"wires":[["cc35b265.c22d"]]},{"id":"857ebe34.c8d85","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":4,"width":"1","height":"1","passthru":false,"label":"4","color":"black","bgcolor":"light blue","icon":"","payload":"4","payloadType":"num","topic":"","x":190,"y":180,"wires":[["cc35b265.c22d"]]},{"id":"f11b9214.04659","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":5,"width":"1","height":"1","passthru":false,"label":"5","color":"black","bgcolor":"light blue","icon":"","payload":"5","payloadType":"num","topic":"","x":190,"y":220,"wires":[["cc35b265.c22d"]]},{"id":"94ebe434.733518","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":6,"width":"1","height":"1","passthru":false,"label":"6","color":"black","bgcolor":"light blue","icon":"","payload":"6","payloadType":"num","topic":"","x":190,"y":260,"wires":[["cc35b265.c22d"]]},{"id":"4043b4bf.bcc71c","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":7,"width":"1","height":"1","passthru":false,"label":"7","color":"black","bgcolor":"orange","icon":"","payload":"7","payloadType":"num","topic":"","x":190,"y":300,"wires":[["cc35b265.c22d"]]},{"id":"2301a306.95065c","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":8,"width":"1","height":"1","passthru":false,"label":"8","color":"black","bgcolor":"orange","icon":"","payload":"8","payloadType":"num","topic":"","x":190,"y":340,"wires":[["cc35b265.c22d"]]},{"id":"aa51af93.26b73","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":9,"width":"1","height":"1","passthru":false,"label":"9","color":"black","bgcolor":"orange","icon":"","payload":"9","payloadType":"num","topic":"","x":190,"y":380,"wires":[["cc35b265.c22d"]]},{"id":"85bdbffa.6a1dc","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":0,"width":"2","height":"1","passthru":false,"label":"call","color":"yellow","bgcolor":"green","icon":"phone","payload":"0","payloadType":"num","topic":"call","x":190,"y":460,"wires":[["cc35b265.c22d"]]},{"id":"cc35b265.c22d","type":"function","z":"c1c86dfa.43a1a","name":"储存数字,拨号","func":"var temp = context.get('num')||\"\";\nif (msg.topic != \"call\"){\n    temp = temp + \"\"+msg.payload;\n    context.set('num',temp);\n}\nelse{\n    msg.payload = temp;\n    context.set('num',\"\");\n    return msg;\n}\n","outputs":1,"noerr":0,"x":560,"y":240,"wires":[["c96d8af2.f3a4b8"]]},{"id":"c96d8af2.f3a4b8","type":"debug","z":"c1c86dfa.43a1a","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":750,"y":240,"wires":[]},{"id":"d011a93b.f06a78","type":"ui_button","z":"c1c86dfa.43a1a","name":"0","Group":"72c43141.3520c","order":9,"width":"1","height":"1","passthru":false,"label":"","color":"black","bgcolor":"orange","icon":"exposure_zero","payload":"0","payloadType":"num","topic":"","x":190,"y":420,"wires":[["cc35b265.c22d"]]},{"id":"72c43141.3520c","type":"ui_Group","z":"","name":"phone","tab":"aacbcc03.d359b","disp":true,"width":"3","collapse":true},{"id":"aacbcc03.d359b","type":"ui_tab","z":"","name":"home","icon":"dashboard"}]

接下来修改按钮,

7.2.3 开关switch的使用

  Dashboard中的switch可以增加一个开关到用户界面。
  开关状态的每一个变化都会产生一个带有on或off值的msg.payload。
  开关的颜色与图标是可以配置的,也可以由传入的msg更新,方法跟button类似。
  之前已经用过函数控件switch了,当时用“岔路口”来比喻那个函数控件。仪表板中的switch是真正的开关,功能上像是一个具备“开”与“关”两种状态的按钮。
  直接拖入一个switch节点,修改它的Group和Tab,并与debug节点连接,部署。
这里写图片描述
这里写图片描述
  在http://localhost:1880/ui/下可以看到这个开关。点击开关可以看到调试窗口下输出了true。
这里写图片描述
这里写图片描述
  其中的true与false当然也可以改为别的载荷,跟inject节点类似
这里写图片描述

7.2.4 滑块slider的使用

  手机在调节屏幕亮度的时候,常常出现一个横线,串着一个圆球,拖拽圆球就可以改变屏幕亮度。横线加圆球组成的就是一个滑块。看上去有点像被吃的只剩下一个的糖葫芦,或者就叫做滑球更贴切。
  Dashboard中的滑块可以帮助用户在最小值与最大值的范围内,改变设置的值。每次变化都会把值作为消息的载荷。
拖入一个slider控件,修改Group与Tab,然后与debug节点连接,部署。
  滑块形状如下
这里写图片描述
  拖动滑块,可以在调试窗口见到当前滑块的值。
这里写图片描述
  注意,假如需要从0到3,那么拖动滑块时,1和2的值也会发送。可以直接点击到3的位置。
默认情况下,滑块的范围是从0到10,步进1,也可以修改,例如10到80,步进2。
这里写图片描述

7.2.5 输入框text input的使用

  Text input可以向用户界面添加一个文本输入区域,格式可以是常规文本、电子邮件或颜色选择器等。
  输入都以msg.payload的形式发送。也可以通过输入msg的载荷来预设输入的文本。
  Delay参数可以设置从输入字符到发送的延时,默认是300毫秒。也可以设置为0,等待按下“Enter”或“Tab”键发送。
  电子邮件模式可以使用红色来表示无用的地址。
  时间输入类型返回从午夜开始的毫秒值。
  接下来通过实践来验证下text input的功能。
  拖入一个text input节点,修改Group与Tab,然后与debug节点连接,并部署。
这里写图片描述
  输入任意的文字,在调试窗口可以看到。
这里写图片描述
这里写图片描述
  不过,你需要输入的稍微快一点,两个字符输入间隔大于300ms的话就会输出不止一条,你会看到这样的结果:
这里写图片描述
  所以我建议把输入的延时设置为0,用“Enter”和“Tab”作为结束的标记。
  再来试一试输入框的别的功能,比如密码:
这里写图片描述
  我们把Label也写上,在仪表板的页面可用于显示一些提示。
这里写图片描述
  输入密码时,提示的文字会变小,且密码会用点来代替。
这里写图片描述
  在“number”的模式下,没办法输入其它的字符。
这里写图片描述
这里写图片描述

7.2.6 使用文本输入的取色功能为按钮设置颜色

  文本输入的模式里有颜色选择,可以调出一个取色板,并返回颜色的编码。我们在讲述按钮的时候,说过可以使用msg来设置按钮,这里正好来把两者结合一下。
  首先,我们把text input的模式设置为picker,并用debug节点来看一看选中颜色以后会输出什么。
这里写图片描述
这里写图片描述
  点击仪表板页面的颜色输入框,可以看到这样的一个取色板:
这里写图片描述
  我们随便选一个颜色并点击确定。比如红色。再来看调试窗口的信息。
这里写图片描述
  收到消息是#ff0000,这就是红色的编号。我们也可以在设置颜色的页面用这种方式。用颜色选择器看颜色的编码,再进行颜色设置的办法很方便。7.2.1小节设置按钮的颜色时,想出gray,orange和light blue这几个单词我都有点绞尽脑汁了。
  接下来改进程序,由于比较简单,我就直接把源码附在下边,你们看一看源码应该就能理解。需要注意的点就是,用change节点把msg.payload的属性赋给msg.colour,然后button里的colour并不是空着,而是{{msg.colour}}。Background直  接用编码来设置。
这里写图片描述
  效果就是,不论你选择什么颜色,中间的心就变成什么颜色。
这里写图片描述
  也可以使用这种方法来动态地设置背景或文字的内容,感兴趣的同学可以自己研究下。参考代码在这里:

[{"id":"1fbb5eaf.febb51","type":"ui_text_input","z":"7a8c632b.0c701c","name":"","label":"选择文字或图标颜色","group":"bd84de44.ae507","order":0,"width":0,"height":0,"passthru":true,"mode":"color","delay":"300","topic":"","x":220,"y":120,"wires":[["69912933.9c62e8","4dd666d2.d144e8"]]},{"id":"4dd666d2.d144e8","type":"debug","z":"7a8c632b.0c701c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":390,"y":60,"wires":[]},{"id":"69912933.9c62e8","type":"change","z":"7a8c632b.0c701c","name":"payload转字体","rules":[{"t":"move","p":"payload","pt":"msg","to":"colour","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":120,"wires":[["b22f434.b055dc"]]},{"id":"b22f434.b055dc","type":"ui_button","z":"7a8c632b.0c701c","name":"","group":"bd84de44.ae507","order":0,"width":"0","height":"0","passthru":false,"label":"","color":"{{msg.colour}}","bgcolor":"#ff80ff","icon":"favorite","payload":"","payloadType":"str","topic":"","x":670,"y":120,"wires":[[]]},{"id":"bd84de44.ae507","type":"ui_group","z":"","name":"CONTROL","tab":"aacbcc03.d359b","disp":true,"width":"6","collapse":false},{"id":"aacbcc03.d359b","type":"ui_tab","z":"","name":"home","icon":"dashboard"}]

7.2.7 下拉菜单dropdown的使用

  下拉菜单是输入框与按钮的结合体,常用于有指定选项的输入。例如,您住在哪个省?这个答案就可以用下拉菜单,只不过选型可能会多一点。但是可以避免用户输入信息,也可以避免他犯错。接下来就使用下拉菜单来做一个简单的例子。
俗话说,“桃三杏四李五年,要吃苹果等八年,枣子当年能卖钱”。这句话里包含5个键值对,也就是关键字与数值的对应,及桃对应5年……枣对应1年,我们使用下拉菜单来完成这样的任务:选择某个水果,就输出对应的年份。
拖入一个dropdown节点,如图进行配置:
这里写图片描述
  再拖入一个text节点。注意不是text input。我们以前一直使用debug节点来显示信息,现在想把信息显示在仪表板的页面上,就用这么个节点。然后进行如下修改:
这里写图片描述
  连线并部署。
这里写图片描述
  在仪表板的页面,就可以看到这样的页面。点击下拉菜单,就可以看到候选框。
这里写图片描述
这里写图片描述
这里写图片描述
  代码如下:

[{"id":"4989de73.41634","type":"ui_dropdown","z":"7a8c632b.0c701c","name":"","label":"什么果树种下了?","place":"请选择水果","group":"bd84de44.ae507","order":0,"width":0,"height":0,"passthru":true,"options":[{"label":"桃","value":"3年","type":"str"},{"label":"杏","value":"4年","type":"str"},{"label":"李","value":"5年","type":"str"},{"label":"苹果","value":"8年","type":"str"},{"label":"枣子","value":"1年","type":"str"}],"payload":"","topic":"","x":330,"y":260,"wires":[["ba04c2f1.2e9c1"]]},{"id":"ba04c2f1.2e9c1","type":"ui_text","z":"7a8c632b.0c701c","group":"bd84de44.ae507","order":0,"width":0,"height":0,"name":"","label":"几年能结果子?","format":"{{msg.payload}}","layout":"row-spread","x":540,"y":260,"wires":[]},{"id":"bd84de44.ae507","type":"ui_group","z":"","name":"CONTROL","tab":"aacbcc03.d359b","disp":true,"width":"6","collapse":false},{"id":"aacbcc03.d359b","type":"ui_tab","z":"","name":"home","icon":"dashboard"}]
  • 16
    点赞
  • 1
    评论
  • 52
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
<p> <span style="color:#313d54;font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;font-size:16px;background-color:#ffffff;">Node-RED是工业网物联网的重要组成部分,我最开始接触Node-RED,也算是一个偶然的机会吧,上班后领导安排我的第一个任务就是调研一下Node-RED,我之后上网查了一下,那个时候网上相对于Node-RED的资料也比较少,只知道它是IBM公司的一个开源项目。直到最近,发现许多大公司的产品都支持Node-RED,比如西门子公司的IoT2000,研华公司的WISE PaaS 网关,美国OPTO 22等设备中都安装了Node-RED,表明它在工业物联网和控制中已经广泛应用了。</span> </p> <p> <img src="https://img-bss.csdnimg.cn/202010200935441926.png" alt="" width="1316" height="524" /> </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> 那么工业物联网为什么要用它?它又处于工业物联网那个层次?它具有哪些特性?它帮助物联网解决了什么问题?为什么说它是柔性动态可重构的解决方案呢? </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> 本门课程,老师将带领你从Node-RED的发展,工业物联网定位开始讲解,并带领着大家进行手把手安装Node-RED,实际操作演练Node-RED,并搭建一个物联网小平台,给大家带来更好的学习效果。 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> <img src="https://img-bss.csdnimg.cn/202010200936289051.png" alt="" width="1841" height="948" /> </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> <img src="https://img-bss.csdnimg.cn/202010200936561564.png" alt="" width="1920" height="977" /> </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> 为了能够让小伙伴们快速了解本门课程的结构,本门课程从以下几个方面展开: </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED入门 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED安装与配置 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED教学实战 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED的优势与不足 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED能为我们带来什么 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED总结与展望 </p>
©️2020 CSDN 皮肤主题: 护眼 设计师:闪电赇 返回首页

打赏

yummy说电子

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值