ThingsBoard教程（十六）：制作RPC部件

前言

各位读者好，截止目前，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部件效果展示

先来看下效果图

部件展示效果

通讯结果

RPC部件库开发

创建部件 选择 Control widget 部件类型。 这个很关键。 然后进入到编辑页面 html 代码

将使用以下内容替换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” ] }

<

做完这些后就能看到部件的效果了

这里显示的太小了。我们点击右上角的 全屏图标就能放大，显示正常。