弄个破卡片，捣鼓了一整天

sorrypqa · 发表于 2023-9-21 19:23:51

本帖最后由 sorrypqa 于 2023-9-22 10:09 编辑

今天想看看怎么玩Mushroom卡片，没想到它推荐button-card，我就照虎画猫弄了示例里一个看起来不错的卡片，折腾了一整天，终于可以正常显示了，图标都来不及换，想请教各位大佬，如何温度的下面增加2个开关之类的实体或者人体存在传感器的状态？

square: true
type: grid
cards:
 - type: custom:button-card
entity: sensor.daikin_air_01_temperature
icon: mdi:raspberry-pi #要显示的图标。
aspect_ratio: 1/1
name: 卧室 #定义显示在图标下方的可选文本，支持模板
tap_action: #定义点击时的操作类型
 action: call-service #要执行的操作
 service: switch.toggle
 data: {}
 target:
 entity_id: switch.sonoff_t1us2c_01_relay1
double_tap_action: #定义双击时的操作类型
 action: call-service #要执行的操作
 service: switch.toggle
 data: {}
 target:
 entity_id: switch.smart_plug_05_relay
hold_action: #定义长按时的操作类型
 action: more-info #要执行的操作
lock:
 enabled: true #启用或禁用锁定。可选true、false
 duration: 30 #解锁状态的持续时间（以秒为单位）
 unlock: hold #解锁按钮的点击类型，可选tap、double_tap、hold。
styles: #卡片风格
 card: #卡片本身的样式
 - background-color: '#99999'
 - border-radius: 10%
 - padding: 10%
 - color: ivory #图标/卡片的颜色
 - font-size: 15px
 - text-shadow: 0px 0px 5px black
 - text-transform: capitalize
 grid: #网格布局
 - grid-template-areas: '"i temp" "n n" "Humidity Humidity" "pm2 pm2" "tvoc tvoc" "CO2 CO2"'
 - grid-template-columns: 1fr 1fr
 - grid-template-rows: 1fr min-content min-content min-content
 name: #名称的样式
 - font-weight: bold
 - font-size: 30px #字体大小
 - color: white #字体颜色，可选：black、orange、purple
 - align-self: middle
 - justify-self: start
 - padding-bottom: 4px
 img_cell: #如何在单元格中放置图标
 - justify-content: start
 - align-items: start
 - margin: none
 icon: #图标的样式
 - color: |
 [[[
 if (entity.state < 60) return 'lime';
 if (entity.state >= 60 && entity.state < 80) return 'orange';
 else return 'red';
 ]]]
 - width: 70%
 - margin-top: '-10%'
 custom_fields:
 temp:
 - align-self: start
 - justify-self: end
 Humidity:
 - padding-bottom: 2px
 - align-self: middle
 - justify-self: start
 - '--text-color-sensor': >-
 [[[ if (states["sensor.daikin_air_01_humidity"].state > 80) return

 CO2:
 - padding-bottom: 2px
 - align-self: middle
 - justify-self: start
 - '--text-color-sensor': >-
 [[[ if (states["sensor.daikin_air_01_co2"].state > 1000) return

 pm2:
 - align-self: middle
 - justify-self: start
 - '--text-color-sensor': >-
 [[[ if (states["sensor.daikin_air_01_pm2_5"].state > 80) return

 tvoc:
 - align-self: middle
 - justify-self: start
 - '--text-color-sensor': >-
 [[[ if (states["sensor.daikin_air_02_tvoc"].state > 800) return

custom_fields: #每个自定义字段的样式
 temp: |
 [[[
 return `<ha-icon
 icon="mdi:thermometer"
 style="width: 15px; height: 15px; color: deepskyblue;">
 </ha-icon>温度：${entity.state}°C`

 Humidity: |
 [[[
 return `<ha-icon
 icon="mdi:water-percent"
 style="width: 15px; height: 15px; color: deepskyblue;">
 </ha-icon>湿度: ${states['sensor.daikin_air_01_humidity'].state}%`

 CO2: |
 [[[
 return `<ha-icon
 icon="mdi:memory"
 style="width: 15px; height: 15px; color: deepskyblue;">
 </ha-icon>CO2浓度: ${states['sensor.daikin_air_01_co2'].state}ppm`

 pm2: |
 [[[
 return `<ha-icon
 icon="mdi:harddisk"
 style="width: 15px; height: 15px; color: deepskyblue;">
 </ha-icon>PM2.5: ${states['sensor.daikin_air_01_pm2_5'].state}%`

 tvoc: |
 [[[
 return `<ha-icon
 icon="mdi:harddisk"
 style="width: 15px; height: 15px; color: deepskyblue;">
 </ha-icon>TVOC: ${states['sensor.daikin_air_01_tvoc'].state}%`

 - type: custom:button-card
entity: sensor.daikin_air_02_temperature
icon: mdi:raspberry-pi
aspect_ratio: 1/1
name: 办公室
styles:
 card:
 - background-color: '#000044'
 - border-radius: 10%
 - padding: 10%
 - color: ivory
 - font-size: 15px
 - text-shadow: 0px 0px 5px black
 - text-transform: capitalize
 grid:
 - grid-template-areas: '"i temp" "n n" "Humidity Humidity" "mp2 mp2" "tvoc tvoc" "CO2 CO2"'
 - grid-template-columns: 1fr 1fr
 - grid-template-rows: 1fr min-content min-content min-content
 name:
 - font-weight: bold
 - font-size: 30px
 - color: white
 - align-self: middle
 - justify-self: start
 - padding-bottom: 4px
 img_cell:
 - justify-content: start
 - align-items: start
 - margin: none
 icon:
 - color: |
 [[[
 if (entity.state < 60) return 'lime';
 if (entity.state >= 60 && entity.state < 80) return 'orange';
 else return 'red';
 ]]]
 - width: 70%
 - margin-top: '-10%'
 custom_fields:
 temp:
 - align-self: start
 - justify-self: end
 Humidity:
 - padding-bottom: 2px
 - align-self: middle
 - justify-self: start
 - '--text-color-sensor': >-
 [[[ if (states["sensor.daikin_air_02_humidity"].state > 80) return

 CO2:
 - padding-bottom: 2px
 - align-self: middle
 - justify-self: start
 - '--text-color-sensor': >-
 [[[ if (states["sensor.daikin_air_02_co2"].state > 1000) return

 mp2:
 - align-self: middle
 - justify-self: start
 - '--text-color-sensor': >-
 [[[ if (states["sensor.daikin_air_02_pm2_5"].state > 80) return

 tvoc:
 - align-self: middle
 - justify-self: start
 - '--text-color-sensor': >-
 [[[ if (states["sensor.daikin_air_02_tvoc"].state > 800) return

custom_fields:
 temp: |
 [[[
 return `<ha-icon
 icon="mdi:thermometer"
 style="width: 15px; height: 15px; color: deepskyblue;">
 </ha-icon>温度：${entity.state}°C`

 Humidity: |
 [[[
 return `<ha-icon
 icon="mdi:water-percent"
 style="width: 15px; height: 15px; color: deepskyblue;">
 </ha-icon>湿度: ${states['sensor.daikin_air_02_humidity'].state}%`

 CO2: |
 [[[
 return `<ha-icon
 icon="mdi:memory"
 style="width: 15px; height: 15px; color: deepskyblue;">
 </ha-icon>CO2浓度: ${states['sensor.daikin_air_02_co2'].state}ppm`

 mp2: |
 [[[
 return `<ha-icon
 icon="mdi:harddisk"
 style="width: 15px; height: 15px; color: deepskyblue;">
 </ha-icon>PM2.5: ${states['sensor.daikin_air_02_pm2_5'].state}%`

 tvoc: |
 [[[
 return `<ha-icon
 icon="mdi:harddisk"
 style="width: 15px; height: 15px; color: deepskyblue;">
 </ha-icon>TVOC: ${states['sensor.daikin_air_02_tvoc'].state}%`

columns: 2

suyijun8182 · 发表于 2023-9-21 20:29:56

很不错，昨晚弄卡片弄到3点，结果还是不行

嘻嘻 · 发表于 2023-9-21 21:30:49

挺好看的就是不知道这种卡片多了打开的时候会不会卡

sorrypqa · 发表于 2023-9-21 21:42:05

嘻嘻发表于 2023-9-21 21:30
挺好看的就是不知道这种卡片多了打开的时候会不会卡

这个还算可以，slider-button-card用得多的话，真是卡成狗

jimgo · 发表于 2023-12-18 23:03:02

看着不错，就是代码看得好累

		自动登录	找回密码
密码			立即注册

[UI界面] 弄个破卡片，捣鼓了一整天

评分

浏览过的版块