Lovelace: Button card

Dolores · June 22, 2021, 1:51am

Hello Folks. I am still struggling with the transition to fire-dom-event. This popup works as a standard button card, but not as a custom button card. With the custom button card, the popup just, doesn’t popup. I’ll be supremely grateful if some kind and wise soul could please help me out!

Not working:

type: custom:button-card
icon: mdi:microsoft-xbox
name: Xbox Remote
layout: icon_name
tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    title: Xbox Remote
    card:
      type: vertical-stack
      cards:
        - type: horizontal-stack
          cards:
            - type: custom:button-card
              color_type: blank-card
            - type: custom:button-card
              color_type: blank-card
            - type: custom:button-card
              color_type: card
              color: rgb(223, 255, 97)
              icon: mdi:volume-plus
              tap_action:
                action: call-service
                service: media_player.volume_up
                service_data:
                  entity_id: media_player.xbox
            - type: custom:button-card
              color_type: card
              color: rgb(223, 255, 97)
              icon: mdi:volume-minus
              tap_action:
                action: call-service
                service: media_player.volume_down
                service_data:
                  entity_id: media_player.xbox
            - type: custom:button-card
              color_type: blank-card
            - type: custom:button-card
              color_type: blank-card
        - type: picture-elements
          image: >-
            data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjEwIiBoZWlnaHQ9IjkwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogPG1ldGFkYXRhPgogIDxyZGY6UkRGPgogICA8Y2M6V29yayByZGY6YWJvdXQ9IiI+CiAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4KICAgIDxkYzp0aXRsZS8+CiAgIDwvY2M6V29yaz4KICA8L3JkZjpSREY+CiA8L21ldGFkYXRhPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGlkPSJjYW52YXNfYmFja2dyb3VuZCIgeD0iLTEiIHk9Ii0xIiB3aWR0aD0iODAyIiBoZWlnaHQ9IjYwMiIgZmlsbD0ibm9uZSIvPgogPC9nPgogPGNpcmNsZSBjeD0iOTkuMTgiIGN5PSIyMCIgcj0iMTQiIGZpbGw9IiNmZmYiLz4KIDxjaXJjbGUgY3g9IjE0OC4xOCIgY3k9IjU0IiByPSIxMC41IiBmaWxsPSIjMzMzIiBzdHJva2U9IiNmZmYiLz4KIDxwYXRoIGQ9Im0xNTMuMTYgNTkuMzVjLTAuMTEgMC4yMDYtMC4zNCAwLjMyNS0wLjYyNyAwLjMyNWgtMS4zNjhjLTAuNDU1IDAtMC45ODQtMC4yODktMS4yMy0wLjY3MmwtMS43MDEtMi42NTdjLTAuMDMtMC4wNDUtMC4wNTUtMC4wNjItMC4wNjItMC4wNjQgNGUtMyAyZS0zIC0wLjAyMSAwLjAxOC0wLjA1MSAwLjA2NWwtMS43MDkgMi42NTdjLTAuMjQ3IDAuMzgzLTAuNzc2IDAuNjcxLTEuMjMgMC42NzFoLTEuMzUzYy0wLjI4OCAwLTAuNTE2LTAuMTE4LTAuNjI4LTAuMzI0LTAuMTExLTAuMjA2LTAuMDg1LTAuNDYzIDAuMDczLTAuNzAzbDIuOTc2LTQuNTQ1YTAuNzA0IDAuNzA0IDAgMCAwIDJlLTMgLTAuNjc2bC0yLjY0LTQuMDc0Yy0wLjE1NS0wLjI0MS0wLjE4LTAuNDk4LTAuMDY5LTAuNzA0IDAuMTEzLTAuMjA2IDAuMzQyLTAuMzI0IDAuNjMtMC4zMjRoMS4yODZjMC40NTcgMCAwLjk4NCAwLjI5MiAxLjIyNSAwLjY4bDEuNDkgMi4zODVhMC4yMyAwLjIzIDAgMCAwIDAuMDQ4IDAuMDU3YzNlLTMgLThlLTMgMC4wMi0wLjAyNCAwLjA0LTAuMDU3bDEuNDU1LTIuMzhjMC4yMzktMC4zOSAwLjc2NC0wLjY4NSAxLjIyMi0wLjY4NWgxLjI2N2MwLjI4NyAwIDAuNTE2IDAuMTE4IDAuNjI4IDAuMzI0IDAuMTEzIDAuMjA2IDAuMDg5IDAuNDYyLTAuMDY3IDAuNzA0bC0yLjY1OCA0LjE1YTAuNjk5IDAuNjk5IDAgMCAwIDVlLTMgMC42NzVsMi45NyA0LjQ3YzAuMTU5IDAuMjQgMC4xODcgMC40OTYgMC4wNzYgMC43MDJ6IiBmaWxsPSIjMmQ4OWVmIi8+CiA8Y2lyY2xlIGN4PSIxNjguMTgiIGN5PSI3NCIgcj0iMTAuNSIgZmlsbD0iIzMzMyIgc3Ryb2tlPSIjZmZmIi8+CiA8cGF0aCBkPSJtMTczLjU3IDc5LjM2MmMtMC4xMzQgMC4yLTAuMzY4IDAuMzE0LTAuNjQyIDAuMzE0aC0xLjExM2MtMC40OCAwLTAuOTc1LTAuMzQtMS4xNDctMC43ODlsLTAuNDktMS4yNzVhMC42NDIgMC42NDIgMCAwIDAtMC41MzItMC4zNjVoLTMuMDM2YTAuNjIgMC42MiAwIDAgMC0wLjUyIDAuMzY0bC0wLjQ2IDEuMjY3Yy0wLjE2MyAwLjQ0Ny0wLjY2MyAwLjc5OC0xLjE0IDAuNzk4aC0xLjA1M2MtMC4yNzMgMC0wLjUwOC0wLjExNS0wLjY0NC0wLjMxMy0wLjEzNi0wLjE5OS0wLjE1Ny0wLjQ1OS0wLjA1OC0wLjcxM2wzLjcxNi05LjU0YTEuMjkzIDEuMjkzIDAgMCAxIDEuMTUtMC43ODZoMS4wNDdjMC40OCAwIDAuOTc2IDAuMzM2IDEuMTU0IDAuNzgxbDMuODIgOS41NDVjMC4xMDQgMC4yNTMgMC4wODUgMC41MTMtMC4wNSAwLjcxMnptLTUuNDY3LTcuMjU3LTAuOTI2IDIuNTQyYy0wLjAyIDAuMDU1LTAuMDE4IDAuMDk1LThlLTMgMC4xMDkgMC4wMSAwLjAxMyAwLjA0NiAwLjAzIDAuMTA0IDAuMDNoMS42ODFjMC4wNjcgMCAwLjA5Ny0wLjAxOCAwLjEwMy0wLjAyOCA3ZS0zIC0wLjAxMSAwLjAxNC0wLjA0NS0wLjAxLTAuMTA3eiIgZmlsbD0iIzVkYzIxZSIvPgogPGNpcmNsZSBjeD0iMTg4LjE4IiBjeT0iNTQiIHI9IjEwLjUiIGZpbGw9IiMzMzMiIHN0cm9rZT0iI2ZmZiIvPgogPHBhdGggZD0ibTE5My41NCA1OC4xMThhMy40MiAzLjQyIDAgMCAxLTEuMTEgMS4zMThjLTAuNDY3IDAuMzI3LTEuMDQ2IDAuNTMzLTEuNzIyIDAuNjA3LTAuNDE1IDAuMDQzLTEuMzc1IDAuMDctMi44NTUgMC4wOGgtMy4yNzZjLTAuNTUxIDAtMS0wLjQ0OC0xLTF2LTEwLjI0NWMwLTAuNTUyIDAuNDQ5LTEgMS0xaDMuOTYyYzAuOTQ1IDAgMS42MzQgMC4wMzkgMi4xMDYgMC4xMTkgMC40OTYgMC4wODQgMC45NDcgMC4yNjMgMS4zNCAwLjUzIDAuMzk4IDAuMjc1IDAuNzMgMC42MzYgMC45ODYgMS4wNzQgMC4yNjcgMC40NTQgMC40MDIgMC45NjcgMC40MDIgMS41MjMgMCAwLjYwNi0wLjE2NSAxLjE2OS0wLjQ5MSAxLjY3M2EzLjA2IDMuMDYgMCAwIDEtMC42OTIgMC43NThsLTAuMDIzIDAuMDE3IDAuMDE4IDAuMDFjMC40NTQgMC4yMjQgMC44MyAwLjUyOSAxLjEyIDAuOTA1IDAuNDIyIDAuNTUzIDAuNjM3IDEuMjA3IDAuNjM3IDEuOTQ4YTMuNzkgMy43OSAwIDAgMS0wLjQwMSAxLjY4NHptLTMuNDM3LTIuODk2Yy0wLjE5NS0wLjA2OS0wLjY5NC0wLjE1LTEuOTY4LTAuMTVoLTEuMjJhMC4zNCAwLjM0IDAgMCAwLTAuMzQgMC4zNHYxLjc1OWMwIDAuMTg4IDAuMTUzIDAuMzQgMC4zNCAwLjM0aDEuNDk3YzEuMDE4IDAgMS4zOTgtMC4wMzQgMS41MzctMC4wNjMgMC4yODQtMC4wNTMgMC41MDItMC4xNyAwLjY3Mi0wLjM2IDAuMTYzLTAuMTg0IDAuMjQzLTAuNDM1IDAuMjQzLTAuNzYzIDAtMC4yODMtMC4wNjMtMC41MS0wLjE5My0wLjY5OWExLjEwNyAxLjEwNyAwIDAgMC0wLjU2OC0wLjQwNHptLTMuMTg4LTIuNzM4aDAuODY1YzAuODk1IDAgMS40NTQtMC4wMTMgMS42NjEtMC4wMzcgMC4zMjItMC4wMzggMC41NzQtMC4xNDcgMC43NDktMC4zMiAwLjE2Ni0wLjE2NyAwLjI0Ny0wLjM4NyAwLjI0Ny0wLjY3MiAwLTAuMTM2LTAuMDE3LTAuMjYtMC4wNTItMC4zNjctMC4wNTEtMC4xNi0wLjI5LTAuNDIyLTAuNDQ3LTAuNDg4LTAuMTEtMC4wNDctMC4yNC0wLjA4LTAuMzktMC4wOTgtMC4yMTMtMC4wMjUtMC44NzMtMC4wMzctMS45NTgtMC4wMzdoLTAuNjc0YTAuMzQgMC4zNCAwIDAgMC0wLjM0IDAuMzR2MS4zMzljMCAwLjE4OCAwLjE1MiAwLjM0IDAuMzQgMC4zNHoiIGZpbGw9IiNlMTEiLz4KIDxjaXJjbGUgY3g9IjE2OC4xOCIgY3k9IjM0IiByPSIxMC41IiBmaWxsPSIjMzMzIiBzdHJva2U9IiNmZmYiLz4KIDxwYXRoIGQ9Im0xNzMuMTMgMjkuMzUzLTMuMjY5IDUuMTZjLTAuMTQ5IDAuMjM2LTAuMjggMC42ODctMC4yOCAwLjk2NXYzLjI0OWEwLjk1IDAuOTUgMCAwIDEtMC45NDggMC45NDhoLTAuOTE2YTAuOTUgMC45NSAwIDAgMS0wLjk0OS0wLjk0OHYtMy4yNjRjMC0wLjI3OS0wLjEzLTAuNzI5LTAuMjgtMC45NjRsLTMuMjU0LTUuMTQ2Yy0wLjE1Mi0wLjI0My0wLjE3Ni0wLjUtMC4wNjItMC43MDUgMC4xMTMtMC4yMDUgMC4zNDMtMC4zMjMgMC42MjktMC4zMjNoMS4yOTNjMC40NiAwIDAuOTgzIDAuMjk3IDEuMjE5IDAuNjkybDEuODgzIDMuMTY3YzAuMDEzIDAuMDIgMC4wMjMgMC4wMzUgMC4wMzMgMC4wNDUgNGUtMyAtMC4wMSAwLjAxMy0wLjAyNCAwLjAyNS0wLjA0NGwxLjg0NC0zLjE2M2MwLjIzMi0wLjM5OCAwLjc1NC0wLjY5NyAxLjIxNS0wLjY5N2gxLjI1MmMwLjI4NyAwIDAuNTE2IDAuMTE4IDAuNjI5IDAuMzI0IDAuMTE0IDAuMjA1IDAuMDkgMC40NjItMC4wNjQgMC43MDR6IiBmaWxsPSIjZmZjNDBkIi8+CiA8ZyBmaWxsPSIjMzMzIj4KICA8cGF0aCBkPSJtMzYuMzk3IDQ2LjY5YzAgMC42MDQgMC40OSAxLjA5NCAxLjA5MyAxLjA5NGgxMi4xOXYxMi40MzJoLTEyLjE5Yy0wLjYwMyAwLTEuMDkzIDAuNDktMS4wOTMgMS4wOTN2MTIuMTkxaC0xMi40MzR2LTEyLjE5YzAtMC42MDQtMC40OS0xLjA5NC0xLjA5My0xLjA5NGgtMTIuMTl2LTEyLjQzMmgxMi4xOWMwLjYwMyAwIDEuMDkzLTAuNDkgMS4wOTMtMS4wOTN2LTEyLjE5MWgxMi40MzR6IiBzdHJva2U9IiNmZmYiLz4KICA8cGF0aCBkPSJtMTA0LjY0IDguMjQ1Yy0zLjA3NSAwLjE4NC01LjA5OCAxLjQ5OC01LjU4OCAxLjg0OC0wLjQ3My0wLjM0My0yLjQyNS0xLjU5Ny01LjM4My0xLjgyNSAxLjY3OC0wLjc5MiAzLjUzMi0xLjI2OCA1LjUwOC0xLjI2OCAxLjk2IDAgMy43OTcgMC40NjYgNS40NjQgMS4yNDV6bS01LjU4NyA4LjdjNi43ODggNS4yNDIgOC44ODggOS42MjIgOS41MzUgMTEuOTczLTIuMzcxIDIuNTAzLTUuNzAyIDQuMDgyLTkuNDEyIDQuMDgyLTMuODEzIDAtNy4yMTQtMS42OC05LjU5NS00LjMwMyAwLjcxOC0yLjQwMiAyLjg5MS02LjY3MSA5LjQ3Mi0xMS43NTN6bTguMzYxLTYuOTJjMi44ODQgMi4zODggNC43NjIgNS45NDcgNC43NjMgOS45NzUgMCAyLjc5Ny0wLjkwOSA1LjM3Ni0yLjQxOCA3LjQ5OSAwLjMyNS02LjYzNy03LjA2Ny0xMy44MzgtNy4wNjctMTMuODM4IDAuMjY4LTEuNDc2IDIuOTc4LTIuODA3IDQuNzIyLTMuNjM2em0tMTYuNTY1IDAuMDc3YzEuNzQ0IDAuODMyIDQuMzA3IDIuMTM0IDQuNTY4IDMuNTY1IDAgMC03LjEzMyA2Ljk1Ni03LjA3MyAxMy40OTdhMTIuOTI2IDEyLjkyNiAwIDAgMS0yLjE2Ny03LjE2MWMwLTMuOTg3IDEuODM4LTcuNTE2IDQuNjcyLTkuOXoiLz4KICA8cGF0aCBkPSJtOTkuNzYxIDY1LjIzMmgtMS41MzY0djcuNjgyMmgxLjUzNjR2LTcuNjgyMm0zLjcxMDUgMS42NjctMS4wOTA5IDEuMDkwOWMxLjI1OTkgMS4wMTQgMS45ODk3IDIuNTQyOCAxLjk4OTcgNC4xNTYxYTUuMzc3NSA1LjM3NzUgMCAwIDEtNS4zNzc1IDUuMzc3NWMtMi45NjUzIDAtNS4zNzc1LTIuMzk2OC01LjM3NzUtNS4zNzc1IDAtMS42MDU2IDAuNzI5ODEtMy4xNDIgMS45ODItNC4xNjM3bC0xLjA4MzItMS4wODMyYy0yLjkxMTUgMi40NzM3LTMuMjY0OSA2LjgzNzEtMC43OTEyNiA5Ljc0ODcgMi40NzM3IDIuOTAzOSA2LjgzNzEgMy4yNTcyIDkuNzQ4NyAwLjc4MzU4IDEuNTUxOC0xLjMxMzYgMi40MzUyLTMuMjQ5NiAyLjQzNTItNS4yODUzIDAtMi4wMjA0LTAuODkxMTMtMy45NDEtMi40MzUyLTUuMjQ2OXoiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9Ii43NjgyMiIgc3R5bGU9InBhaW50LW9yZGVyOnN0cm9rZSBmaWxsIG1hcmtlcnMiLz4KIDwvZz4KPC9zdmc+Cg==
          elements:
            - type: service-button
              title: ''
              service: remote.send_command
              service_data:
                entity_id: remote.xbox_remote
                command: Up
              style:
                top: 45.35%
                left: 14.3%
                width: 6.2%
                height: 15%
                overflow: hidden
            - type: service-button
              title: ''
              service: remote.send_command
              service_data:
                entity_id: remote.xbox_remote
                command: Down
              style:
                top: 74.7%
                left: 14.3%
                width: 6.2%
                height: 15%
                overflow: hidden
            - type: service-button
              title: ''
              service: remote.send_command
              service_data:
                entity_id: remote.xbox_remote
                command: Left
              style:
                top: 60%
                left: 8.05%
                height: 14.4%
                width: 6.4%
                overflow: hidden
            - type: service-button
              title: ''
              service: remote.send_command
              service_data:
                entity_id: remote.xbox_remote
                command: Right
              style:
                top: 60%
                left: 20.65%
                height: 14.4%
                width: 6.4%
                overflow: hidden
            - type: service-button
              title: ''
              service: remote.send_command
              service_data:
                entity_id: remote.xbox_remote
                command: A
              style:
                top: 82.5%
                left: 80.05%
                width: 10.5%
                height: 24.4%
                border-radius: 100%
                overflow: hidden
            - type: service-button
              title: ''
              service: remote.send_command
              service_data:
                entity_id: remote.xbox_remote
                command: X
              style:
                top: 60.0%
                left: 70.6%
                width: 10.5%
                height: 24.4%
                border-radius: 100%
                overflow: hidden
            - type: service-button
              title: ''
              service: remote.send_command
              service_data:
                entity_id: remote.xbox_remote
                command: B
              style:
                top: 60.0%
                left: 89.5%
                width: 10.5%
                height: 24.4%
                border-radius: 100%
                overflow: hidden
            - type: service-button
              title: ''
              service: remote.send_command
              service_data:
                entity_id: remote.xbox_remote
                command: 'Y'
              style:
                top: 37.9%
                left: 80.05%
                width: 10.5%
                height: 24.4%
                border-radius: 100%
                overflow: hidden
            - type: service-button
              title: ''
              service: remote.toggle
              service_data:
                entity_id: remote.xbox_remote
              style:
                top: 80.2%
                left: 47.2%
                width: 7%
                height: 16%
                border-radius: 100%
                overflow: hidden
            - type: service-button
              title: ''
              service: media_player.play_media
              service_data:
                entity_id: media_player.xbox
                media_content_type: ''
                media_content_id: Home
              style:
                top: 22.2%
                left: 47.2%
                width: 13.4%
                height: 31.2%
                border-radius: 100%
                overflow: hidden

Working:

type: button
icon: mdi:microsoft-xbox
name: Xbox Remote 2
layout: icon_name
tap_action:
  action: fire-dom-event
  browser_mod:
    command: popup
    title: Xbox Remote
    card:
      type: vertical-stack
      cards:
        - type: horizontal-stack
          cards:
            - type: custom:button-card
              color_type: blank-card
            - type: custom:button-card
              color_type: blank-card
            - type: custom:button-card
              color_type: card
              color: rgb(223, 255, 97)
              icon: mdi:volume-plus
              tap_action:
                action: call-service
                service: media_player.volume_up
                service_data:
                  entity_id: media_player.xbox
            - type: custom:button-card
              color_type: card
              color: rgb(223, 255, 97)
              icon: mdi:volume-minus
              tap_action:
                action: call-service
                service: media_player.volume_down
                service_data:
                  entity_id: media_player.xbox
            - type: custom:button-card
              color_type: blank-card
            - type: custom:button-card
              color_type: blank-card
        - type: picture-elements
          image: >-
            data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjEwIiBoZWlnaHQ9IjkwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogPG1ldGFkYXRhPgogIDxyZGY6UkRGPgogICA8Y2M6V29yayByZGY6YWJvdXQ9IiI+CiAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4KICAgIDxkYzp0aXRsZS8+CiAgIDwvY2M6V29yaz4KICA8L3JkZjpSREY+CiA8L21ldGFkYXRhPgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGlkPSJjYW52YXNfYmFja2dyb3VuZCIgeD0iLTEiIHk9Ii0xIiB3aWR0aD0iODAyIiBoZWlnaHQ9IjYwMiIgZmlsbD0ibm9uZSIvPgogPC9nPgogPGNpcmNsZSBjeD0iOTkuMTgiIGN5PSIyMCIgcj0iMTQiIGZpbGw9IiNmZmYiLz4KIDxjaXJjbGUgY3g9IjE0OC4xOCIgY3k9IjU0IiByPSIxMC41IiBmaWxsPSIjMzMzIiBzdHJva2U9IiNmZmYiLz4KIDxwYXRoIGQ9Im0xNTMuMTYgNTkuMzVjLTAuMTEgMC4yMDYtMC4zNCAwLjMyNS0wLjYyNyAwLjMyNWgtMS4zNjhjLTAuNDU1IDAtMC45ODQtMC4yODktMS4yMy0wLjY3MmwtMS43MDEtMi42NTdjLTAuMDMtMC4wNDUtMC4wNTUtMC4wNjItMC4wNjItMC4wNjQgNGUtMyAyZS0zIC0wLjAyMSAwLjAxOC0wLjA1MSAwLjA2NWwtMS43MDkgMi42NTdjLTAuMjQ3IDAuMzgzLTAuNzc2IDAuNjcxLTEuMjMgMC42NzFoLTEuMzUzYy0wLjI4OCAwLTAuNTE2LTAuMTE4LTAuNjI4LTAuMzI0LTAuMTExLTAuMjA2LTAuMDg1LTAuNDYzIDAuMDczLTAuNzAzbDIuOTc2LTQuNTQ1YTAuNzA0IDAuNzA0IDAgMCAwIDJlLTMgLTAuNjc2bC0yLjY0LTQuMDc0Yy0wLjE1NS0wLjI0MS0wLjE4LTAuNDk4LTAuMDY5LTAuNzA0IDAuMTEzLTAuMjA2IDAuMzQyLTAuMzI0IDAuNjMtMC4zMjRoMS4yODZjMC40NTcgMCAwLjk4NCAwLjI5MiAxLjIyNSAwLjY4bDEuNDkgMi4zODVhMC4yMyAwLjIzIDAgMCAwIDAuMDQ4IDAuMDU3YzNlLTMgLThlLTMgMC4wMi0wLjAyNCAwLjA0LTAuMDU3bDEuNDU1LTIuMzhjMC4yMzktMC4zOSAwLjc2NC0wLjY4NSAxLjIyMi0wLjY4NWgxLjI2N2MwLjI4NyAwIDAuNTE2IDAuMTE4IDAuNjI4IDAuMzI0IDAuMTEzIDAuMjA2IDAuMDg5IDAuNDYyLTAuMDY3IDAuNzA0bC0yLjY1OCA0LjE1YTAuNjk5IDAuNjk5IDAgMCAwIDVlLTMgMC42NzVsMi45NyA0LjQ3YzAuMTU5IDAuMjQgMC4xODcgMC40OTYgMC4wNzYgMC43MDJ6IiBmaWxsPSIjMmQ4OWVmIi8+CiA8Y2lyY2xlIGN4PSIxNjguMTgiIGN5PSI3NCIgcj0iMTAuNSIgZmlsbD0iIzMzMyIgc3Ryb2tlPSIjZmZmIi8+CiA8cGF0aCBkPSJtMTczLjU3IDc5LjM2MmMtMC4xMzQgMC4yLTAuMzY4IDAuMzE0LTAuNjQyIDAuMzE0aC0xLjExM2MtMC40OCAwLTAuOTc1LTAuMzQtMS4xNDctMC43ODlsLTAuNDktMS4yNzVhMC42NDIgMC42NDIgMCAwIDAtMC41MzItMC4zNjVoLTMuMDM2YTAuNjIgMC42MiAwIDAgMC0wLjUyIDAuMzY0bC0wLjQ2IDEuMjY3Yy0wLjE2MyAwLjQ0Ny0wLjY2MyAwLjc5OC0xLjE0IDAuNzk4aC0xLjA1M2MtMC4yNzMgMC0wLjUwOC0wLjExNS0wLjY0NC0wLjMxMy0wLjEzNi0wLjE5OS0wLjE1Ny0wLjQ1OS0wLjA1OC0wLjcxM2wzLjcxNi05LjU0YTEuMjkzIDEuMjkzIDAgMCAxIDEuMTUtMC43ODZoMS4wNDdjMC40OCAwIDAuOTc2IDAuMzM2IDEuMTU0IDAuNzgxbDMuODIgOS41NDVjMC4xMDQgMC4yNTMgMC4wODUgMC41MTMtMC4wNSAwLjcxMnptLTUuNDY3LTcuMjU3LTAuOTI2IDIuNTQyYy0wLjAyIDAuMDU1LTAuMDE4IDAuMDk1LThlLTMgMC4xMDkgMC4wMSAwLjAxMyAwLjA0NiAwLjAzIDAuMTA0IDAuMDNoMS42ODFjMC4wNjcgMCAwLjA5Ny0wLjAxOCAwLjEwMy0wLjAyOCA3ZS0zIC0wLjAxMSAwLjAxNC0wLjA0NS0wLjAxLTAuMTA3eiIgZmlsbD0iIzVkYzIxZSIvPgogPGNpcmNsZSBjeD0iMTg4LjE4IiBjeT0iNTQiIHI9IjEwLjUiIGZpbGw9IiMzMzMiIHN0cm9rZT0iI2ZmZiIvPgogPHBhdGggZD0ibTE5My41NCA1OC4xMThhMy40MiAzLjQyIDAgMCAxLTEuMTEgMS4zMThjLTAuNDY3IDAuMzI3LTEuMDQ2IDAuNTMzLTEuNzIyIDAuNjA3LTAuNDE1IDAuMDQzLTEuMzc1IDAuMDctMi44NTUgMC4wOGgtMy4yNzZjLTAuNTUxIDAtMS0wLjQ0OC0xLTF2LTEwLjI0NWMwLTAuNTUyIDAuNDQ5LTEgMS0xaDMuOTYyYzAuOTQ1IDAgMS42MzQgMC4wMzkgMi4xMDYgMC4xMTkgMC40OTYgMC4wODQgMC45NDcgMC4yNjMgMS4zNCAwLjUzIDAuMzk4IDAuMjc1IDAuNzMgMC42MzYgMC45ODYgMS4wNzQgMC4yNjcgMC40NTQgMC40MDIgMC45NjcgMC40MDIgMS41MjMgMCAwLjYwNi0wLjE2NSAxLjE2OS0wLjQ5MSAxLjY3M2EzLjA2IDMuMDYgMCAwIDEtMC42OTIgMC43NThsLTAuMDIzIDAuMDE3IDAuMDE4IDAuMDFjMC40NTQgMC4yMjQgMC44MyAwLjUyOSAxLjEyIDAuOTA1IDAuNDIyIDAuNTUzIDAuNjM3IDEuMjA3IDAuNjM3IDEuOTQ4YTMuNzkgMy43OSAwIDAgMS0wLjQwMSAxLjY4NHptLTMuNDM3LTIuODk2Yy0wLjE5NS0wLjA2OS0wLjY5NC0wLjE1LTEuOTY4LTAuMTVoLTEuMjJhMC4zNCAwLjM0IDAgMCAwLTAuMzQgMC4zNHYxLjc1OWMwIDAuMTg4IDAuMTUzIDAuMzQgMC4zNCAwLjM0aDEuNDk3YzEuMDE4IDAgMS4zOTgtMC4wMzQgMS41MzctMC4wNjMgMC4yODQtMC4wNTMgMC41MDItMC4xNyAwLjY3Mi0wLjM2IDAuMTYzLTAuMTg0IDAuMjQzLTAuNDM1IDAuMjQzLTAuNzYzIDAtMC4yODMtMC4wNjMtMC41MS0wLjE5My0wLjY5OWExLjEwNyAxLjEwNyAwIDAgMC0wLjU2OC0wLjQwNHptLTMuMTg4LTIuNzM4aDAuODY1YzAuODk1IDAgMS40NTQtMC4wMTMgMS42NjEtMC4wMzcgMC4zMjItMC4wMzggMC41NzQtMC4xNDcgMC43NDktMC4zMiAwLjE2Ni0wLjE2NyAwLjI0Ny0wLjM4NyAwLjI0Ny0wLjY3MiAwLTAuMTM2LTAuMDE3LTAuMjYtMC4wNTItMC4zNjctMC4wNTEtMC4xNi0wLjI5LTAuNDIyLTAuNDQ3LTAuNDg4LTAuMTEtMC4wNDctMC4yNC0wLjA4LTAuMzktMC4wOTgtMC4yMTMtMC4wMjUtMC44NzMtMC4wMzctMS45NTgtMC4wMzdoLTAuNjc0YTAuMzQgMC4zNCAwIDAgMC0wLjM0IDAuMzR2MS4zMzljMCAwLjE4OCAwLjE1MiAwLjM0IDAuMzQgMC4zNHoiIGZpbGw9IiNlMTEiLz4KIDxjaXJjbGUgY3g9IjE2OC4xOCIgY3k9IjM0IiByPSIxMC41IiBmaWxsPSIjMzMzIiBzdHJva2U9IiNmZmYiLz4KIDxwYXRoIGQ9Im0xNzMuMTMgMjkuMzUzLTMuMjY5IDUuMTZjLTAuMTQ5IDAuMjM2LTAuMjggMC42ODctMC4yOCAwLjk2NXYzLjI0OWEwLjk1IDAuOTUgMCAwIDEtMC45NDggMC45NDhoLTAuOTE2YTAuOTUgMC45NSAwIDAgMS0wLjk0OS0wLjk0OHYtMy4yNjRjMC0wLjI3OS0wLjEzLTAuNzI5LTAuMjgtMC45NjRsLTMuMjU0LTUuMTQ2Yy0wLjE1Mi0wLjI0My0wLjE3Ni0wLjUtMC4wNjItMC43MDUgMC4xMTMtMC4yMDUgMC4zNDMtMC4zMjMgMC42MjktMC4zMjNoMS4yOTNjMC40NiAwIDAuOTgzIDAuMjk3IDEuMjE5IDAuNjkybDEuODgzIDMuMTY3YzAuMDEzIDAuMDIgMC4wMjMgMC4wMzUgMC4wMzMgMC4wNDUgNGUtMyAtMC4wMSAwLjAxMy0wLjAyNCAwLjAyNS0wLjA0NGwxLjg0NC0zLjE2M2MwLjIzMi0wLjM5OCAwLjc1NC0wLjY5NyAxLjIxNS0wLjY5N2gxLjI1MmMwLjI4NyAwIDAuNTE2IDAuMTE4IDAuNjI5IDAuMzI0IDAuMTE0IDAuMjA1IDAuMDkgMC40NjItMC4wNjQgMC43MDR6IiBmaWxsPSIjZmZjNDBkIi8+CiA8ZyBmaWxsPSIjMzMzIj4KICA8cGF0aCBkPSJtMzYuMzk3IDQ2LjY5YzAgMC42MDQgMC40OSAxLjA5NCAxLjA5MyAxLjA5NGgxMi4xOXYxMi40MzJoLTEyLjE5Yy0wLjYwMyAwLTEuMDkzIDAuNDktMS4wOTMgMS4wOTN2MTIuMTkxaC0xMi40MzR2LTEyLjE5YzAtMC42MDQtMC40OS0xLjA5NC0xLjA5My0xLjA5NGgtMTIuMTl2LTEyLjQzMmgxMi4xOWMwLjYwMyAwIDEuMDkzLTAuNDkgMS4wOTMtMS4wOTN2LTEyLjE5MWgxMi40MzR6IiBzdHJva2U9IiNmZmYiLz4KICA8cGF0aCBkPSJtMTA0LjY0IDguMjQ1Yy0zLjA3NSAwLjE4NC01LjA5OCAxLjQ5OC01LjU4OCAxLjg0OC0wLjQ3My0wLjM0My0yLjQyNS0xLjU5Ny01LjM4My0xLjgyNSAxLjY3OC0wLjc5MiAzLjUzMi0xLjI2OCA1LjUwOC0xLjI2OCAxLjk2IDAgMy43OTcgMC40NjYgNS40NjQgMS4yNDV6bS01LjU4NyA4LjdjNi43ODggNS4yNDIgOC44ODggOS42MjIgOS41MzUgMTEuOTczLTIuMzcxIDIuNTAzLTUuNzAyIDQuMDgyLTkuNDEyIDQuMDgyLTMuODEzIDAtNy4yMTQtMS42OC05LjU5NS00LjMwMyAwLjcxOC0yLjQwMiAyLjg5MS02LjY3MSA5LjQ3Mi0xMS43NTN6bTguMzYxLTYuOTJjMi44ODQgMi4zODggNC43NjIgNS45NDcgNC43NjMgOS45NzUgMCAyLjc5Ny0wLjkwOSA1LjM3Ni0yLjQxOCA3LjQ5OSAwLjMyNS02LjYzNy03LjA2Ny0xMy44MzgtNy4wNjctMTMuODM4IDAuMjY4LTEuNDc2IDIuOTc4LTIuODA3IDQuNzIyLTMuNjM2em0tMTYuNTY1IDAuMDc3YzEuNzQ0IDAuODMyIDQuMzA3IDIuMTM0IDQuNTY4IDMuNTY1IDAgMC03LjEzMyA2Ljk1Ni03LjA3MyAxMy40OTdhMTIuOTI2IDEyLjkyNiAwIDAgMS0yLjE2Ny03LjE2MWMwLTMuOTg3IDEuODM4LTcuNTE2IDQuNjcyLTkuOXoiLz4KICA8cGF0aCBkPSJtOTkuNzYxIDY1LjIzMmgtMS41MzY0djcuNjgyMmgxLjUzNjR2LTcuNjgyMm0zLjcxMDUgMS42NjctMS4wOTA5IDEuMDkwOWMxLjI1OTkgMS4wMTQgMS45ODk3IDIuNTQyOCAxLjk4OTcgNC4xNTYxYTUuMzc3NSA1LjM3NzUgMCAwIDEtNS4zNzc1IDUuMzc3NWMtMi45NjUzIDAtNS4zNzc1LTIuMzk2OC01LjM3NzUtNS4zNzc1IDAtMS42MDU2IDAuNzI5ODEtMy4xNDIgMS45ODItNC4xNjM3bC0xLjA4MzItMS4wODMyYy0yLjkxMTUgMi40NzM3LTMuMjY0OSA2LjgzNzEtMC43OTEyNiA5Ljc0ODcgMi40NzM3IDIuOTAzOSA2LjgzNzEgMy4yNTcyIDkuNzQ4NyAwLjc4MzU4IDEuNTUxOC0xLjMxMzYgMi40MzUyLTMuMjQ5NiAyLjQzNTItNS4yODUzIDAtMi4wMjA0LTAuODkxMTMtMy45NDEtMi40MzUyLTUuMjQ2OXoiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9Ii43NjgyMiIgc3R5bGU9InBhaW50LW9yZGVyOnN0cm9rZSBmaWxsIG1hcmtlcnMiLz4KIDwvZz4KPC9zdmc+Cg==
          elements:
            - type: service-button
              title: ''
              service: remote.send_command
              service_data:
                entity_id: remote.xbox_remote
                command: Up
              style:
                top: 45.35%
                left: 14.3%
                width: 6.2%
                height: 15%
                overflow: hidden
            - type: service-button
              title: ''
              service: remote.send_command
              service_data:
                entity_id: remote.xbox_remote
                command: Down
              style:
                top: 74.7%
                left: 14.3%
                width: 6.2%
                height: 15%
                overflow: hidden
            - type: service-button
              title: ''
              service: remote.send_command
              service_data:
                entity_id: remote.xbox_remote
                command: Left
              style:
                top: 60%
                left: 8.05%
                height: 14.4%
                width: 6.4%
                overflow: hidden
            - type: service-button
              title: ''
              service: remote.send_command
              service_data:
                entity_id: remote.xbox_remote
                command: Right
              style:
                top: 60%
                left: 20.65%
                height: 14.4%
                width: 6.4%
                overflow: hidden
            - type: service-button
              title: ''
              service: remote.send_command
              service_data:
                entity_id: remote.xbox_remote
                command: A
              style:
                top: 82.5%
                left: 80.05%
                width: 10.5%
                height: 24.4%
                border-radius: 100%
                overflow: hidden
            - type: service-button
              title: ''
              service: remote.send_command
              service_data:
                entity_id: remote.xbox_remote
                command: X
              style:
                top: 60.0%
                left: 70.6%
                width: 10.5%
                height: 24.4%
                border-radius: 100%
                overflow: hidden
            - type: service-button
              title: ''
              service: remote.send_command
              service_data:
                entity_id: remote.xbox_remote
                command: B
              style:
                top: 60.0%
                left: 89.5%
                width: 10.5%
                height: 24.4%
                border-radius: 100%
                overflow: hidden
            - type: service-button
              title: ''
              service: remote.send_command
              service_data:
                entity_id: remote.xbox_remote
                command: 'Y'
              style:
                top: 37.9%
                left: 80.05%
                width: 10.5%
                height: 24.4%
                border-radius: 100%
                overflow: hidden
            - type: service-button
              title: ''
              service: remote.toggle
              service_data:
                entity_id: remote.xbox_remote
              style:
                top: 80.2%
                left: 47.2%
                width: 7%
                height: 16%
                border-radius: 100%
                overflow: hidden
            - type: service-button
              title: ''
              service: media_player.play_media
              service_data:
                entity_id: media_player.xbox
                media_content_type: ''
                media_content_id: Home
              style:
                top: 22.2%
                left: 47.2%
                width: 13.4%
                height: 31.2%
                border-radius: 100%
                overflow: hidden

Makis · June 23, 2021, 7:02am

Hi all
I am trying to make a simple (I think card) but can’t find the right way.
I have the following card and I want to just add the watts of a sensor

color: rgb(253, 106, 2)
color_type: label-card
name: Kid Room
type: custom:button-card

sensor = sensor.sonoff_1000fe3b9b_power

Ideally I would like to in the name to add the watts. like the example below

Kid room: 1.200 watts

Any help how I can get there?

Mariusthvdb · June 23, 2021, 7:20am

you could of course have a look at the documentation which explains this: button-card/README.md at master · custom-cards/button-card · GitHub

did you try any of this?

RomRider · June 23, 2021, 8:34am

Don’t set the width and the height, use aspect_ratio instead.

Dwains dashboard is based on button-card (for most of the buttons), you can find all the templates in his github repository.

Where do you want to display the temperature? Like the percentage of brightness (which is also supposed to draw a circle but doesn’t display it)?

Did you clear your cache? Make sure you do it on ALL your devices a’d also make sure you are running the latest version before that. Also try in private navigation mode, if it works there, it’s 200% a caching issue.

KaherdinTristan · June 23, 2021, 4:20pm

Hi
Temperature in the middle of the card/box. And maybe the possibility to add “C” for Celsius after?

Mariusthvdb · June 25, 2021, 7:59am

hi,
for the fun of it, I am trying to have a custom-fields button spin, with a speed based on the actual fanspeed of an entity, sensor.argon_one_addon_fan_speed, and following the states it can have, as you see in the color template below

Of course I’ve read @Ildar_Gabdullin on Lovelace: mini graph card - #1706 by Ildar_Gabdullin but am still a bit stuck on how to move that to a button-card, so seek some assistance please…

this is my button:

Schermafbeelding 2021-06-24 om 23.56.26 Schermafbeelding 2021-06-25 om 09.55.54

template:
  - button_body
  - plot_list
entity: sensor.cpu_temperature
variables:
  plot_entities: >
    [[[ return [entity.entity_id,
                states['sensor.attic_sensor_calibrated_temperature'].entity_id
                ];
    ]]]
name: Cpu temp
custom_fields:
  fan:
    >
      [[[ return `<ha-icon icon=mdi:fan style='width:15px;color: var(--speed-color);'> </ha-icon>
          <span style='color: var(--primary-color);'>
          ${states['sensor.argon_one_addon_fan_speed'].state} % </span>`; ]]]

styles:
  custom_fields:
    fan:
      - font-size: 11px
      - font-weight: bold
      - padding: 0px 3px
      - position: absolute
      - right: 5%
      - top: 10%
      - --speed-color: >
          [[[ var speed = states['sensor.argon_one_addon_fan_speed'].state;
              var mapper = {0:'green',
                            1:'darkgreen',
                            3:'orange',
                            33:'orangered'
                            66:'maroon'}
              return mapper[speed] ? mapper[speed] : 'red' ; ]]]
state:
  - operator: '<'
    value: 50
    styles:
      card:
        - color: green
  - operator: '<'
    value: 60
    styles:
      card:
        - color: darkgreen
  - operator: '<'
    value: 70
    styles:
      card:
        - color: orange
  - operator: '<'
    value: 80
    styles:
      card:
        - color: maroon
  - default:
    styles:
      card:
        - color: red

appreciate a little help here, thanks!

Ildar_Gabdullin · June 25, 2021, 8:16am

Hi Marius, is it typo?

Mariusthvdb · June 25, 2021, 8:19am

yep… C&P error, edited it now… sorry
I could of course also add it to a top variable, and use it in the styles for the color… same for the speed could be done:

      speed-rotation: >
          [[[ var speed = states['sensor.argon_one_addon_fan_speed'].state;
              var mapper = {0:'0',
                            1:'4s',
                            3:'3s',
                            33:'2s',
                            66:'1s'}
              return mapper[speed] ? mapper[speed] : '0.3s' ; ]]]

maybe the 0 should be taken out, and a condition on state not being 0 should be included.

that way I could use the variable speed-rotation in the animation?>

Ildar_Gabdullin · June 25, 2021, 8:24am

Trying to simulate your case, can I have a code for

template:
  - button_body
  - plot_list

?

Mariusthvdb · June 25, 2021, 8:25am

sure, they’re all here

Mariusthvdb · June 25, 2021, 8:37am

@RomRider immediately related to the post above, how can I use a top level variables:

variables:
  speed_color: >
    [[[ var speed = states['sensor.argon_one_addon_fan_speed'].state;
        var mapper = {0:'green',
                      1:'darkgreen',
                      3:'orange',
                      33:'orangered'
                      66:'maroon'}
        return mapper[speed] ? mapper[speed] : 'red' ; ]]]

in a custom fields style:

custom_fields:
  fan:
    >
      [[[ return `<ha-icon icon=mdi:fan style='width:15px;color: var(--speed-color);'> </ha-icon>
          <span style='color: var(--primary-color);'>
          ${states['sensor.argon_one_addon_fan_speed'].state} % </span>`; ]]]

replacing the color: var(--speed-color) which I use up to now, with color: variables.speed_color or even color: ${variables.speed_color} is unsuccessful unfortunately. Can’t this be done?

It would be very cool, because I would only need the 1 top variable, and use it in more places of course

UPDATE:
yes we can:

custom_fields:
  fan:
    >
      [[[ return `<ha-icon icon=mdi:fan style='width:15px;color: ` + variables.speed_color + `;'> </ha-icon>
          <span style='color: var(--primary-color);'>
          ${states['sensor.argon_one_addon_fan_speed'].state} % </span>`; ]]]

thanks to Ildar.

Ildar_Gabdullin · June 25, 2021, 8:38am

again typo - missing comma

I am still trying, wait a little…

Mariusthvdb · June 25, 2021, 8:40am

no typo there…Color Theory

Ildar_Gabdullin · June 25, 2021, 8:44am

33:'orangered' COMMA

Mariusthvdb · June 25, 2021, 8:45am

oops… sorry… also the closing third ] was missing…

Ildar_Gabdullin · June 25, 2021, 9:08am

First, regarding color of fan’s icon:

variables:
  speed_color: |
    [[[ var speed = states['sensor.iiyama_ohm_fans_fan_1'].state;
        var mapper = {500:'green',
                      600:'darkgreen',
                      700:'orange',
                      800:'orangered',
                      900:'maroon'}
        return mapper[speed] ? mapper[speed] : 'yellow'; ]]]
...
custom_fields:
  fan: >
    [[[ return `<ha-icon icon=mdi:fan style='width:32px;color: ` + variables.speed_color + `;'> </ha-icon>
        <span style='color: var(--primary-color);'>
        ${states['sensor.iiyama_ohm_fans_fan_1'].state} rpm </span>`; ]]]

Note this:
color: ` + variables.speed_color + `;

Do not bother about “500,600,700”, “rpm”, that was for my testing case.

Also, note that your construction "mapper" works only for THESE values, i.e. for 500,600,700 - for 550, 650 it will return default value (this is not good)

Mariusthvdb · June 25, 2021, 9:28am

A yes, that should work.

Thanks.
About the speeds: they are fixed in my fan add-on. So no worries about other speeds

That’s why I didn’t make a Template with <

Ildar_Gabdullin · June 25, 2021, 9:47am

As for conditional rotation - add this style with card-mod, and define conditions for speeds:

type: custom:button-card
card_mod:
  style: |
    div#container > div#fan > ha-icon {
      animation: rotation 1s linear infinite;
    }
    @keyframes rotation {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

aaaaa
Do not bother about colors & font-sizes - that was changed while reverse-engineering your code))

Mariusthvdb · June 25, 2021, 9:51am

can we replace the ‘1s’ with a variables.speed_rotation?

and encapsulate it in a template:

if (states['sensor.argon_one_addon_fan_speed'].state != 0) return

Ildar_Gabdullin · June 25, 2021, 9:58am

You can define "1s" by using usual ways like:

                        animation:
                          {% if states('input_number.servicewithhistory_value')|int <= 250|int -%}
                          rotation 4s
                          {%- elif states('input_number.servicewithhistory_value')|int > 250|int and states('input_number.servicewithhistory_value')|int <= 500|int -%}
                          rotation 2s
                          {%- elif states('input_number.servicewithhistory_value')|int > 500|int and states('input_number.servicewithhistory_value')|int <= 750|int -%}
                          rotation 1s
                          {%- else -%}
                          rotation 0.3s
                          {%- endif %}
                          linear infinite;