To come back to this question: For me it seems not different, sorry. In both pictures the centered “icon” is not centered. In your phone picture it isn’t that much, because the width in total is far less, but it isn’t centered.
And to the centered position in general: You set a position for the first “button” from the left, the second as well, and the third one comes from the right. This will never work as intended.
You should let the browser take care of positioning, and use eg. the grid template in button-card. And to sum it up, aspect_ratio is never a good idea in button-card, if you want to place things exactly.
See here, the width of the pic is exactly 400px in my display, 200px are just slightly off center:
thanx. modified code, but it doesnt work. pls advise
[[[
var hour = new Date().getHours();
var h = hour.toString().padStart(2, "0"); // current hour in format 08, 09, 10, 11
if (states['binary_sensor.kute_tana_' + h] == hour) return 'yellow';
]]]
Ok thanks.
if you can, would you correct the code for me?
show me how you would do it…
the three icons in a grid, for the central icon I need the button card though.
then vertical stack?
Guys, I need your help please. Is it possible to show an icon for a light at the right top corner? I use the button-card to show the state of a binary_sensor. I would like to have another icon in the same card, that shows the state of a light entity with an icon.
[[[
var hour = now().hour;
var h = hour.toString().padStart(2, "0"); // current hour in format 08, 09, 10, 11
if (states['binary_sensor.kute_tana_' + h] == hour) return 'yellow';
]]]
this gave me error: ButtonCardJSTemplateError: ReferenceError: now is not defined in ‘var hour = now().hour; var h = hour.toString().padStart(2, “0”); // current hour in format 08, 09,…’
when im was using version i wrote earlier there was no errors but also no results.
{% set hour = now().timestamp() |timestamp_custom("%H") %}
media_player.{{ hour}}
This provides a always leading zero
if you cannot do that directly in the buttom card, simply create a new binary sensor which provides the value you ask for.
his template isn’t jinja, it’s javascript, meaning everything in the template editor is the wrong template language. There is no tester for javascript btw, so you have to use online resources like https://playcode.io but you can’t use any of the built in variables and you have to print out your values with console.log()
Your previous template was fine accept you didn’t provide an else, which is most likely your problem.
[[[
var hour = new Date().getHours();
var h = hour.toString().padStart(2, "0"); // current hour in format 08, 09, 10, 11
return (states['binary_sensor.kute_tana_' + h] == hour) ? 'yellow' : 'blue';
]]]
If you don’t wnat to use the 1 line JS template…
[[[
var hour = new Date().getHours();
var h = hour.toString().padStart(2, "0"); // current hour in format 08, 09, 10, 11
if (states['binary_sensor.kute_tana_' + h] == hour)
return 'yellow';
else
return 'blue';
]]]
I’m sorry, but I don’t have the time right now, as I’m working hard on getting the “Minimalist theme” out in the open (first public beta today or tomorrow).
But I can give you an example out of that “theme”, that shows exactly, what you want to achieve. See the code underneath, it should get you started.
This is the code of a three button-card, it looks like this:
In the second line of that card you see three buttons next to each other. This is where you want to look at the code (same as above, here starts the “magic”):
The essence is: you can use as many custom_fields as you want, nested into each other. And you can simply use a horizontal-stack inside these custom_fields.
thanx man. its sort of work now. i see blue now and its still dont check what hour we have, color stays blue whatever sensor name i write there. pls advise.
Look just in the post above yours. That is an example, of what you want to achieve. It uses custom_fields to place the items and much more.
The problem is, the example in the documentation of button-card is exactly what one wants to see as an example. Nevertheless it is complicated stuff, and without understanding these basics, it won’t get you far. Believe me, I know what I’m talking about, I sat hours and read it over and over…
