设备插件开发

来自ThingsPanel

什么是设备插件

设备插件是供设备接入、数据和可视化展示的封装包,包括了对设备的定义、数据的定义、图表单元等。

设备插件可以让普通用户方便的接入设备,接入数据,查看数据,查看可视化结果。

所需技能

插件开发主要需要前端技能,vue开发。

演示视频

10分钟开发一个温度监测的物联网应用

插件开发

插件放置在根目录extensions下面,系统会自动识别

插件目录结构(后端)


extensions/
├── base.go
├── base_interface.go
├── humiture
│   ├── actions
│   │   └── humiture_chart.go
│   ├── config.yaml
│   └── view
│   ├── HumBrokenlineChart.js
│   ├── humChart.js
│   ├── TempBrokenlineChart.js
│   ├── tempChart.js
│   └── temp_chart.vue
└── pm25
├── actions
│   └── pm25.go
├── config.yaml
└── view
├── pm25BrokenlineChart.js
└── pm25CurrentChart.js

创建文件夹

在extensions目录下面创建插件文件夹,添加icon.png插件图标(120x120px)

在插件目录中创建配置文件

ThingsPanel-Go\extensions\humiture\config.yaml

Plugindev.png

1)映射到传感器的字段就是vue图表中的字段

2)插件名保持一致

3)模板名与ThingsPanel-Go\extensions\humiture\view下的js文件名保持一致,js为驼峰,配置文件里为中划线

4)一个模板对应一个js图表文件,一个config.yaml文件对应一个插件

5)其他如图示例

插件初始化

ThingsPanel-Go\extensions\插件名\actions\humiture_chart.go插件需要初始化

1)新增插件目前需要编译后端代码,命令:go build,然后重启后端生效

2)也可以linux配置新增文件自动编译和重启

前端开发

拿到前端插件代码后样例后(推荐vscode\HBuilder X开发)

1)安装环境node.js 16.13

2)执行命令 npm install安装依赖

3)开发后不运行,执行命令npm run build编译为js文件

4)将js文件放入ThingsPanel-Go\extensions\插件名\view文件夹下

5)修改js文件和配置文件不用重启系统

6)后端接口返回数据格式:

{

"data": "[{\"device_id\":\"f1ab2c47-951f-10b8-60c0-c6b33440f189\",\"fields\":[{\"hum\":24,\"systime\":\"2022-01-18 18:59:11\",\"temp\":26},{\"hum\":24,\"systime\":\"2022-01-18 18:59:17\",\"temp\":26},{\"hum\":24,\"systime\":\"2022-01-18 18:59:41\",\"temp\":26}],\"latest\":{\"hum\":24,\"systime\":\"2022-01-18 18:59:41\",\"temp\":26}}]",

"endTs": 1642503540000,

"startTs": 1642503240000

}