Home Assistant делаем SVG, img кнопки и вращающийся вентилятор

ОТ Сергей Кушеев 15 декабря, 2024

Есть хорошая карточка для lovelace интерфейса HomeAssistant это ButtonCard, однако в примерах не рассказано как делать SVG кнопки и картинки, а так же как вращать иконки, про вращение написано, что такое возможно и всё. Эта статья восполнит этот пробел.

Добавляем в свой HomeAssistant ButtonCard через HACS или другим способом.

Ну и ниже три примера, код вставляется через редактирование в интерфейсе lovelace:

1. SVG кнопка

type: custom:button-card
entity: switch.prise05_relay
show_icon: false
show_name: false
styles:
  card:
    - width: 100px
    - height: 100px
  custom_fields:
    svg_icon:
      - align-self: center
      - justify-self: center
custom_fields:
  svg_icon: |
    [[[ 
      const fillColor = entity.state === 'on' ? 'yellow' : 'gray';
      const circleY = entity.state === 'on' ? 18 : 6;
      return `
        <svg viewBox="0 0 24 24" width="100%" height="100%">
          <rect x="9" y="2" width="6" height="20" rx="3" fill="${fillColor}" />
          <circle cx="12" cy="${circleY}" r="3" fill="white" />
        </svg>`;
    ]]]
tap_action:
  action: toggle
Как видно параметры fillColor и circleY меняются в соответствии с состоянием entity. Вы можете использовать свой SVG код

2. Изображение

Скачать изображения можно отсюда, или сделать свои, по две картинки, одна включенное состояние, вторая выключенное, имена должны отличаться только ON и OFF (но это не обязательно, просто так удобнее), картинки надо поместить в папку www которая находится в папке с Homeassistant, я изображения поместил в папку www/images

далее вставляем в карточку следующий код:

type: custom:button-card
entity: switch.prise05_relay
hold_action:
  action: more-info
show_icon: false
show_name: false
styles:
  card:
    - width: 100px
    - height: auto
    - display: flex
    - flex-direction: column
    - align-items: center
    - justify-content: center
  custom_fields:
    image:
      - align-self: center
    label:
      - font-size: 14px
      - margin-top: 70px
custom_fields:
  image: |
    [[[ 
      const state = entity.state === 'on' ? 'ON' : 'OFF';
      const imagePath = `/local/images/lamp2_${state}.png`; 
      return `<img src="${imagePath}" width="80%" height="80%" />`;
    ]]]
  label: Кухня
tap_action:
  action: toggle
теперь в зависимости от состояния будет показывать соответствующее изображение либо с именем lamp2_ON.png либо lamp2_OFF.png

3. Крутим вентилятором

лень было гифку делать или разбираться как сюда сделать код для того чтобы покрутить вентилятором, как вентилятор крутиться можете посмотреть вставив следующий код:

type: custom:button-card
entity: switch.switch01
name: Туалет
icon: mdi:fan
styles:
  card:
    - width: 100px
    - height: 100px
  icon:
    - width: 100px
    - height: 100px
state:
  - value: "off"
    color: gray
    styles:
      icon:
        - animation: null
  - value: "on"
    color: blue
    styles:
      icon:
        - animation: rotating 2s linear infinite

Тут мы просто крутим иконкой.