A different take on designing a Lovelace UI

Share your Projects!
3368

perhaps you must explain it a little bit more, the code you posted is from which file? the themes.yaml?

post the configuration.yaml and the themes.yaml file if this what you mean,
the line that you post has nothing todo with the themes.yaml?!

@weaverprojects
If you’re happy with it, I can make the hue:lily for you today, I just couldn’t make it yesterday

EDIT

Here you are

lily

icon_lily:
    styles:
      custom_fields:
        icon:
          - width: 100%
          - margin-left: -35%
          - margin-top: -20%
    custom_fields:
      icon: >
        [[[
          let state = variables.state_on && variables.timeout < 2000 ? 'on' : null;
          return `
            <svg viewBox="0 0 40 40">
              <style>
                @keyframes on {
                  0% {
                    opacity: 0.5;
                  }
                  20% {
                    opacity: 1;
                  }
                  100% {
                    opacity: 1;
                  }
                  
                }
                .on {
                  animation: on 5s;
                  transform-origin: center;
                }
              </style>
                <g transform="matrix(0.05 -0.0291 0.0383 0.0658 32.0409 15.6111)" id="806432">
                <path class="${state}" fill="var(--light-color)" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-78.4998, -78.5)" d="M 78.5 0 C 52.9419 0 32.1166 35.2271 32.1166 78.5 C 32.1166 121.773 52.9419 157 78.5 157 C 104.058 157 124.883 121.773 124.883 78.5 C 124.883 35.2271 104.058 0 78.5 0 Z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(1.3513 0 0 1.3513 24.9997 24.9996)" id="619688">
                <path  style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none;  fill: #9da0a2; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-12.0077, -12.03)" d="M 20.5 6.6 c 0 -1 -0.4 -2.1 -1 -3.2 c -0.6 -1.1 -1.4 -2 -2.3 -2.5 c -0.9 -0.6 -1.8 -0.7 -2.5 -0.3 c 0 0 0 0 0 0 c 0 0 0 0 0 0 L 4.5 6.7 c 0 0 0 0 0 0 c -0.7 0.4 -1 1.2 -1 2.3 c 0 1 0.4 2.1 1 3.2 c 0.6 1.1 1.4 2 2.3 2.5 C 7 14.8 7.2 14.9 7.4 15 c 0.1 1.5 0.4 2.8 0.6 3.2 c 0.3 0.4 1 0.9 1.9 1.2 c -1.8 0.2 -3.7 0.6 -3.7 1.8 v 0.7 c 0 1.4 3.2 1.8 5.1 1.8 c 1.9 0 5.1 -0.4 5.1 -1.8 v -0.7 c 0 -1 -1.6 -1.5 -3.2 -1.7 c 0.7 -0.2 1 -0.6 1.2 -0.7 c 0.2 -0.1 0.3 -0.4 0.3 -0.7 c -0.1 -0.6 -0.7 -0.9 -1.2 -1 c -0.9 -0.3 -1.4 -0.3 -1.8 -0.2 c -0.2 -0.7 -0.2 -1.9 -0.2 -3.1 l 8 -4.7 c 0 0 0 0 0 0 c 0 0 0 0 0 0 c 0 0 0 0 0 0 c 0 0 0 0 0.1 0 c 0 0 0 0 0 0 C 20.2 8.4 20.6 7.7 20.5 6.6 z M 16.7 1.7 c 0.7 0.5 1.4 1.2 1.9 2.2 c 0.5 0.9 0.9 1.9 0.9 2.8 c 0 0.7 -0.1 1.2 -0.5 1.4 c -0.3 0.2 -0.9 0.1 -1.5 -0.3 c -0.7 -0.5 -1.4 -1.2 -1.9 -2.2 c -0.5 -0.9 -0.9 -1.9 -0.9 -2.8 c 0 -0.5 0.1 -1 0.3 -1.2 c 0 0 0 0 0 0 c 0.1 -0.1 0.1 -0.1 0.2 -0.2 c 0 0 0 0 0 0 c 0.1 -0.1 0.2 -0.1 0.4 -0.1 C 15.9 1.3 16.3 1.5 16.7 1.7 z" stroke-linecap="round"/>
                </g>
            </svg>
          `;
        ]]]

today i remake the lucca, its a little blurred

here is my hue:floor-lantern

lantern

icon_lantern_new:
    styles:
      custom_fields:
        icon:
          - width: 100%
          - margin-left: -25%
          - margin-top: -20%
    custom_fields:
      icon: >
        [[[
          
          
          let state = variables.state_on && variables.timeout < 2000 ? 'on' : null;
          return `
            <svg viewBox="0 0 40 40">
              <style>
                
                @keyframes on {
                  0% {
                    opacity: 0.5;
                  }
                  20% {
                    opacity: 1;
                  }
                  100% {
                    opacity: 1;
                  }
                  
                }
                .on {
                  animation: on 5s;
                  transform-origin: center;
                }
              </style>
                <g transform="matrix(-0.0597 0 0 -0.097 25.1132 18.1834)" id="127847" clip-path="url(#CLIPPATH_3)">
                <clipPath id="CLIPPATH_3">
                <rect transform="matrix(1 0 0 1 0.0001 0.0005)" id="clip0_302_122" x="-79" y="-79.5" rx="0" ry="0" width="158" height="159"/>
                </clipPath>
                <path class="${state}" fill="var(--light-color)" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; ; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-78.9999, -79.4995)" d="M 157.307 120.309 L 124.594 35.4256 C 124.113 34.1165 122.872 33.2477 121.485 33.249 H 36.2565 C 34.8878 33.2564 33.6712 34.1271 33.215 35.4256 L 0.231964 121.193 C -0.170713 122.206 -0.0439854 123.355 0.570009 124.254 C 1.16278 125.18 2.17913 125.742 3.27342 125.75 H 154.671 V 125.682 C 155.411 125.686 156.131 125.441 156.716 124.985 C 158.162 123.858 158.426 121.765 157.307 120.309 Z" stroke-linecap="round"/>
                </g>
                <g transform="matrix(1.3658 0 0 1.3658 25 25.0001)" id="191525">
                <path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; is-custom-font: none; font-file-url: none; fill: #9da0a2; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-11.9999, -11.6362)" d="M 13.89 9.73 c -1.07 -0.37 -2.71 -0.37 -3.78 0 L 9.2 3.46 c 1.78 0.22 3.82 0.22 5.6 0 L 13.89 9.73 z M 16.83 0.55 c -2.66 -0.73 -7.02 -0.73 -9.67 0 C 4.55 1.27 4.63 2.42 7.29 3.12 C 7.4 3.15 7.53 3.17 7.64 3.2 l 1.18 8.12 c 0.09 0.32 0.58 0.7 1.68 0.9 v 8.97 c -0.73 0.12 -1.27 0.31 -1.44 0.55 C 9.02 21.8 9 21.86 9 21.91 v 0.54 c 0 0.45 1.34 0.82 3 0.82 s 3 -0.37 3 -0.82 v -0.54 c 0 -0.3 -0.61 -0.56 -1.5 -0.71 v -8.98 c 1.09 -0.2 1.56 -0.59 1.68 -0.9 l 1.18 -8.13 c 0.12 -0.03 0.25 -0.05 0.36 -0.08 C 19.37 2.42 19.45 1.27 16.83 0.55 z" stroke-linecap="round"/>
                </g>
            </svg>
          `;
        ]]]
3 Likes
3369

try this ,
add this over “const state”


          let color;
          if (variables.state === 'on' && variables.timeout < 2000) {
            color = 'var(--primary-color)';
          } 
          if (variables.state === 'off' && variables.timeout < 2000) {
            color = '#a0a0a0';
          }
          if (variables.state === 'on' && variables.timeout > 2000) {
            color = 'var(--primary-color)';
          }
          if (variables.state === 'off' && variables.timeout > 2000) {
            color = '#a0a0a0';
          }

and this to the path you want to color

fill="${color}"

and now you can change for the color you want
ON

 var(--primary-color)

OFF

#a0a0a0
3370

Can someone please help me how i can fix this error?

i followed all the steps and when i want to restart homeassistant to change the theme after that i can not restart homeassistant becuase of this error:

Error loading /config/configuration.yaml: Secret monitors_mute_state not defined

3371

that is because you are missing a included file where the “monitors_mute_state” is definied.

try delete the sensor or find it in the includs

3372

Yes, it is from themes.yaml

I dont know what to explain, i only copied the files in my NUC and would give it a try

And it says that the problem is in that file, and so i copied the line out

3373

I’m trying to change the ratio of the buttons. I’ve changed the ratio it to 3/1 (and some font-sizes etc.), but how do I get rid of the giant space between the buttons? I would like the same space as when the buttons were squares. I’ve tried to play around with the grid-template-row in the ui-lovelace.yaml but can’t get it to work. I’m I looking at the wrong place? Can someone point my in the right direction?

image
image1920×1375 55.3 KB

3374

Try looking into the templates.yaml or the button_card_templates.yaml.

3375

no idea if I understand you at all but I try to understand it again
this is the original themes.yaml from mattias

hass-config/themes.yaml at master · matt8707/hass-config (github.com)

line 28 is this

      input-ink-color: rgba(255, 255, 255, 0.87)

what is in your configuration.yaml in the line 28 ?

3376

where can i find all the icons you used so i can change the icons i need to.

and how can i change the background? (wallpaper)

1 Like
3377

thx for the icons

3378

where do you find all the icons? i need icons for shutters…

3379

how did you manage to change the font size within the buttons on the panel? i would like to make it a little bit smaller

3380

is it possible for you to adjust this icon and also the rest of the files for a cover with only a closed and open state pls? im having a hard time to get this working :frowning:

3381

Hi,
I tried you suggestion but it didn’t work,
maybe I didnt understand your instructions, this is how it looks after I changed it:

      icon_hue: >
        [[[ 
          let color;
          if (variables.state === 'on' && variables.timeout < 2000) {
            color = 'var(--primary-color)';
          } 
          if (variables.state === 'off' && variables.timeout < 2000) {
            color = '#a0a0a0';
          }
          if (variables.state === 'on' && variables.timeout > 2000) {
            color = 'var(--primary-color)';
          }
          if (variables.state === 'off' && variables.timeout > 2000) {
            color = '#a0a0a0';
          }
          return `
            <svg viewBox="0 0 50 50">
              <style>
                @keyframes on {
                  0% {
                    transform: scale(0.85);
                  }
                  20% {
                    transform: scale(1.1);
                  }
                  40% {
                    transform: scale(0.95);
                  }
                  60% {
                    transform: scale(1.03);
                  }
                  80% {
                    transform: scale(0.97);
                  }
                  100% {
                    transform: scale(1);
                  }
                }
                .on {
                  animation: on 0.8s;
                  transform-origin: center;
                }
              </style>
              <path fill="${color}" d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"/>
              <path class="${state}" fill="${color}" d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"/>
            </svg>
          `;
        ]]]

Can you please verify it.
Thanks a lot.

3382

I guess this has every thing to do with the grid you have defined. hoe have to make more grid rows
so more rows in grid area en don’t forget to edit the grid-row-template. If you add one row change the 2 into 3 and so on.

 grid-template-columns: repeat(4, 1fr) 0
  grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
  grid-template-areas: |
    "sidebar  .           .       .       ."
    "sidebar  vardagsrum  studio  sovrum  ."
    "sidebar  media       övrigt  hemma   ."
    "sidebar  footer      footer  footer  ."
3383

try this

icon_hue: >
        [[[ 
          let color;
          if (variables.state === 'on' && variables.timeout < 2000) {
            color = 'var(--primary-color)';
          } 
          if (variables.state === 'off' && variables.timeout < 2000) {
            color = '#a0a0a0';
          }
          if (variables.state === 'on' && variables.timeout > 2000) {
            color = 'var(--primary-color)';
          }
          if (variables.state === 'off' && variables.timeout > 2000) {
            color = '#a0a0a0';
          }
          let state = variables.state_on && variables.timeout < 2000 ? 'on' : null;
          return `
            <svg viewBox="0 0 50 50">
              <style>
                @keyframes on {
                  0% {
                    transform: scale(0.85);
                  }
                  20% {
                    transform: scale(1.1);
                  }
                  40% {
                    transform: scale(0.95);
                  }
                  60% {
                    transform: scale(1.03);
                  }
                  80% {
                    transform: scale(0.97);
                  }
                  100% {
                    transform: scale(1);
                  }
                }
                .on {
                  animation: on 0.8s;
                  transform-origin: center;
                }
              </style>
              <path fill="${color}" d="M27.4 47.3h-4.9s-.7.1-.7.8.4.9.7.9h4.9c.3 0 .7-.1.7-.9s-.7-.8-.7-.8zm3.3-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-3H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9-.1-.8-.9-.8-.9-.8zm0-2.9H19.3s-.8 0-.8.8.6.9.8.9h11.5c.2 0 .8-.1.8-.9s-.9-.8-.9-.8zm5.2-23.2c-3.3-5.3-7-5.6-10.9-5.6-3.8 0-8.4.4-10.9 5.6-.1.1-.1.3.1.7.4.8 3.3 7.2 3.2 18.8 0 1.1-.1 1.6 0 1.7 0 .1 0 .7 1.1.7h13c1 0 1-.5 1.1-.7v-1.7c-.1-11.6 2.8-18 3.2-18.8.1-.4.1-.5.1-.7"/>
              <path class="${state}" fill="${color}" d="M14.1 15.3c3.4-.3 7-.4 10.9-.4 3.8 0 7.5.2 10.9.4.4-.4.7-.8.9-1.1C39 8.5 38.9 6.5 38.9 6c-.2-4.4-8.4-5-12.1-5h0-3.4c-3.7 0-12 .5-12.1 5 0 .5-.1 2.5 2.1 8.2 0 .3.3.8.7 1.1z"/>
            </svg>
          `;
        ]]]

i am actually not at home to test it, but you forgot

let state = variables.state_on && variables.timeout < 2000 ? 'on' : null;

3384

Wow @AndyVRD, nice dashboard! Is it possible to share your config?

3385

I’m sorry to say it’s still not working :frowning:

3386

How can I change it to another Language? By Hand? Or can i set it anywhere?

hanks

3387

Hello. How are you? Could you share the temperature card template? Thank you