Flex-table-card

Share your Projects! Dashboards & Frontend
43

Check this:

input_number:
  test_angle:
    min: 0
    max: 360
    step: 5
    mode: slider

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_number.test_angle

  - type: custom:flex-table-card
    title: 'icon: rotate'
    entities:
      include:
        - input_number.test_angle
    columns:
      - name: value  ## column 1
        data: state
      - name: icon  ## column 2
        data: state
        modify: '''<ha-icon icon="mdi:arrow-up">'''
      - name: icon colored  ## column 3
        data: state
        modify: '''<ha-icon icon="mdi:arrow-up" style="color: red">'''
      - name: icon rotated (unstable)  ## column 4
        data: state
        modify: '''<ha-icon icon="mdi:arrow-up" >'''
      - name: icon rotated (failed)  ## column 5
        data: state
        modify: '''<ha-icon icon="mdi:arrow-up" >'''
      - name: icon rotated (failed)  ## column 6
        data: state
        modify: '''<ha-icon icon="mdi:arrow-up" style="transform: rotate(45deg)" >'''
      - name: icon rotated (steps)  ## column 7
        data: state
        modify: |-
          var ICON = 'mdi:arrow-up';
          if (parseFloat(x) >= 315)
            ICON = 'mdi:arrow-top-left';
          else if (parseFloat(x) >= 270)
            ICON = 'mdi:arrow-left';
          else if (parseFloat(x) >= 225)
            ICON = 'mdi:arrow-bottom-left';
          else if (parseFloat(x) >= 180)
            ICON = 'mdi:arrow-down';
          else if (parseFloat(x) >= 135)
            ICON = 'mdi:arrow-bottom-right';
          else if (parseFloat(x) >= 90)
            ICON = 'mdi:arrow-right';
          else if (parseFloat(x) >= 45)
            ICON = 'mdi:arrow-top-right';
          '<ha-icon icon="' + ICON + '">'
    css:
      tbody tr:nth-child(1) td:nth-child(5) ha-icon+: 'color: cyan; transform: rotate(45deg)'
    card_mod:
      style:
        tbody tr:nth-child(1) td:nth-child(4) ha-icon $: |
          ha-svg-icon {
            {% set ANGLE = states('input_number.test_angle')|int %}
            transform: rotate({{ANGLE}}deg) !important;
          }

image

Column 4 - unstable:
Styling is done by card-mod. Refresh a page - see that the icon is rotated - but soon it will be restored to a previous state.

Column 5 - failed:
Styling is done by a native “css” option; color “cyan” is applied, rotation is not applied - probably because it should be applied to an element inside shadowRoot (“ha-svg-icon”).

Column 6 - failed:
Styling is done inside “modify” option, rotation is not applied - probably because it should be applied to an element inside shadowRoot (“ha-svg-icon”).

Column 7 - OK:
Different icons are used inside “modify”.

2 Likes