#
#
# View			: flex-horseshoe-card-examples (fhce)
# Project   : Home Assistant
# Repository: https://github.com/AmoebeLabs/
#
# Author    : Mars @ AmoebeLabs.com
# 
# License   : CC BY-SA, https://creativecommons.org/licenses/by/4.0/
#
# -----
# Description:
#   The Flexible Horseshoe Card examples view.
#   See: https://github.com/AmoebeLabs/flex-horseshoe-card/tree/master/examples
#
# Refs:
#   - https://github.com/AmoebeLabs/flex-horseshoe-card
#   
# Them colors are replaced with hardcoded colors:
# - theme-gradient-color-01: '#FFF6E3'
# - theme-gradient-color-02: '#FFE9B9'
# - theme-gradient-color-03: '#FFDA8A'
# - theme-gradient-color-04: '#FFCB5B' 
# - theme-gradient-color-05: '#FFBF37' 
# - theme-gradient-color-06: '#ffb414' 
# - theme-gradient-color-07: '#FFAD12' 
# - theme-gradient-color-08: '#FFA40E' 
# - theme-gradient-color-09: '#FF9C0B' 
# - theme-gradient-color-10: '#FF8C06' 
# - theme-gradient-color-11: '#FF8305' 
#
###############################################################################

title: FHCE
path: fhce
cards:
#------------------------------------------------------------------------------
#- type: vertical-stack
#  cards:
    - type: horizontal-stack
      cards:

        # Example 1::
        #
        #######################################################################

        - type: 'custom:flex-horseshoe-card'
          entities:
            - entity: weather.dark_sky
              attribute: temperature
              decimals: 1
              area: De Maan
              unit: '°C'
          show:
            horseshoe_style: 'lineargradient'
          layout:
            states:
              # Refers to the first entity in the list, ie index 0
              # State value is positioned at (50%,60%) with a large font size
              # The size of the units are automatically calculated at 60% of the
              # state value font size and shifted upwards.
              # The default font color is the theme defined primary-text-color.
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 60
                styles:
                  - font-size: 3.5em;
            areas:
              # Refers to the first entity in the list, ie index 1
              # Area value is positioned at (50%,35%) with font-size 1.5 and
              # an opacity of 80%.
              # The default font color is the theme defined primary-text-color.
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 35
                styles:
                  - font-size: 1.5em;
                  - opacity: 0.8;
  
          # Scale set to -10 to +40 degrees celcius
          horseshoe_scale:
            min: -10
            max: 40
          # 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:
            10: 'red'
            18: 'blue'

        # Example 2::
        #
        #######################################################################

        - type: 'custom:flex-horseshoe-card'
          entities:
            - entity: weather.dark_sky
              attribute: temperature
              decimals: 1
              name: '2: Ut Weer'
              area: De Maan
              unit: '°C'
            - entity: weather.dark_sky
              attribute: humidity
              decimals: 0
              unit: '%'
            - entity: weather.dark_sky
              attribute: pressure
              decimals: 0
              unit: 'hPa'
          show:
            horseshoe_style: 'lineargradient'
          layout:
            hlines:
              - id: 0
                xpos: 50
                ypos: 48
                length: 40
                styles:
                  - stroke: var(--primary-text-color);
                  - stroke-width: 2;
                  - opacity: 0.5;
              - id: 1
                xpos: 50
                ypos: 20
                length: 40
                styles:
                  - stroke: var(--primary-text-color);
                  - stroke-width: 2;
                  - opacity: 0.5;
            circles:
              - xpos: 50
                ypos: 61
                radius: 5
                styles:
                  - fill: var(--primary-text-color);
                  - opacity: 0.5;
            states:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 40
                styles:
                  - font-size: 3em;
              - id: 1
                entity_index: 1
                xpos: 46
                ypos: 64
                styles:
                  - text-anchor: end;
                  - font-size: 1.6em;
              - id: 2
                entity_index: 2
                xpos: 54
                ypos: 64
                styles:
                  - text-anchor: start;
                  - font-size: 1.6em;
            names:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 100
            areas:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 80
           
          horseshoe_scale:
            min: 10
            max: 14
            ticksize: 1
          color_stops:
            16: '#FFF6E3'
            17: '#FFE9B9'
            18: '#FFDA8A'
            19: '#FFCB5B'
            20: '#FFBF37'
            21: '#ffb414'
            22: '#FFAD12'
            23: '#FFA40E'
            24: '#FF9C0B' 
            25: '#FF8C06' 

    - type: horizontal-stack
      cards:

        # Example 3::
        #
        #######################################################################

        - type: 'custom:flex-horseshoe-card'
          entities:
            - entity: weather.dark_sky
              attribute: temperature
              decimals: 1
              name: 'Ut Weer'
              area: '3: De Maan'
              unit: '°C'
          show:
            horseshoe_style: 'autominmax'
          layout:
            hlines:
              - id: 0
                xpos: 50
                ypos: 39
                length: 40
                styles:
                  - stroke: var(--primary-text-color);
                  - stroke-width: 2;
                  - opacity: 0.5;
            states:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 65
                styles:
                  - font-size: 3.5em;
            names:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 30
            areas:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 95
                styles:
                  - font-size: 1.8em;
          horseshoe_scale:
            min: -10
            max: 40
          color_stops:
            16: '#FFF6E3'
            17: '#FFE9B9'
            18: '#FFDA8A'
            19: '#FFCB5B'
            20: '#FFBF37'
            21: '#ffb414'
            22: '#FFAD12'
            23: '#FFA40E'
            24: '#FF9C0B' 
            25: '#FF8C06' 

        # Example 4::
        #
        #######################################################################

        - type: 'custom:flex-horseshoe-card'
          entities:
            - entity: weather.dark_sky
              attribute: temperature
              decimals: 1
              name: '4: Ut Weer'
              area: De Maan
              unit: '°C'
            - entity: weather.dark_sky
              attribute: humidity
              decimals: 0
              unit: '%'
              icon: mdi:water-percent
            - entity: weather.dark_sky
              attribute: pressure
              decimals: 0
              unit: 'hPa'
              icon: mdi:gauge
          show:
            horseshoe_style: 'lineargradient'
          layout:
            hlines:
              # A horizontal line. Not connected to an entity
              - 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: 34
                styles:
                  - font-size: 3em;
              # 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

          # Scale set to -10 to +40 degrees celcius            
          horseshoe_scale:
            min: -10
            max: 40
          # color stop list with 10 colors defined in the theme. With the `lineargradient` fill style, only the
          # first (16:) and last (25:) colors are used. The thresholds are ignored with this setting.
          color_stops:
            16: '#FFF6E3'
            17: '#FFE9B9'
            18: '#FFDA8A'
            19: '#FFCB5B'
            20: '#FFBF37'
            21: '#ffb414'
            22: '#FFAD12'
            23: '#FFA40E'
            24: '#FF9C0B' 
            25: '#FF8C06' 

    - type: horizontal-stack
      cards:

        # Example 5::
        #
        #######################################################################
              
        - type: 'custom:flex-horseshoe-card'
          
          entities:
            - entity: sensor.memory_use_percent
              decimals: 0
              icon: mdi:memory
              name: '5: RAM Usage'
              area: Hestia
            - entity: sensor.memory_use
              decimals: 0
              name: '(In Use)'
            - entity: sensor.memory_free
              decimals: 0
              name: '(free)'

          show:
            scale_tickmarks: true
          layout:
            hlines:
              - id: 0
                xpos: 50
                ypos: 38
                length: 40
                styles:
                  - stroke: var(--primary-text-color);
                  - stroke-width: 5;
                  - opacity: 0.9;
                  - stroke-linecap: round;
                color: '#FFF6E3'
            vlines:
              - id: 0
                xpos: 50
                ypos: 56
                length: 20
                styles:
                  - stroke: var(--primary-text-color);
                  - opacity: 0.5;
                  - stroke-width: 2;
                  - stroke-linecap: round;
            states:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 30
                styles:
                  - font-size: 3em;
                  - opacity: 0.9;
              - id: 1
                entity_index: 1
                xpos: 46
                ypos: 54
                styles:
                  - font-size: 1.5em;
                  - text-anchor: end;
              - id: 2
                entity_index: 2
                xpos: 54
                ypos: 54
                styles:
                  - font-size: 1.5em;
                  - text-anchor: start;
            names:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 100
                styles:
                  - font-size: 1.2em;
              - id: 1
                entity_index: 1
                xpos: 46
                ypos: 62
                styles:
                  - font-size: 0.8em;
                  - text-anchor: end;
                  - opacity: 0.7;
              - id: 2
                entity_index: 2
                xpos: 54
                ypos: 62
                styles:
                  - font-size: 0.8em;
                  - text-anchor: start;
                  - opacity: 0.7;
            areas:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 85
                styles:
                  - font-size: 1.2em;

          horseshoe_state:
            color:  '#FFF6E3'
          horseshoe_scale:
            min: 0
            max: 100
            color: 'var(--primary-background-color)'
            width: 6
          color_stops:
            0: '#FFF6E3'
            10: '#FFE9B9'
            20: '#FFDA8A'
            30: '#FFCB5B'
            40: '#FFBF37'
            50: '#ffb414'
            60: '#FFAD12'
            70: '#FFA40E'
            80: '#FF9C0B' 
            90: '#FF8C06' 

        # Example 6::
        #
        #######################################################################

        - type: 'custom:flex-horseshoe-card'
          
          entities:
            - entity: sensor.memory_use_percent
              decimals: 0
              icon: mdi:memory
              name: '6: RAM Usage'
              area: Hestia
            - entity: sensor.memory_use
              decimals: 0
              name: '(In Use)'
            - entity: sensor.memory_free
              decimals: 0
              name: '(free)'

          show:
            scale_tickmarks: true
          layout:
            hlines:
              - id: 0
                xpos: 50
                ypos: 38
                length: 70
                styles:
                  - opacity: 0.2;
            vlines:
              - id: 0
                xpos: 50
                ypos: 58
                length: 38
                styles:
                  - opacity: 0.2;
            states:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 30
                styles:
                  - font-size: 3em;
                  - opacity: 0.9;
              - id: 1
                entity_index: 1
                xpos: 46
                ypos: 54
                styles:
                  - font-size: 1.6em;
                  - text-anchor: end;
              - id: 2
                entity_index: 2
                xpos: 54
                ypos: 54
                styles:
                  - font-size: 1.6em;
                  - text-anchor: start;
            names:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 100
                styles:
                  - font-size: 1.3em;
              - id: 1
                entity_index: 1
                xpos: 46
                ypos: 62
                styles:
                  - font-size: 0.9em;
                  - text-anchor: end;
                  - opacity: 0.7;
              - id: 2
                entity_index: 2
                xpos: 54
                ypos: 62
                styles:
                  - font-size: 0.9em;
                  - text-anchor: start;
                  - opacity: 0.7;
            areas:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 85

          horseshoe_state:
            color:  '#FFCB5B'
          horseshoe_scale:
            min: 0
            max: 100
            color: 'var(--primary-background-color)'
            width: 6
          color_stops:
            0: '#FFF6E3'
            10: '#FFE9B9'
            20: '#FFDA8A'
            30: '#FFCB5B'
            40: '#FFBF37'
            50: '#ffb414'
            60: '#FFAD12'
            70: '#FFA40E'
            80: '#FF9C0B' 
            90: '#FF8C06' 

    - type: horizontal-stack
      cards:

        # Example 7::
        #
        #######################################################################

        - type: 'custom:flex-horseshoe-card'
          
          entities:
            - entity: sensor.disk_use
              decimals: 1
              icon: mdi:harddisk
              name: '7: Disk Usage'
              area: Hestia
            - entity: sensor.disk_use_percent
              decimals: 1
            - entity: sensor.disk_free
              decimals: 1

          scaleTickSize: 50
          show:
            scale_tickmarks: true

          layout:
            icons:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 20
                size: 3
            hlines:
              - id: 0
                xpos: 50
                ypos: 48
                length: 80
                styles:
                  - opacity: 0.5;
            circles:
              - id: 0
                xpos: 50
                ypos: 61
                radius: 3
                styles:
                  - fill : var(--primary-text-color);
                  - opacity: 0.5;
            states:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 40
                styles:
                  - font-size: 3em;
                  - opacity: 0.9;
              - id: 0
                entity_index: 1
                xpos: 46
                ypos: 64
                styles:
                  - font-size: 1.7em;
                  - text-anchor: end;
              - id: 2
                entity_index: 2
                xpos: 54
                ypos: 64
                styles:
                  - font-size: 1.7em;
                  - text-anchor: start;
            names:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 100
            areas:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 80
          horseshoe_scale:
            min: 0
            max: 215
          color_stops:
            0: '#FFF6E3'
            215: '#FF8C06' 

        # Example 8::
        #
        #######################################################################
              
        - type: 'custom:flex-horseshoe-card'
          
          entities:
            - entity: sensor.processor_use
              decimals: 0
              icon: mdi:memory
              name: '8: CPU Load'
              area: Hestia
            - entity: sensor.load_1m
              decimals: 2
              unit: '1m'
            - entity: sensor.load_5m
              decimals: 2
              unit: '5m'

          show:
            scale_tickmarks: true
          layout:
            hlines:
              - id: 0
                xpos: 50
                ypos: 38
                length: 40
                styles:
                  - stroke: var(--primary-text-color);
                  - stroke-width: 5;
                  - opacity: 0.9;
                  - stroke-linecap: round;
                color: '#FFF6E3'
            vlines:
              - id: 0
                xpos: 50
                ypos: 56
                length: 20
                styles:
                  - stroke: var(--primary-text-color);
                  - opacity: 0.5;
                  - stroke-width: 2;
                  - stroke-linecap: round;
            states:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 30
                styles:
                  - font-size: 3em;
                  - opacity: 0.9;
              - id: 1
                entity_index: 1
                xpos: 46
                ypos: 54
                styles:
                  - font-size: 1.5em;
                  - text-anchor: end;
              - id: 2
                entity_index: 2
                xpos: 54
                ypos: 54
                styles:
                  - font-size: 1.5em;
                  - text-anchor: start;
            names:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 100
                styles:
                  - font-size: 1.2em;
              - id: 1
                entity_index: 1
                xpos: 46
                ypos: 62
                styles:
                  - font-size: 0.8em;
                  - text-anchor: end;
                  - opacity: 0.7;
              - id: 2
                entity_index: 2
                xpos: 54
                ypos: 62
                styles:
                  - font-size: 0.8em;
                  - text-anchor: start;
                  - opacity: 0.7;
            areas:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 85
                styles:
                  - font-size: 1.2em;

          horseshoe_state:
            color:  '#FFF6E3'
          horseshoe_scale:
            min: 0
            max: 100
            color: 'var(--primary-background-color)'
            width: 6
          color_stops:
            0: '#FFF6E3'
            10: '#FFE9B9'
            20: '#FFDA8A'
            30: '#FFCB5B'
            40: '#FFBF37'
            50: '#ffb414'
            60: '#FFAD12'
            70: '#FFA40E'
            80: '#FF9C0B' 
            90: '#FF8C06' 


    - type: horizontal-stack
      cards:

        # Example 11::
        #
        #######################################################################

        - type: 'custom:flex-horseshoe-card'
          entities:
            - entity: sensor.memory_use_percent
              decimals: 0
              name: '11: One Bulb'
              area: Hestia
              unit: W
              decimals: 0
              tap_action:
                action: more-info
            - entity: light.1st_floor_hall_light              
              name: 'hall'
              icon: mdi:lightbulb
              tap_action:
                action: call-service
                service: light.toggle
                service_data: { "entity_id" : "light.1st_floor_hall_light" }

          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: 28
                uom_font_size: 1.5
                styles:
                  - font-size: 2.5em;
                  - opacity: 0.9;
            names:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 100
                styles:
                  - font-size: 1.2em;
                  - opacity: 0.7;
              - id: 1
                entity_index: 1
                xpos: 50
                ypos: 78
                styles:
                  - font-size: 1.5em;
            icons:
              - id: 0
                animation_id: 0
                xpos: 50
                ypos: 55
                entity_index: 1
                icon_size: 3.5
                styles:
                  - color: var(--primary-text-color);
            circles:
              - id: 0
                animation_id: 0
                xpos: 50
                ypos: 50
                radius: 35
                styles:
                  - fill: var(--primary-background-color);
              - id: 1
                animation_id: 11
                xpos: 50
                ypos: 50
                radius: 30
                entity_index: 1
                styles:
                  - fill: var(--primary-background-color);

          horseshoe_scale:
            min: 0
            max: 100
            width: 6
            color: 'var(--primary-background-color)'
          horseshoe_state:
            width: 12
            color: '#FFF6E3'
          color_stops:
            0:  '#FFF6E3'
            10: '#FFE9B9'
            20: '#FFDA8A'
            30: '#FFCB5B'
            40: '#FFBF37'
            50: '#ffb414'
            60: '#FFAD12'
            70: '#FFA40E'
            80: '#FF9C0B' 
            90: '#FF8C06' 

        # Example 12::
        #
        #######################################################################

        - type: 'custom:flex-horseshoe-card'
          entities:
            # Abuse the memory_use_percent sensor as the wattage the bulbs use. Just to show the possibilities
            - entity: sensor.memory_use_percent
              decimals: 0
              name: '12: Two Bulbs'
              area: Hestia
              unit: W
              decimals: 0
              tap_action:
                action: more-info

            # The left light displayed on the card. Index 1
            - entity: light.1st_floor_hall_light              
              name: 'hall'
              icon: mdi:lightbulb
              tap_action:
                action: call-service
                service: light.toggle
                service_data: { "entity_id" : "light.1st_floor_hall_light" }

            # The right light displayed on the card. Index 2
            - entity: light.gledopto
              name: 'opto'
              icon: mdi:lightbulb
              tap_action:
                action: call-service
                service: light.toggle
                service_data: { "entity_id" : "light.gledopto" }

          animations:
            # Animations for the second entity, index 1
            entity.1:
              - state: 'on'
                circles:
                  - animation_id: 11
                    styles:
                      - fill: var(--secondary-text-color);
                      - opacity: 0.9;
                      - transform-origin: 30% 50%;
                      - animation: jello 1s ease-in-out both;
                icons:
                  - animation_id: 10
                    styles:
                      - fill: white;
              - state: 'off'
                circles:
                  - animation_id: 11
                    reuse: true
                    styles:
                      - transform-origin: 30% 50%;
                      - animation: zoomOut 1s ease-out both;
                icons:
                  - animation_id: 10
                    styles:
                      - fill: var(--primary-text-color);

            # Animations for the third entity, index 2
            entity.2:
              - state: 'on'
                circles:
                  - animation_id: 21
                    styles:
                      - fill: var(--secondary-text-color);
                      - stroke-width: 2;
                      - stroke: var(--primary-background-color);
                      - opacity: 0.9;
                      - stroke-dasharray: 94;
                      - stroke-dashoffset: 1000;
                      - animation: stroke 2s ease-out forwards;

                icons:
                  - animation_id: 20
                    styles:
                      - fill: white;

              - state: 'off'
                circles:
                  - animation_id: 21
                    styles:
                      - fill: var(--primary-background-color);
                      - opacity: 0.7;
                icons:
                  - animation_id: 20
                    styles:
                      - fill: var(--primary-text-color);

          show:
            horseshoe_style: 'fixed'
          layout:
            states:
              - id: 0
                entity_index: 0
                animation_id: 0
                xpos: 50
                ypos: 28
                uom_font_size: 1.5
                styles:
                  - font-size: 2.5em;
                  - opacity: 0.9;
            names:
              - id: 0
                animation_id: 0
                entity_index: 0
                xpos: 50
                ypos: 100
                styles:
                  - font-size: 1.2em;
                  - opacity: 0.7;
              - id: 1
                animation_id: 1
                entity_index: 1
                xpos: 30
                ypos: 78
                styles:
                  - font-size: 1.2em;
              - id: 2
                animation_id: 2
                entity_index: 2
                xpos: 70
                ypos: 78
                styles:
                  - font-size: 1.2em;
            icons:
              - id: 0
                animation_id: 10
                xpos: 30
                ypos: 55
                entity_index: 1
                icon_size: 3.5
                styles:
                  - color: var(--primary-text-color);
              - id: 1
                animation_id: 20
                xpos: 70
                ypos: 55
                entity_index: 2
                icon_size: 3.5
                styles:
                  - color: var(--primary-text-color);
            circles:
              - animation_id: 3
                xpos: 30
                ypos: 50
                radius: 35
                styles:
                  - fill: var(--primary-background-color);
              - animation_id: 11
                xpos: 30
                ypos: 50
                radius: 30
                entity_index: 1

              - animation_id: 2
                xpos: 70
                ypos: 50
                radius: 35
                styles:
                  - fill: var(--primary-background-color);
              - animation_id: 21
                xpos: 70
                ypos: 50
                radius: 30
                entity_index: 2

          horseshoe_scale:
            min: 0
            max: 100
            color: 'var(--primary-background-color)'
          horseshoe_state:
            color: '#FFDA8A'
          color_stops:
            0: '#FFF6E3'
            10: '#FFE9B9'
            20: '#FFDA8A'
            30: '#FFCB5B'
            40: '#FFBF37'
            50: '#ffb414'
            60: '#FFAD12'
            70: '#FFA40E'
            80: '#FF9C0B' 
            90: '#FF8C06' 
          # The @keyframes stroke runs the stroke animation for the second lightbulb, entity light.gledopto
          style: |
            @keyframes stroke { to { stroke-dashoffset: 0; } }


            
    - type: horizontal-stack
      cards:

        # Example 9:: or 5b::
        #
        #######################################################################
              
        - type: 'custom:flex-horseshoe-card'
          
          entities:
            - entity: sensor.memory_use_percent
              decimals: 0
              icon: mdi:memory
              name: '5b: RAM Usage'
              area: Hestia
            - entity: sensor.memory_use
              decimals: 0
              name: '(In Use)'
            - entity: sensor.memory_free
              decimals: 0
              name: '(free)'

          card_filter: card--dropshadow-heavy--sepia90
          show:
            scale_tickmarks: true
          layout:
            hlines:
              - id: 0
                xpos: 50
                ypos: 38
                length: 40
                styles:
                  - stroke: var(--primary-text-color);
                  - stroke-width: 5;
                  - opacity: 0.9;
                  - stroke-linecap: round;
            vlines:
              - id: 0
                xpos: 50
                ypos: 56
                length: 20
                styles:
                  - stroke: var(--primary-text-color);
                  - opacity: 0.5;
                  - stroke-width: 2;
                  - stroke-linecap: round;
            states:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 30
                styles:
                  - font-size: 3em;
                  - opacity: 0.9;
              - id: 1
                entity_index: 1
                xpos: 46
                ypos: 54
                styles:
                  - font-size: 1.5em;
                  - text-anchor: end;
              - id: 2
                entity_index: 2
                xpos: 54
                ypos: 54
                styles:
                  - font-size: 1.5em;
                  - text-anchor: start;
            names:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 100
                styles:
                  - font-size: 1.2em;
              - id: 1
                entity_index: 1
                xpos: 46
                ypos: 62
                styles:
                  - font-size: 0.8em;
                  - text-anchor: end;
                  - opacity: 0.7;
              - id: 2
                entity_index: 2
                xpos: 54
                ypos: 62
                styles:
                  - font-size: 0.8em;
                  - text-anchor: start;
                  - opacity: 0.7;
            areas:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 85
                styles:
                  - font-size: 1.2em;

          horseshoe_state:
            color:  '#FFF6E3'
          horseshoe_scale:
            min: 0
            max: 100
            color: 'var(--primary-background-color)'
            width: 6
          color_stops:
            0: '#FFF6E3'
            10: '#FFE9B9'
            20: '#FFDA8A'
            30: '#FFCB5B'
            40: '#FFBF37'
            50: '#ffb414'
            60: '#FFAD12'
            70: '#FFA40E'
            80: '#FF9C0B' 
            90: '#FF8C06' 

        # Example 10:: or 7b::
        #
        #######################################################################

        - type: 'custom:flex-horseshoe-card'
          
          entities:
            - entity: sensor.disk_use
              decimals: 1
              icon: mdi:harddisk
              name: '7b: Disk Usage'
              area: Hestia
            - entity: sensor.disk_use_percent
              decimals: 1
            - entity: sensor.disk_free
              decimals: 1

          show:
            scale_tickmarks: true
          card_filter: card--dropshadow-light--sepia90

          layout:
            icons:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 20
                size: 3
            hlines:
              - id: 0
                xpos: 50
                ypos: 48
                length: 80
                styles:
                  - opacity: 0.5;
            circles:
              - id: 0
                xpos: 50
                ypos: 61
                radius: 3
                styles:
                  - fill : var(--primary-text-color);
                  - opacity: 0.5;
            states:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 40
                styles:
                  - font-size: 3em;
                  - opacity: 0.9;
              - id: 0
                entity_index: 1
                xpos: 46
                ypos: 64
                styles:
                  - font-size: 1.7em;
                  - text-anchor: end;
              - id: 2
                entity_index: 2
                xpos: 54
                ypos: 64
                styles:
                  - font-size: 1.7em;
                  - text-anchor: start;
            names:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 100
            areas:
              - id: 0
                entity_index: 0
                xpos: 50
                ypos: 80
          horseshoe_scale:
            min: 0
            max: 215
            ticksize: 50
            
          color_stops:
            0: '#FFF6E3'
            215: '#FF8C06'