A different take on designing a Lovelace UI

@martheijnen
Same for me, glad that I am not the only one affected, I was worried it somehow had something to do with my backend nginx changes and it was driving me nuts that I couldn’t figure out what could possibly lead to this :joy:
Edit: it has to do with card-mod:

Sure :slight_smile:

#################################################
  #                                               #
  #                     GRAPH                     #
  #                                               #
  #################################################

  graph:
    template:
      - base
    show_name: true
    show_state: false
    custom_fields:
      circle: >
        [[[ {
          let temperature = entity.state;
          return `<svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="19" stroke="#313638" stroke-width="1.5" fill="#FFFFFF08" style="
          transform: rotate(-90deg); transform-origin: 50% 50%;" />
          <text x="50%" y="54%" fill="#8d8e90" font-size="13" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${temperature}°</text></svg>`; }
        ]]]
      graph:
        card:
          type: 'custom:mini-graph-card'
          color_thresholds:
          - value: 21.5
            color: "#307FFD"
          - value: 22.5
            color: "#018001"
          - value: 23.5
            color: "#FF9801"
          entities:
            - "[[[ return variables.entity_id; ]]]"
          line_width: 4
          animate: true
          hours_to_show: 24
          points_per_hour: 1
          height: 140
          align_icon: left
          align_header: left
          show:
            name: false
            icon: false
            state: false
            legend: false
            labels: false
    tap_action:
      action: call-service
      service: browser_mod.popup
      service_data:
        title: '[[[ return "Klima " + variables.title ]]]'
        style:
          .: |
            :host .content {
              width: calc(385px + 385px);
              max-width: 90vw;
            }
        card:
          type: custom:layout-card
          layout_type: custom:grid-layout
          layout:
            grid-template-columns: repeat(2, 1fr)
            grid-template-rows: 1fr
            grid-template-areas: |
              "temperature  humidity"
            mediaquery:
              #phone
              "(max-width: 800px)":
                grid-template-columns: 1fr
                grid-template-rows: repeat(3, 1fr)
                grid-template-areas: |
                  "temperature"
                  "humidity"
          cards:
          - type: entities
            view_layout:
              grid-area: temperature
            title: Temperatur
            show_header_toggle: false
            card_mod:
              class: header
              style: |
                ha-card {
                  margin: 0px !important;
                }
                h1 {
                  padding: 1em 0 0 1.3em !important;
                }
            entities:
              - type: custom:mini-graph-card
                entities:
                  - "[[[ return variables.entity_id; ]]]"
                animate: true
                hours_to_show: 24
                points_per_hour: 1
                height: 200
                hour24: true
                action: none
                color_thresholds:
                - value: 21.5
                  color: "#307FFD"
                - value: 22.5
                  color: "#018001"
                - value: 23.5
                  color: "#FF9801"
                show:
                  graph: line
                  icon: false
                  name: false
                  labels: false
                  points: hover
                  extrema: true
                  average: true
                  labels_secondary: false

          - type: entities
            view_layout:
              grid-area: humidity
            title: Luftfeuchtigkeit
            show_header_toggle: false
            card_mod:
              class: header
              style: |
                ha-card {
                  margin: 0px !important;
                }
                h1 {
                  padding: 1em 0 0 1.3em !important;
                }
            entities:
            - type: custom:mini-graph-card
              entities:
                - '[[[ return variables.entity_id + "_2"; ]]]'
              animate: true
              hours_to_show: 24
              points_per_hour: 1
              height: 200
              hour24: true
              action: none
              color_thresholds:
              - value: 40
                color: "#307FFD"
              - value: 50
                color: "#018001"
              - value: 60
                color: "#FF9801"
              show:
                graph: line
                icon: false
                name: false
                labels: false
                points: hover
                extrema: true
                average: true
                labels_secondary: false

    styles:
      name:
        - margin-bottom: 2.1vw
        - color: rgb(239, 239, 239)
        - text-shadow: rgb(18 22 23 / 90%) 1px 1px 5px

      custom_fields:
        graph:
          [
            position: absolute,
            bottom: 0,
            left: 0,
            width: 100%,
            padding-top: 0,
          ]
2 Likes

https://community.home-assistant.io/t/if-your-frontend-looks-weird-today/407225


I’ve seen some unreasonably hateful comments on other sites, the code is harmless. It’s admirable that he admitted his mistake. Please keep it civilized.

1 Like

have you or some else a idea how to add there more space?

i added the columns to 3 from the grid

and i try to replace the icon here with a standard mdi icon but i had no success

here the original code:

- type: custom:button-card
            confirmation:
              text: '[[[ return `Abendbeleuchtung, aktivieren?` ]]]'
            entity: script.home_arrive
            tap_action:
              action: call-service
              service: scene.turn_on
              service_data:
                entity_id: scene.abendbeleuchtung
            name: Abends
            hold_action:
              action: none
            template:
              - base
              - icon_home

here my code :

`- type: custom:button-card
            confirmation:
              text: '[[[ return `Abendbeleuchtung, aktivieren?` ]]]'
            entity: script.home_arrive
            tap_action:
              action: call-service
              service: scene.turn_on
              service_data:
                entity_id: scene.abendbeleuchtung
            name: Abends
            hold_action:
              action: none
            template:
              - base
              ##- icon_home
            icon: mdi:weather-sunset
            show_icon: true
            styles:  
              icon:
                - width: 72%
                - margin-left: -1%`

i deleted the template - icon_home and set my mdi picture but he shows nothing

I can only laugh about it :slight_smile: there’s no hate or anger from my side haha

1 Like

what if the svg image has more than one path line?

i tried it so, but no it dont work

<class="${state}">
                  <path d="m350 354.67c-154.39 0-280-71.176-280-158.67s125.61-158.67 280-158.67 280 71.176 280 158.67-125.61 158.67-280 158.67zm0-298.67c-144.1 0-261.33 62.805-261.33 140s117.23 140 261.33 140 261.33-62.805 261.33-140-117.23-140-261.33-140z"/>
                  <path d="m350 532c-154.39 0-280-71.176-280-158.67 0-5.1562 4.1797-9.332 9.332-9.332 5.1562 0 9.332 4.1797 9.332 9.332 0 77.195 117.23 140 261.33 140 144.1 0 261.33-62.805 261.33-140 0-5.1562 4.1797-9.332 9.332-9.332 5.1562 0 9.332 4.1797 9.332 9.332 0 87.492-125.61 158.67-280 158.67z"/>
                  <path d="m79.332 382.67c-5.1562 0-9.332-4.1797-9.332-9.332v-168c0-5.1562 4.1797-9.332 9.332-9.332 5.1562 0 9.332 4.1797 9.332 9.332v168c0 5.1562-4.1797 9.332-9.332 9.332z"/>
                  <path d="m620.67 382.67c-5.1562 0-9.332-4.1797-9.332-9.332v-168c0-5.1562 4.1797-9.332 9.332-9.332 5.1562 0 9.332 4.1797 9.332 9.332v168c0 5.1562-4.1797 9.332-9.332 9.332z"/>
                  <path d="m350 168c-37.246 0-65.332-16.051-65.332-37.332s28.086-37.332 65.332-37.332 65.332 16.051 65.332 37.332-28.086 37.332-65.332 37.332zm0-56c-28.488 0-46.668 11.055-46.668 18.668 0 7.6094 18.18 18.668 46.668 18.668s46.668-11.055 46.668-18.668c0-7.6094-18.18-18.668-46.668-18.668z"/>
                  <path d="m191.33 233.33c-37.246 0-65.332-16.051-65.332-37.332s28.086-37.332 65.332-37.332c37.246 0 65.332 16.051 65.332 37.332s-28.086 37.332-65.332 37.332zm0-56c-28.488 0-46.668 11.055-46.668 18.668 0 7.6094 18.18 18.668 46.668 18.668s46.668-11.055 46.668-18.668c0-7.6094-18.18-18.668-46.668-18.668z"/>
                  <path d="m508.67 233.33c-37.246 0-65.332-16.051-65.332-37.332s28.086-37.332 65.332-37.332c37.246 0 65.332 16.051 65.332 37.332s-28.086 37.332-65.332 37.332zm0-56c-28.488 0-46.668 11.055-46.668 18.668 0 7.6094 18.18 18.668 46.668 18.668s46.668-11.055 46.668-18.668c0-7.6094-18.18-18.668-46.668-18.668z"/>
                  <path d="m350 298.67c-37.246 0-65.332-16.051-65.332-37.332s28.086-37.332 65.332-37.332 65.332 16.051 65.332 37.332-28.086 37.332-65.332 37.332zm0-56c-28.488 0-46.668 11.055-46.668 18.668 0 7.6094 18.18 18.668 46.668 18.668s46.668-11.055 46.668-18.668c0-7.6094-18.18-18.668-46.668-18.668z"/>
                  <path d="m350 205.33c-2.4727-0.035156-4.8359-1.0039-6.625-2.707-0.82422-0.90625-1.4883-1.9492-1.9648-3.082-0.47656-1.1211-0.73047-2.3281-0.74219-3.5469 0-5.1562 4.1797-9.332 9.332-9.332 5.1562 0 9.332 4.1797 9.332 9.332-0.015625 1.2188-0.26953 2.4258-0.74609 3.5469-0.47656 1.1289-1.1367 2.1719-1.9609 3.082-1.7891 1.7031-4.1562 2.668-6.625 2.707z"/>
                  <path d="m350 74.668c-5.1562 0-9.332-4.1797-9.332-9.332v-18.668c0-5.1562 4.1797-9.332 9.332-9.332 5.1562 0 9.332 4.1797 9.332 9.332v18.668c0 5.1562-4.1797 9.332-9.332 9.332z"/>
                  <path d="m98 205.33h-18.668c-5.1562 0-9.332-4.1797-9.332-9.332 0-5.1562 4.1797-9.332 9.332-9.332h18.668c5.1562 0 9.332 4.1797 9.332 9.332 0 5.1562-4.1797 9.332-9.332 9.332z"/>
                  <path d="m620.67 205.33h-18.668c-5.1562 0-9.332-4.1797-9.332-9.332 0-5.1562 4.1797-9.332 9.332-9.332h18.668c5.1562 0 9.332 4.1797 9.332 9.332 0 5.1562-4.1797 9.332-9.332 9.332z"/>
                  <path d="m284.67 74.668c-2.4766 0.003906-4.8516-0.98047-6.5977-2.7344l-9.332-9.332c-3.6133-3.6758-3.5586-9.5859 0.12109-13.199 3.6289-3.5664 9.4492-3.5664 13.078 0l9.332 9.332c3.6445 3.6445 3.6445 9.5547-0.003906 13.199-1.75 1.75-4.1211 2.7305-6.5977 2.7344z"/>
                  <path d="m219.33 93.332c-2.4766 0.003907-4.8516-0.98047-6.5977-2.7344l-9.332-9.332c-3.6133-3.6758-3.5586-9.5859 0.12109-13.199 3.6289-3.5664 9.4492-3.5664 13.078 0l9.332 9.332c3.6445 3.6445 3.6445 9.5547-0.003906 13.199-1.75 1.75-4.1211 2.7305-6.5977 2.7344z"/>
                  <path d="m154 121.33c-2.4766 0.003907-4.8516-0.98047-6.5977-2.7344l-9.332-9.332c-3.6133-3.6758-3.5586-9.5859 0.12109-13.199 3.6289-3.5664 9.4492-3.5664 13.078 0l9.332 9.332c3.6445 3.6445 3.6445 9.5547-0.003906 13.199-1.75 1.75-4.1211 2.7305-6.5977 2.7344z"/>
                  <path d="m116.66 158.67c-1.4531 0-2.8867-0.33984-4.1836-0.99219l-17.828-8.9609c-4.6094-2.3125-6.4688-7.9219-4.1602-12.527 2.3125-4.6094 7.9219-6.4688 12.527-4.1602 0.003906 0.003906 0.011719 0.003906 0.015625 0.007812l17.828 8.9609c4.6055 2.3125 6.4648 7.9258 4.1484 12.531-1.5859 3.1562-4.8203 5.1484-8.3516 5.1445z"/>
                  <path d="m415.33 74.668c-5.1562 0-9.332-4.1797-9.332-9.3359 0-2.4727 0.98438-4.8477 2.7344-6.5977l9.332-9.332c3.6758-3.6133 9.5859-3.5586 13.199 0.12109 3.5664 3.6289 3.5664 9.4492 0 13.078l-9.332 9.332c-1.7461 1.7539-4.1211 2.7383-6.5977 2.7344z"/>
                  <path d="m480.67 93.332c-5.1562 0-9.332-4.1797-9.332-9.3359 0-2.4727 0.98437-4.8477 2.7344-6.5977l9.332-9.332c3.6758-3.6133 9.5859-3.5586 13.199 0.12109 3.5664 3.6289 3.5664 9.4492 0 13.078l-9.332 9.332c-1.7461 1.7539-4.1211 2.7383-6.5977 2.7344z"/>
                  <path d="m546 121.33c-5.1562 0-9.332-4.1797-9.332-9.3359 0-2.4727 0.98438-4.8477 2.7344-6.5977l9.332-9.332c3.6758-3.6133 9.5859-3.5586 13.199 0.12109 3.5664 3.6289 3.5664 9.4492 0 13.078l-9.332 9.332c-1.7461 1.7539-4.1211 2.7383-6.5977 2.7344z"/>
                  <path d="m583.34 158.67c-5.1562 0.007812-9.3398-4.168-9.3438-9.3203-0.003906-3.5312 1.9844-6.7656 5.1445-8.3516l17.828-8.9609c4.6055-2.3203 10.215-0.46875 12.535 4.1367 2.3203 4.6055 0.46875 10.215-4.1367 12.535-0.003906 0.003907-0.011719 0.003907-0.015625 0.007813l-17.828 8.9609c-1.2969 0.65234-2.7305 0.99219-4.1836 0.99219z"/>
                  <path d="m350 205.33c-2.4727-0.035156-4.8359-1.0039-6.625-2.707-0.82422-0.90625-1.4883-1.9492-1.9648-3.082-0.47656-1.1211-0.73047-2.3281-0.74219-3.5469 0-5.1562 4.1797-9.332 9.332-9.332 5.1562 0 9.332 4.1797 9.332 9.332-0.015625 1.2188-0.26953 2.4258-0.74609 3.5469-0.47656 1.1289-1.1367 2.1719-1.9609 3.082-1.7891 1.7031-4.1562 2.668-6.625 2.707z"/>
                  <path d="m350 354.67c-5.1562 0-9.332-4.1797-9.332-9.332v-18.668c0-5.1562 4.1797-9.332 9.332-9.332 5.1562 0 9.332 4.1797 9.332 9.332v18.668c0 5.1562-4.1797 9.332-9.332 9.332z"/>
                  <path d="m275.33 345.33c-5.1562 0-9.332-4.1797-9.332-9.3359 0-2.4727 0.98438-4.8477 2.7344-6.5977l9.332-9.332c3.6758-3.6133 9.5859-3.5586 13.199 0.12109 3.5664 3.6289 3.5664 9.4492 0 13.078l-9.332 9.332c-1.7461 1.7539-4.1211 2.7383-6.5977 2.7344z"/>
                  <path d="m210 326.67c-5.1562 0-9.332-4.1797-9.332-9.3359 0-2.4727 0.98438-4.8477 2.7344-6.5977l9.332-9.332c3.6758-3.6133 9.5859-3.5586 13.199 0.12109 3.5664 3.6289 3.5664 9.4492 0 13.078l-9.332 9.332c-1.7461 1.7539-4.1211 2.7383-6.5977 2.7344z"/>
                  <path d="m144.67 298.67c-5.1562 0-9.332-4.1797-9.332-9.3359 0-2.4727 0.98437-4.8477 2.7344-6.5977l9.332-9.332c3.6758-3.6133 9.5859-3.5586 13.199 0.12109 3.5664 3.6289 3.5664 9.4492 0 13.078l-9.332 9.332c-1.7461 1.7539-4.1211 2.7383-6.5977 2.7344z"/>
                  <path d="m98.848 260.96c-5.1562 0.007812-9.3398-4.168-9.3438-9.3203-0.003906-3.5312 1.9844-6.7656 5.1445-8.3516l17.828-8.9609c4.6094-2.3125 10.219-0.44922 12.527 4.1602 2.3086 4.6016 0.45312 10.203-4.1445 12.52l-17.828 8.9609c-1.2969 0.65234-2.7305 0.99219-4.1836 0.99219z"/>
                  <path d="m424.67 345.33c-2.4766 0.003907-4.8516-0.98047-6.5977-2.7344l-9.332-9.332c-3.6133-3.6758-3.5586-9.5859 0.12109-13.199 3.6289-3.5664 9.4492-3.5664 13.078 0l9.332 9.332c3.6445 3.6445 3.6445 9.5547-0.003906 13.199-1.75 1.75-4.1211 2.7305-6.5977 2.7344z"/>
                  <path d="m490 326.67c-2.4766 0.003906-4.8516-0.98047-6.5977-2.7344l-9.332-9.332c-3.6133-3.6758-3.5586-9.5859 0.12109-13.199 3.6289-3.5664 9.4492-3.5664 13.078 0l9.332 9.332c3.6445 3.6445 3.6445 9.5547-0.003906 13.199-1.75 1.75-4.1211 2.7305-6.5977 2.7344z"/>
                  <path d="m555.33 298.67c-2.4766 0.003906-4.8516-0.98047-6.5977-2.7344l-9.332-9.332c-3.6133-3.6758-3.5586-9.5859 0.12109-13.199 3.6289-3.5664 9.4492-3.5664 13.078 0l9.332 9.332c3.6445 3.6445 3.6445 9.5547-0.003906 13.199-1.75 1.75-4.1211 2.7305-6.5977 2.7344z"/>
                  <path d="m601.15 260.96c-1.4531 0-2.8867-0.33984-4.1836-0.99219l-17.828-8.9609c-4.6055-2.3203-6.457-7.9336-4.1367-12.535 2.3164-4.5977 7.918-6.4531 12.52-4.1445l17.828 8.9609c4.6055 2.3125 6.4648 7.9258 4.1484 12.531-1.5859 3.1562-4.8203 5.1484-8.3516 5.1445z"/>
                  <path d="m396.67 420h-93.332c-5.1562 0-9.332-4.1797-9.332-9.332 0-5.1562 4.1797-9.332 9.332-9.332h93.332c5.1562 0 9.332 4.1797 9.332 9.332 0 5.1562-4.1797 9.332-9.332 9.332z"/>
                  <path d="m396.67 457.33h-93.332c-5.1562 0-9.332-4.1797-9.332-9.332 0-5.1562 4.1797-9.332 9.332-9.332h93.332c5.1562 0 9.332 4.1797 9.332 9.332 0 5.1562-4.1797 9.332-9.332 9.332z"/>
              </class>

First of all thanks for this amazing work.

I’m struggling a bit with the frontend. Some text and position vary each time I’m reloading my browser/app (Doesn’t have anything to do with the April fools prank, started way before that). It obviously sounds like a cache problem but it keeps happening on multiple devices/programs, also after deleting the cache. I didn’t notice it for a while because I only opened the dashboard via the sidebar. Another dashboard was set as default. With this method I get the wanted appearance every time. But when I set the UI as default or reload the page multiple times the appearance keeps varying.
Very strange problem. Maybe someone here had an similar issue or know where to start the troubleshooting. :blush:

solved: I accidentally removed this line in ui-lovelace.yaml:

       - type: custom:button-card #extra_styles fix
         styles: {card: [display: none]}

I made a little cctv animation and svg icon.

camera

here from state “idle” to “streaming” and back.

and for a “decken light”

decke

@Mattias_Persson

can you perhaps expalin me how i must style or add parameters to the sidebar? in your Version here?

or how to hide the original bar ?

on your pciture in the first post is the sidebar with a time and more, but on github there is nothing in the sidebar, or not nothing but no time and no states only a boolean

i tried to add to ui-lovelance.yaml my code over views but it happens nothing

custom_header:
  hide_header: true
sidebar:
  title: "BLA BLA"
  digitalClock: true
  width:
    mobile: 20
    tablet: 25
    desktop: 20
  sidebarMenu:
    - action: navigate
      name: Home
      icon: mdi:home
      navigation_path: /lovelace/default_view
      active: true
    - action: navigate
      name: Media
      navigation_path: /lovelace/media_path
      icon: mdi:youtube-tv

And my Lay-out makes problems. The second row ist not correct there are all icons too small have you perhaps a idea ?

On my iPhone 12

And the space right is too much or ?

Hold action popups (fire-dom-event) stopped working for me… any ideas why?

Did you already update to the latest version of card-mod? That fixed it for me.

Hi Pimp, can you please explain how did you make those animations? I am quite familiar with After Effects and animating in general, but I can’t seem to find in which format it has to be made. Maybe you can help me getting in the right direction?

Okey new week, new issues :innocent:

I have a problem with popup cards and the button card.
The buttons are not resizing in the same way they do in the main UI.
Am using the nas.yaml as base and experimenting with adding button cards according to the below yaml.

      - type: grid
        view_layout:
          grid-area: nas
        title: Klimat
        columns: 2
        show_header_toggle: false
        card_mod:
          class: header
          style: |
            ha-card {
              margin: 0px !important;
            }
        cards:

          - type: custom:button-card
            entity: light.vrumfonster
            name: Fönster
            template:
              - light
              - icon_windows

          - type: custom:button-card
            entity: light.byra
            name: Byrå
            template:
              - light
              - icon_window

Am guessing that it has something to do with the styling of the popup?

action: fire-dom-event
browser_mod:
  command: popup
  title: Vardagsrum
  style:
    .: |
      @media screen and (min-width: 1200px) {
        :host .content {
          width: calc(385px + 385px + 385px);
          max-width: 90vw;
        }
      }
    layout-card:
      $grid-layout:
        $:
          hui-entities-card:
            $: |
              .card-content {
                padding: var(--card-content-padding);
                padding-bottom: 0.8em;
              }
              ha-card {
                border-right: 1.5px solid rgba(0, 0, 0, 0.2);
                border-radius: 0;
                transition: none;
                letter-spacing: normal;
              }
              /* portrait */
              @media screen and (max-width: 1200px) {
                ha-card {
                  border-right: none;
                  border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
                }
              }
            $hui-horizontal-stack-card:
              $: |
                #root {
                  justify-content: space-evenly;
                  margin-top: 1.7em;
                  max-width: 82vw; /* iphonex */
                }
  card:
    type: custom:layout-card
    layout_type: custom:grid-layout
    layout:
      grid-template-columns: 385px 385px 385px
      grid-template-rows: 1fr
      grid-template-areas: |
        "hass tablet nas"
      mediaquery:
        #portrait
        "(max-width: 1200px)":
          grid-template-columns: 1fr
          grid-template-rows: repeat(3, 1fr)
          grid-template-areas: |
            "hass"
            "tablet"
            "nas"
    cards:

hi

i take the hard way, no adobe.
i choose and download me a icon from Material Design Icons

then i open it in a editor, or notepad++ , take the "path d=“XXXX” code and paste it on SVG Path Editor · aydos.com.

there i change the size under options, 1:1.9 or 1:1.7. then i go to Tryit Editor v3.7 (w3schools.com)

and cut the codes to choose what i want to animate and what not.

then you go in the button_card_template.yaml and look for example at the other animation, for example icon_spot:, then i play a little bit with the code to get what i want, i look for inspiration to w3schools. there are many css examples and what possible. search easy “css animation”.

actually i play a little bit with a roller shutter svg image and animations, until now i dont have ther perfect timings but it works

rolladen

4 Likes

@pimp1310 Can you share your hover animation? :smiley:

Solved this on my own with a little trial and error.

It was the style part of the popup that was messing things up.
If you adjust the width calc and the column px down a bit it looks great.
(am a novice in CSS so perhaps there is a better way but hey, it worked :slight_smile: )

it’s not finished yet, I have to refine it and set the timings. but then gladly, think perhaps today I get them finished.
and add a mask, i must play a little bit with it until its ready.

can perhaps someone help with the problem of my aligment of the grids
i think its because i added in the grid 3 columns.

its posible to change the gap?

hi guys,
is it possible to change the circle in a panel based on the state of a sensor?

When our car is charging, so the power of the wallbox is above 0.1, the loader should be displayed.

if not, then the green circle.

so far I have only created this:

in Lovelace-ui.yaml:

          - type: custom:button-card
            entity: sensor.e208_battery_autonomy
            tap_action:
              !include popup/peugeot.yaml
            name: e208
            state_display: >
              [[[
                if (states['sensor.easee_einfahrt_wallbox_power'].state >= '0.1') {
                  return ["Lädt - " + Math.round(states['sensor.e208_battery_level'].state) + "%"] ;
                }
                if (states['sensor.easee_einfahrt_wallbox_power'].state < '0.1') {
                  return [Math.round(states['sensor.e208_battery_autonomy'].state) + " km"];
                }
              ]]]
            variables:
              retain: sensor.e208_battery_level
            template:
              - tesla
              - icon_peugeot

in button_card_templates.yaml

  tesla:
    template:
      - base
      - charge
    show_current_temperature: true
    show_control: true
    state:
      - operator: template
        value: >
          [[[ return (states['sensor.e208_battery_level'].state > 20) ]]]
        styles:
          card: [background-color: "rgba(255, 255, 255, 0.8)"]
          name: [color: "rgba(0, 0, 0, 0.6)"]
          state: [color: "rgba(0, 0, 0, 0.6)"]

  charge:
    custom_fields:
      loader: >
        [[[ if (states['sensor.easee_einfahrt_wallbox_power'].state >= '0.1')
                  return '<img src="/local/loader.svg" width="100%">' ;
        ]]]
      circle: >
        [[[
          if (Math.round(states['sensor.e208_battery_level'].state) > 0) {
            const input = Math.round(states['sensor.e208_battery_level'].state);
            const radius = 21.5;
            const circumference = radius * 2 * Math.PI;
            return `
              <svg viewBox="0 0 50 50">
                <style>
                  circle {
                    transform: rotate(-90deg);
                    transform-origin: 50% 50%;
                    stroke-dasharray: ${circumference};
                    stroke-dashoffset: ${circumference - input / 100 * circumference};
                  }
                  tspan {
                    font-size: 10px;
                  }
                </style>
                <circle cx="25" cy="25" r="${radius}" stroke="#327662" stroke-width="1.5" fill="none" />
                <text x="50%" y="54%" fill="0a0a0a" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${input}<tspan font-size="10">%</tspan></text>
              </svg>
            `;
          }
        ]]]

    styles:
      custom_fields:
        circle:
          - display: initial
          - width: 90%
          - letter-spacing: 0.03vw
          - margin: -6% -6% 0 0
          - justify-self: end
          - opacity: 1
        loader:
          - display: initial
          - top: -5.8%
          - right: -5.3%
          - width: 50%
          - position: absolute
          - opacity: 1

if sensor.easee_einfahrt_wallbox_power’].state = 0.0 it looks like this (that is correct for me)

image

if sensor.easee_einfahrt_wallbox_power’].state = 0.1 (or higher) it looks like this (its NOT correct - i dont want to see the green ring)
image

hopefully someone can help me with this

I’m quite happy with the result, but I really need to implement it in a new template :sweat:
image

2 Likes

Can you share how you make the blur overlay the background?

Thanks!