『瀚思彼岸』» 智能家居技术论坛

标题: 好看的电力监测的UI来了！代码如下：点击图标弹出数据 [打印本页]
作者: 嘉诺的智能生活    时间: 2024-5-15 11:22
标题: 好看的电力监测的UI来了！代码如下：点击图标弹出数据
  1. type: custom:button-card
  2. show_entity_picture: true
  3. entity_picture: /local/icon/电费.png
  4. name: 用电数据
  5. show_icon: false
  6. show_name: true
  7. show_state: false
  8. styles:
  9.   card:
  10.     - background: none
  11.     - border: none
  12.     - box-shadow: none
  13.   entity_picture:
  14.     - justify-self: start
  15.     - width: 65px
  16.     - padding: 0px
  17.     - margin-left: 10px
  18.     - border-radius: 5px
  19. tap_action:
  20.   action: fire-dom-event
  21.   browser_mod:
  22.     service: browser_mod.popup
  23.     data:
  24.       title: 用电数据
  25.       content:
  26.         type: custom:swipe-card
  27.         parameters:
  28.           loop: true
  29.           effect: coverflow
  30.         cards:
  31.           - type: custom:stack-in-card
  32.             title: 用电数据
  33.             mode: vertical
  34.             cards:
  35.               - type: horizontal-stack
  36.                 cards:
  37.                   - type: custom:mushroom-entity-card
  38.                     entity: sensor.state_grid_6108617426058_month_ele_num
  39.                     name: 本月用电
  40.                     layout: vertical
  41.                     icon: mdi:home-lightning-bolt-outline
  42.                     icon_color: yellow
  43.                   - type: custom:mushroom-entity-card
  44.                     entity: sensor.state_grid_6108617426058_daily_ele_num
  45.                     name: 日总用电
  46.                     layout: vertical
  47.                     icon: mdi:home-lightning-bolt-outline
  48.                     icon_color: yellow
  49.               - type: horizontal-stack
  50.                 cards:
  51.                   - type: custom:mushroom-entity-card
  52.                     entity: sensor.state_grid_6108617426058_last_month_ele_num
  53.                     name: 上月用电
  54.                     layout: vertical
  55.                     icon: mdi:home-lightning-bolt-outline
  56.                     icon_color: yellow
  57.                   - type: custom:mushroom-entity-card
  58.                     entity: sensor.state_grid_6108617426058_last_month_ele_cost
  59.                     name: 上月电费
  60.                     layout: vertical
  61.                     icon: mdi:currency-jpy
  62.                     icon_color: green
  63.               - type: horizontal-stack
  64.                 cards:
  65.                   - type: custom:mushroom-entity-card
  66.                     entity: sensor.state_grid_6108617426058_year_ele_num
  67.                     name: 本年用电
  68.                     layout: vertical
  69.                     icon: mdi:home-lightning-bolt-outline
  70.                     icon_color: yellow
  71.                   - type: custom:mushroom-entity-card
  72.                     entity: sensor.state_grid_6108617426058_year_ele_cost
  73.                     name: 本年电费
  74.                     layout: vertical
  75.                     icon: mdi:currency-jpy
  76.                     icon_color: green
  77.               - type: custom:mushroom-entity-card
  78.                 entity: sensor.state_grid_6108617426058_balance
  79.                 name: 电费余额
  80.                 layout: vertical
  81.                 icon: mdi:currency-jpy
  82.                 icon_color: green
复制代码

[attach]59085[/attach]
作者: motoyu    时间: 2024-5-15 12:33
let me see see
作者: zxyny1989    时间: 2024-5-15 13:36
用起来了，谢谢分享。
作者: 隔壁的王叔叔    时间: 2024-5-15 14:03
谢谢大佬分享。
电费.png
等等图标能发一下不
作者: 459662146    时间: 2024-5-15 14:20
已用上 支持
作者: wzx123    时间: 2024-5-15 14:30
let me see see
作者: Juices    时间: 2024-5-15 14:41
厉害厉害  let me see see
作者: jey0722    时间: 2024-5-15 14:56

let me see see
作者: yhwl8888    时间: 2024-5-15 15:41
大佬 点击不弹出是啥问题
作者: swewa    时间: 2024-5-15 16:23
小白请教！怎样更改主题和用电数据的图标
作者: zxyny1989    时间: 2024-5-15 17:58
yhwl8888 发表于 2024-5-15 15:41
大佬 点击不弹出是啥问题

安装button卡了吗？
作者: qkyzs    时间: 2024-5-16 09:31
let me see see
作者: 嘉诺的智能生活    时间: 2024-5-16 10:22
隔壁的王叔叔 发表于 2024-5-15 14:03
谢谢大佬分享。
电费.png
等等图标能发一下不

就个电费图标
作者: 隔壁的王叔叔    时间: 2024-5-16 10:36
嘉诺的智能生活 发表于 2024-5-16 10:22
就个电费图标

感谢大佬了
作者: Taoyhu    时间: 2024-5-16 11:48
这个怎么用啊 目前用了国家电网的包 这个代码去哪里输入 形成图标啊 怎么联动国家电网数据啊 求教
作者: lovlin999    时间: 2024-5-16 14:15
感谢大佬
作者: 嘉诺的智能生活    时间: 2024-5-16 16:23
Taoyhu 发表于 2024-5-16 11:48
这个怎么用啊 目前用了国家电网的包 这个代码去哪里输入 形成图标啊 怎么联动国家电网数据啊 求教 ...

你把图标上传到www内自己新建个文件夹里面，在hcas中需要的卡片下载好，ui中手动模式下添加代码，换成自己电量实体，还有图标路径就可以了。
作者: 嘉诺的智能生活    时间: 2024-5-16 16:25
【0511】集成版国家电网开始公测！
https://bbs.hassbian.com/thread-25214-1-1.html
(出处: 『瀚思彼岸』» 智能家居技术论坛)
电量就用的大佬的集成。
作者: abcdsys    时间: 2024-5-16 16:48
安装了button-card，点击也是弹不出来
作者: llyyoo    时间: 2024-5-16 17:15
来看看  学习一下
作者: z死囚漫步    时间: 2024-5-17 11:29
同安装了button-card，点击不弹出来
作者: labi    时间: 2024-5-17 14:32
非常感谢，安装完弹出内容有线需要怎们解决
作者: longtor    时间: 2024-5-17 20:31
谢谢啊，用起来
作者: 嘉诺的智能生活    时间: 2024-5-18 08:41
z死囚漫步 发表于 2024-5-17 11:29
同安装了button-card，点击不弹出来

browser_mod卡片装了没
作者: z死囚漫步    时间: 2024-5-18 10:12
嘉诺的智能生活 发表于 2024-5-18 08:41
browser_mod卡片装了没

装了，，，，，，，，，，，，
作者: z死囚漫步    时间: 2024-5-18 10:15
嘉诺的智能生活 发表于 2024-5-18 08:41
browser_mod卡片装了没

看看还差什么呢
作者: xiaodonggua    时间: 2024-5-18 17:38
看着不错的样子
作者: alanshu    时间: 2024-5-19 10:08
我的button card 也不跳啊…
作者: alanshu    时间: 2024-5-19 23:34
自问自答一下，不是hacs里的browser control card的前端，而是browser_mod集成，下载后重启，集成里安装再次重启搞定，谢谢lz分享。
作者: spender    时间: 2024-5-20 17:16
这一段代码放在哪儿？  新手找不到位置
作者: [email protected]    时间: 2024-5-21 07:57
本帖最后由 [email protected] 于 2024-5-21 07:58 编辑

[attach]59417[/attach]Browser mod  是不是应该到集成里装这个插件
作者: shenzihan999    时间: 2024-5-21 08:23
alanshu 发表于 2024-5-19 23:34
自问自答一下，不是hacs里的browser control card的前端，而是browser_mod集成，下载后重启，集成里安装再 ...

browser control card到底用不用装，我的点击图标也不跳转
作者: yao8086    时间: 2024-5-21 08:59
shenzihan999 发表于 2024-5-21 08:23
browser control card到底用不用装，我的点击图标也不跳转

两个都要装，少一个都不行
作者: shenzihan999    时间: 2024-5-21 09:07
yao8086 发表于 2024-5-21 08:59
两个都要装，少一个都不行

点击可以显示了，就是提示错误！Custom element doesn't exist: swipe-card.希望大佬指导一下
作者: cokeii    时间: 2024-5-21 09:17
shenzihan999 发表于 2024-5-21 09:07
点击可以显示了，就是提示错误！Custom element doesn't exist: swipe-card.希望大佬指导一下 ...

安装swipe-card 在hacs搜索安装 还要再装一个stack-in-card 就可以了
作者: shenzihan999    时间: 2024-5-21 09:24
cokeii 发表于 2024-5-21 09:17
安装swipe-card 在hacs搜索安装 还要再装一个stack-in-card 就可以了

OK了感谢指导，原来要装这么多卡片
作者: aj11891    时间: 2024-5-21 14:10
成功了，并且正常调转，挺好看的，支持一下
作者: MagicStarTrace    时间: 2024-5-22 10:23
我的小图标怎么和你的不一样啊，而且还缺几个图标
作者: R7789    时间: 2024-5-23 15:02


let me see see
作者: slash@hassbian    时间: 2024-5-29 18:34
请问，需要把这段代码 写在哪个文件里？
作者: liberty    时间: 2024-7-27 16:42
abcdsys 发表于 2024-5-16 16:48
安装了button-card，点击也是弹不出来

怎么修复的



欢迎光临 『瀚思彼岸』» 智能家居技术论坛 (https://bbs.hassbian.com/) Powered by Discuz! X3.5