A different take on designing a Lovelace UI

http://…:8123/developer-tools/template
{{ states.sensor.hall_temperature }}

What does the dev tools say?

hvac_modes: auto, heat
min_temp: 5
max_temp: 30
target_temp_step: 0.5
preset_modes: none, eco, boost
current_temperature: 20.4
temperature: 17
hvac_action: idle
preset_mode: none
valve_tappet_position: 0
boschshc_room_name: Wohnzimmer
friendly_name: Room Climate Wohnzimmer
supported_features: 17

Yeah, so {{ state_attr('entity_id', 'current_temperature') }} try something like this

custom_fields:
  thermostat: >
    [[[ const state = entity.attributes.current_temperature; 
    return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="20.5" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
    <text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${state}°</text></svg>`; ]]]

dont show anything :frowning:

         - type: custom:button-card
            entity: climate.room_climate_wohnzimmer
            style:
              top: 48%
              left: 15%
              width: 20%
            custom_fields:
              thermostat: >
                [[[ const state = entity.attributes.temperature; 
                return `<svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="20.5" stroke="#b2b2b2" stroke-width="1.5" fill="none" />
                <text x="50%" y="54%" fill="#8d8e90" font-size="14" text-anchor="middle" alignment-baseline="middle">${state}°</text></svg>`; ]]]
            styles: *icon_hue_styles
            template: climate

You forgot custom_field in styles. You can also return entity.attributes.temperature as a name or state_display to see if that works first.

Thank you so much for your help. I have understand now how this work.

Hi Frank,
wie hast du den Heizkörper Butten erstellt? ich würde mich freuen wenn du deinen hier zu verfügung stellst.

this is the thermostat button that i use. its optimized for my iphone view.

          - type: custom:button-card
            entity: climate.room_climate_wohnzimmer
            name: Wohnzimmer
            style:
              top: 48%
              left: 15%
              width: 20%
            custom_fields:
              thermostat: >
                [[[ const state = entity.attributes.current_temperature; 
                return ` <text x="50%" y="54%" fill="#8d8e90" font-size="24%" text-anchor="middle" alignment-baseline="middle">${state}°</text></svg>`; ]]]
            styles:
              custom_fields:
                thermostat:
                  [filter: "[[[ return entity.state === 'off' ? 'invert(1)' : 'none'; ]]]", 
                  top: 15%, left: 40%, font-size: 3vw, position: absolute, opacity: 0.6]
            template: thermostat
2 Likes

Any update on posting the icon svg code? I’d love to use some of them in my setup. Thanks!

I sent the link for my GitHub page with a private message because I’m not sure if it’s right to advertise on this posting for another GitHub.

Update: https://github.com/fastender/blob/tree/master/blob/icons

4 Likes

It’s fine. You can post here :stuck_out_tongue:

Hello
Could you please share the svg youre using for the echo-dot?
Thanks in advance

Hi,

for the last some days, I am playing around with passing an entity to an anchor and partially that works, however, not all of it :frowning:

I am using some window blinds and for those I have defined some scripts for putting them at different times of day at different heights. I am using the custom button in combination with the browser_mod.popup on tap_action.
On that pop_up I am using the entity: script for the different scripts. But because I have those in different rooms I have out all of that together in a template similar to the light template Mattias has defined in his yaml file.

However, here is where the problem starts:

  • the entity for a window blind is called “az_rollo_rechts”
  • the name of the script is az_rollo_geschlossen_nr
  • I have passed the entity to the anchor via: entity: ‘[[[ return entity.entity_id ]]]’ - this works fine.
  • now, when I want to add the script, I have to generate the script name, which I tried to do as follows: [[[ return ‘script.’ + entity.entity_id.substring(1, 9) + ‘geschlossen_nr’ ]]]

What I am trying to do here, is to put together the script name based on the entity-id and the script name structure, which should be:

  1. Part 1: "script.
  2. Part 2: substring 1-9 of the entity_id, which is: az_rollo_"
  3. Part 3: and now I am adding the last part: “geschlossen_nr”

But this does not work. I was also trying to define the name before I am moving this to the anchor, but I also cannot get that working :frowning:

An extract of the code looks like this:

- type: custom:button-card
  entity: cover.az_rollo_rechts
.
.
.
.
  template: rollos

The relevant extract of the template like this:

- entity: '[[[ return entity.entity_id ]]]'
  style: |
      :host {
       color: rgb(255,255,255,0.8);
      }
  name: Rollo schliessen
  icon: mdi:blinds
  tap-action:
    action: call_service
    service: script.turn_on
    service_data:
    entity_id: [[[ return 'script.' + entity.entity_id.substring(1, 9) + 'geschlossen_nr' ]]]

I am sure there is something wrong with the code in the brackets but I do not know what to change as I have made already masses of changes :wink:

Anybody can point me in the right direction?

Thanks a lot!

I’m not sure I understand what you’re trying to do. Can you give a more basic example with english entities? You could also try your luck in the button-card thread.

If I put [[[ return 'script.' + entity.entity_id.substring(1, 9) + 'geschlossen_nr' ]]] on my sensor.placeholder it returns script.ensor.plgeschlossen_nr which doesn’t look right.

substring(1, 9) = extract characters counting from zero not including 9
s[ensor.pl]aceholder

Yes, it is a challenge to describe for somebody who is not experienced in coding, like me :wink:
Thanks for the hint with starting from 0, I have tried to reflect that in the following example.

Let me give it a try:

  • there is an entity called: az_windowblind

  • there is also a script for that entity to close the window blind called: script.az_windowblind_closed_nr

Because I want to reuse the code via a template, I am trying to generate the script name with following syntax:

[[[ return 'script.' + entity.entity_id.substring(0, 13) + 'closed_nr' ]]]

in order to get script.az_windowblind_closed_nr.

I am doing this, as I have a specific syntax for the entity as well as for the script name following the same structure for different rooms, so that I can use a template in order not to repeatedly have the code in the yaml - learned from you :wink:

Whats the domain (cover, sensor, switch) for az_windowblind? You could just replace the domain like this

[[[ return entity.entity_id.replace('cover', 'script') + '_closed_nr'; ]]]
2 Likes

From now on I call you Mr.Genius :wink:

Works like charme, thank you, Mr Genius :sunglasses:

What you’ve created is amazing! I’m about to get into a new place and can’t wait to start working on the wall-mounted iPad dashboard using your config.

I’ve been struggling to get custom icons working. I have a custom icon set and I used to use the code inside the path="" in the svg code for the icons. I’ve used your “custom-icons.js” file and replace the code with the one I had, but doesn’t seem to work. How did you get the svg code to work? Something I’m missing?

Here’s an example:

<path d="M6.49438477,13 C6.2213436,13 6.22460938,13 6.49438477,13 L25.5056152,13 C25.7786564,13 25.7753906,13 25.5056152,13 L6.49438477,13 Z M27,9.99999999 C27.5522847,9.99999999 28,10.4477152 28,11 L28,21 C28,21.5522847 27.5522847,22 27,22 L5,22 C4.44771525,22 4,21.5522847 4,21 L4,11 C4,10.4477152 4.44771525,9.99999999 5,9.99999999 L27,9.99999999 Z M23.1262135,12.0007613 L8.87378648,12.0007613 C8.51186996,13.4057531 7.4057531,14.51187 6.00076134,14.8737865 L6.00076134,17.1262135 C7.40608802,17.4882163 8.51239729,18.5947743 8.87404517,20.0002435 L23.1259548,20.0002435 C23.4876889,18.5944393 24.5944393,17.4876889 26.0002435,17.1259548 L26.0002435,14.8740452 C24.5947743,14.5123973 23.4882163,13.406088 23.1262135,12.0007613 Z M16,13 C17.6568542,13 19,14.3431458 19,16 C19,17.6568542 17.6568542,19 16,19 C14.3431458,19 13,17.6568542 13,16 C13,14.3431458 14.3431458,13 16,13 Z"></path>

Would transform into:

'bill':
  'M6.49438477,13 C6.2213436,13 6.22460938,13 6.49438477,13 L25.5056152,13 C25.7786564,13 25.7753906,13 25.5056152,13 L6.49438477,13 Z M27,9.99999999 C27.5522847,9.99999999 28,10.4477152 28,11 L28,21 C28,21.5522847 27.5522847,22 27,22 L5,22 C4.44771525,22 4,21.5522847 4,21 L4,11 C4,10.4477152 4.44771525,9.99999999 5,9.99999999 L27,9.99999999 Z M23.1262135,12.0007613 L8.87378648,12.0007613 C8.51186996,13.4057531 7.4057531,14.51187 6.00076134,14.8737865 L6.00076134,17.1262135 C7.40608802,17.4882163 8.51239729,18.5947743 8.87404517,20.0002435 L23.1259548,20.0002435 C23.4876889,18.5944393 24.5944393,17.4876889 26.0002435,17.1259548 L26.0002435,14.8740452 C24.5947743,14.5123973 23.4882163,13.406088 23.1262135,12.0007613 Z M16,13 C17.6568542,13 19,14.3431458 19,16 C19,17.6568542 17.6568542,19 16,19 C14.3431458,19 13,17.6568542 13,16 C13,14.3431458 14.3431458,13 16,13 Z',

What am I missing?

I have an error in my Developer Tools / Logs. I know this is my own doing but I’m not sure how to resolve it.

Logger: homeassistant.util.yaml.loader
Source: util/yaml/loader.py:61 
First occurred: June 14, 2020, 7:48:13 AM (738 occurrences) 
Last logged: 6:00:08 AM

* YAML file /config/lovelace-panel.yaml contains duplicate key "entity". Check lines 15 and 2108.
* YAML file /config/lovelace-panel.yaml contains duplicate key "entity". Check lines 15 and 2115.
* YAML file /config/lovelace-panel.yaml contains duplicate key "entity". Check lines 15 and 2188.
* YAML file /config/lovelace-panel.yaml contains duplicate key "entity". Check lines 15 and 2671.
* YAML file /config/lovelace-panel.yaml contains duplicate key "entity". Check lines 15 and 2678.

I used most of the example panel yaml. Around line 15 in my code is

anchors:
  ⚓₁: &title
    entity: sensor.placeholder
    tap_action:
      action: none
    hold_action:
      action: none
    type: state-label

On my panels I wanted to have the time and the temperature as well as various other headings around. I was having trouble with the markup card in the original configuration so I got rid of that and have been using this. Example around line 2108

          - entity: sensor.time
            <<: *title
            style:
              top: 9%
              left: 3%
              <<: *heading-style

I understand here that I am defining an entity for sensor.time and then the *title is taking from above so I understand that sensor.placeholder is being injected here hence the error.

I wanted my own fonts as well so around line 36 I have this to define heading style

  ⚓4: &heading-style
    color: '#bcbebf'
    font-family: DB Sans Cond
    font-size: 4vw
    font-weight: bold
    font-style: normal
    max-width: 1px
    cursor: default

My panels are working great. The headings, time and temperature are showing up where I intended but I get that error which I know is not sustainable.

I do have an issue in that my panels constantly (around 15 minutes) display that “your configuration has been changed, click refresh” etc. I am not sure if this is because of what I have done.

Can anyone help me remove the duplicate sensor to remove the error?

Thank you!!

This is what the left hand side looks like

AND THANK YOU for this project my panels look GREAT

3 Likes

Hey Mattias,

only now really discovering your different take, Ive added these nice info circles to my lights.

There’s some issue with the size and positioning when resizing the screen though:

Schermafbeelding 2020-06-15 om 17.40.13

this is what I added to my light button templates, directly copied from your repo.
do you have a suggestion how to fix this?

1 Like