A different take on designing a Lovelace UI

https://www.home-assistant.io/integrations/version/

Open your Home Assistant instance and start setting up a new integration.

• Local installation
• Docker Hub → Stable
• Docker Hub → Beta

1 Like

@Mattias_Persson I like the organization you made much better. Nice changes. I make a query. Did you remove the rounding from the cards?
thanks

How are you? Could you share the spot icon and the air conditioning icon? Thank you

No? :sweat_smile:

mmmm That line is I am in trouble :joy:
I found the mistake. You are using this variable that does not exist
var(–custom-button-card-border-radius)

Is this possible to correct?

It is possible to wrap text in the update pane for the phone view?

This is the calculation used for the circle in this case, you just need to pass the % of the circle you want to be filled

  variables:
    circle_input:  >
      [[[
        return entity === undefined || Math.round(states['zone.home'].state / 3 * 100 ) ;
      ]]]
1 Like

Hello @Mattias_Persson i’m moving to your new release 2022.8 but I’m having some probelms with the fonts.
I updated fonts.css in www folder and downloaded updated fonts in www/fonts.
At the same time I also added the css in the dashboard resources but when I load the page it loks like fonts are not loaded.
I checked with Chrome dev tool and it looks like the css resource is loaded but not the fonts itself, how is it possible?

Thanks!
Davide

Have you defined the font here?
https://github.com/matt8707/hass-config/blob/1077444f3a5f609bc1f34b1e049b845c4451679e/themes.yaml#L53

Did you download from here? I changed the link 20h ago
https://github.com/matt8707/hass-config/blob/ff5d2e578ced64f217ba365ba363302157e8456a/www/fonts.css

What happens when you enter the direct link in the browser?
http://URL:8123/local/fonts/SFProDisplay-Medium.woff2

Hi @Mattias_Persson, thanks for the answer, I partailly fixed my problem.
Since I have also dashboard on previous version of your config I have both themes (old and new) and old theme was referring to old fonts.
Now fonts are loaded but clock is shown with a smaller size even if in my theme I have:
sidebar-time-font-size: 5.2vw
sidebar-time-line-height: 4.3vw

You can edit this line directly till you’ve fully migrated

Thanks brother

it looks like it is not enough unfortunately.
I cleaned everything and I’m using new theme and button_card_templates.

sidebar template is:

  • sensor:
    • unique_id: sidebar
      state: template
      attributes:
      time: >

      pippo:topolino

what is weird is that when i look at the time span font-size is defined as inside the extra_styles.yaml

  1. font-size: calc(var(–button-card-font-size) - var(–z-axis-adjustment));

any idea?

the sidebar doesn’t load any styles from extra_styles.yaml so it has to be this

AWESOME Mattias! that fixed many problems, can you explain me the rationale behind that? I’m not undrstanding it!

Hi Mattias,

Like your work very mutch but i like to change the theme on it.
I found out that lot’s of your config is hard coded so i have to change a lot of the code.
To give you a impression it looks like this.


But i can also switch to your theme and everything is like you designed it

But i ran in to a strange problem.
If i use a Shelly dimmer the light on the icon is blue in stat of yellow.
The code below is where it’s coming from.

if (entity) {
          let hs = entity.attributes.hs_color === undefined,
              h = hs || entity.attributes.hs_color[0],
              s = hs || entity.attributes.hs_color[1],
              l_min = 28,
              l_max = 48,
              l_calc = entity.attributes.brightness / 2.54 * (l_max - l_min) / 100 + l_min;
          var light_color = 
              entity.attributes.color_mode === 'color_temp' ||
              entity.attributes.color_mode === 'brightness' ||
              entity.attributes.color_mode === 'unknown'
                  ? `hsl(204, 58%, ${l_calc}%);`
                  : `hsl(${h}, ${s}%, ${l_calc}%);`;
      }

I learned that this part is hard coded blue.

hsl(204, 58%, ${l_calc}%);

But sometimes out of the blue the light turned in to yellow.
But the when i switch to your theme it stays yellow

And it also can change out of the blue to blue.

If i change in the icon path this <path class="${state} light-color"
into <path class="${state} var(–button-card-light-color-no-temperature)

Then it’s working like it supposed to.
I don’t get the picture.
I’m completely lost here.

Hope you can help me with this part.
I still have to do the media but the rest is working fine now.
Thanks,
Karel

1 Like

nice work, im stealing the plex footer, what is driveing the cpu, gpu and ram usage on the plex popup

Right now I’m trying out the HASS.Agent for my Windows-based Plex server and my PC.

1 Like

Thanks, i will go with monitoring the usage on my docker container.
if you are using the enargy dashboard, thats a nice one to add to the footer.