前言
各位读者好,截止目前,ThingsBoard系列文章已经做了十篇,分别是
ThingsBoard教程(一):ThingBoard介绍及安装 ThingsBoard教程(二):租户,租户配置,部件组模块的使用 ThingsBoard教程(三):系统设置模块的使用 ThingsBoard教程(四):规则链简介与操作 ThingsBoard教程(五):客户,资产管理 ThingsBoard教程(六):设备管理 ThingsBoard教程(七):模拟设备遥测 ThingsBoard教程(八):自定义UI ThingsBoard教程(九):前端架构分析 ThingsBoard教程(十):前端初级定制化 ThingsBoard教程(十一):部件库的入门知识 ThingsBoard教程(十二):部件库中使用echarts ThingsBoard教程(十三):部件的基本API解释 ThingsBoard教程(十四):部件库基本JS函数API解释,及变量的使用,显示 ThingsBoard教程(十五):部件库的点击事件上一篇我们讲解了tb的静态组件的开发, 有关事件的控制,本篇文章我们来聊聊 在tb部件库中使用 RPC
RPC部件效果展示
先来看下效果图
部件展示效果
![ThingsBoard教程(十六):制作RPC部件 ThingsBoard教程(十六):制作RPC部件](https://cms-pic.yhzz.com.cn/1682488321166.jpg)
通讯结果
![ThingsBoard教程(十六):制作RPC部件1 ThingsBoard教程(十六):制作RPC部件1](https://cms-pic.yhzz.com.cn/1682488321392.jpg)
RPC部件库开发
创建部件 选择 Control widget 部件类型。 这个很关键。
![ThingsBoard教程(十六):制作RPC部件4 ThingsBoard教程(十六):制作RPC部件4](https://cms-pic.yhzz.com.cn/1682488321587.jpg)
将使用以下内容替换html页面的内容
<form #rpcForm=”ngForm” (submit)=”sendCommand()”> <div class=”mat-content mat-padding” fxLayout=”column”> <mat-form-field class=”mat-block”> <mat-label>RPC method</mat-label> <input matInput required name=”rpcMethod” #rpcMethodField=”ngModel” [(ngModel)]=”rpcMethod”/> <mat-error *ngIf=”rpcMethodField.hasError(required)”> RPC method name is required. </mat-error> </mat-form-field> <mat-form-field class=”mat-block”> <mat-label>RPC params</mat-label> <input matInput required name=”rpcParams” #rpcParamsField=”ngModel” [(ngModel)]=”rpcParams”/> <mat-error *ngIf=”rpcParamsField.hasError(required)”> RPC params is required. </mat-error> </mat-form-field> <button [disabled]=”rpcForm.invalid || !rpcForm.dirty” mat-raised-button color=”primary” type=”submit” > Send RPC command </button> <div> <label>RPC command response</label> <div style=”width: 100%; height: 100px; border: solid 2px gray” [innerHTML]=”rpcCommandResponse”> </div> </div> </div> </form><
这里使用的angular的语法 配合material组件 来布局一个表单。
javascript 代码将以下内容写入javascript的面板中
self.onInit = function() { self.ctx.$scope.sendCommand = function() { var rpcMethod = self.ctx.$scope.rpcMethod; var rpcParams = self.ctx.$scope.rpcParams; var timeout = self.ctx.settings.requestTimeout; var oneWayElseTwoWay = self.ctx.settings.oneWayElseTwoWay ? true : false; var commandObservable; if (oneWayElseTwoWay) { commandObservable = self.ctx.controlApi.sendOneWayCommand(rpcMethod, rpcParams, timeout); } else { commandObservable = self.ctx.controlApi.sendTwoWayCommand(rpcMethod, rpcParams, timeout); } commandObservable.subscribe( function (response) { if (oneWayElseTwoWay) { self.ctx.$scope.rpcCommandResponse = “Command was successfully received by device.<br> No response body because of one way command mode.”; } else { self.ctx.$scope.rpcCommandResponse = “Response from device:<br>”; self.ctx.$scope.rpcCommandResponse += JSON.stringify(response, undefined, 2); } self.ctx.detectChanges(); }, function (rejection) { self.ctx.$scope.rpcCommandResponse = “Failed to send command to the device:<br>” self.ctx.$scope.rpcCommandResponse += “Status: ” + rejection.status + “<br>”; self.ctx.$scope.rpcCommandResponse += “Status text: ” + rejection.statusText + “”; self.ctx.detectChanges(); } ); } }<
Settings schema 配置
{
“schema”: {
“type”: “object”,
“title”: “Settings”,
“properties”: {
“oneWayElseTwoWay”: {
“title”: “Is One Way Command”,
“type”: “boolean”,
“default”: true
},
“requestTimeout”: {
“title”: “RPC request timeout”,
“type”: “number”,
“default”: 500
}
},
“required”: []
},
“form”: [
“oneWayElseTwoWay”,
“requestTimeout”
]
} <
Data key settings schema
{
“schema”: {
“type”: “object”,
“title”: “Settings”,
“properties”: {
“oneWayElseTwoWay”: {
“title”: “Is One Way Command”,
“type”: “boolean”,
“default”: true
},
“requestTimeout”: {
“title”: “RPC request timeout”,
“type”: “number”,
“default”: 500
}
},
“required”: []
},
“form”: [
“oneWayElseTwoWay”,
“requestTimeout”
]
} <
做完这些后就能看到部件的效果了
![ThingsBoard教程(十六):制作RPC部件5 ThingsBoard教程(十六):制作RPC部件5](https://cms-pic.yhzz.com.cn/1682488321667.jpg)
这里显示的太小了。我们点击右上角的 全屏图标就能放大,显示正常。
![ThingsBoard教程(十六):制作RPC部件6 ThingsBoard教程(十六):制作RPC部件6](https://cms-pic.yhzz.com.cn/1682488321728.jpg)