开发节点

(Node-red官网部署自己的节点教程点击这里

       SmartNode是一个让每个人都能开发智能硬件的图形化编程工具。用户仅需要对模块化图形进行拖拽、连接与设置,就能够轻松实现各种智能应用,从而大大降低智能硬件的开发门槛,让创造的过程更加简单高效。但是如果想要开发一个自己独特的节点,则需要你有一些HTML和JavaScript的开发经验了。

       下面我们介绍一下基于Edison开发板的SmartNode节点开发。我们将以节点—中文节点介绍开发过程。

       一个节点主要包括三部分:JavaScript文件,HTML文件,locals文件。

节点结构

       JavaScript文件用于节点功能编写,html文件用于节点页面编辑,locals文件用于节点信息部分和节点名称的英汉化显示。其中en-US为英文版本,zh-CN为中文版本,中英文可以根据浏览器的语言设置进行切换。

节点英汉化结构

节点英汉化内部结构

       创客大爆炸的开发人员编写了节点的模板,所以每次只需要修改自己想要开发的节点的相关功能和对应的参数修改,学会错误信息的查找并且调试就可以完成属于自己的开发节点。

       我们以“改变类型”节点为例,了解一下JS和HTML代码结构。我们可以使用Sublime Text查看代码。

       HTML即超文本标记语言,结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容。HTML包括两部分结构:

html-1

       Category:类型,“改变类型”为函数节点;

       Color:颜色,修改节点的显示颜色;

       Defaults:参数,该部分参数与HTML第二部分的结构代码相关,为显示的SmartNode网页上的节点参数;

       Inputs:输入个数;

       Outputs:输出个数;

       Icon:图标;

       Label:标签,节点拖至部署界面显示的名称;

       PaletteLabel:标签,节点栏里的显示名称。

html-2 

       第二部分的代码与第一部分的参数部分相关,根据需要设置的参数设计对应的类型和选项,显示效果如下图所示:

节点外观-中文 

       JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。下面来介绍JS文件下的代码。

JS 

       RED.nodes.createNode(this, config):创建该节点,config为html部分设置的参数变量;

       this.operation = config.operation:获取参数定义的模式;

       this.on('input', function(msg){……}):节点输入启动之后的函数,“改变参数”节点的流程为如果模式选择“TO_STRING”,则将输入的值转为字符串;如果模式为“TO_NUMBER”,则将输入的值转为数字,并且判断是不是一个常数;并且将转换之后的msg输出。

       编写其他节点功能的时候也按照节点功能设计代码即可。

       下面我们可以看一下汉化部分的代码,汉化包括两部分内容,“.html”文件是汉化SmartNode的节点信息栏目的内容,“.json”要汉化节点的标签和参数等。

       html文件:

汉化html 

       显示效果如下:

汉化html显示

       Json文件:

汉化json 

       显示效果:

节点—中文

       到此关于如何开发SmartNode节点已经介绍完毕,如果有问题可以直接在论坛中提出,我们会即时进行解答。

跳至工具栏