前端使用二开Thingsboard一、二、三事(五)-仪表板(六)

于 2024-03-04 09:10:53 发布
阅读量407 收藏
点赞数 6
分类专栏： thingsboard、物联网、IOT 文章标签： 前端 物联网 iot angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43163457/article/details/135966040
版权
本文详细介绍了如何在Thingsboard前端进行二次开发，特别是针对HTML Value Card部件进行全屏事件改造和HTML开发。通过改造，部件在全屏模式下能根据屏幕尺寸动态调整样式。此外，文章还展示了如何利用HTML和CSS创建并展示多个数据源的值，为用户提供了一种扩展Thingsboard仪表板功能的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

logo

前端使用二开Thingsboard一、二、三事(五)-仪表板(六)

thingsboard之仪表板

七、最新值部件-HTML Value Card

单独把HTML Value Card部件拎出来讲是因为这个部件完全是在空白部件中以代码的形式实现自己想要的页面效果，这就大大扩展了thingsboard部件的可应用性，如果有需要完全首页就自己在部件中写代码来实现。
在这里插入图片描述
==显示可配置的HTML，并具有从选定数据源注入值的能力。例如，显示单个或多个属性值。==通过HTML Value Card说明的很清楚可以显单个或者多个数据源注入的数据，可以用HTML匹配
在这里插入图片描述

了解本专栏 订阅专栏 解锁全文 超级会员免费看
thingsboard 简单的前端二开流程与自定义mqtt遥测主题
知无涯
04-10 98
如果你使用docker容器 微服务的方式进行安装的话，二开会比较简单，因为前端是一个独立的容器，所有的资源都在这个容器里，你可以直接进入容器进行修改。最简单的二开时，解压jar包，修改其中的前端资源后，再重新压缩成jar包，调用java的一些指令。最后还是要在本地搭建一个开发环境，然后编译出jar包，替换容器或者本地安装目录的jar包。构建jar包要配置开发环境，安装java，安装maven，安装git，需要优秀的网速。这种方式适用性比较强，适合所有的安装方式，docker 容器，服务器直接安装，
前端使用二开Thingsboard一、二、三事(四)-部件库
weixin_43163457的博客
02-19 435
以项目实战为基础，逐步介绍前端在thingsboard系统二次开发中的一些注意事项以及一些thingsboard一些页面功能讲解，为前端人员开发使用thingsboard提供一种可靠思路，打造一个完美的物联网系统。
Thingsboard二次开发---4.基于Thingsboard的在线组态软件
Diego的博客
08-19 4906
Thingsboard提供了非常强大的物联网功能，其中仪表板功能可以快速的搭建数据大屏，但美中不足的是对于工业组态没有提供很好的工具，本文介绍在thingsboard基础上利用svg技术开发通用组态软件，后续文章会逐步介绍开发的过程。
ThingsBoard 二次开发 - 设备管理
IoTHub - 物联网开源技术社区
01-23 1250
ThingsBaord 二次开发，设备管理，ThingsBoard 作为 PaaS 平台，不修改源码。
Thingsboard前端二次开发学习
xiaoming_Super的博客
01-05 1287
目录解析
ThingsBoard 二次开发 - 设备遥测
IoTHub - 物联网开源技术社区
01-24 2014
ThingsBaord 二次开发，设备遥测，ThingsBoard 作为 PaaS 平台，不修改源码。
ThingsBoard 二次开发 - 设备告警
IoTHub - 物联网开源技术社区
01-24 1346
ThingsBaord 二次开发，设备告警，ThingsBoard 作为 PaaS 平台，不修改源码。
Thingsboard前端二开引入NG-ZORRO组件库
weixin_67697081的博客
12-30 703
由于Thingsboard用的组件库是angular官方组件库Material，这个组件库是国外的，很多样式跟国内设计的有出入，因此我引入antd发布的一款angular组件库（NG-ZORRO），功能齐全，样式也更好看。
ThingsBoard 二次开发之源码分析 4-启动分析 3
云腾五洲官方博客
10-01 2753
创建AppActor和StatsActor两个Actor,并未创建其他的Actor;在收到的时候，由于之前没有初始化，所以会初始化该应用的所有, 根据②③④点分析，循环切递归的创建了所有的;关于的理解：mailbox理解为一个信箱，里面有一些信件(即入队列的消息)，这些信件有一些是高优先级，有些是普通优先级的，每次取信件的时候，都先看有没高优先级的，先处理高优先级的信件，再处理普通优先级的信件。那么信件处理人是谁呢？信件的处理人就是每一个Actor.实际上的信件处理方法都是每一个Actor的方法；
前端使用二开Thingsboard一、二、三事(五)-仪表板(二)
weixin_43163457的博客
02-19 439
以项目实战为基础，逐步介绍前端在thingsboard系统二次开发中的一些注意事项以及一些thingsboard一些页面功能讲解，为前端人员开发使用thingsboard提供一种可靠思路，打造一个完美的物联网系统。
前端使用二开Thingsboard一、二、三事（一）-thingsboard介绍
weixin_43163457的博客
02-18 708
以项目实战为基础，逐步介绍前端在thingsboard系统二次开发中的一些注意事项以及一些thingsboard一些页面功能讲解，为前端人员开发使用thingsboard提供一种可靠思路，打造一个完美的物联网系统。
前端使用二开Thingsboard一、二、三事(二)-设备
weixin_43163457的博客
02-18 232
登录Thingsboard后，进入的第一个页面便是首页，首页展示分为两部分，默认展示的是快捷入口模块点击模块便可进入相应的侧边栏页面，默认显示模块个数与侧边栏展示列一般相同，展示内容可在代码中进行删减，具体操作在上一章中已做介绍，此处不再累述，除了默认展示外，还可根据用户需求制作数据展示首页，如下图：怎么制作数据展示页面是个复杂的过程(二次开发主要集中在这里)，之后会单独讲，此处先说如何切换默认首页和数据展示首页。
前端使用二开Thingsboard一、二、三事(五)-仪表板(一)
最新发布
weixin_43163457的博客
02-21 309
以项目实战为基础，逐步介绍前端在thingsboard系统二次开发中的一些注意事项以及一些thingsboard一些页面功能讲解，为前端人员开发使用thingsboard提供一种可靠思路，打造一个完美的物联网系统。
ThingsBoard 二次开发 - 设备控制
IoTHub - 物联网开源技术社区
01-24 1577
ThingsBaord 二次开发，设备控制，ThingsBoard 作为 PaaS 平台，不修改源码。
ThingsBoard 二次开发 - 网关 API
IoTHub - 物联网开源技术社区
01-25 1753
ThingsBaord 二次开发，网关 API，ThingsBoard 作为 PaaS 平台，不修改源码。
ThingsBoard 二次开发 - 事件处理
IoTHub - 物联网开源技术社区
01-25 1389
ThingsBaord 二次开发，事件处理，ThingsBoard 作为 PaaS 平台，不修改源码。
ThingsBoard 二次开发 - 设备属性
IoTHub - 物联网开源技术社区
01-24 1263
ThingsBaord 二次开发，设备属性，ThingsBoard 作为 PaaS 平台，不修改源码。
IoT开源平台Thingsboard二次开发研究
热门推荐
houpanqi的博客
10-25 2万+
ThingsBoard 二次开发指南 参考资料 [TB官方文档（英文）](https://thingsboard.io/docs/) [Protobuf的讲解](https://www.ibm.com/developerworks/cn/linux/l-cn-gpb/index.html) 概述 1 整个ThingsBoard的代码中，变量、方法命名规范; 2 变量和方法的标识符...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weixin_43163457

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值