Thank you very much, I really wanted to understand how to inject css and you answered me.
Thank you! 
Mark
Genius, the way you explained it here. Thank you very much.
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.
8 Likes
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.
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.
2 Likes
You’re absolutely right, thank you very much!
Mattias, could you share your code?
Bye
Sandro
In my repo. Python folder and the end of sensors.yaml
1 Like
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]]'
I do this inside the popup window
- type: custom:hui-horizontal-stack-card
style: '#root {justify-content: space-evenly;}'
cards:
- type: custom:button-card
...
1 Like
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% )
2 Likes
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.
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.
Hi
Please could you share with use the configuration about
turn_off: service: shell_command.turn_off_nas
I tried to generate a command to power off my Synology nas but was not sucessfully.
Thanks in advance
I maybe being simple, but how do I install this? Do I group the components mention in the first post or is there a bunch of files etc I can grab and upload?
1 Like
I got my core set up and sensors now i am up to organizing the dash… Man this thread is a wealth if information!
Mattias how LONG did all of this take you!?
Maybe I just dont know enough (especially of CSS), in order to make this go quicker for me!
I am trying to pin point the part of the code that gives you this neat spacing and grouping. between the buttons. Is that spacing defined in the templates?
Thanks!!
[EDIT]
Alright, so i figured it out how to do the placement.
Picture card, with percentages as to where to place the cards on the screen.
Templates at the top which have the button, switch. etc styling
One thing I have not been able to figure out…
[Question]
How do you get a brightness slider instead of a switch on the light pop up card? I am only ever getting switches for all of my lights!
ehh??? any thoughts out there?
Hi Matthias. If i want to have a popup card witch shows picture element card and i want to place a prefix text in there how can i do this? I have also tried adding the anchor to the popup but it gives me error everytime.