户型图哪个房间有人，人形图标闪烁如何实现？

solekg

这个功能如何实现？目前我每个房间多有人体存在传感器。不晓得论坛内是否有人分享案例，搜了很久没看到

PeterDream

万能的button-card肯定能实现

明明洋洋

条件显示模板,状态有人显示图片

bugensui

需要用到系统自带的（图片元素 卡片），自己要先画好户型图，然后根据界面提示配置就行，

  - type: conditional
    conditions:
      - entity: binary_sensor.d1minib_occupancy
        state: 'on'
    elements:
      - type: state-icon
        entity: binary_sensor.d1minib_occupancy
        icon: mdi:walk
        style:
          top: 34%
          left: 52%

复制代码

hungheo

button card 插件，户型图好实现，房间有人的条件下的人形图标好实现，但是这个闪烁就得自己画SVG，写CSS动画了

hungheo

人形闪烁图标帮你做好啦，前提是你会用button card

type: custom:button-card
entity: input_boolean.ceshi3
name: 人形图标闪烁
show_icon: false
show_state: true
styles:
  grid:
    - grid-template-areas: |
        "icon n"
        "icon s"
    - grid-template-rows: min-content min-content
    - grid-template-columns: min-content min-content
  card:
    - height: 56px
    - padding: 10px
  name:
    - justify-self: start;
    - font-size: 14px
    - font-weight: 600
  state:
    - justify-self: flex-start
    - font-size: 12px
    - padding-bottom: 4px
  custom_fields:
    icon:
      - width: 30px
      - padding-left: 5px
      - padding-right: 8px
custom_fields:
  icon: |
    [[[
      return `
        <svg viewBox="0 0 25 25">
          <style>
            @keyframes blink-on {
              0%, 100% {
                opacity: 0.3;
                transform: scale(1);
              }
              50% {
                opacity: 1;
                transform: scale(1.1);
              }
            }
            .on {
              animation: blink-on 1s infinite;
              transform-origin: center;
              fill: #5daeea;
            }
          </style>
          <path fill="#9da0a2" class="${entity.state === 'on' ? 'on light-color' : 'light-color'}" d="M13.5,5.5C14.59,5.5 15.5,4.58 15.5,3.5C15.5,2.38 14.59,1.5 13.5,1.5C12.39,1.5 11.5,2.38 11.5,3.5C11.5,4.58 12.39,5.5 13.5,5.5M9.89,19.38L10.89,15L13,17V23H15V15.5L12.89,13.5L13.5,10.5C14.79,12 16.79,13 19,13V11C17.09,11 15.5,10 14.69,8.58L13.69,7C13.29,6.38 12.69,6 12,6C11.69,6 11.5,6.08 11.19,6.08L6,8.28V13H8V9.58L9.79,8.88L8.19,17L3.29,16L2.89,18L9.89,19.38Z"/>
        </svg>
      `;
    ]]]

复制代码

louwu

bugensui 发表于 2024-9-23 11:53
需要用到系统自带的（图片元素 卡片），自己要先画好户型图，然后根据界面提示配置就行，

这个好，回去试试

MX10085

button-card 不用写CSS，可以实现闪烁动画！

- type: custom:button-card
  entity: binary_sensor.dced8388694a_occupancy
  name: 三楼房间
  show_name: false
  show_entity_picture: true
  entity_picture: '[[[return "/local/ui/图标/人感/人感"+entity.state+".png" ]]]'
  styles:
    entity_picture:
      - width: 100%
    card:
      - width: 35px
  style:
    top: 290px
    left: 440px
  state:
    - value: 'on'
      styles:
        card:
          - animation: blink 2s ease infinite

复制代码

creazycar

  - type: state-icon
    entity: binary_sensor.motion_sensor
    style:
      left: 49%
      top: 17%
      show_state: 'on'
  - type: custom:last-changed-element
    entity: binary_sensor.motion_sensor
    style:
      left: 50%
      top: 17%
      font-size: 7px
      show_state: 'on'

复制代码

zxyny1989

要写CSS动画的，最早之前分享过；后来没玩了，不知道帖子还在不在