A different take on designing a Lovelace UI

sjabby · May 3, 2020, 10:33pm

Sonos logo:

viewBox="0 0 50 50"><path d="M25.2,49.6l-13.65-.1a10.81,10.81,0,0,1-6.47-2.19A11.86,11.86,0,0,1,.8,41.13a27.31,27.31,0,0,1-.3-3V11.55A11,11,0,0,1,4.88,2.79,10.63,10.63,0,0,1,9.66.6a6.6,6.6,0,0,1,1.4-.1L27.49.4,38.35.5A10,10,0,0,1,45,2.89,11.11,11.11,0,0,1,49.2,9.46l.2,2.39.1,20.42-.1,6.67a10.42,10.42,0,0,1-2.19,5.88,11.58,11.58,0,0,1-6.77,4.38,11.08,11.08,0,0,1-1.9.2C38.45,49.5,25.2,49.6,25.2,49.6Zm2.23-23.94-5.27-4.94V29h1.57v-4.6L29,29.36V21.05H27.43ZM15.2,20.61A4.31,4.31,0,0,0,10.82,25a4.46,4.46,0,0,0,4.38,4.38,4.38,4.38,0,1,0,0-8.75m0,7.18A2.81,2.81,0,1,1,18,25a2.78,2.78,0,0,1-2.81,2.81M8.13,25a5.45,5.45,0,0,0-1.79-.78c-1.57-.45-1.57-.9-1.57-1.13,0-.44.56-.89,1.34-.89a3,3,0,0,1,1.46.45l.11.11,1.24-.9-.11-.11a3.86,3.86,0,0,0-2.7-1.12A3.45,3.45,0,0,0,4,21.28a2.24,2.24,0,0,0,0,3.59,5.42,5.42,0,0,0,1.8.79c1.57.44,1.57.89,1.57,1.12,0,.45-.56.9-1.35.9a3.24,3.24,0,0,1-1.46-.45l-.11-.12L3.19,28l.12.11A3.84,3.84,0,0,0,6,29.25a3.43,3.43,0,0,0,2.13-.68A2.34,2.34,0,0,0,9,26.78a2.53,2.53,0,0,0-.9-1.8M36,20.61A4.3,4.3,0,0,0,31.59,25,4.38,4.38,0,0,0,36,29.36,4.32,4.32,0,0,0,40.34,25,4.38,4.38,0,0,0,36,20.61m0,7.18A2.81,2.81,0,1,1,38.77,25,2.86,2.86,0,0,1,36,27.79M43,24.87a5.42,5.42,0,0,0,1.8.79c1.57.44,1.57.89,1.57,1.12,0,.45-.56.9-1.35.9a3.24,3.24,0,0,1-1.46-.45h-.11l-1.23.89.11.12a3.85,3.85,0,0,0,2.69,1.12,3.49,3.49,0,0,0,2.13-.67,2.25,2.25,0,0,0,0-3.6,5.36,5.36,0,0,0-1.79-.78c-1.57-.45-1.57-.9-1.57-1.12,0-.45.56-.9,1.34-.9a3.15,3.15,0,0,1,1.46.45l.12.11L48,22l-.11-.11a3.86,3.86,0,0,0-2.7-1.12,3.45,3.45,0,0,0-2.13.67,2.35,2.35,0,0,0-.9,1.8,1.67,1.67,0,0,0,.9,1.68" transform="translate(-0.5 -0.4)"/></svg>```

klogg · May 4, 2020, 6:57am

Mariusthvdb · May 4, 2020, 11:17am

ha, though copying this might indeed save some time, I’d be very interested in what is actually happening here, and how to do so myself, for other logo’s…

do you have a pointer to some explanation, or could elaborate yourself please?

sjabby · May 4, 2020, 11:49am

@Mariusthvdb check this post from @Mattias_Persson he mentiones the process.
So basically you can take any svg file edit it to your preference and size required, export and open in notepad to get this “code”.

fastender · May 5, 2020, 5:36pm

Hello @Mattias_Persson,

first of all I would like to thank you very much for your great work and especially for supporting us here with our questions. Really very commendable!

Since a short time I try to be inspired by your design.

I have made some progress now, but I need your advice regarding the choice of font.

In your yaml file you have modified the style for the element Light Popup Card as follows:

#brightnessValue {
                      color: rgba(255, 255, 255, 0.7); margin: -0.8em 0 0.7em 0; font-size: 1.9em; font-weight: 400; 
                      font-family: SF Display; letter-spacing: 0.04em; text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); }

This works fine for me, too. But I also use the Switch Popup Card, the Media Player Popup Card and also Cover Popup Card. (https://github.com/DBuit?tab=repositories)

However, I have not found a way to change the font family of these plugins. I know, actually I should ask the author of these plugins. But unfortunately I haven’t got an answer from him for weeks. Do you have a solution?

Many thanks.

Mattias_Persson · May 5, 2020, 8:34pm

I use chrome devtools. So, right click on an element and inspect. When you find your tag you can copy the selector. This time it was easy because the element has an id brightnessValue. If it didn’t have the id or class it would be something like div > div > h4.

Then use card-mod to inject the css.

style: |
  #brightnessValue {
    font-family: SF Display;
    color: red;
  }

The hard part is when you drill down too far you might encounter #shadow-root. So here the first selector is #root > hui-element > hui-markdown-card then $ to enter shadow root and then continue with next selector.

# remove padding from markdown-card inside picture elements
"#root > hui-element > hui-markdown-card":
  $: |
    ha-card > ha-markdown {padding: 0 !important;}

marima84 · May 5, 2020, 8:59pm

Thank you very much, I really wanted to understand how to inject css and you answered me.
Thank you!

Mark

fastender · May 6, 2020, 5:22am

Genius, the way you explained it here. Thank you very much.

sjabby · May 6, 2020, 10:22pm

@Mattias_Persson Could you share a screenshot of the popup hemma_data_kwh ?

Mattias_Persson · May 6, 2020, 11:20pm

Python to authenticate and scrape my electricity suppliers website. I split that into 12 sensors. Maybe an unnecessarily complicated approach but I couldn’t think of any other way to do it.

fastender · May 7, 2020, 6:22am

Hello again @Mattias_Persson, to display the brightness you use the following code (I modified it a little):

      custom_fields:
        info: >
          [[[ var brightness = Math.round( entity.attributes.brightness / 2.54
          ); if (entity.state === 'on')  return '<svg viewBox="0 0 50
          50"><circle id="c_brightness" cx="25" cy="25" r="20.5"
          stroke="#b2b2b2" stroke-width="1.5" fill="none" /><text x="52%"
          y="52%" fill="#8d8e90" font-size="14" font-family="San Francisco"
          text-anchor="middle" alignment-baseline="middle">' + brightness +
          '<tspan  style="font-size:10px; font-family: San Francisco;
          font-weight:700; letter-spacing: 0.1em;">%</tspan></text></svg>';
          ]]]

I wonder how this code can be adjusted to the volume of the Sonos speaker and also to the position of the shutters.

      entity.attributes.volume_level (for Speaker)

      entity.attributes.current_position (for the blinds)

Thanks again.

Mattias_Persson · May 7, 2020, 4:57pm

var brightness holds the value. Math.round(entity.attributes.brightness / 2.54 calculates brightness into percent. So if entity.attributes.volume_level already is in percent

#volume
var brightness = entity.attributes.volume_level

Nothing else has to be changed.

fastender · May 7, 2020, 6:43pm

You’re absolutely right, thank you very much!

Sdomotica_Automation · May 9, 2020, 12:10pm

Mattias, could you share your code?
Bye
Sandro

Mattias_Persson · May 11, 2020, 1:19am

In my repo. Python folder and the end of sensors.yaml

fastender · May 13, 2020, 7:36am

Hello, I have a question, although I know that it does not belong to this area here.

For days I have been trying to center a button in the popup window with the command “margin: 0 auto”

Somehow I don’t get any further, here is the section of the code and also a small video: https://imgur.com/sYDm0UT

        action: call-service
        service: browser_mod.popup
        service_data:
          card:
            cards:
              - type: custom:hui-horizontal-stack-card
                style: 'ha-card { width:50px; margin: 0 auto; box-shadow: unset; }'
                cards:
                - template: es-icon
                  type: 'custom:decluttering-card'
                  variables:
                    - template: '[[template]]'
                    - entity-1: '[[entity-1]]'
                    - name-1: '[[name-1]]'
                    - state-1: 'open'
                    - state-2: 'closed'
                    - circle-1: entity.attributes.current_position
                    - circle-2: 1
                    - circle-3: 'open'
                    - circle-4: current_position
                    - scene-hell: '[[scene-hell]]'
                    - scene-relax: '[[scene-relax]]'

Mattias_Persson · May 13, 2020, 10:34am

I do this inside the popup window

- type: custom:hui-horizontal-stack-card
  style: '#root {justify-content: space-evenly;}'
  cards:
  - type: custom:button-card
    ...

joseska · May 13, 2020, 4:17pm

Hi Mattias_Persson. Thanks for your work. Is a great inspiration for me. After many time, I have a rss news working. Thanks again

and a little tip. If you you can get a slider similar to imagen below. You need to add this code at your theme.yaml. long time searching the solution…

ha-slider-background: -webkit-linear-gradient( right, rgb(255, 160, 0) 0%, white 50%, rgb(166, 209, 255) 100% )

fastender · May 13, 2020, 7:53pm

Many thanks. I could solve the problem after many hours with this GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards.

eximo84 · May 14, 2020, 4:53pm

Can you explain how you use a loading wheel for slow responding things? I am using button cards and it would be nice to show a loading animation or something on those devices such as PC or a harmony activity.