A different take on designing a Lovelace UI

Share your Projects!
2946

Good point, show_icon: false also works, I’ll add that to the template

2947

@KNetGIT @Seppel @malleman8 @henkkeumus @sbienia

Apparently a github bug. It should work now if you update to button-card 3.4.2 using hacs

1 Like
2948

https://github.com/matt8707/hass-config/blob/c681a1a39c3a52ccaaa325d5c82caae4f77c6fb0/button_card_templates.yaml#L136

2949

Embed the gauge card in a button card, example

2950
1 Like
2951

clearing cache should work
https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594/1507

else try hui-element
https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594/2149

1 Like
2952

Thank you @sde91 , now it looks like it should.

2953

Yes, this and adding it as a template fixed it for me. Thanks!

2954

I am looking for a way to put the header at the bottom and not at the top.
Custom_header is not supported anymore, so I won’t use it.
How do you see it?

2955

I have added these to tilt_options under the base template and removed && !ignore.match(/Android/i) from the tilt template…

No dice yet, am I missing something obvious?

2956

image

I would like to dynamically change the color of the circle and the value inside it, depending on the counter.

0-1 white
2-3 yellow
4-…red

Also how is it possible to change the state from on ( motion detected ) to “in use” ?

Could anybody assist me here or does anybody of you have already a cat litterbox button in use? :wink:
Thanks in advance cat people <3

type: custom:button-card
entity: binary_sensor.bewegungsmelder_katzenklo
name: Katzenklo
tap_action:
  action: toggle
hold_action:
  action: more-info
template:
  - base
  - loader
custom_fields:
  icon: >
    <ha-icon icon="phu:litterbox"
    style="color:var(--button-card-light-color);"></ha-icon>
  circle: |
    [[[
       {
        const input = states['counter.katzenklo_besuche'].state;
        const radius = 20.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 / 8 * circumference};
              }
              tspan {
                font-size: 10px;
              }
            </style>
            <circle cx="25" cy="25" r="${radius}" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
            <text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle" dominant-baseline="middle">${input}<tspan font-size="10"></tspan></text>
          </svg>
        `;
      }
    ]]]
5 Likes
2957

have the same problem like you.

2958

do solved this problem?

2959

Hi @nkxol I had so many problems that I don’t know what you mean lol. My problem today is the text that is rotated in the middle card. When it’s bigger it exceeds the limits

2960

Awesome theme!
I’ve installed step by step on new HomeAssistant. And I have a this error:

Screen1 2022-03-24 o 18.31.42
Screen1 2022-03-24 o 18.31.422810×2004 465 KB

could you help me?

2961

u need to add grid-layout.js resource

2962

@nkxol

Unable to read file /config/.youtube_token.txt

Secret apexcharts_tibber not defined

Custom element doesn't exist: grid-layout

  • clear browser cache
2963

idk, that sounds right?

https://caniuse.com/?search=deviceorientation
https://github.com/micku7zu/vanilla-tilt.js/issues?q=gyroscope

2964

I clear browser cache, checked from 3 browsers. And the problem is still…

2965

where is this file?