用button card 动手做(shan zhai)一个dc1插座控制界面

不废话,上图先

image

哈哈,是不是很熟悉。希望大佬不要打我。为什么山寨,其实我就是想学习一下,想统一界面,其实正版真的非常漂亮,好用。曾经一度不愿升级,为了用上 DC1 card。

配置奉上,希望大家共同学习交流:

type: horizontal-stack
cards:
  - type: 'custom:button-card'
    entity: sensor.dc1_03_power
    show_name: false
    show_icon: false
    tap_action:
      action: more-info
    layout: label
    show_label: true
    label: >
      [[[return `<span>功率:
      ${states['sensor.dc1_03_power'].state}</span><br/>          
              <span>电流: ${Number(states['sensor.dc1_03_current'].state).toFixed(1)}</span><br/>
              <span>电压: ${states['sensor.dc1_03_voltage'].state}</span><br/>
              <span>昨天: ${Number(states['sensor.dc1_03_yesterday'].state).toFixed(1)}</span><br/>
              <span>今天: ${Number(states['sensor.dc1_03_today'].state).toFixed(1)}</span><br/>
              <span>总计: ${Number(states['sensor.dc1_03_total'].state).toFixed(0)}</span>`]]]
    styles:
      label:
        - text-orientation: mixed
        - color: gray
        - font-size: 10px
        - text-align: left
        - justify-self: start
        - padding: 0px 10px
      card:
        - width: 70px
  - type: 'custom:button-card'
    color_type: card
    entity: switch.dc1_03_1
    icon: 'mdi:power'
    show_name: false
    label: 开关
    show_label: true
    lock:
      enabled: true
    styles:
      card:
        - height: 100%
    state:
      - value: 'on'
        color: red
  - type: 'custom:button-card'
    color_type: card
    entity: switch.dc1_03_2
    icon: 'mdi:numeric-1-box-outline'
    show_name: false
    label: 插口1
    show_label: true
    styles:
      card:
        - height: 100%
    state:
      - value: 'on'
        color: 'rgb(128,255,0)'
  - type: 'custom:button-card'
    color_type: card
    entity: switch.dc1_03_3
    icon: 'mdi:numeric-2-box-outline'
    show_name: false
    label: 插口2
    show_label: true
    styles:
      card:
        - height: 100%
    state:
      - value: 'on'
        color: 'rgb(128,255,0)'
  - type: 'custom:button-card'
    color_type: card
    entity: switch.dc1_03_4
    icon: 'mdi:numeric-3-box-outline'
    show_name: false
    label: 插口3
    show_label: true
    styles:
      card:
        - height: 100%
    state:
      - value: 'on'
        color: 'rgb(128,255,0)'

再来个整体图: