A different take on designing a Lovelace UI

Still no improvement. But for example vanilla-tilt is also not loading.

There are resources which are loaded and working correct. But marked.min not. And as i wrote, vanilla-tilt also

Huh… try UI

Open your Home Assistant instance and show your dashboard resources.

It is working!
WTH???

https://www.home-assistant.io/dashboards/dashboards#resources

Your mode is storage :+1:t2:

would you share the template for the cctv and the decken light? thx

@Mattias_Persson how can I change the language of the state to German on these Person Cards?

Ja to “Zuhause” and Nej to “Abwesend”

Bildschirmfoto 2022-05-28 um 08.30.27

@Mattias_Persson Another Question… the weather in the sidebar doesn’t show up. I filled the fields in the template.yaml but it shows “null” in the sidebar. Is there something missing? thx

Bildschirmfoto 2022-05-28 um 16.49.27

Have you configured dark sky?

Test the template to make sure it works

Open your Home Assistant instance and show your template developer tools.

Also your indentation

You may want to use Pirateweather instead as a replacement for Dark Sky. It uses similar syntax as Dark Sky. You just have to change all instances of ‘dark_sky’ in the code with ‘pirateweather’.

Hi all
My tablet resolution is 1280*800 i put ss from tablet.

  1. Needed footer area fit screen. Maybe cards put up a bit.

  2. I did graph code direct copy/paste, but not looking like yours(bottom right at ss) Chrome dev tools styles show display:flex for .header .value .measurement

Thanks for help.

hi @Mattias_Persson Is there a way to know what part of the code shows me the error?

button-card.js:425 ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading 'state_on') in 'let style = `
    <style>
      @keyframes on {
        from {
          transform: scaleY(0);
   ...'
    at Je.eval (eval at _evalTemplate (button-card.js:425:9295), <anonymous>:43:17)
    at Je._evalTemplate (button-card.js:425:9379)
    at Je._getTemplateOrValue (button-card.js:425:9964)
    at button-card.js:433:400
    at Array.forEach (<anonymous>)
    at Je._buildCustomFields (button-card.js:433:292)
    at Je._gridHtml (button-card.js:517:25)
    at Je._buttonContent (button-card.js:499:433)

Looks like two repositories are archived that are being used as custom components.

@Mattias_Persson it works with the dark sky integration. thank you

one more question: is it possible to implement a garage door button?

Hi!

First of all I need to say a big thanks for sharing your work, it’s amazing!

So I started working on an adaptation to my needs, and I’m a bit puzzle on how to integrate a time-picker-card (https://github.com/GeorgeSG/lovelace-time-picker-card)

I would rather not use a popup for this, and I really don’t see how I could achieve a time picker in a card.
ideally, I would also like an icon that can be colored or not depending on the state of the automation (if active or not)

Could you guide me as how I could achieve this? Also, I’m really starting with home assistant coding so don’t assume much knowledge here :stuck_out_tongue:

Thanks in advance!

This is solved by cloning the repositories in your git and then adding them manually from the three points used to add custom repositories

@Mattias_Persson

perhaps you can help me by a problem, i tried to add a gif with the gradient, the gif should be under the gravient, but i dont get it to work.

its saved under entity_picture

extra_styles: |
                [[[
                  let entity_picture = '/local/weather_back/test3.gif';
                  let cardBgColor = 'rgba(43, 104, 233, 1)';
                  let cardBgImage = 'linear-gradient(0deg, rgba(43, 104, 233, 1) 0%, rgba(85, 187, 240, 1) 100%)';
                  if (entity && entity.state) {
                    switch(entity.state) {
                      case 'partlycloudy':
                        cardBgColor = 'rgb(117,121,128)';
                        cardBgImage = 'linear-gradient(0deg, rgba(117,121,128,1) 0%, rgba(90,113,157,1) 38%, rgba(94,108,136,1) 100%)**, url(' + entity_picture +** ')';
                        break;

Hey There,
how would you guys recommend maintaining the Dasboard from matt locally?

Do you have a local git repo where you merge every few weeks or so, or has someone of you automated the merging?

Do you have a full example and an image to illustrate?