thingsboard-部件库开发 之 rpc-部件开发

 

thingsboard 部分的知识网上也不是很多  对于类似于我这样的一些同学来说 看官方api简直是欲生欲死。

正好最近也有项目，一边开发一遍写博，留作日志，同时也供大家参考。

因为也是入门级别，所以有些地方可能有错误，欢迎大家指出。

另外，有结交朋友的可以加群 QQ：726442610  .备注csdn-thingsboard

thingsboard 中国论坛地址  www.iothi.cn

话不多说，今天讲讲一个部件的开发。-rpc部件。

---

老大要求我做一个空调遥控器，带有温度选择/模式选择等功能，而现有的rpc部件只有按钮/旋钮/显示这些，对于复杂的集成按钮这类部件，需要自行进行开发。

首先我们打开部件库，新建一个test部件库，进入新建部件库(system账号下，新建的所有部件库和部件，租户管理员显示都为系统部件库，无法进行删除和修改。防止误删，建议租户管理员(tenant)进行开发，然后再导入到system下。)

进入新建的部件库 选择新建部件 选择控件部件。

清空html css js 设置模式/数据键模式(这边各个功能，后面我会开一个新的文章进行讲解)

html：这边进行页面样式的编写。使用angularjs标签(原生html也可以混合使用)，比如我这边需要定义一个按钮 使用标签。

对于其他已经存在的部件集成到新的部件里面，比如旋钮控件，只需要到部件库-旋钮部件   copy其html/js部分代码放入自定义部件相应位置即可。

例如：

这边部件部分的样式，引用的涉及到rpc控件，在代码部分新增html/js/css文件，然后更换。进行css和js自定义开发。例如

这边我的样式就是新建了一个rpcjs/html/css 然后进行自定义。注意index.js 和 control_widget.json部分入口也需要新增。

相关样式修改可以在css文件和部件里面css模块进行修改

设计模式部分json 有关于部件高级选项部分，这边参考官网教材 或者从其他控件进行copy，不做过多介绍。

js部分代码：  动作js：   self.ctx.$scope.XXX=function(){}   XXX:html标签动作。比如

---

下面源代码部分讲解。

 

这边源码有个bug，感谢  QQ群：680703452 @琉璃大神  提供解决方法。在此处加上这串代码即可，重新编译打包ui，启动项目。删除浏览器记录。

此bug会导致，在点开部件设置或者进入部件库的时候，部件大小改变导致假死情况。

 

 

 

操作-源码顺序。  rpc上传顺序：仪表盘按下按钮->对应部件库.js(rpcUpdateValue)->widget.controller.js(sendOneWayCommand/sendTwoWayCommand)->subscription.js(sendOneWayCommand/sendTwoWayCommand->sendCommand)。

此处悉知：rpc上发，不会走规则链，而是直接上发给MQTT通讯后，回调值作为参数发送给规则链。如上图部分。

sendOneWayCommand(************).then(**************);    

sendOneWayCommand:上发给MQTT

then:部分回调值传给规则链。

    

暂时做到这边  正在解决参数传递问题 后面想到什么再进行补充。

下章介绍一下基于echarts控件进行小部件开发。

---

                                                                                                                                                                     @by SnailJian