hass-pandora-cas icon indicating copy to clipboard operation
hass-pandora-cas copied to clipboard

Карточки без кнопок управления

Open evsmorodin opened this issue 2 years ago • 12 comments

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

image

Originally posted by @diemon24 in https://github.com/alryaz/hass-pandora-cas/issues/14#issuecomment-1331179209

evsmorodin avatar Nov 30 '22 06:11 evsmorodin

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

evsmorodin avatar Nov 30 '22 06:11 evsmorodin

@diemon24 очень хочется увидеть карточки ☺

evsmorodin avatar Dec 06 '22 07:12 evsmorodin

Где взять такие карточки?

l3zha avatar Apr 15 '24 07:04 l3zha

Где взять такие карточки?

Так это кастомные карточки. Сам сделал.

diemon24 avatar Apr 15 '24 08:04 diemon24

Где взять такие карточки?

Используется:

  1. custom:button-card
  2. picture-elements

type: picture-elements elements:

  • type: state-icon entity: sensor.your_ID_balance style: top: 90% left: 10%
  • type: state-label entity: sensor.your_ID_balance state_color: true style: top: 90% left: 22% color: white
  • type: state-label entity: sensor.your_ID_battery_voltage state_color: true style: top: 80% left: 20% color: white
  • type: state-icon entity: sensor.your_ID_battery_voltage style: top: 80% left: 10%
  • type: state-icon entity: sensor.your_ID_mileage style: top: 90% left: 42%
  • type: state-label entity: sensor.your_ID_mileage state_color: true style: top: 90% left: 58% color: white
  • type: state-label entity: sensor.your_ID_engine_temperature state_color: true style: top: 80% left: 88% color: white
  • type: state-icon entity: sensor.your_ID_engine_temperature style: top: 80% left: 77%
  • type: state-label entity: sensor.your_ID_fuel state_color: true style: top: 80% left: 52% color: white
  • type: state-icon entity: sensor.your_ID_fuel style: top: 80% left: 42%
  • type: state-label entity: sensor.your_ID_interior_temperature state_color: true style: top: 90% left: 88% color: white
  • type: state-icon entity: sensor.your_ID_interior_temperature style: top: 90% left: 77%
  • type: state-label entity: sensor.your_ID_speed state_color: true style: top: 7% left: 51% color: white
  • type: state-icon entity: sensor.your_ID_speed style: top: 7% left: 41%
  • type: state-icon entity: binary_sensor.your_ID_parking style: top: 17% left: 10%
  • type: state-label entity: binary_sensor.your_ID_parking state_color: true style: top: 17% left: 23% color: white
  • type: state-icon entity: binary_sensor.your_ID_ignition style: top: 7% left: 10%
  • type: state-label entity: binary_sensor.your_ID_ignition state_color: true style: top: 7% left: 23% color: white
  • type: state-icon entity: device_tracker.your_ID_pandora style: top: 7% left: 77%
  • type: state-label entity: device_tracker.your_ID_pandora state_color: true style: top: 7% left: 88% color: white
  • type: state-icon entity: sensor.your_ID_gsm_level style: top: 17% left: 76%
  • type: state-label entity: sensor.your_ID_gsm_level state_color: true style: top: 17% left: 85% color: white
  • type: state-label entity: switch.your_ID_engine state_color: true style: top: 17% left: 55% color: white
  • type: custom:button-card state:
    • value: 'on' color: orange styles: card: - background-color: rgba(0, 0, 0, 0) icon: - animation: - rotating 1s linear infinite spin: true tap_action: action: toggle entity: switch.your_ID_engine style: top: 17% left: 41% width: 10% name: ' ' icon: mdi:fan size: 50%
  • type: custom:button-card entity: lock.[your_ID_central_lock state:
    • value: unlocked color: red icon: mdi:shield-lock-open-outline
    • value: locked color: green icon: mdi:shield-lock-outline styles: card:
      • background-color: rgba(0, 0, 0, 0) style: top: 55% left: 44% width: 23% name: ' ' size: 50% image: >- https://[ссылка на фото]

image

image

Ищите PNG фото ваших авто в инете. У меня есть только две одинаковые.

Вот так выглядят текущие карточки: image

diemon24 avatar Apr 15 '24 08:04 diemon24

@diemon24 очень хочется увидеть карточки ☺

Выложил. Сорри, что так долго. Пропустил сообщение, видимо...

diemon24 avatar Apr 15 '24 08:04 diemon24

@diemon24 а можно, пжлста, через кнопку код выложить?) Я попытался к нормальному виду привести, но что-то не работает

type: picture-elements
image: /local/1.png
elements:
  - type: state-icon
    entity: sensor.YOU_ID_balance
    style: null
    top: 90%
    left: 10%
  - type: state-label
    entity: sensor.YOU_ID_balance
    state_color: true
    style: null
    top: 90%
    left: 22%
    color: white
  - type: state-label
    entity: sensor.YOU_ID_battery_voltage
    state_color: true
    style: null
    top: 80%
    left: 20%
    color: white
  - type: state-icon
    entity: sensor.YOU_ID_battery_voltage
    style: null
    top: 80%
    left: 10%
  - type: state-icon
    entity: sensor.YOU_ID_mileage
    style: null
    top: 90%
    left: 42%
  - type: state-label
    entity: sensor.YOU_ID_mileage
    state_color: true
    style: null
    top: 90%
    left: 58%
    color: white
  - type: state-label
    entity: sensor.YOU_ID_engine_temperature
    state_color: true
    style: null
    top: 80%
    left: 88%
    color: white
  - type: state-icon
    entity: sensor.YOU_ID_engine_temperature
    style: null
    top: 80%
    left: 77%
  - type: state-label
    entity: sensor.YOU_ID_fuel
    state_color: true
    style: null
    top: 80%
    left: 52%
    color: white
  - type: state-icon
    entity: sensor.YOU_ID_fuel
    style: null
    top: 80%
    left: 42%
  - type: state-label
    entity: sensor.YOU_ID_interior_temperature
    state_color: true
    style: null
    top: 90%
    left: 88%
    color: white
  - type: state-icon
    entity: sensor.YOU_ID_interior_temperature
    style: null
    top: 90%
    left: 77%
  - type: state-label
    entity: sensor.YOU_ID_speed
    state_color: true
    style: null
    top: 7%
    left: 51%
    color: white
  - type: state-icon
    entity: sensor.YOU_ID_speed
    style: null
    top: 7%
    left: 41%
  - type: state-icon
    entity: binary_sensor.YOU_ID_parking
    style: null
    top: 17%
    left: 10%
  - type: state-label
    entity: binary_sensor.YOU_ID_parking
    state_color: true
    style: null
    top: 17%
    left: 23%
    color: white
  - type: state-icon
    entity: binary_sensor.YOU_ID_ignition
    style: null
    top: 7%
    left: 10%
  - type: state-label
    entity: binary_sensor.YOU_ID_ignition
    state_color: true
    style: null
    top: 7%
    left: 23%
    color: white
  - type: state-icon
    entity: device_tracker.YOU_ID_pandora
    style: null
    top: 7%
    left: 77%
  - type: state-label
    entity: device_tracker.YOU_ID_pandora
    state_color: true
    style: null
    top: 7%
    left: 88%
    color: white
  - type: state-icon
    entity: sensor.YOU_ID_gsm_level
    style: null
    top: 17%
    left: 76%
  - type: state-label
    entity: sensor.YOU_ID_gsm_level
    state_color: true
    style: null
    top: 17%
    left: 85%
    color: white
  - type: state-label
    entity: switch.YOU_ID_engine
    state_color: true
    style: null
    top: 17%
    left: 55%
    color: white
  - type: custom:button-card
    state:
      value: 'on'
      color: orange
      styles:
        card:
          - background-color: rgba(0, 0, 0, 0)
        icon:
          - animation: null
          - rotating 1s linear infinite
      spin: true
      tap_action: null
      action: toggle
      entity: switch.YOU_ID_engine
      style: null
      top: 17%
      left: 41%
      width: 10%
      name: ' '
      icon: mdi:fan
      size: 50%
  - type: custom:button-card
    entity: lock.YOU_ID_central_lock
    state:
      - value: unlocked
        color: red
        icon: mdi:shield-lock-open-outline
      - value: locked
        color: green
        icon: mdi:shield-lock-outline
        styles: null
        card:
          background-color: rgba(0, 0, 0, 0)
          style: null
          top: 55%
          left: 44%
          width: 23%
          name: ' '
          size: 50%

l3zha avatar Apr 15 '24 11:04 l3zha

@diemon24 а можно, пжлста, через кнопку код выложить?) Я попытался к нормальному виду привести, но что-то не работает


type: picture-elements

image: /local/1.png

elements:

  - type: state-icon

    entity: sensor.YOU_ID_balance

    style: null

    top: 90%

    left: 10%

  - type: state-label

    entity: sensor.YOU_ID_balance

    state_color: true

    style: null

    top: 90%

    left: 22%

    color: white

  - type: state-label

    entity: sensor.YOU_ID_battery_voltage

    state_color: true

    style: null

    top: 80%

    left: 20%

    color: white

  - type: state-icon

    entity: sensor.YOU_ID_battery_voltage

    style: null

    top: 80%

    left: 10%

  - type: state-icon

    entity: sensor.YOU_ID_mileage

    style: null

    top: 90%

    left: 42%

  - type: state-label

    entity: sensor.YOU_ID_mileage

    state_color: true

    style: null

    top: 90%

    left: 58%

    color: white

  - type: state-label

    entity: sensor.YOU_ID_engine_temperature

    state_color: true

    style: null

    top: 80%

    left: 88%

    color: white

  - type: state-icon

    entity: sensor.YOU_ID_engine_temperature

    style: null

    top: 80%

    left: 77%

  - type: state-label

    entity: sensor.YOU_ID_fuel

    state_color: true

    style: null

    top: 80%

    left: 52%

    color: white

  - type: state-icon

    entity: sensor.YOU_ID_fuel

    style: null

    top: 80%

    left: 42%

  - type: state-label

    entity: sensor.YOU_ID_interior_temperature

    state_color: true

    style: null

    top: 90%

    left: 88%

    color: white

  - type: state-icon

    entity: sensor.YOU_ID_interior_temperature

    style: null

    top: 90%

    left: 77%

  - type: state-label

    entity: sensor.YOU_ID_speed

    state_color: true

    style: null

    top: 7%

    left: 51%

    color: white

  - type: state-icon

    entity: sensor.YOU_ID_speed

    style: null

    top: 7%

    left: 41%

  - type: state-icon

    entity: binary_sensor.YOU_ID_parking

    style: null

    top: 17%

    left: 10%

  - type: state-label

    entity: binary_sensor.YOU_ID_parking

    state_color: true

    style: null

    top: 17%

    left: 23%

    color: white

  - type: state-icon

    entity: binary_sensor.YOU_ID_ignition

    style: null

    top: 7%

    left: 10%

  - type: state-label

    entity: binary_sensor.YOU_ID_ignition

    state_color: true

    style: null

    top: 7%

    left: 23%

    color: white

  - type: state-icon

    entity: device_tracker.YOU_ID_pandora

    style: null

    top: 7%

    left: 77%

  - type: state-label

    entity: device_tracker.YOU_ID_pandora

    state_color: true

    style: null

    top: 7%

    left: 88%

    color: white

  - type: state-icon

    entity: sensor.YOU_ID_gsm_level

    style: null

    top: 17%

    left: 76%

  - type: state-label

    entity: sensor.YOU_ID_gsm_level

    state_color: true

    style: null

    top: 17%

    left: 85%

    color: white

  - type: state-label

    entity: switch.YOU_ID_engine

    state_color: true

    style: null

    top: 17%

    left: 55%

    color: white

  - type: custom:button-card

    state:

      value: 'on'

      color: orange

      styles:

        card:

          - background-color: rgba(0, 0, 0, 0)

        icon:

          - animation: null

          - rotating 1s linear infinite

      spin: true

      tap_action: null

      action: toggle

      entity: switch.YOU_ID_engine

      style: null

      top: 17%

      left: 41%

      width: 10%

      name: ' '

      icon: mdi:fan

      size: 50%

  - type: custom:button-card

    entity: lock.YOU_ID_central_lock

    state:

      - value: unlocked

        color: red

        icon: mdi:shield-lock-open-outline

      - value: locked

        color: green

        icon: mdi:shield-lock-outline

        styles: null

        card:

          background-color: rgba(0, 0, 0, 0)

          style: null

          top: 55%

          left: 44%

          width: 23%

          name: ' '

          size: 50%


type: picture-elements
image: /local/1.png
elements:
  - type: state-icon
    entity: sensor.YOU_ID_balance
    style: null
    top: 90%
    left: 10%
  - type: state-label
    entity: sensor.YOU_ID_balance
    state_color: true
    style: null
    top: 90%
    left: 22%
    color: white
  - type: state-label
    entity: sensor.YOU_ID_battery_voltage
    state_color: true
    style: null
    top: 80%
    left: 20%
    color: white
  - type: state-icon
    entity: sensor.YOU_ID_battery_voltage
    style: null
    top: 80%
    left: 10%
  - type: state-icon
    entity: sensor.YOU_ID_mileage
    style: null
    top: 90%
    left: 42%
  - type: state-label
    entity: sensor.YOU_ID_mileage
    state_color: true
    style: null
    top: 90%
    left: 58%
    color: white
  - type: state-label
    entity: sensor.YOU_ID_engine_temperature
    state_color: true
    style: null
    top: 80%
    left: 88%
    color: white
  - type: state-icon
    entity: sensor.YOU_ID_engine_temperature
    style: null
    top: 80%
    left: 77%
  - type: state-label
    entity: sensor.YOU_ID_fuel
    state_color: true
    style: null
    top: 80%
    left: 52%
    color: white
  - type: state-icon
    entity: sensor.YOU_ID_fuel
    style: null
    top: 80%
    left: 42%
  - type: state-label
    entity: sensor.YOU_ID_interior_temperature
    state_color: true
    style: null
    top: 90%
    left: 88%
    color: white
  - type: state-icon
    entity: sensor.YOU_ID_interior_temperature
    style: null
    top: 90%
    left: 77%
  - type: state-label
    entity: sensor.YOU_ID_speed
    state_color: true
    style: null
    top: 7%
    left: 51%
    color: white
  - type: state-icon
    entity: sensor.YOU_ID_speed
    style: null
    top: 7%
    left: 41%
  - type: state-icon
    entity: binary_sensor.YOU_ID_parking
    style: null
    top: 17%
    left: 10%
  - type: state-label
    entity: binary_sensor.YOU_ID_parking
    state_color: true
    style: null
    top: 17%
    left: 23%
    color: white
  - type: state-icon
    entity: binary_sensor.YOU_ID_ignition
    style: null
    top: 7%
    left: 10%
  - type: state-label
    entity: binary_sensor.YOU_ID_ignition
    state_color: true
    style: null
    top: 7%
    left: 23%
    color: white
  - type: state-icon
    entity: device_tracker.YOU_ID_pandora
    style: null
    top: 7%
    left: 77%
  - type: state-label
    entity: device_tracker.YOU_ID_pandora
    state_color: true
    style: null
    top: 7%
    left: 88%
    color: white
  - type: state-icon
    entity: sensor.YOU_ID_gsm_level
    style: null
    top: 17%
    left: 76%
  - type: state-label
    entity: sensor.YOU_ID_gsm_level
    state_color: true
    style: null
    top: 17%
    left: 85%
    color: white
  - type: state-label
    entity: switch.YOU_ID_engine
    state_color: true
    style: null
    top: 17%
    left: 55%
    color: white
  - type: custom:button-card
    state:
      value: 'on'
      color: orange
      styles:
        card:
          - background-color: rgba(0, 0, 0, 0)
        icon:
          - animation: null
          - rotating 1s linear infinite
      spin: true
      tap_action: null
      action: toggle
      entity: switch.YOU_ID_engine
      style: null
      top: 17%
      left: 41%
      width: 10%
      name: ' '
      icon: mdi:fan
      size: 50%
  - type: custom:button-card
    entity: lock.YOU_ID_central_lock
    state:
      - value: unlocked
        color: red
        icon: mdi:shield-lock-open-outline
      - value: locked
        color: green
        icon: mdi:shield-lock-outline
        styles: null
        card:
          background-color: rgba(0, 0, 0, 0)
          style: null
          top: 55%
          left: 44%
          width: 23%
          name: ' '
          size: 50%

diemon24 avatar Apr 15 '24 12:04 diemon24

@diemon24 а это вы мой кривой код продублировали xD

l3zha avatar Apr 15 '24 12:04 l3zha

Методом научного тыка получилось следующее:

type: picture-elements
image: local/pictures/vehicle/your-car-image.png
elements:
- type: state-icon
  entity: sensor.YOUR_ID_balance
  style:
    top: 90%
    left: 10%
- type: state-label
  entity: sensor.YOUR_ID_balance
  state_color: true
  style:
    top: 90%
    left: 22%
- type: state-label
  entity: sensor.YOUR_ID_battery_voltage
  state_color: true
  style:
    top: 80%
    left: 20%
- type: state-icon
  entity: sensor.YOUR_ID_battery_voltage
  style:
    top: 80%
    left: 10%
- type: state-icon
  entity: sensor.YOUR_ID_mileage
  style:
    top: 90%
    left: 42%
- type: state-label
  entity: sensor.YOUR_ID_mileage
  state_color: true
  style:
    top: 90%
    left: 58%
- type: state-label
  entity: sensor.YOUR_ID_engine_temperature
  state_color: true
  style:
    top: 80%
    left: 88%
- type: state-icon
  entity: sensor.YOUR_ID_engine_temperature
  style:
    top: 80%
    left: 77%
- type: state-label
  entity: sensor.YOUR_ID_fuel
  state_color: true
  style:
    top: 80%
    left: 52%
- type: state-icon
  entity: sensor.YOUR_ID_fuel
  style:
    top: 80%
    left: 42%
- type: state-label
  entity: sensor.YOUR_ID_interior_temperature
  state_color: true
  style:
    top: 90%
    left: 88%
- type: state-icon
  entity: sensor.YOUR_ID_interior_temperature
  style:
    top: 90%
    left: 77%
- type: state-label
  entity: sensor.YOUR_ID_speed
  state_color: true
  style:
    top: 7%
    left: 51%
- type: state-icon
  entity: sensor.YOUR_ID_speed
  style:
    top: 7%
    left: 41%
- type: state-icon
  entity: binary_sensor.YOUR_ID_parking
  style:
    top: 17%
    left: 10%
- type: state-label
  entity: binary_sensor.YOUR_ID_parking
  state_color: true
  style:
    top: 17%
    left: 23%
- type: state-icon
  entity: binary_sensor.YOUR_ID_ignition
  style:
    top: 7%
    left: 10%
- type: state-label
  entity: binary_sensor.YOUR_ID_ignition
  state_color: true
  style:
    top: 7%
    left: 23%
- type: state-icon
  entity: device_tracker.YOUR_ID_pandora
  style:
    top: 7%
    left: 77%
- type: state-label
  entity: device_tracker.YOUR_ID_pandora
  state_color: true
  style:
    top: 7%
    left: 88%
- type: state-icon
  entity: sensor.YOUR_ID_gsm_level
  style:
    top: 17%
    left: 76%
- type: state-label
  entity: sensor.YOUR_ID_gsm_level
  state_color: true
  style:
    top: 17%
    left: 85%
- type: state-label
  entity: switch.YOUR_ID_engine
  state_color: true
  style:
    top: 17%
    left: 55%
- type: custom:button-card
  state:
  - value: 'on'
    color: orange
    styles:
      card:
      - background-color: rgba(0, 0, 0, 0)
      icon:
      - animation:
        - rotating 1s linear infinite
    spin: true
  tap_action:
    action: toggle
  entity: switch.YOUR_ID_engine
  name: ' '
  icon: mdi:fan
  size: 50%
  style:
    top: 17%
    left: 41%
    width: 10%
- type: custom:button-card
  entity: lock.YOUR_ID_central_lock
  state:
  - value: locking
    styles:
      card:
      - background-color: rgba(0, 0, 0, 0)
      - border: none
  - value: unlocking
    styles:
      card:
      - background-color: rgba(0, 0, 0, 0)
      - border: none
  - value: unlocked
    color: red
    icon: mdi:shield-lock-open-outline
    styles:
      card:
      - background-color: rgba(0, 0, 0, 0)
      - border: none
  - value: locked
    color: green
    icon: mdi:shield-lock-outline
    styles:
      card:
      - background-color: rgba(0, 0, 0, 0)
      - border: none
  name: ' '
  size: 50%
  style:
    top: 50%
    left: 44%
    width: 23%

изображение

Картинки лежат у меня по этому пути: www/pictures/vehicle/your-car-image.png, но можно и в base64 закодировать

evsmorodin avatar May 02 '24 23:05 evsmorodin

Методом научного тыка получилось следующее:

какое разрешение картинки у вас? или соотношение сторон

l3zha avatar Jun 04 '24 12:06 l3zha

Методом научного тыка получилось следующее:

какое разрешение картинки у вас? или соотношение сторон

Сама картинка 1360x903

evsmorodin avatar Jun 04 '24 12:06 evsmorodin