{"id":13834417,"url":"https://github.com/caowm/thingsboard-widget","last_synced_at":"2025-07-10T04:31:55.268Z","repository":{"id":54289026,"uuid":"475698162","full_name":"caowm/thingsboard-widget","owner":"caowm","description":"thingsboard widget","archived":false,"fork":false,"pushed_at":"2022-08-08T04:46:56.000Z","size":48,"stargazers_count":10,"open_issues_count":0,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-20T19:39:58.680Z","etag":null,"topics":["chatroom","iot","remote-shell","thingsboard","white-board","widget"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/caowm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-30T02:59:16.000Z","updated_at":"2024-05-21T06:01:25.000Z","dependencies_parsed_at":"2022-08-13T11:01:09.254Z","dependency_job_id":null,"html_url":"https://github.com/caowm/thingsboard-widget","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/caowm/thingsboard-widget","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caowm%2Fthingsboard-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caowm%2Fthingsboard-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caowm%2Fthingsboard-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caowm%2Fthingsboard-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/caowm","download_url":"https://codeload.github.com/caowm/thingsboard-widget/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caowm%2Fthingsboard-widget/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264528741,"owners_count":23623218,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chatroom","iot","remote-shell","thingsboard","white-board","widget"],"created_at":"2024-08-04T14:00:34.117Z","updated_at":"2025-07-10T04:31:55.020Z","avatar_url":"https://github.com/caowm.png","language":"JavaScript","readme":"# thingsboard-widget\n\n## nodejs rpc remote shell\n\n特性：\n* 这是一个用node程序模拟的mqtt设备，定时发送内存/CPU使用率，接收shell命令\n* 完全适配thingsboard内部部件\"Contronl widgets\u003eRPC remote shell\"\n* 可以看作thingsboard版本的ssh\n\n1. 启动shell-device\n```\ncd node-device\nnpm install\n\n# 修改配置文件 config/index.js：mqtt broker, token\nnano config/index.js\n\t\nnpm run shell-device\n```\n\n2. 在thingsboard看板添加RPC remote shell部件，绑定的设备和第一步配置的设备相同\n\n\n## 部件之间通讯交互示例：send_message.json/receive_message.json\n这里使用的TB版本是3.3.3，发送消息：\n```js\nself.onInit = function() {\n    self.ctx.$scope.sendMessage = function() {\n        const $injector = self.ctx.$scope.$injector;\n        const broadcastService = $injector.get(self.ctx.servicesMap.get('broadcastService'));\n        broadcastService.broadcast('SOME_CUSTOM_EVENT', {\n            message: 'Hello ThingsBoard'\n        });\n    }\n}\n\n```\n\n接收消息：\n```js\nself.onInit = function() { \n    const $injector = self.ctx.$scope.$injector;\n    const broadcastService = $injector.get(self.ctx.servicesMap.get('broadcastService'));\n    broadcastService.on('SOME_CUSTOM_EVENT', (evt, data) =\u003e {\n        // data 是个数组\n        console.log('broadcast message', data);\n        self.ctx.$scope.message = data[0].message;\n        self.ctx.detectChanges();\n    });\n} \n```\n\n\u003e 使用broadcastService进行部件之间的通讯是最佳方式，使用全局对象也可以，比如一个部件对self.ctx.userService定义新方法，然后在其他部件进行调用。或者使用window.onmessage和window.postMessage。\n\n参考：https://github.com/thingsboard/thingsboard/issues/976\n\n\n## 聊天室部件：chatroom.json\n用法：导入部件后，在仪表板添加此部件。数据源添加任意一设备（此设备在多个客户之间共享），遥测名称为“chat”。时间窗口数据聚合功能选“空”，一定！\n\n原理：\n* 把聊天记录当作遥测进行发送\n```js\nself.ctx.http.post(`api/plugins/telemetry/DEVICE/${entityId}/timeseries/ANY`, \n  {\n      chat: {\n          userId: self.ctx.currentUser.userId,\n          nick: self.ctx.currentUser.firstName + self.ctx.currentUser.lastName,\n          content: self.ctx.$scope.content\n      }\n  },\n  {\n      'headers': {\n          'content-type': 'application/json',\n          'X-Authorization': 'bearer ' + localStorage.getItem('jwt_token')\n      }\n  }).subscribe(() =\u003e {\n      self.ctx.$scope.content = \"\";\n  });\n```\n* 设置好数据源，面板通过WebSocket自动订阅遥测，我们只需要根据数据做展示\n\n## 白板部件：drawing-board.json\n用法：导入部件后，在仪表板添加此部件。数据源添加任意一设备（此设备在多个客户之间共享），遥测名称为“draw_event”。时间窗口数据聚合功能选“空”，一定！\n\n原理：\n* 把绘画动作当作遥测进行发送\n* 根据drawingboard提供的各种绘图事件构建遥测（一个json对象）并发送\n\n描点动作：\n```js\n{\n  cmd: {\n    name: 'stroke',\n    points: self.ctx.$scope.points,\n    color: self.ctx.$scope.board.mode === 'pencil' ? self.ctx.$scope.board.color : 'white',\n    lineWidth: self.ctx.$scope.board.ctx.lineWidth\n  },\n  drawId: ++self.ctx.$scope.drawId,\n  userId: self.ctx.currentUser.userId,\n  session: self.ctx.$scope.session\n}\n\n```\n\n填充动作：\n```js\n{\n  cmd: {\n    name: 'fill',\n    coords: event.coords,\n    color: self.ctx.$scope.board.color\n  }，\n  drawId: ++self.ctx.$scope.drawId,\n  userId: self.ctx.currentUser.userId,\n  session: self.ctx.$scope.session\n}\n```\n\n* session属性表示发送方，发送方据此无需重复绘图\n* 根据遥测信息调用drawingboard提供的绘图方法\n* 可多人同时操作\n\n缺点：\n* 只要遇到reset动作，图像被全部清空\n* 多人同时操作，撤销动作的效果会不一样，这是因为各人进入的时间不一样，得到的绘图动作数量不一样，而且最开始的绘制过程因为性能原因没有保存每一步的history，只在最后保存了history\n\n参考：http://leimi.github.io/drawingboard.js/\n\n\n## 手绘风格白板Excalidraw部件：excalidraw_embed.json\n\n把强大的excalidraw嵌入到thingsboard面板\n\n参考：\n* https://www.npmjs.com/package/@excalidraw/excalidraw\n* https://codesandbox.io/s/excalidraw-ehlz3?file=/src/App.js\n\n\n作者：caowm (remobjects@qq.com)\n","funding_links":[],"categories":["Widgets"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaowm%2Fthingsboard-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaowm%2Fthingsboard-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaowm%2Fthingsboard-widget/lists"}