A different take on designing a Lovelace UI

[masoncrawford1994 (mason)]

evening, that’s looking nice, lots to go over apologies if I don’t cover everything.

@nullae

So I tried adding the scene chips to the top of the card instead, which eliminated all scroll entirely!
I also did a quick check that a horizontal stack behaves normally when it’s the first card of the bunch, and it does.

I also moved the chips to the top of the card as I felt it was more useful.

@nullae

My code is missing some of the card mod styling yours had, but seems to display correctly on all my devices:

yes most of it was copy and pasted for other sections of my dashboard so I would not be surprised if most of what I had was not needed.

@nullae

Code

nice

@nullae

I bought styled chips back, and dropped the name display. I also eliminated some dead space below the scene card that annoyed me

its looking a lot better than my attempt, im better at the make it work not so good at the make it look nice.

@nullae

Part of me still wants to use the manual listing version you first posted tho. I really like that can order my scenes with it

it would be possible to order the scenes alphabetically, that could be friendly_name or entity_id. think we could even order by last used or last added date.

@nullae

Perhaps it’d be wiser to figure out a similar template to add switches alongside the scenes, but I do want to avoid a second row of chips, which may further complicate things (with my lack of coding ability).

you could do that but it might be a little over kill and if it is only a 1 off then just create a custom popup for that light and dont worry about the dynamics parts

@nullae

As another solution, I’m also curious about pulling scenes based on area in common. Not sure if this is possible, as templating for area seems a little different from just checking attributes.

I dont think it will be possible to pull out scenes based on area, we are not working with the Jinja2 templating engine, but we are accessing the JavaScript object directly. so we are limited by the data that is on the JavaScript object

@nullae

Would there be a chance that you’d know a resource or two for me to better understand how to code the dynamics parts that you’ve made?

I have 10+ years of coding with javascript, a diploma in programming and a bachelors in computer science, and I work as a software developer where i work with javascript for 40 - 50 hours a week.
even with all that I still had lots of google tabs and referenced @Mattias_Persson’s code.

as a start you could look at JavaScript Tutorial for some basic javascript, but programming is all about foundations, a loop is a loop no mater the language or syntax.

[nullae (null)]

Thanks for the detailed reply, I know it’s shooting a little off topic at this point

You’re probably right that I should save time and just make a couple of custom pop-ups instead of getting carried away.

we are accessing the JavaScript object directly. so we are limited by the data that is on the JavaScript object

ah makes sense, I had a feeling it was something like this

I have 10+ years of coding with javascript, a diploma in programming and a bachelors in computer science, and I work as a software developer where i work with javascript for 40 - 50 hours a week.
even with all that I still had lots of google tabs and referenced @Mattias_Persson’s code.

This makes me feel much better about not being able to figure some of it out myself lol

programming is all about foundations, a loop is a loop no mater the language or syntax

A good reminder that I really should start to learn some programming to complement the endless poking around with code I find, cheers.

[petro]

Please use Google translate to english before posting.

[Faecon (Jo)]

I had 2 directories of home assistant, I was looking in the wrong directory . stupid me. Thanks for your time anyway

[Brkie]

Can you post your energy card code?

[karma (karmah)]

Of course.
Tell me if you have some trouble:

          - type: custom:button-card
            custom_fields:
              graph:
                card:
                  type: 'custom:mini-graph-card'
                  name: Casa
                  entities:
                    - sensor.shellyem_5e28b2_channel_1_power
                  line_color: "#ff9800"
                  line_width: 4
                  font_size: 75
                  upper_bound: ~100
                  lower_bound: ~0
                  show:
                    graph: bar
                    name: false
                    icon: false
                    state: true
                    legend: false
                    labels: false
                    hours_to_show: 168
                    aggregate_func: max
                    group_by: date
            styles:
              name: [top: 57%, left: 0%, width: 100%, position: absolute]
              custom_fields:
                graph: [bottom: 0%, left: 0%, width: 100%, position: absolute]
                icon:
                  - width: 67%
                  - fill: "#9da0a2"
            template:
              - base_1
              - icon_energy_2
            card_mod:
              style: |
                :host{
                  --accent-color: #039be5;
                  --ha-card-border-width: 0px;
                }

          - type: custom:button-card
            custom_fields:
              graph:
                card:
                  type: 'custom:mini-graph-card'
                  name: Forno
                  entities:
                    - sensor.shellyem_5e28b2_channel_2_power
                  line_color: "#ff9800"
                  line_width: 4
                  font_size: 75
                  upper_bound: ~100
                  lower_bound: ~0
                  show:
                    graph: bar
                    name: false
                    icon: false
                    state: true
                    legend: false
                    labels: false
            styles:
              name: [top: 57%, left: 0%, width: 100%, position: absolute]
              custom_fields:
                graph: [bottom: 0%, left: 0%, width: 100%, position: absolute]
                icon:
                  - width: 67%
                  - fill: "#9da0a2"
            template:
              - base_1
              - icon_forno_3
            card_mod:
              style: |
                :host{
                  --accent-color: #039be5;
                  --ha-card-border-width: 0px;
                }

[arifroni]

I want to show my garbage collection remaining days on the sidebar. I wrote this code, it works fine. Except it’s not in order. How can I make them sorted by date?

garbage: |
  {% set garbage_types = ['Biotonne', 'Gelber Sack', 'Papiertonne', 'Restmüll'] %}

  {% for garbage_type in garbage_types -%}
	{% if as_timestamp(state_attr('sensor.garbage_collection', garbage_type)) < as_timestamp(now()) + 604800 -%}
	  {% if garbage_type == 'Biotonne' -%}
		Bio: {{ states('sensor.biotonne_garbage_collection') }}<br>
	  {% elif garbage_type == 'Gelber Sack' -%}
		Gelber: {{ states('sensor.gelber_sack_garbage_collection') }}<br>
	  {% elif garbage_type == 'Papiertonne' -%}
		Papier: {{ states('sensor.papiertonne_garbage_collection') }}<br>
	  {% elif garbage_type == 'Restmüll' -%}
		{{ garbage_type }}: {{ states('sensor.restmull_garbage_collection') }}<br>
	  {% endif %}
	{% endif -%}
  {% endfor -%}

FYI: sensors are string, they are created like this.

- platform: waste_collection_schedule
  name: biotonne_garbage_collection
  details_format: appointment_types
  value_template: '{% if value.daysTo == 0 %}Today{% elif value.daysTo == 1 %}Tomorrow{% else %}in {{value.daysTo}} days{% endif %}'
  types:
    - Biotonne

[masoncrawford1994 (mason)]

{% set garbage_types = [
  {'name':'a','temp':10,'message':'in 10 days'},
  {'name':'b','temp':4,'message':'in 4 days'},
  {'name':'c','temp':1,'message':'today'},
  {'name':'d','temp':11,'message':'in 11 days'}
] | sort(attribute='temp') %}


{% for garbage_type in garbage_types -%}
  {{garbage_type.name}} : {{garbage_type.message}}
{% endfor -%}

you will need a list of objects that have both the date value and the message
then you just sort that list on the oject that has the date value, loop over the list and print it out

edit:

this might work but im not 100%

{% set garbage_types = [
{'name':'Biotonne','date':state_attr('sensor.garbage_collection', 'Biotonne'),'message':states('sensor.biotonne_garbage_collection')},
{'name':'Gelber Sack','date':state_attr('sensor.garbage_collection', 'Gelber Sack'),'message':states('sensor.gelber_sack_garbage_collection')},
{'name':'Papiertonne','date':state_attr('sensor.garbage_collection', 'Papiertonne'),'message':states('sensor.papiertonne_garbage_collection')},
{'name':'Restmüll','date':state_attr('sensor.garbage_collection', 'Restmüll'),'message':states('sensor.restmull_garbage_collection')},
] | sort(attribute='temp') %}


{% for garbage_type in garbage_types -%}
  {% if as_timestamp(state_attr('sensor.garbage_collection', garbage_type.name)) < as_timestamp(now()) + 604800 -%}
      {{garbage_type.name}} : {{garbage_type.message}}
  {% endif -%}
{% endfor -%}

[drock_in_nc (Derek Cassese)]

I have been working on my version of this for a bit now. I am wanting to have a popup with a switch group but can’t figure it out. I copied how you did light groups but nothing shows where I put the group. So I just want one square that says Christmas Lights that when double tapped opens a popup with 5 switches. Any guidance would be awesome.

[masoncrawford1994 (mason)]

This might help.

A different take on designing a Lovelace UI

I’m attempting to make an auto-populating card for switch groups, based of the code for the new light popup… however I am was scratching my head as to what format is needed for: tap_action: action: toggle I eventually figured it out. Here is the button card template: switch: template: - base #- circle - loader double_tap_action: action: fire-dom-event browser_mod: command: popup title: > [[[ return !entity || entity.attributes.friendly_…

this is what it looks like:

- type: custom:button-card
  name: Monitors
  entity: group.office_monitors
  template:
    - switch
    - icon_imac

group:
  office_monitors:
    name: Office Monitors
    icon: mdi:monitor
    entities:
      - switch.port_2
      - switch.port_3
      - switch.port_4

switch:
  template:
    - base
    - loader
  double_tap_action:
    action: fire-dom-event
    browser_mod:
      service: browser_mod.popup
      data:
        title: >
          [[[
            return !entity || entity.attributes.friendly_name;
          ]]]
        content:
          type: entities
          card_mod:
            style: |
              #states {
                padding-top: 0.5em;
              }
          entities: >
            [[[
              if (entity) {
                  let switches = [],
                      id = Boolean(entity.attributes.entity_id)
                          ? [entity.entity_id].concat(entity.attributes.entity_id)
                          : [entity.entity_id];

                  for (let i = 0; i < id.length; i++) {
                      switches.push({
                          "type": "custom:mushroom-entity-card",
                          "entity": id[i],
                          "fill_container": false,
                          "primary_info": "name",
                          "secondary_info": "last-changed",
                          "icon_type": "icon",
                          "icon_color": "light-green",
                          "tap_action": { action: 'toggle' }
                      });
                  }
                  return switches;
              }
            ]]]

[arifroni]

@masoncrawford1994

{% set garbage_types = [
{'name':'Biotonne','date':state_attr('sensor.garbage_collection', 'Biotonne'),'message':states('sensor.biotonne_garbage_collection')},
{'name':'Gelber Sack','date':state_attr('sensor.garbage_collection', 'Gelber Sack'),'message':states('sensor.gelber_sack_garbage_collection')},
{'name':'Papiertonne','date':state_attr('sensor.garbage_collection', 'Papiertonne'),'message':states('sensor.papiertonne_garbage_collection')},
{'name':'Restmüll','date':state_attr('sensor.garbage_collection', 'Restmüll'),'message':states('sensor.restmull_garbage_collection')},
] | sort(attribute='temp') %}


{% for garbage_type in garbage_types -%}
  {% if as_timestamp(state_attr('sensor.garbage_collection', garbage_type.name)) < as_timestamp(now()) + 604800 -%}
      {{garbage_type.name}} : {{garbage_type.message}}
  {% endif -%}
{% endfor -%}

it works thanks a lot.

[drock_in_nc (Derek Cassese)]

Awesome. Let me take a look at this. Thanks

[fabianluque]

Would you mind sharing your washer and dryer icons? Looks awesome, great job!

[GareHaan]

Hey Mason,
Could you also share the code for the ‘sensor.template_sidebar_uptime’? Is it based on the uptime integration?

[Brkie]

Thx alot, mind to share the icons /templates also

[Dave81 (Dave)]

Don’t know if it may be helpful for anyone but I found a Christmas tree icon on the web and converted it to be used into our “theme”.

here’s the code:

icon_christmas:
  custom_fields:
    icon: >

      <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 426.461 426.461" style="enable-background:new 0 0 426.461 426.461;" xml:space="preserve">
      <g>
        <path d="M181.135,207.145c8.724,0,15.821-7.097,15.821-15.819c0-8.725-7.098-15.824-15.821-15.824
          c-8.725,0-15.822,7.099-15.822,15.824C165.313,200.049,172.411,207.145,181.135,207.145z M181.135,184.502
          c3.762,0,6.821,3.061,6.821,6.824c0,3.76-3.06,6.819-6.821,6.819c-3.762,0-6.822-3.059-6.822-6.819
          C174.313,187.563,177.374,184.502,181.135,184.502z"/>
        <path d="M273.621,289.674c-8.724,0-15.821,7.099-15.821,15.824c0,8.723,7.098,15.819,15.821,15.819
          c8.725,0,15.822-7.097,15.822-15.819C289.443,296.772,282.345,289.674,273.621,289.674z M273.621,312.317
          c-3.762,0-6.821-3.059-6.821-6.819c0-3.763,3.06-6.824,6.821-6.824c3.762,0,6.822,3.061,6.822,6.824
          C280.443,309.258,277.382,312.317,273.621,312.317z"/>
        <path d="M242.048,113.713c1.181,0,2.34-0.48,3.181-1.32c0.84-0.84,1.319-2,1.319-3.18c0-1.18-0.479-2.34-1.319-3.18
          c-0.841-0.84-2-1.32-3.181-1.32c-1.189,0-2.35,0.48-3.18,1.32c-0.84,0.84-1.32,2-1.32,3.18c0,1.18,0.48,2.34,1.32,3.18
          C239.709,113.233,240.869,113.713,242.048,113.713z"/>
        <path d="M217.249,67.353c1.19,0,2.35-0.48,3.18-1.32c0.841-0.84,1.32-2,1.32-3.18c0-1.18-0.48-2.34-1.32-3.18
          c-0.83-0.84-1.989-1.32-3.18-1.32c-1.18,0-2.34,0.48-3.18,1.32c-0.84,0.84-1.32,2-1.32,3.18c0,1.19,0.48,2.35,1.32,3.18
          C214.909,66.873,216.069,67.353,217.249,67.353z"/>
        <path d="M217.249,152.913c-1.18,0-2.34,0.49-3.18,1.32c-0.84,0.84-1.32,2-1.32,3.19c0,1.18,0.48,2.34,1.32,3.18
          c0.84,0.83,2,1.31,3.18,1.31c1.19,0,2.35-0.48,3.18-1.31c0.841-0.84,1.32-2,1.32-3.18c0-1.19-0.48-2.35-1.32-3.19
          C219.598,153.403,218.439,152.913,217.249,152.913z"/>
        <path d="M247.459,152.923c-1.18,0-2.34,0.48-3.18,1.31c-0.84,0.84-1.32,2-1.32,3.19c0,1.18,0.48,2.34,1.32,3.18
          c0.84,0.84,2,1.32,3.18,1.32c1.19,0,2.35-0.48,3.18-1.32c0.841-0.84,1.32-2,1.32-3.18c0-1.19-0.48-2.35-1.32-3.19
          C249.808,153.403,248.649,152.923,247.459,152.923z"/>
        <path d="M217.249,220.053c1.19,0,2.35-0.48,3.18-1.32c0.841-0.84,1.32-1.99,1.32-3.18c0-1.18-0.48-2.34-1.32-3.18
          c-0.83-0.84-1.989-1.32-3.18-1.32c-1.18,0-2.34,0.48-3.18,1.32c-0.84,0.84-1.32,2-1.32,3.18c0,1.19,0.48,2.35,1.32,3.18
          C214.909,219.573,216.069,220.053,217.249,220.053z"/>
        <path d="M158.169,221.593c0.84-0.84,1.32-2,1.32-3.18c0-1.18-0.48-2.34-1.32-3.18c-0.84-0.84-2-1.32-3.18-1.32
          c-1.181,0-2.34,0.48-3.181,1.32c-0.84,0.84-1.319,2-1.319,3.18c0,1.18,0.48,2.34,1.319,3.18c0.841,0.84,2,1.32,3.181,1.32
          C156.169,222.913,157.329,222.433,158.169,221.593z"/>
        <path d="M247.459,256.463c1.19,0,2.35-0.48,3.18-1.31c0.841-0.84,1.32-2,1.32-3.19c0-1.18-0.48-2.34-1.32-3.18
          c-0.83-0.84-1.989-1.32-3.18-1.32c-1.18,0-2.34,0.48-3.18,1.32c-0.84,0.84-1.32,2-1.32,3.18c0,1.19,0.48,2.35,1.32,3.19
          C245.119,255.983,246.279,256.463,247.459,256.463z"/>
        <path d="M185.489,256.463c1.18,0,2.34-0.48,3.18-1.32c0.84-0.83,1.32-1.99,1.32-3.18c0-1.18-0.48-2.34-1.32-3.18
          c-0.84-0.84-2-1.32-3.18-1.32c-1.19,0-2.351,0.48-3.19,1.32c-0.83,0.84-1.31,2-1.31,3.18c0,1.19,0.48,2.35,1.31,3.18
          C183.138,255.983,184.298,256.463,185.489,256.463z"/>
        <path d="M182.989,283.413c1.18,0,2.34-0.48,3.18-1.32c0.84-0.84,1.32-1.99,1.32-3.18c0-1.18-0.48-2.34-1.32-3.18
          c-0.84-0.84-2-1.32-3.18-1.32c-1.19,0-2.34,0.48-3.19,1.32c-0.83,0.84-1.31,2-1.31,3.18c0,1.18,0.48,2.34,1.31,3.18
          C180.638,282.933,181.798,283.413,182.989,283.413z"/>
        <path d="M160.878,276.033c1.191,0,2.351-0.48,3.191-1.32c0.83-0.84,1.319-2,1.319-3.18c0-1.19-0.489-2.35-1.319-3.18
          c-0.84-0.84-2-1.32-3.191-1.32c-1.18,0-2.34,0.48-3.18,1.32c-0.84,0.83-1.32,1.99-1.32,3.18c0,1.18,0.48,2.34,1.32,3.18
          C158.539,275.553,159.699,276.033,160.878,276.033z"/>
        <path d="M219.249,323.113c-1.18,0-2.34,0.48-3.18,1.31c-0.84,0.84-1.32,2-1.32,3.19c0,1.18,0.48,2.34,1.32,3.18
          c0.84,0.84,2,1.32,3.18,1.32c1.19,0,2.34-0.48,3.19-1.32c0.83-0.84,1.31-2,1.31-3.18c0-1.18-0.48-2.35-1.31-3.19
          C221.598,323.593,220.439,323.113,219.249,323.113z"/>
        <path d="M237.718,300.993c-1.189,0-2.35,0.49-3.189,1.32c-0.83,0.84-1.311,2-1.311,3.18c0,1.19,0.48,2.35,1.311,3.19
          c0.84,0.83,2,1.31,3.189,1.31c1.181,0,2.34-0.48,3.181-1.31c0.84-0.84,1.319-2,1.319-3.19c0-1.18-0.48-2.34-1.319-3.18
          C240.058,301.483,238.899,300.993,237.718,300.993z"/>
        <path d="M273.619,280.953c1.18,0,2.35-0.48,3.18-1.32c0.84-0.84,1.32-2,1.32-3.18c0-1.18-0.48-2.34-1.32-3.18
          c-0.83-0.84-1.99-1.32-3.18-1.32c-1.19,0-2.35,0.48-3.18,1.32c-0.841,0.84-1.32,2-1.32,3.18c0,1.18,0.48,2.34,1.32,3.18
          C271.279,280.473,272.439,280.953,273.619,280.953z"/>
        <path d="M366.378,312.496c0.381-0.819,0.72-1.713,0.997-2.71c1.285-4.627,1.346-13.453-3.963-17.439
          c-2.547-1.912-7.018-3.309-13.832,0.903c-4.425,2.735-7.955,6.308-10.577,10.665c-2.622-4.357-6.151-7.93-10.575-10.664
          c-6.815-4.214-11.281-2.816-13.829-0.904c-1.051,0.789-1.884,1.772-2.546,2.869c-8.081-15.436-15.56-32.269-21.375-46.23
          c4.09-0.717,8.393-1.76,12.458-3.055c13.746-4.377,15.89-8.549,16.306-11.305c0.31-2.047-0.095-5.669-5.825-7.887
          c-16.512-18.785-34.961-58.76-45.889-84.548c4.535-1.161,7.365-3.863,9.747-6.145c2.653-2.543,4.406-4.223,8.311-4.223
          c2.485,0,4.5-2.015,4.5-4.5c0-0.013-0.004-0.025-0.004-0.038c0.015-1.46-0.677-2.899-1.978-3.777
          c-33.494-22.616-63.156-92.262-66.551-100.433v-5.257h4.315c2.485,0,4.5-2.015,4.5-4.5c0-2.485-2.015-4.5-4.5-4.5h-4.315V4.5
          c0-2.485-2.015-4.5-4.5-4.5c-2.485,0-4.5,2.015-4.5,4.5v4.316h-4.316c-2.485,0-4.5,2.015-4.5,4.5c0,2.485,2.015,4.5,4.5,4.5h4.316
          v5.257c-3.395,8.171-33.057,77.817-66.552,100.433c-1.301,0.878-1.992,2.317-1.978,3.777c0,0.013-0.004,0.025-0.004,0.038
          c0,2.484,2.013,4.498,4.497,4.5v0.001c0.003,0,0.007-0.001,0.01-0.001c3.898,0.002,5.649,1.681,8.3,4.222
          c2.382,2.283,5.214,4.987,9.751,6.146c-11.089,26.167-29.925,66.963-46.619,85.381c-1.669,1.842-1.529,4.688,0.312,6.356
          c0.861,0.781,1.943,1.166,3.021,1.166h0.001c6.004,0,8.875,2.752,12.511,6.238c2.266,2.172,4.843,4.638,8.346,6.396
          c-16.588,40.002-32.458,69.429-44.863,83.117c-1.669,1.841-1.529,4.687,0.312,6.356c0.861,0.779,1.94,1.164,3.017,1.165v0.001
          c0.051,0,0.103-0.009,0.154-0.011c7.622,0.045,11.24,3.506,15.808,7.883c5.082,4.871,10.841,10.391,22.185,10.391
          c11.344,0,17.104-5.52,22.185-10.39c4.599-4.407,8.231-7.888,15.96-7.888c7.727,0,11.357,3.481,15.955,7.888
          c0.479,0.46,0.971,0.925,1.467,1.391h-30.264c-2.485,0-4.5,2.015-4.5,4.5v22.451h-35.455c0.331-0.771,0.629-1.601,0.882-2.51
          c1.392-5.013,1.477-14.56-4.221-18.838c-2.707-2.033-7.473-3.501-14.804,1.029c-5.084,3.143-9.098,7.291-12.009,12.391
          c-2.912-5.101-6.926-9.249-12.01-12.39c-7.329-4.531-12.094-3.061-14.802-1.03c-5.699,4.279-5.612,13.827-4.22,18.839
          c0.253,0.909,0.551,1.738,0.881,2.509h-3.143c-2.485,0-4.5,2.015-4.5,4.5v42.878c0,2.485,2.015,4.5,4.5,4.5h300.604
          c2.485,0,4.5-2.015,4.5-4.5V315.902C367.967,314.532,367.342,313.321,366.378,312.496z M320.002,299.544
          c0.102-0.079,1.229-0.162,3.692,1.362c5.006,3.094,7.654,7.199,9.102,10.496h-8.5c-2.729-0.224-4.169-1.071-4.989-4.024
          C318.412,304.155,319.106,300.216,320.002,299.544z M298.212,221.418c-12.86-4.872-24.923-10.674-36.09-16.925
          c4.257-2.838,7.069-7.679,7.069-13.167c0-8.725-7.098-15.824-15.821-15.824c-8.025,0-14.658,6.013-15.672,13.767
          c-28.521-19.649-48.395-40.04-56.62-49.101c2.011-1.247,3.597-2.76,5.02-4.124c2.652-2.542,4.404-4.222,8.307-4.222
          c3.902,0,5.654,1.68,8.307,4.222c3.127,2.996,7.018,6.725,14.537,6.725c7.518,0,11.409-3.729,14.534-6.725
          c2.653-2.543,4.406-4.223,8.31-4.223c3.903,0,5.656,1.68,8.31,4.223c2.346,2.248,5.122,4.908,9.538,6.097
          C268.783,168.064,283.564,200.093,298.212,221.418z M246.548,191.326c0-3.763,3.06-6.824,6.821-6.824
          c3.762,0,6.821,3.061,6.821,6.824c0,3.76-3.06,6.819-6.821,6.819C249.608,198.145,246.548,195.086,246.548,191.326z
          M217.253,35.381c4.019,9.008,10.727,23.188,19.308,38.203c-2.515,2.85-5.294,5.657-8.323,8.392
          c-2.849-2.754-6.719-4.459-10.984-4.459c-8.725,0-15.822,7.097-15.822,15.821c0,2.405,0.555,4.678,1.52,6.721
          c-12.503,7.231-25.178,12.645-35.239,16.39C190.603,91.735,209.253,53.312,217.253,35.381z M224.074,93.338
          c0,3.761-3.06,6.821-6.821,6.821c-3.762,0-6.822-3.06-6.822-6.821c0-3.761,3.061-6.821,6.822-6.821
          C221.014,86.517,224.074,89.577,224.074,93.338z M163.254,129.547c-0.482-0.462-0.986-0.942-1.516-1.423
          c11.434-3.777,29.523-10.668,47.38-21.24c2.381,1.435,5.157,2.276,8.134,2.276c8.724,0,15.821-7.097,15.821-15.821
          c0-1.133-0.125-2.237-0.353-3.303c3.1-2.709,5.977-5.498,8.625-8.339c9.936,16.341,21.877,32.73,34.809,43.796
          c-1.958,1.233-3.51,2.717-4.907,4.056c-2.653,2.542-4.406,4.222-8.31,4.222s-5.656-1.68-8.31-4.223
          c-3.126-2.996-7.017-6.725-14.536-6.725c-7.519,0-11.41,3.729-14.537,6.725c-2.652,2.542-4.404,4.222-8.307,4.222
          c-3.903,0-5.656-1.68-8.31-4.223c-3.125-2.996-7.016-6.725-14.534-6.725c-7.518,0-11.409,3.729-14.535,6.725
          c-2.652,2.543-4.405,4.223-8.308,4.223C167.66,133.77,165.907,132.09,163.254,129.547z M142.231,234.835
          c-2.681-2.57-5.805-5.546-10.377-7.279c15.23-19.831,31.059-53.22,42.838-80.969c15.019,16.665,63.627,65.708,133.341,87.79
          c-5.904,2.969-19.151,6.696-28.276,6.696c-6.006,0-8.879-2.753-12.516-6.238c-4.063-3.894-9.119-8.74-18.742-8.74
          c-9.62,0-14.677,4.846-18.738,8.74c-3.637,3.485-6.509,6.238-12.515,6.238c-6.005,0-8.876-2.753-12.512-6.238
          c-4.063-3.895-9.118-8.741-18.739-8.741c-9.621,0-14.678,4.847-18.74,8.741c-3.636,3.485-6.507,6.238-12.512,6.238
          S145.867,238.32,142.231,234.835z M113.743,327.315c14.384-20.224,28.837-51.713,39.398-77.293
          c0.521,0.031,1.052,0.051,1.602,0.051c9.621,0,14.678-4.847,18.74-8.741c3.636-3.485,6.507-6.238,12.512-6.238
          c6.004,0,8.875,2.752,12.511,6.238c4.063,3.894,9.118,8.741,18.74,8.741c9.623,0,14.679-4.847,18.742-8.741
          c3.636-3.485,6.507-6.237,12.511-6.237c6.006,0,8.879,2.753,12.516,6.238c3.219,3.085,7.07,6.758,13.313,8.155
          c-12.332,12.625-26.5,23.376-41.297,32.506c-0.449-8.324-7.344-14.963-15.777-14.963c-8.725,0-15.822,7.097-15.822,15.821
          c0,5.3,2.629,9.988,6.641,12.861c-10.788,5.283-21.555,9.811-31.869,13.67c0.316-1.246,0.503-2.543,0.503-3.885
          c0-8.725-7.098-15.824-15.821-15.824c-8.724,0-15.821,7.099-15.821,15.824c0,5.006,2.345,9.469,5.987,12.37
          C135.608,322.533,122.487,325.544,113.743,327.315z M210.43,282.852c0-3.761,3.061-6.821,6.822-6.821
          c3.762,0,6.821,3.06,6.821,6.821c0,3.762-3.06,6.822-6.821,6.822C213.491,289.674,210.43,286.614,210.43,282.852z M154.062,305.497
          c0-3.763,3.06-6.824,6.821-6.824c3.762,0,6.821,3.061,6.821,6.824c0,3.76-3.059,6.819-6.821,6.819
          C157.122,312.317,154.062,309.258,154.062,305.497z M213.004,417.461H96.66v-14.258h116.345V417.461z M213.004,394.203H96.66
          v-10.621h116.345V394.203z M87.66,383.582v10.621H67.363v-10.621H87.66z M112.897,361.919c2.675-1.654,4.258-1.794,4.668-1.487
          c1.27,0.954,1.96,5.602,0.952,9.232c-1.231,4.433-3.7,4.918-8.653,4.918h-7.598C103.817,370.739,106.82,365.675,112.897,361.919z
          M73.796,369.664c-1.009-3.629-0.319-8.278,0.952-9.232c0.405-0.309,1.989-0.167,4.665,1.488c6.077,3.755,9.08,8.819,10.632,12.663
          H82.45C77.497,374.582,75.028,374.097,73.796,369.664z M67.363,403.203H87.66v14.258H67.363V403.203z M233.215,417.461h-11.211
          v-38.378c0-2.485-2.015-4.5-4.5-4.5h-46.742v-17.951h62.453V417.461z M252.872,417.461h-10.656v-60.83h10.656V417.461z
          M291.219,417.461h-29.348v-14.258h29.348V417.461z M291.219,394.203h-29.348v-10.621h29.348V394.203z M291.219,374.582h-29.348
          v-22.451c0-2.485-2.015-4.5-4.5-4.5h-19.406c0.495-0.465,0.984-0.931,1.464-1.39c4.599-4.407,8.23-7.888,15.959-7.888
          c7.73,0,11.362,3.481,15.962,7.888c4.723,4.525,10.038,9.606,19.869,10.303V374.582z M291.219,315.902v31.607
          c-6.183-0.634-9.531-3.826-13.643-7.766c-5.082-4.87-10.843-10.39-22.188-10.39c-11.345,0-17.105,5.52-22.186,10.391
          c-4.599,4.407-8.23,7.888-15.958,7.888c-7.728,0-11.359-3.481-15.958-7.888c-5.081-4.87-10.84-10.39-22.183-10.39
          c-11.345,0-17.105,5.52-22.186,10.391c-4.599,4.407-8.23,7.888-15.958,7.888c-7.727,0-11.358-3.481-15.956-7.888
          c-1.56-1.495-3.185-3.049-5.013-4.487c12.387-2.638,30.722-7.197,51.591-14.517c33.107-11.612,78.53-32.555,111.263-67.153
          c7.389,17.661,17.314,39.624,27.813,57.815h-14.938C293.234,311.402,291.219,313.417,291.219,315.902z M337.489,417.461h-37.27
          v-76.438h37.27V417.461z M337.489,332.023h-37.27v-11.622h37.27V332.023z M358.967,417.461h-12.478v-76.438h12.478V417.461z
          M358.967,332.023h-12.478v-11.622h12.478V332.023z M358.703,307.377c-0.82,2.954-2.26,3.801-4.989,4.025h-8.499
          c1.444-3.296,4.088-7.4,9.098-10.496c2.462-1.521,3.591-1.439,3.696-1.361C358.903,300.216,359.597,304.155,358.703,307.377z"/>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      <g>
      </g>
      </svg>

[masoncrawford1994 (mason)]

happy to,

sensor.uptime is form the uptime integration

---
unique_id: sidebar_uptime
state: > 
    System Uptime: 
    {% set up_time =  as_timestamp(now()) - as_timestamp(states('sensor.uptime')) %}

    {% if up_time == 0 %}
      Just restarted...
    {% else %}
      {% set minutes = (up_time // 60) | int %}
      {% set hours = (minutes // 60) %}
      {% set days = (hours // 24) %}
      {% set weeks = (days // 7) %}

      {% set minutes = (minutes % 60) %}
      {% set hours =  (hours % 24) %}
      {% set days = (days % 7) %}

      {% macro phrase(value, name) %}
                {%- set value = value %}
                {%- set end = 's' if value > 1 else '' %}
                {{- '{} {}{}'.format(value, name, end) if value | int > 0 else '' }}
      {%- endmacro %}

      {% if weeks > 0 %}
        {% set text = [ phrase(weeks, 'week'), phrase(days, 'day') ] | select('!=','') | list | join(', ') %}
      {% elif days > 0 %}
        {% set text = [ phrase(weeks, 'week'), phrase(days, 'day'), phrase(hours, 'hour') ] | select('!=','') | list | join(', ') %}
      {% else %}
        {% set text = [ phrase(weeks, 'week'), phrase(days, 'day'), phrase(hours, 'hour'), phrase(minutes, 'min') ] | select('!=','') | list | join(', ') %}
        {% set last_comma = text.rfind(',') %}
        {% if last_comma != -1 %}
          {% set text = text[:last_comma] + ' and' + text[last_comma + 1:] %}
        {% endif %}
      {% endif %}

    {{ text }}

    {% endif %}

[masoncrawford1994 (mason)]

try searching

A different take on designing a Lovelace UI

Sure, I have NOT created these myself, only converted them to a working format for this dashboard Washer: [image] icon_washer: styles: custom_fields: icon: - width: 70% - fill: > [[[ return variables.state === 'none' ? '#9da0a2' : '#3181b7'; ]]] custom_fields: icon: > [[[ return ` <svg viewBox="0 0 50 50"> <path d="M36.8 9.1H26.1V4.9h10.6v4.2zM41 .6v46.8H7V.6h34zm-2.1 2.1H9.1v42.5h29.8V2.7zM12.3 30.4A11.65 11.65…

[drock_in_nc (Derek Cassese)]

Ha. I was fighting with this trying to use the tree in the Custom Brand Icons package with no success. Thanks for this!!

[Mattias_Persson]

@masoncrawford1994

I dont think it will be possible to pull out scenes based on area, we are not working with the Jinja2 templating engine, but we are accessing the JavaScript object directly. so we are limited by the data that is on the JavaScript object

this got me thinking, we can actually render jinja2

custom_fields:
  jinja2: >
    [[[
      // list all scenes in area
      let template = `
          {{ expand(area_entities('Vardagsrum'))
          | selectattr('domain', 'eq', 'scene')
          | map(attribute='entity_id') | list
          | to_json }}
      `;
      hass.callApi('post', 'template', {template})
        .then(r => console.log(JSON.parse(r)));
    ]]]

I’ve looked into auto scenes but I think it makes sense to just add scenes manually. That way you can set the order or maybe there’s a scene you don’t want to show up at all etc

variables:
  show_scenes: ['scene.party', 'scene.evening']