Thingsboard create RCP widget

One 、 Reference resources

Official RPC The firmware , Only fixed method and param, Because there are test requirements , Need web pages can be sent at will rpc command . Since I don't know much about the front end , Find the example that the corresponding boss did well
https://www.jianshu.com/p/0adc8965da45

Two 、 Create a widget

1. Create your own part library

2. Add a new part , Add respectively HTML,JS, Set the architecture Code for
   HTML

   <div class="tb-rpc-button" fxLayout="column">
       <div fxFlex="20" class="title-container" fxLayout="row"
           fxLayoutAlign="center center" [fxShow]="showTitle">
           <span class="button-title">{
         {
         title}}</span>
       </div>
       <div fxFlex="{
         {showTitle ? 80 : 100}}" [ngStyle]="{paddingTop: showTitle ? '5px': '10px'}"
           class="button-container" fxLayout="column" fxLayoutAlign="center center">
           <div>
               <button mat-button (click)="sendCommand()"
                       [class.mat-raised-button]="styleButton?.isRaised"
                       [color]="styleButton?.isPrimary ? 'primary' : ''"
                       [ngStyle]="customStyle">
                   {
         {
         buttonLable}}
               </button>
           </div>
       </div>
       <div class="error-container" [ngStyle]="{'background': error?.length ? 'rgba(255,255,255,0.25)' : 'none'}"
            fxLayout="row" fxLayoutAlign="center center">
           <span class="button-error">{
         {
          error }}</span>
       </div>
   </div>
   

   JS

   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();
               }
               
           );
       }
       }
   

   Set the architecture

   {
         
       "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"
       ]}
   

3、 ... and 、 Actually measured