A different take on designing a Lovelace UI

see if you have any timestamp entity. year 1970 is the base value. To that you have to add the date you have in untimestamp to have the date you need to see

hi, can you share your configuration?
How do you make the different views in the sidebar?
Also the garbage sensor looks interesting. thanks a lot

Hello everybody,

Í want add more rooms on the dashboard. Where I have to add this in the ui-lovelace.yaml?
Or can share sombody his config?

Hi. Does anyone have some svg washing machine icon, maybe with animation? One that would be similar to a dashboard Mattias

Hey, kannst du mir deine Config geben bekomme es leider nicht hin in der Sitebar ein Nav Menü einzufügen. Desweitern bekomme ich es auch nicht die Fensterkontakte mir richtig anzeigen zu lassen.

I see you have a Xbox logo. Can you please share the code for that?

  icon_washing:
    styles:
      custom_fields:
        icon:
          - width: 100%
          - fill: >
              [[[
                return (variables.state === 'on' || variables.state === 'playing') ? '#107b10' : '#9da0a2';
              ]]]     
    custom_fields:
      icon: >
        [[[
          let state = variables.state === 'on' ? 'on' : null;
          return `
            <svg viewBox="0 0 491 501">
              <style>
                @keyframes on {
                  0% {
                    transform: rotate(0deg) translate(-1.5%, 0%);
                  }
                  100% {
                    transform: rotate(-360deg) translate(-1.5%, 0%);
                  }
                }
                @keyframes off {
                  0% {
                    transform: rotateY(-360deg) translate(-1.5%, 0%);
                  }
                  45% {
                    transform: rotateY(-40deg);
                  }
                  55% {
                    transform: rotateY(0deg);
                  }
                  65% {
                    transform: rotateY(-15deg);
                  }
                  75% {
                    transform: rotateY(0deg);
                  }
                  85% {
                    transform: rotateY(-5deg);
                  }
                  95% {
                    transform: rotateY(0deg);
                  }
                }
                .on {
                  transform-origin: 49% 60%;
                  animation: on 1s cubic-bezier(0.5, 1, 0.89, 1) infinite;
                  animation-fill-mode: both;   
                  animation-delay: 0s;                  
                }
              </style>
                <svg viewBox="0 0 491 501">
                <svg width="491" height="501" viewBox="0 0 491 501" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g id="washing-machine-svgrepo-com (1) 1" clip-path="url(#clip0_3:34)">
                <path id="lavatrice totale" d="M439.86 490.557C439.86 496.322 435.275 501 429.625 501H61.3745C55.7251 501 51.1402 496.322 51.1402 490.557V10.4271C51.1402 4.66266 55.7251 0 61.3745 0H429.625C435.275 0 439.86 4.66364 439.86 10.4271V490.557V490.557Z" fill="#E6E9ED"/>
                <path class="${state}" id="contorno oblo" d="M393.184 302.683C393.184 385.903 327.059 453.374 245.5 453.374C163.942 453.374 97.8162 385.903 97.8162 302.683C97.8162 219.462 163.942 151.991 245.5 151.991C327.059 151.991 393.184 219.462 393.184 302.683Z" fill="#434A54"/>
                <path class="${state}" id="onda oblo 2" d="M393.184 302.683C393.184 302.576 393.184 302.484 393.184 302.377C387.925 297.24 316.75 230.165 245.679 302.683C174.594 375.2 103.09 308.125 97.8152 302.988C97.9802 386.07 164.031 453.374 245.499 453.374C327.059 453.374 393.184 385.903 393.184 302.683Z" fill="#5D9CEC"/>
                <path class="${state}" id="onda oblo 1" d="M392.045 321.397C381.422 311.489 313.499 253.574 245.68 322.773C178.686 391.13 111.287 335.463 99.3746 324.546C109.743 397.4 171.208 453.374 245.5 453.374C320.856 453.374 383.024 395.779 392.045 321.397Z" fill="#4A89DC"/>
                <g id="gruppo pomelli piccoli">
                <path id="pomello 3" d="M214.812 41.7389C214.812 47.5034 210.227 52.1817 204.578 52.1817C198.928 52.1817 194.359 47.5034 194.359 41.7389C194.359 35.9744 198.929 31.3118 204.578 31.3118C210.226 31.3118 214.812 35.9754 214.812 41.7389Z" fill="#5D9CEC"/>
                <path id="pomello 2" d="M255.734 41.7389C255.734 47.5034 251.149 52.1817 245.5 52.1817C239.851 52.1817 235.266 47.5034 235.266 41.7389C235.266 35.9744 239.851 31.3118 245.5 31.3118C251.149 31.3118 255.734 35.9754 255.734 41.7389Z" fill="#5D9CEC"/>
                <path id="pomello 1" d="M296.641 41.7389C296.641 47.5034 292.071 52.1817 286.422 52.1817C280.774 52.1817 276.188 47.5034 276.188 41.7389C276.188 35.9744 280.773 31.3118 286.422 31.3118C292.072 31.3118 296.641 35.9754 296.641 41.7389Z" fill="#5D9CEC"/>
                </g>
                <g id="gruppo comandi">
                <path id="divisore comandi" d="M337.562 83.4945V0H317.11V83.4945H173.89V0H153.438V83.4945H51.1402V104.364H439.86V83.4945H337.562Z" fill="#9E9F9F"/>
                <path id="vaschetta" d="M378.484 10.4271H398.938C404.587 10.4271 409.172 5.7635 409.172 0H368.25C368.25 5.76448 372.835 10.4271 378.484 10.4271Z" fill="#CCD1D9"/>
                <path id="pomello selettore" d="M120.879 25.012H84.4373V58.2818H120.879V25.012Z" fill="#CCD1D9"/>
                </g>
                <path id="selettore" d="M102.297 10.4271C85.3493 10.4271 71.6089 24.4474 71.6089 41.7389C71.6089 59.047 85.3493 73.0516 102.297 73.0516C119.244 73.0516 132.984 59.047 132.984 41.7389C132.984 24.4474 119.244 10.4271 102.297 10.4271ZM102.297 52.1817C96.6472 52.1817 92.0623 47.5034 92.0623 41.7389C92.0623 35.9901 96.6472 31.3118 102.297 31.3118C107.931 31.3118 112.516 35.9901 112.516 41.7389C112.516 47.5034 107.931 52.1817 102.297 52.1817Z" fill="#A6A6A6"/>
                <g id="gruppo oblo">
                <path class="${state}" id="bordo oblo" d="M245.5 146.12C160.765 146.12 92.0623 216.221 92.0623 302.683C92.0623 389.143 160.765 459.245 245.5 459.245C330.236 459.245 398.938 389.143 398.938 302.683C398.938 216.221 330.236 146.12 245.5 146.12ZM339.525 398.623C327.314 411.099 313.094 420.884 297.256 427.718C280.878 434.782 263.467 438.376 245.5 438.376C227.533 438.376 210.122 434.782 193.744 427.718C177.905 420.884 163.686 411.099 151.475 398.623C139.248 386.163 129.658 371.653 122.96 355.493C116.037 338.781 112.516 321.015 112.516 302.683C112.516 284.35 116.037 266.584 122.96 249.873C129.658 233.711 139.248 219.202 151.475 206.741C163.686 194.266 177.906 184.481 193.744 177.647C210.122 170.583 227.533 166.99 245.5 166.99C263.467 166.99 280.878 170.583 297.256 177.647C313.095 184.481 327.314 194.266 339.525 206.741C351.752 219.202 361.342 233.711 368.04 249.873C374.963 266.584 378.484 284.35 378.484 302.683C378.484 321.015 374.963 338.781 368.04 355.493C361.342 371.653 351.752 386.163 339.525 398.623Z" fill="#9A9C9E"/>
                <path id="maniglia" d="M388.703 332.696C388.703 338.429 384.103 343.123 378.484 343.123H337.562C331.944 343.123 327.329 338.429 327.329 332.696V272.669C327.329 266.936 331.944 262.242 337.562 262.242H378.484C384.103 262.242 388.703 266.936 388.703 272.669V332.696Z" fill="#CCD1D9"/>
                </g>
                <line id="Line 1" x1="442.5" x2="442.5" y2="505" stroke="#494949" stroke-width="5"/>
                <path id="Line 2" d="M440 0.5L51 0.5" stroke="black" stroke-width="5"/>
                <line id="Line 3" x1="52.5" y1="-0.00652739" x2="53.8081" y2="500.993" stroke="black" stroke-width="5"/>
                <line id="Line 4" x1="52" y1="489.5" x2="440" y2="489.5" stroke="black" stroke-width="23"/>
                </g>
                <defs>
                <clipPath id="clip0_3:34">
                <rect width="491" height="501" fill="white"/>
                </clipPath>
                </defs>
                </svg>
            </svg>
          `;
        ]]]

Try this, bye

2 Likes

I’m trying to make it so that you can see my friends avatar of whatever xbox friend is online in the sidebar.

        xboxicon: |
          <b>
          {%- set player1 = 'binary_sensor.friend1' %}
          {%- set player2 = 'binary_sensor.friend2' %}
          {% set pic1 = state_attr('binary_sensor.friend1', 'entity_picture') %}
          {% set pic2 = state_attr('binary_sensor.friend2', 'entity_picture') %}
          {%- if is_state(player1, 'on') -%}
              {{ pic1 }}
          {%- elif is_state(player2, 'on') -%}
              {{ pic2 }}
          {%- endif %}
          </b>

But this of course doesn’t work. it shows the url of entity_picture not the pic itself.
How could I have it show the pic itself? img?
And control the size of the image?

The entity_picture format is: https://images-eds-ssl.xboxlive.com/image?url=Kxxxxuuuxxxuuuxxx-&format=png

It shouldn’t?

1

https://jsonpathfinder.com/

jsonpathfinder x = root
rest value_template x = value_json
rest json_attributes_path x = $

https://www.home-assistant.io/integrations/sensor.rest/

  - platform: rest
    name: covid
    resource: https://services7.arcgis.com/mOBPykOjAyBO2ZKk/arcgis/rest/services/rki_key_data_hubv/FeatureServer/0/query?where=%20(AdmUnitId%20%3D%200%20OR%20AdmUnitId%20%3D%208127)%20&outFields=*&outSR=4326&f=json
    value_template: >
      {{ value_json.features[1].attributes.Inz7T }}
    json_attributes_path: "$.features[0].attributes"
    json_attributes:
      - AnzFallNeu
      - AnzGenesen
type: custom:button-card
entity: sensor.covid
name: >
  [[[
    if (entity) {
      let Inz7T = entity.state,
        AnzFallNeu = entity.attributes.AnzFallNeu,
        AnzGenesen = entity.attributes.AnzGenesen;
      return `${Inz7T} ${AnzFallNeu} ${AnzGenesen}`;
    }
  ]]]

add that to new responsive footer instead

based on previous replies #2050, #2170

{% set t = '06/01/2022 11:59:44' %}
{{ as_timestamp(strptime(t, '%d/%m/%Y %H:%M:%S'), default=0) | timestamp_local(default=0) }}

EDIT:
sensor.galaxy_tab_a_last_app_start is now working for me without templating, try that first

Because you update without reading release notes
https://github.com/cgarwood/homeassistant-fullykiosk/releases/tag/1.0.0

Yes, I read it. But it said that it is obsolete and that it is going to be eliminated. So I assumed that was not the problem. Thank you

But if you’ve read it and understood what to change, why are you asking here? If you experience any bugs you should create an issue https://github.com/cgarwood/homeassistant-fullykiosk

Since the template is parsed by button-card (the sidebar) you can use html

type: custom:button-card
name: >
  [[[
    let url = 'http://images-eds.xboxlive.com/image?url=z951ykn43p4FqWbbFvR2Ec.8vbDhj8G2Xe7JngaTToBrrCmIEEXHC9UNrdJ6P7KId46ktn4AUxk.ghIPeRshxdlTOxq2_8l.LYR5xMP.KKmCAaJR5C2DBw1AObz.PcWP&format=png';
    return `<img src="${url}" height="200">`;
  ]]]

or rather <img src="{{ pic1 }}">

Is it possible to limit the height of type:grid?

I would like to have the Shutter cards on the right in two 50% rows, so they would be aligned with the Cameras. How can I achive this?

Thank you! I finally managed to get it working. In addition, I finally understood the JSON thematic!

1 Like

Hej Mattias,

First of all I just want to say I love your design it is beautiful and elegant, thank you for this amazing work!

I have a question about the basic layout installation since i am super new to Home Assistant I started just today but I am eager to learn more about HA and designing the perfect dashboard.

So the issue i am having is that when i try to restart home assistant after doing every step before it it says Error loading /config/configuration.yaml: Secret plex_availability not defined

I tried turning of the VM and starting again but now its in safe mode with the same error.

Any clue what I could try to eliminate this error? :confused:

image

Kind Regards,

Isac

plex_availability is defined in include/binary_sensor.yaml and that file is not in the installation notes