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

最新推荐文章于 2024-08-16 16:25:26 发布
最新推荐文章于 2024-08-16 16:25:26 发布
阅读量173 收藏
点赞数 3
分类专栏： thingsboard、物联网、IOT 文章标签： 前端 iot angular.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43163457/article/details/135864493
版权
本文介绍了如何在前端二开Thingsboard时，针对物联网设备数据创建自定义仪表板部件，并实现主题颜色控制。通过编辑部件的HTML和CSS，结合Angular语法实现暗模式检测。此外，详细讲解了添加点击动作以切换主题颜色，以及仪表板的高级设置步骤。
摘要由CSDN通过智能技术生成

logo

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

thingsboard之仪表盘

这章开始讲仪表板中部件的实际应用，因为物联网中接入的设备可能千奇百怪，现有的部件可能并不能完美的展示出接入的设备数据，本人展示的部件仅供大家参考，如有更加好的方式，欢迎大家讨论。

四、主题颜色控制部件

在这里插入图片描述
在这里插入图片描述
通过上面两个图可以看到背景色统一都是暗色的，但是部件中的颜色是颜色是可以控制改变的，也就是改变当前部件的主题颜色

在这里插入图片描述
点击添加部件，选择卡片类型，之后选择Markdown/HTML卡部件
在这里插入图片描述
每种部件中基本上都是4个tab，“数据”</

了解本专栏 订阅专栏 解锁全文 超级会员免费看
weixin_43163457
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
订阅专栏
thingsBoard仪表板黑暗主题切换
qq_42243383的博客
03-29 887
thingsBoard切换黑暗主题，实时设备监测仪表板配置
行业资料-交通装置-一种汽车副仪表板前端储物盒.zip
09-11
行业资料-交通装置-一种汽车副仪表板前端储物盒.zip
how-2-use-thingsboard:一些文档可以帮助使用Thingsboard
04-06
Thingsboard使用基于3.2分支的使用文档，包含基础、高阶、二开和扩展阅读准备Jdk，11+（因3.2.2版本需要11），用于编译运行Maven，3.2.1+，不强制需要，某些IDE也自带IDE，推荐Idea，查看代码和运行Html5浏览器，...
恒信修复二十分钟一期杏C二开版加KJ全修复
06-11
【标题】"恒信修复二十分钟一期杏C二开版加KJ全修复"涉及到的是一个针对特定在线彩票系统或游戏平台的修复方案。在这个标题中，“恒信”可能是指一个开发公司或者服务提供商的名字，而“二十分钟一期”可能指的是这...
Thingsboard详细说明.doc
06-29
本文档详细介绍了Thingsboard的项目框架、涉及的流程图、第三方包、设备连接协议、打包过程、日志管理、数据库结构以及前端技术概述，旨在帮助开发者更好地理解和使用Thingsboard。 ### 第一章 项目框架整理说明 ...
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 635
ASP.NET Core Web API 使用Autofac框架
JAVA-WEB资源配置
caryeko的专栏
08-15 157
用JAVA进行编写WEB项目时，我们一般需要对WEB进行统一配置，例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。
使用WebSocket实现一个简易的聊天室
qq_51321722的博客
08-14 362
其次，要有相关配置类以及Controller。我这里的框架是SpringBoot。首先，我们要有一个前端页面。
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 231
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 763
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
提升前端性能的JavaScript技巧
han2434的博客
08-14 780
一个快速响应、高效运行的Web页面不仅能提升用户体验，还能在一定程度上影响网站的SEO排名。本文汇总了一系列JavaScript技巧，以帮助开发者提升前端性能，并提供实际的代码示例。
playwright链接本地浏览器，实现自动登录。
qq_38880880的博客
08-12 171
【代码】playwright链接本地浏览器，实现自动登录。
Vue 中 app.config 相关配置项介绍与案例
前端基地
08-13 1034
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
微信小程序电话号码授权
最新发布
qq_36022463的博客
08-16 100
文档：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/user-info/phone-number/getPhoneNumber.html。文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html。掉这个获取电话号码，需要先获取access_token。获取token，有效期是两小时，需要缓存，
总结常见报错信息
m0_68903702的博客
08-16 144
在@Controller注解中，返回的是字符串或者是字符串匹配的模板名称，即直接渲染视图，与html页面配合使用的，java后端的代码要结合html的情况进行渲染,使用model对象（或者modelandview）的数据将填充user视图中的相关属性，然后展示到浏览器；而在@RestController中，返回的应该是一个对象，即return一个user对象，这时，在没有页面的情况下，也能看到返回的是一个user对象对应的json字符串。情形一：若前端传入Json格式，后端使用。
Web语义化及实际应用
沐爸的博客
08-13 1026
Web语义化是什么？有什么作用？实际开发中如何运用呢？一起了解下吧！
NVDLA专题4：具体模块介绍——Convolution DMA
fangfanglovezhou的博客
08-14 551
NVDLA专题4：具体模块介绍——Convolution DMA
前端实现接口调用进度百分比
qq_42072014的博客
08-14 162
通过本文，我们学习了如何使用 XMLHttpRequest 和 Fetch API 在前端实现接口调用进度百分比的显示。这些技术可以帮助提升用户体验，特别是在涉及文件上传或大型数据传输的场景中。如果你在实现过程中遇到任何问题，欢迎随时提问。
thingsboard前端ui框架使用的是哪个
11-15
经过查阅资料，Thingsboard前端UI框架使用的是AngularJS。AngularJS是一个由Google开发的JavaScript框架，用于构建动态Web应用程序。它提供了一组工具和库，使开发人员能够更轻松地构建客户端应用程序。AngularJS的主要特点是双向数据绑定、依赖注入和模块化。这些特性使得开发人员能够更快速地构建复杂的Web应用程序。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值