Hello, I need a jump start on cutom:button-card please. I want to have a grid with 2 columns and and 4 rows inside a custom:button-card. In which I want to map the status of 4 sensors and the icon.
I have read the instructions but can’t get it to work.
Thanks and kind regards,
Andreas
Can you post what you’ve tried please?
Assuming you want them all spaced out the same then it would be something like this I think:
style:
grid:
- grid-template-areas: '"a b" "c d" "e f" "g h"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr 1fr
custom_fields:
a:
- align-self: start
b:
- align-self: start
custom_fields:
a:
b:
Where a->h are the elements you want to show and so on…
Hi Ben,
thanks for your request, was very helpful.
here is my first code, this code give me no result from the sensor (please look picture)
The sensor work with other card and is for present days to garbage removal. What is here my problem
Sorry for my bad english!
Thanks and kind regards,
Andreas
type: custom:button-card
entity: sensor.abfallbiotonne
name: Test
styles:
card:
- background-color: '#000044'
- border-radius: 15%
- width: 250px
- height: 150px
- padding: 10%
- font-size: 10px
grid:
- grid-template-areas: '"a b" "c d" "e f" "g h"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr 1fr
name:
- font-weight: bold
- font-size: 25px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
icon:
- color: |
[[[
if (states["sensor.abfallbiotonne"] > 2) return 'green';
else return 'red';
]]]
- width: 50%
- margin-top: '1%'
custom_fields:
a:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- color: |
[[[
if (states["sensor.abfallbiotonne"].state > 7 ) return 'green';
else return 'yellow';
]]]
b:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- color: |
[[[
if (states["sensor.abfallgelbersack"].state > 7 ) return 'green';
else return 'yellow';
]]]
c:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- color: |
[[[
if (states["sensor.abfallpapier"].state > 7 ) return 'green';
else return 'yellow';
]]]
d:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- color: |
[[[
if (states["sensor.abfallrestmuell"].state > 7 ) return 'green';
else return 'yellow';
]]]
It looks like you’ve only provided custom_fields: in the style: section, but not the actual content for those fields. In the third example here, note that there’s a custom_fields: section under style: and another that’s a peer to style: that supplies the content for those fields.
As rccoleman says.
The custom_fields entry should be indented the same as your style section and look something like this:
custom_fields:
a: |
[[[
return `[code for the value of 'a']`
]]]
b: |
[[[
return `[code for the value of 'b']`
]]]
c: |
[[[
return `[code for the value of 'c']`
]]]
d: |
[[[
return `[code for the value of 'd']`
]]]
Note that the quote marks around the return values are not single quotes, but reverse single quotes (probably the key next to the 1 key on your keyboard). You can put all kinds of coding in that area. For instance, here’s one I use for displaying a status tile in my UI.
m0: |
[[[
if ('[[m0_show]]' == 'true') {
var icon = '[[m0_icon_off]]';
var icon_color = '[[m0_icon_color_off]]';
var status = '[[m0_status_off]]';
if (states['[[m0_entity]]'].state == '[[m0_on_state]]') {
icon = '[[m0_icon_on]]';
status = '[[m0_status_on]]';
icon_color = '[[m0_icon_color_on]]';
}
return `<ha-icon icon=${icon}
style="width: 14px; height: 14px; color: ${icon_color};">
</ha-icon><span style="color: white";> ${status}</span>`
}
return ``
Note that the [[things_in_double_brackets]] are variables used by the decluttering_card and [[m0_show]] is a variable set to ‘true’ if I want to display the item and ‘false’ if I don’t.
Hi Rob, Hi Russel,
thanks for your repley and support. I will try now you code and i inform you over my result.
Thanks
Andreas
Hi,
the first step I have managed thanks to your help.
Now I have to learn how to format the individual cells and how to get the title to the top.
here is the code and this work.
type: custom:button-card
name: Test Garbage Removal
styles:
card:
- background-color: '#2500'
- border-radius: 15%
- border: solid 1px
- width: 250px
- height: 300px
- padding: 10%
- font-size: 10px
grid:
- grid-template-areas: '"ibio bio" "iyellow yellow" "ipaper paper" "irest rest"'
- grid-template-rows: 1fr 1fr 1fr 1fr
- grid-template-columns: 1fr 1fr
name:
- font-weight: bold
- font-size: 10px
- padding-bottom: 0px
custom_fields:
bio: |
[[[
return states['sensor.abfallbiotonne'].state
]]]
ibio: |
[[[
return 'bio image'
]]]
yellow: |
[[[
return states['sensor.abfallgelbersack'].state
]]]
iyellow: |
[[[
return 'yellow image'
]]]
paper: |
[[[
return states['sensor.abfallpapier'].state
]]]
ipaper: |
[[[
return 'blue image'
]]]
irest: |
[[[
return 'black image'
]]]
rest: |
[[[
return states['sensor.abfallrestmuell'].state
]]]
I understood the formatting to be such that an error is displayed for the following code, for example.
custom_fields:
bio:
- background-color: '#2500'
- border: solid 4px |
[[[
return states['sensor.abfallbiotonne'].state
]]]
ibio: |
[[[
return 'bio image'
]]]
Danke und Gruß
Andy
You can place the name at the top with the following. (The name is the friendly name for the main entity.)
grid:
- grid-template-areas: '"n n" "ibio bio" "iyellow yellow" "ipaper paper" "irest rest"'
- grid-template-rows: 1fr 1fr 1fr 1fr 1fr
- grid-template-columns: 1fr 1fr
[/quote]
The formatting can be in the styles section. (Or you can format individual parts of an item using code like I had above (with style=… bits))
You don’t need to specify “n” in the custom fields section (because it isn’t a custom field) but you can format it in the styles section. For further information all the advanced styling and grid, look at the readme of the custom:button-card GitHub entry.
Also check out Keith Townsend’s wonderful Fun with custom:button-card and Compact climate button using a custom button card threads.
Hi Russel,
thanks for your help by my start in Custom:button Card.
I played around a bit over the weekend to understand the function and logic. this is the first result of my playing around.
I still have 2 questions now:
a) How can I insert an image from the folder config\image e.g. into the grid irest if I want to have dear pure image instead of an icon?
b) How do I have to split the grid areas, if I want to have e.g. organic and yellow in one row and blue and black in one row?
type: custom:button-card
name: Müllabfuhr
styles:
custom_fields:
bio:
- border: solid 5px
- border-color: ' [[[ if (states["sensor.abfallbiotonne2"].state < 2) return "#ff0a00"; else return "#369b04" ]]] '
- border-radius: 50%
- width: 20px
- heigth: 20px
- font-weight: bold
- font-size: 15px
- color: ' [[[ if (states["sensor.abfallbiotonne2"].state < 2) return "#fff0"; else return "#369b04" ]]] '
- height: 20px
- background-color: '#FFFFFF'
- justify-self: center
- padding: 2px
ibio:
- border: solid 5px
- border-color: ' [[[ if (states["sensor.abfallbiotonne2"].state < 2) return "#ff0a00"; else return "#369b04" ]]] '
- border-radius: 50%
- width: 20px
- heigth: 20px
- font-weight: bold
- font-size: 15px
- background-color: '#A52A2A'
- padding: 2px
iyellow:
- border: solid 5px
- border-color: ' [[[ if (states["sensor.abfallgelbersack2"].state < 2) return "#ff0a00"; else return "#369b04" ]]] '
- border-radius: 50%
- width: 20px
- heigth: 20px
- font-weight: bold
- font-size: 15px
- background-color: '#FFFFFF'
- padding: 2px
yellow:
- border: solid 5px
- border-radius: 50%
- border-color: ' [[[ if (states["sensor.abfallgelbersack2"].state < 2) return "#ff0a00"; else return "#369b04" ]]] '
- width: 20px
- heigth: 20px
- font-size: 15px
- font-weight: bold
- color: ' [[[ if (states["sensor.abfallgelbersack2"].state < 2) return "#ff0a00"; else return "#369b04" ]]] '
- background-color: '#FFFFFF'
- justify-self: center
- height: 20px
- padding: 2px
paper:
- border: solid 5px
- border-radius: 50%
- color: ' [[[ if (states["sensor.abfallpapier2"].state < 2) return "#ff0a00"; else return "#369b04" ]]] '
- width: 20px
- heigth: 20px
- font-size: 15px
- font-weight: bold
- background-color: '#FFFFFF'
- height: 20px
- justify-self: center
- padding: 2px
ipaper:
- border: solid 5px
- border-color: ' [[[ if (states["sensor.abfallpapier2"].state < 2) return "#ff0a00"; else return "#369b04" ]]] '
- border-radius: 50%
- width: 20px
- heigth: 20px
- font-weight: bold
- font-size: 15px
- background-color: '#FFFFFF'
- padding: 2px
rest:
- border: solid 5px
- border-color: ' [[[ if (states["sensor.abfallrestmuell2"].state < 2) return "#ff0a00"; else return "#369b04" ]]] '
- border-radius: 50%
- width: 20px
- heigth: 20px
- font-weight: bold
- font-weight: bold
- font-size: 15px
- color: ' [[[ if (states["sensor.abfallrestmuell2"].state < 2) return "#ff0a00"; else return "#369b04" ]]] '
- height: 20px
- background-color: '#FFFFFF'
- justify-self: center
- padding: 2px
irest:
- border: solid 5px
- border-color: ' [[[ if (states["sensor.abfallrestmuell2"].state < 2) return "#ff0a00"; else return "#369b04" ]]] '
- border-radius: 50%
- width: 20px
- heigth: 20px
- font-weight: bold
- font-size: 15px
- background-color: '#FFFFFF'
- padding: 2px
card:
- background-color: '#313765'
- border-radius: 15%
- border: solid 1px
- width: 200px
- height: 200px
- padding: 5%
- font-size: 10px
grid:
- grid-template-areas: '"n n" "ibio bio" "iyellow yellow" "ipaper paper" "irest rest"'
- grid-template-rows: 1fr 1fr 1fr 1fr
- grid-template-columns: 1fr 1fr 1fr 1fr
- column-gap: 3px
- row-gap: 8px
name:
- font-weight: bold
- color: '#f0efea'
- font-size: 12px
- padding-bottom: 10px
- justify-self: middle
- align-self: top
ibio:
- border: solid 2px
custom_fields:
bio: |
[[[ return states['sensor.abfallbiotonne2'].state; ]]]
ibio: |
[[[
return `<ha-icon
icon="mdi:trash-can"
style="width: 20px; height: 20px; color: #FFF; ">
</ha-icon>`
]]]
yellow: |
[[[
return states['sensor.abfallgelbersack2'].state
]]]
iyellow: |
[[[
return `<ha-icon
icon="mdi:trash-can"
style="width: 20px; height: 20px; color: yellow; ">
</ha-icon>`
]]]
paper: |
[[[
return states['sensor.abfallpapier2'].state
]]]
ipaper: |
[[[
return `<ha-icon
icon="mdi:trash-can"
style="width: 20px; height: 20px; color: blue; ">
</ha-icon>`
]]]
irest: |
[[[
return `<ha-icon
icon="mdi:trash-can"
style="width: 20px; height: 20px; color: black; ">
</ha-icon>`
]]]
rest: |
[[[
return states['sensor.abfallrestmuell2'].state
]]]
Thanks and kind regards,
Andreas
To get two sets of items sharing rows, change your grid as follows:
grid:
- grid-template-areas: '"n n n n" "ibio bio iyellow yellow" "ipaper paper irest rest"'
- grid-template-rows: 1fr 1fr 1fr
- grid-template-columns: 1fr 1fr 1fr 1fr
- column-gap: 3px
- row-gap: 8px
I have had zero CSS Grid skills, then I stumbled upon this fantastic tool: https://grid.layoutit.com
It all makes so so so much sense now. I have now completely reworked my entire UI (by using layout-card) and all my button-card templates. It’s a great way to create your own grids and also learn some things along the way.
Thanks. I’ve added that to my link list.
Hi,
here is my result from my last weekend
and the code:
`type: custom:button-card
name: Müllabfuhr
styles:
custom_fields:
bio:
- border: solid 5px
- border-color: ' [[[ if (states["sensor.abfallbiotonne2"].state < 2) return "#ff0a00"; else return "#369b04" ]]] '
- border-radius: 50%
- width: 20px
- heigth: 20px
- font-weight: bold
- font-size: 15px
- color: ' [[[ if (states["sensor.abfallbiotonne2"].state < 2) return "#fff0"; else return "#369b04" ]]] '
- height: 20px
- background-color: '#FFFFFF'
- justify-self: center
- padding: 2px
ibio:
- border: solid 5px
- border-color: ' [[[ if (states["sensor.abfallbiotonne2"].state <= 2) return "#ff0a00"; if (states["sensor.abfallbiotonne2"].state <= 5 && states["sensor.abfallbiotonne2"].state > 2) return "#FF8000"; else return "#369b04" ]]] '
- border-radius: 50%
- width: 20px
- heigth: 20px
- font-weight: bold
- font-size: 15px
- background-color: '#A52A2A'
- padding: 2px
- animation: ' [[[ if (states["sensor.abfallbiotonne2"].state <= 2) return "blink .7s linear infinite"; if (states["sensor.abfallbiotonne2"].state <= 5 && states["sensor.abfallbiotonne2"].state > 2) return "blink 2.5s linear infinite"; ]]] '
iyellow:
- border: solid 5px
- border-color: ' [[[ if (states["sensor.abfallgelbersack2"].state <= 2) return "#ff0a00"; if (states["sensor.abfallgelbersack2"].state <= 5 && states["sensor.abfallgelbersack"].state > 2) return "#FF8000"; else return "#369b04" ]]] '
- border-radius: 50%
- width: 20px
- heigth: 20px
- font-weight: bold
- font-size: 15px
- background-color: '#FFFFFF'
- padding: 2px
- animation: ' [[[ if (states["sensor.abfallgelbersack2"].state <= 2) return "blink .7s linear infinite"; if (states["sensor.abfallgelbersack2"].state <= 5 && states["sensor.abfallgelbersack2"].state > 2) return "blink 2.5s linear infinite"; ]]] '
yellow:
- border: solid 5px
- border-radius: 50%
- border-color: ' [[[ if (states["sensor.abfallgelbersack2"].state <= 2) return "#ff0a00"; if (states["sensor.abfallgelbersack2"].state <= 5 && states["sensor.abfallgelbersack2"].state > 2) return "#FF8000"; else return "#369b04" ]]] '
- width: 20px
- heigth: 20px
- font-size: 15px
- font-weight: bold
- color: ' [[[ if (states["sensor.abfallgelbersack2"].state < 2) return "#ff0a00"; else return "#369b04" ]]] '
- background-color: '#FFFFFF'
- justify-self: center
- height: 20px
- padding: 2px
paper:
- border: solid 5px
- border-radius: 50%
- border-color: ' [[[ if (states["sensor.abfallpapier2"].state <= 2) return "#ff0a00"; if (states["sensor.abfallpapier2"].state <= 5 && states["sensor.abfallpapier2"].state > 2) return "#FF8000"; else return "#369b04" ]]] '
- color: ' [[[ if (states["sensor.abfallpapier2"].state < 2) return "#ff0a00"; else return "#369b04" ]]] '
- width: 20px
- heigth: 20px
- font-size: 15px
- font-weight: bold
- background-color: '#FFFFFF'
- height: 20px
- justify-self: center
- padding: 2px
ipaper:
- border: solid 5px
- border-color: ' [[[ if (states["sensor.abfallpapier2"].state <= 2) return "#ff0a00"; if (states["sensor.abfallpapier2"].state <= 5 && states["sensor.abfallpapier"].state > 2) return "#FF8000"; else return "#369b04" ]]] '
- border-radius: 50%
- width: 20px
- heigth: 20px
- font-weight: bold
- font-size: 15px
- background-color: '#FFFFFF'
- padding: 2px
- animation: ' [[[ if (states["sensor.abfallpapier2"].state <= 2) return "blink .7s linear infinite"; if (states["sensor.abfallpapier2"].state <= 5 && states["sensor.abfallpapier2"].state > 2) return "blink 2.5s linear infinite"; ]]] '
rest:
- border: solid 5px
- border-color: ' [[[ if (states["sensor.abfallrestmuell2"].state <= 2) return "#ff0a00"; if (states["sensor.abfallrestmuell2"].state <= 5 && states["sensor.abfallrestmuell2"].state > 2) return "#FF8000"; else return "#369b04" ]]] '
- border-radius: 50%
- width: 20px
- heigth: 20px
- font-weight: bold
- font-weight: bold
- font-size: 15px
- color: ' [[[ if (states["sensor.abfallrestmuell2"].state < 2) return "#ff0a00"; else return "#369b04" ]]] '
- height: 20px
- background-color: '#FFFFFF'
- justify-self: center
- padding: 2px
irest:
- border: solid 5px
- border-color: ' [[[ if (states["sensor.abfallrestmuell2"].state <= 2) return "#ff0a00"; if (states["sensor.abfallrestmuell2"].state <= 5 && states["sensor.abfallrestmuell2"].state > 2) return "#FF8000"; else return "#369b04" ]]] '
- border-radius: 50%
- width: 20px
- heigth: 20px
- font-weight: bold
- font-size: 15px
- background-color: '#FFFFFF'
- padding: 2px
card:
- border-radius: 9%
- width: 150px
- height: 130px
- padding: 1%
- font-size: 10px
grid:
- grid-template-areas: '"n n n n" "ibio iyellow ipaper irest" "bio yellow paper rest"'
- grid-template-rows: 1fr 1fr 1fr
- grid-template-columns: 1fr 1fr 1fr 1fr 1fr
- column-gap: 1.5px
- row-gap: 6px
name:
- font-weight: bold
- border: solid 1px
- color: '#f0efea'
- font-size: 12px
- padding-bottom: 0px
- justify-self: middle
- align-self: top
custom_fields:
bio: |
[[[ return states['sensor.abfallbiotonne2'].state; ]]]
ibio: |
[[[
return `<ha-icon
icon="mdi:trash-can"
style="width: 20px; height: 20px; color: #FFF; ">
</ha-icon>`
]]]
yellow: |
[[[
return states['sensor.abfallgelbersack2'].state
]]]
iyellow: |
[[[
return `<ha-icon
icon="mdi:trash-can"
style="width: 20px; height: 20px; color: yellow; ">
</ha-icon>`
]]]
paper: |
[[[
return states['sensor.abfallpapier2'].state
]]]
ipaper: |
[[[
return `<ha-icon
icon="mdi:trash-can"
style="width: 20px; height: 20px; color: blue; ">
</ha-icon>`
]]]
irest: |
[[[
return `<ha-icon
icon="mdi:trash-can"
style="width: 20px; height: 20px; color: black; ">
</ha-icon>`
]]]
rest: |
[[[
return states['sensor.abfallrestmuell2'].state
]]]
for a beginner i’m satisfied.
One more question about learning:
how do I insert an image in the following code if I don’t want an icon?
irest: |
[[[
return `<ha-icon
icon="mdi:trash-can"
style="width: 20px; height: 20px; color: black; ">
</ha-icon>`
]]]
Thanks and kind regards,
Andreas