hass-xiaomi-miot ❤️ button-card

al-one commented 2 years ago

本插件自v0.4.8开始支持自动获取万能遥控器或支持红外遥控的小爱音箱生成的红外子设备，并生成select实体。 button-card是一款非常强大且优秀的自定义卡片，这篇文章介绍下如何使用button-card将红外设备的按键显示为一个个按钮。

首先通过HACS安装button-card：
安装后刷新HA网页，最好清除一下浏览器缓存。找到 ⚙ 编辑仪表盘 > 原始配置编辑器：

加入下面的代码（`button-card`模板），并保存：

button_card_templates:
select_option_btn:
  name: |
    [[[ return variables.option ]]]
  tap_action:
    action: call-service
    service: select.select_option
    service_data:
      entity_id: |
        [[[ return variables.entity || entity.entity_id ]]]
      option: |
        [[[ return variables.option ]]]
  hold_action:
    action: more-info
  double_tap_action:
    action: more-info

然后添加卡片，选择手动模式，粘贴下面的代码：

type: grid
columns: 3 # 每一行显示几个卡片
square: false
cards:
- type: custom:button-card
  icon: mdi:arrow-up-thick
  variables:
    entity: select.remote_ir_xxxxxx
    option: 上
  template: select_option_btn
- type: custom:button-card
  icon: mdi:stop
  name: 停止 # 自定义按钮显示名字
  variables:
    entity: select.remote_ir_xxxxxx
    option: 停
  template: select_option_btn
- type: custom:button-card
  icon: mdi:arrow-down-thick
  variables:
    entity: select.remote_ir_xxxxxx
    option: 下
  template: select_option_btn

虽然HA内置了button卡片，但是还是推荐用button-card，因为它内置了模板功能，可以将相识的按钮定义为模板，避免重复代码。

lion00 commented 2 years ago

真好用

al-one commented 2 years ago

再分享一个用button-card写的人体传感器模板：（用法教程）

button_card_templates:

  # 使按钮点击、双击、长按动作均设置为打开更多信息弹出框的模板
  more_info:
    tap_action:
      action: more-info
    hold_action:
      action: more-info
    double_tap_action:
      action: more-info

  # 人体传感器模板
  homekit_motion:
    template: more_info # 模板也可以引用模板
    icon: mdi:motion-sensor
    size: 70%
    aspect_ratio: 1/1
    variables:
      battery_lavel: |
        [[[ return entity.attributes['battery_lavel'] || '' ]]]
      illuminance: |
        [[[ return entity.attributes['illuminance'] || '' ]]]
    styles:
      card:
        - padding: 5% 10%
        - color: '#aaaaaa'
        - font-size: 12px
        - line-height: 1.2em
        - text-shadow: 0 0 5px black
        - text-transform: capitalize
        - '--icon-color-sensor': gray
      grid:
        - grid-template-areas: '"i batt" "n n" "illu illu" "time time"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr min-content min-content min-content min-content
      name:
        - color: white
        - font-size: 1.1em
        - font-weight: bold
        - align-self: middle
        - justify-self: start
        - padding-bottom: 2%
      img_cell:
        - min-width: 20%
        - justify-content: start
        - align-items: start
      icon:
        - color: '#aaaaaa'
        - margin: '-10% 0 0 0'
      custom_fields:
        batt:
          - align-self: start
          - justify-self: end
          - '--icon-color-sensor': ''
        illu:
          - padding-bottom: 1%
          - align-self: middle
          - justify-self: start
          - '--text-color-sensor': ''
        time:
          - padding-bottom: 1%
          - align-self: middle
          - justify-self: start
          - '--text-color-sensor': ''
    custom_fields:
      batt: |
        [[[
          var val = variables.battery_lavel || (variables.battery_entity ? states[variables.battery_entity].state : null)
          return !val ? '' : `<ha-icon
            icon="mdi:battery"
            style="width: 16px; color: var(--icon-color-sensor);"
            ></ha-icon><span>${val}%</span>`
        ]]]
      illu: |
        [[[
          var val = variables.illuminance || (variables.illuminance_entity ? states[variables.illuminance_entity].state : null)
          if(val && !isNaN(val)) val = `${val} lux`
          val = {on: '有光', off: '无光', true: '有光', false: '无光'}[val] || val
          return !val ? '' : `<ha-icon
            icon="mdi:brightness-5"
            style="width: 1em; color: var(--icon-color-sensor);"></ha-icon>
            <span style="color: var(--text-color-sensor);">${val}</span>`
        ]]]
      time: |
        [[[
          var lst = variables.triggered || entity.attributes.last_triggered || entity.last_changed
          var tim = new Date(lst)
          var val = lst ? `${tim.getHours()}:${tim.getMinutes()}:${tim.getSeconds()}` : '未触发'
          val = val.replace(/:(\d)\b/g,':0$1')
          return !val ? '' : `<ha-icon
            icon="mdi:clock-time-eight"
            style="width: 1em; color: var(--icon-color-sensor);"></ha-icon>
            <span style="color: var(--text-color-sensor);">${val}</span>`
        ]]]
    state:
      - id: state_on
        value: 'on'
        styles:
          card:
            - color: black
            - text-shadow: 0 0 1px white
            - background-color: rgba(255,255,255,0.7)
          icon:
            - color: '#ff9f09'
          name:
            - color: black
      - id: state_off
        value: 'off'

卡片代码：

type: grid
columns: 4
square: false
cards:
  - type: custom:button-card
    template: homekit_motion
    entity: binary_sensor.0x158d000xxx_motion
    size: 100% # 图标大小
    variables:
      battery_entity: sensor.0x158d000xxx_battery
      battery_lavel: | # 如果设备电量不是单独的实体，可以删除上面一行，并通过该选项返回电量
        [[[ return entity.attributes['battery_level'] || '' ]]]
      illuminance_entity: # 如人体传感器不带光照检测可删除本行
      illuminance: | # 从实体属性获取光照度，与illuminance_entity二选一
        [[[ return entity.attributes['illuminance'] || '' ]]]
      triggered_attr: trigger_at # 触发时间属性名
      triggered: | # 从其他实体获取触发时间，与triggered_attr二选一，下面的实体ID如果不存在会报错
        [[[ return states['sensor.0x158d000xxx_triggered'].state || '' ]]]

  - type: custom:button-card
    template: homekit_motion
    entity: binary_sensor.0x158d000yyy_motion
    size: 90%
    variables:
      battery_entity: sensor.0x158d000yyy_battery
      illuminance_entity: sensor.0x158d000yyy_illuminance

  - type: custom:button-card
    template: homekit_motion
    entity: binary_sensor.0x158d000zzz_motion
    size: 90%
    variables:
      battery_entity: sensor.0x158d000zzz_battery
      illuminance_entity: sensor.0x158d000zzz_illuminance
      triggered_attr: trigger_at
    state:
      - id: state_off
        icon: mdi:motion-sensor-off

  - type: custom:button-card
    template: homekit_motion
    entity: binary_sensor.e4aaec34d17c_contact
    icon: mdi:door-closed
    variables:
      battery_entity: sensor.e4aaec34d17c_battery
      illuminance_entity: binary_sensor.e4aaec34d17c_light
    state:
      - id: state_on
        icon: mdi:door-open

上效果：人体传感器

WalterDSU commented 2 years ago

留评标志.

al-one commented 2 years ago

再分享一个用button-card写的插座实体模板：（用法教程）

button_card_templates:
  more_info:
    tap_action:
      action: more-info
    hold_action:
      action: more-info
    double_tap_action:
      action: more-info

  # 使按钮双击动作设置为打开/关闭实体的模板
  double_toggle:
    double_tap_action:
      action: toggle

  # 插座带用电量显示模板
  homekit_outlet_full:
    template: more_info
    icon: mdi:power-socket-us
    size: 100%
    aspect_ratio: 1/1
    variables:
      temp: '[[[ return entity.attributes["temperature"] || "" ]]]'
    styles:
      card:
        - padding: 5% 10%
        - color: white
        - font-size: 10px
        - text-shadow: 0 0 5px black
        - text-transform: capitalize
        - '--icon-color-sensor': deepskyblue
      grid:
        - grid-template-areas: '"i temp" "n n" "power power" "today today" "month month"'
        - grid-template-columns: 1fr 1fr
        - grid-template-rows: 1fr min-content min-content min-content min-content
      name:
        - font-weight: bold
        - font-size: 1.3em
        - align-self: middle
        - justify-self: start
        - padding-bottom: 2%
      img_cell:
        - min-width: 20%
        - justify-content: start
        - align-items: start
      icon:
        - color: gray
        - margin: '-8% 0 0 -10%'
      custom_fields:
        temp:
          - align-self: start
          - justify-self: end
          - '--icon-color-sensor': yellow
        power:
          - padding-bottom: 1%
          - align-self: middle
          - justify-self: start
          - '--text-color-sensor': |
              [[[ return variables.power > 100 ? 'yellow' : '' ]]]
        today:
          - padding-bottom: 1%
          - align-self: middle
          - justify-self: start
          - '--text-color-sensor': |
              [[[ return variables.today > 1 ? 'yellow' : '' ]]]
        month:
          - align-self: middle
          - justify-self: start
          - '--text-color-sensor': |
              [[[ return variables.month > 30 ? 'yellow' : '' ]]]
    custom_fields:
      temp: |
        [[[
          return !variables.temp ? '' : `<ha-icon
            icon="mdi:thermometer"
            style="width: 12px; color: var(--icon-color-sensor);">
            </ha-icon>
            <span>${variables.temp}°C</span>`
        ]]]
      power: |
        [[[
          return !variables.power ? '' : `<ha-icon
            icon="mdi:flash"
            style="width: 12px; color: var(--icon-color-sensor);">
            </ha-icon>
            <span>功率: <span style="color: var(--text-color-sensor);">${variables.power}W</span></span>`
        ]]]
      today: |
        [[[
          return !variables.today ? '' : `<ha-icon
            icon="mdi:calendar-today"
            style="width: 12px; color: var(--icon-color-sensor);">
            </ha-icon>
            <span>今日: <span style="color: var(--text-color-sensor);">${variables.today}°</span></span>`
        ]]]
      month: |
        [[[
          return !variables.month ? '' : `<ha-icon
            icon="mdi:calendar-month"
            style="width: 12px; color: var(--icon-color-sensor);">
            </ha-icon>
            <span>本月: <span style="color: var(--text-color-sensor);">${variables.month}°</span></span>`
        ]]]
    state:
      - id: state_on
        value: 'on'
        styles:
          card:
            - color: black
            - text-shadow: 0 0 1px white
            - background-color: rgba(255,255,255,0.7)
          icon:
            - color: '#ff9f09'

卡片代码：

type: grid
columns: 3
cards:
  - type: custom:button-card
    template: # 可以同时使用多个模板
      - homekit_outlet_full
      - double_toggle
    entity: switch.chuangmi_212a01_fc7a_switch
    icon: mdi:water-boiler
    size: 130%
    variables:
      temp: '[[[ return entity.attributes["switch.temperature"] ]]]'
      power: '[[[ return states["sensor.chuangmi_212a01_fc7a_electric_power"].state ]]]'

  - type: custom:button-card
    template:
      - homekit_outlet_full
      - double_toggle
    entity: switch.chuangmi_b970
    icon: mdi:fridge
    size: 120%
    variables:
      temp: '[[[ return entity.attributes["switch.temperature"] ]]]'
      today: '[[[ return states["sensor.chuangmi_b970_power_cost_today"].state ]]]'
      month: '[[[ return states["sensor.chuangmi_b970_power_cost_month"].state ]]]'

  - type: custom:button-card
    template:
      - homekit_outlet_full
      - double_toggle
    entity: switch.zimi_v2_fc2b
    variables:
      temp: '[[[ return entity.attributes["switch.temperature"] ]]]'
      power: '[[[ return states["sensor.zimi_v2_fc2b_electric_power"].state ]]]'
      today: '[[[ return states["sensor.zimi_v2_fc2b_store_powercost_today"].state ]]]'
      month: '[[[ return states["sensor.zimi_v2_fc2b_store_powercost_month"].state ]]]'

上效果：插座效果

WalterDSU commented 2 years ago

提醒一下, 不是所有的万能遥控都支持, 亲测小米万能遥控一代不能用.

al-one commented 2 years ago

提醒一下, 不是所有的万能遥控都支持, 亲测小米万能遥控一代不能用.

一代万能遥控可能由于使用了不同的米家接口，导致无法获取红外子设备及红外KeyID，因此无法生成select实体。不过可以自行抓取红外码来通过服务实现：

service: remote.send_command
data:
  entity_id: remote.chuangmi_v2_xxxx
  command: FF00XX # 抓取到的红外码

DhyanaGong commented 1 year ago

请问为什么我会报以下错误呢： ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading 'attributes') in 'return entity.attributes["switch.temperature"]'

al-one commented 1 year ago

@DhyanaGong

entity: switch.chuangmi_212a01_fc7a_switch

entity:后面改成你的实体ID

bugprogrammer commented 1 year ago

请问小爱音箱Pro可以接入红外子设备吗，我用token模式接入小爱Pro，没看到红外子设备。

Muska-Ami commented 1 month ago

自定义红外遥控是否应该识别为button而不是select，虽然可以通过这种方式修改

al-one / hass-xiaomi-miot