Thingsboard 创建RCP小部件

最新推荐文章于 2023-12-19 08:00:00 发布

可可芯意

最新推荐文章于 2023-12-19 08:00:00 发布

阅读量513

点赞数 1

分类专栏： thingsboard 文章标签： node.js 前端

本文链接：https://blog.csdn.net/xuan530482366/article/details/122041813

版权

thingsboard 专栏收录该内容

9 篇文章 3 订阅

订阅专栏

一、参考

官方给到的RPC固件，只能固定method和param，因为有测试需求，需要网页可以发送随意的rpc命令。鉴于不太懂前端的知识，找到对应的大佬做好的例子
https://www.jianshu.com/p/0adc8965da45

二、创建小部件

创建自己的部件库

添加新部件，分别添加HTML，JS，设置架构的代码
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>

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

设置架构

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