Lovelace: Flexible Horseshoe Card (Donut graph, flexible layout, multiple entities, actions & animations), including next-gen experimental examples

Share your Projects! Dashboards & Frontend
170

Got it working with Card-mod plugin.

https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744

Card-mod
Card-mod701×265 31.8 KB 

type: 'custom:flex-horseshoe-card'
style: |
  ha-card {
    height: 90px !important;
  }
entities:
  - entity: sensor.family_room_temperature
    decimals: 1
    name: Family Room
    area: ''
    unit: °C
    tap_action:
      action: more-info
  - entity: switch.family_room
    name: ' '
    icon: 'mdi:lightbulb'
    tap_action:
      action: call-service
      service: switch.toggle
      service_data:
        entity_id: switch.family_room
  - entity: sensor.family_room_humidity
    attribute: humidity
    decimals: 0
    unit: '%'
    icon: 'mdi:water-percent'
    tap_action:
      action: more-info
  - entity: sensor.family_room_temp_battery
    attribute: battery
    decimals: 0
    unit: '%'
    icon: 'mdi:battery'
    tap_action:
      action: more-info
animations:
  entity.1:
    - state: 'on'
      circles:
        - animation_id: 11
          styles:
            - fill: var(--secondary-text-color);
            - opacity: 0.9;
            - animation: jello 1s ease-in-out both;
            - transform-origin: center;
      icons:
        - animation_id: 0
          styles:
            - fill: white;
    - state: 'off'
      circles:
        - animation_id: 11
          reuse: true
          styles:
            - transform-origin: center;
            - animation: zoomOut 1s ease-out both;
      icons:
        - animation_id: 0
          styles:
            - fill: var(--primary-text-color);
show:
  horseshoe_style: lineargradient
layout:
  states:
    - id: 0
      entity_index: 0
      xpos: 50
      ypos: 25
      uom_font_size: 1.5
      styles:
        - font-size: 1.9em;
        - opacity: 0.9;
    - id: 2
      entity_index: 2
      xpos: 25
      ypos: 43
      uom_font_size: 1.5
      styles:
        - font-size: 1.9em;
        - opacity: 0.9;
    - id: 3
      entity_index: 3
      xpos: 77
      ypos: 43
      uom_font_size: 1.5
      styles:
        - font-size: 1.9em;
        - opacity: 0.9;
  names:
    - id: 0
      entity_index: 0
      xpos: 50
      ypos: 95
      styles:
        - font-size: 1.5em;
        - opacity: 0.7;
  icons:
    - id: 0
      animation_id: 0
      xpos: 50
      ypos: 75
      entity_index: 1
      icon_size: 4
      styles:
        - color: var(--primary-text-color);
    - id: 2
      entity_index: 2
      xpos: 35
      ypos: 57
      align: end
      icon_size: 2.9
      styles:
        - color: orange
    - id: 3
      entity_index: 3
      xpos: 85
      ypos: 57
      align: end
      icon_size: 2.9
      styles:
        - color: orange
      color: orange
  circles:
    - id: 0
      animation_id: 0
      xpos: 50
      ypos: 70
      radius: 35
      styles:
        - fill: var(--primary-background-color);
    - id: 1
      animation_id: 11
      xpos: 50
      ypos: 70
      radius: 25
      entity_index: 1
      styles:
        - fill: var(--primary-background-color);
horseshoe_scale:
  min: 0
  max: 40
  width: 2
  color: var(--primary-background-color)
horseshoe_state:
  width: 2
  color: '#FFF6E3'
color_stops:
  '0': '#FFF6E3'
  '10': '#FFE9B9'
  '20': '#FFDA8A'
  '30': '#FFCB5B'
  '40': '#FFBF37'
  '50': '#ffb414'
  '60': '#FFAD12'
  '70': '#FFA40E'
  '80': '#FF9C0B'
  '90': '#FF8C06'
1 Like