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

Share your Projects! Dashboards & Frontend
59

image

I’ve received a couple of requests for the yaml pertaining to this particular card. I’m placing it here since it’s the most appropriate location for Flex Card discussions. A couple of things to note:

  • I use custom:card-modder to set the background transparency. Custom:card-modder has been replaced (by custom:card-mod) but since it still works, I still use it.
  • The bulk of the card is a Decluttering Template. If you don’t know what that is, it’s time to read up.
  • All values that are encased within <> MUST be replaced with actual entities, attributes, or values. Otherwise, the card may not load.
  • The entities list at the bottom of the Decluttering Card declaration can display any attribute you want, except for attributes derived from a Template. This is a limitation of FHC at the moment. If you are savvy enough, you might be able to work around the limitation using iantrich’s Template Card.
###############################################################################
#
#  Card Declaration for dc_horseshoe_cpu_three_stats_layout. Put this part in your actual view.
#
#  - type: custom:decluttering-card
#    template: dc_horseshoe_cpu_three_stats_layout
#    variables:
#    - entity_id: <the_target_vm>
#    - vm_name: <Whatever_name_you_want_displayed_on_the_card>
#    
###############################################################################

decluttering_templates:
  dc_horseshoe_cpu_three_stats_layout:
    card:
      type: custom:card-modder
      style:
        --paper-card-background-color: rgba(0, 0, 0, 0.0)
        --ha-card-background: rgba(0, 0, 0, 0.0)
        --ha-card-box-shadow: none
      card:
        type: custom:flex-horseshoe-card
        layout:
          hlines:
            - id: 0
              xpos: 50
              ypos: 42
              length: 40
              styles:
                - stroke: var(--primary-text-color);
                - stroke-width: 5;
                - stroke-linecap: round;
                - opacity: 0.7;
          states:
            # States 0 refers to the first entity in the list, ie index 0
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 26
              styles:
                - font-size: 2em;
            # States 1 refers to the second entity in the list, ie index 1
            - id: 1
              entity_index: 1
              xpos: 40
              ypos: 57
              styles:
                - text-anchor: start;
                - font-size: 1.5em;
            # States 2 refers to the third entity in the list, ie index 2
            - id: 2
              entity_index: 2
              xpos: 40
              ypos: 72
              styles:
                - text-anchor: start;
                - font-size: 1.5em;
          icons:
            # Icons 0 refers to the second entity in the list, ie index 1
            - id: 0
              entity_index: 1
              xpos: 37
              ypos: 57
              align: end
              size: 1.3
            # Icons 1 refers to the third entity in the list, ie index 2
            - id: 1
              entity_index: 2
              xpos: 37
              ypos: 72
              align: end
              size: 1.3
          names:
            # Names 0 refers to the first entity in the list, ie index 0
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 95
          areas:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 36
              styles:
                - font-size: 1.0em;
        show:
          horseshoe_style: 'colorstopgradient'
        # Scale set to -10 to +40 degrees celcius
        horseshoe_scale:
          min: 0
          max: 100
        # color stop list with two colors. With the `lineargradient` fill style, only the
        # colors are used. The thresholds are ignored with this setting.
        color_stops:
          33: 'green'
          66: 'yellow'
          100: 'red'
        entities:
          - entity: '[[entity_id]]'
            attribute: <your_entitys_attribute_name_goes_here>
            decimals: 2
            unit: '%'
            area: CPU Usage
            name: '[[vm_name]]'
            icon: mdi:memory
          - entity: '[[entity_id]]'
            attribute: <your_entitys_attribute_name_goes_here>
            decimals: 0
            unit: 'MB'
            name: RAM
            icon: mdi:chip
          - entity: '[[entity_id]]'
            attribute: <your_entitys_attribute_name_goes_here>
            decimals: 0
            unit: 'GB'
            name: Disk
            icon: mdi:harddisk
4 Likes