andyowl
(Andreas Voigt)
August 2, 2021, 12:26am
1
Hello,
I have created a grid with a title and 2 columns and 2 rows.
I have assigned each area an exact height and width (65x65). But it is not converted. Where is my thinking error?
Here is my Code
type: custom:button-card
name: Preise E10
styles:
grid:
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr
- grid-template-areas: ' "n n" "ijet pjet" "iaral paral"'
- column-gap: 5px
- row-gap: 5px
- border: solid 1px
- height: 135px
- height: 135px
card:
- border-radius: 0%
- width: 135px
- height: 135px
- padding: 1%
- font-size: 10px
custom_fields:
pjet:
- border: solid 1px
- justify-self: center;
- align-self: center;
- grid-area: paral;
- width: 65px;
- height: 65px;
- padding: 2px
ijet:
- border: solid 1px
- justify-self: center;
- align-self: center;
- grid-area: ijet;
- width: 65px;
- height: 65px;
- padding: 2px
iaral:
- border: solid 1px
- justify-self: center;
- align-self: center;
- width: 65px;
- height: 65px;
- justify-self: center;
- align-self: center;
- padding: 2px
paral:
- border: solid 1px
- justify-self: center;
- align-self: center;
- grid-area: paral;
- width: 65px;
- height: 65px;
- padding: 2px
name:
- font-weight: bold
- border: solid 1px
- color: '#000'
- font-size: 12px
- padding: 2px
- justify-self: middle
- align-self: top
- width: 65px;
- height: 65px;
custom_fields:
pjet: >
[[[ return
states['sensor.tankerkoenig_jet_wuelfrath_wilhelmstr_34_38_e10'].state; ]]]
ijet: |
[[[
return ' Logo Jet'
]]]
paral: |
[[[
return states['sensor.tankerkoenig_aral_tankstelle_e10'].state
]]]
iaral: |
[[[
return ' Logo ARAL'
]]]
Thanks and kind regards,
Andreas
pedolsky
(Pedolsky)
August 2, 2021, 11:09am
2
You „heighted“ twice in your code, see line 12.
andyowl
(Andreas Voigt)
August 2, 2021, 5:00pm
3
Hi,
Thanks for this note, the same result,
I no understand why he does not take into account the data for height and weight.
Thanks and kind regards
Andreas
pedolsky
(Pedolsky)
August 2, 2021, 5:25pm
4
Ah, I’ve seen it at second glance now. Remove the semicolons.
1 Like
andyowl
(Andreas Voigt)
August 2, 2021, 6:08pm
5
Hi, you are my hero. This is the right solution.
Thanks
Andreas
andyowl
(Andreas Voigt)
August 2, 2021, 6:13pm
6
Is possible you can help me in this case?
Hi,
here is my result from my last weekend[HAforum5]
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";…
I try insert image from folder config/image.
Thanks I’m advance
Andreas
pedolsky
(Pedolsky)
August 2, 2021, 6:52pm
7
Looks cute!
Try something like this in your custom_field:
return `<img src="/local/PATH/TO/YOUR/IMAGE">`
andyowl
(Andreas Voigt)
August 17, 2021, 8:36pm
8
Hi,
here is my result from my work and your help.
Thanks in advance
Andreas
2 Likes
pedolsky
(Pedolsky)
August 17, 2021, 9:02pm
9
Really cool work, congrats!
andyowl
(Andreas Voigt)
January 13, 2022, 10:29pm
10
Hi,
what do I have to do to get both cards in one custom card next to each other?
Thanks and kind regards,
Andy
pedolsky
(Pedolsky)
January 14, 2022, 7:01am
11
andyowl
(Andreas Voigt)
February 3, 2022, 7:42pm
12
Hi,
i create a cutom:button card with 4 frames (please read below code) i no understand what is my problem if i insert below second code in frame 1. can you help me?
Thanks and kiind regards,
Andreas
type: custom:button-card
name: Erdgeschoss
styles:
grid:
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr 1fr 1fr
- grid-template-areas: ' "grid1 grid2" "grid3 grid4"'
- column-gap: 5px
- row-gap: 5px
- border: solid 0px
- border-color: '#000'
- height: 200px
- width: 300px
- margin: 5px 5px
- showname: false
card:
- border-radius: 9%
- width: 270px
- height: 200px
- font-size: 10px
custom_fields:
grid1:
- background-color: '#0000FF'
- border: solid 3px
- border-radius: 9px
- border-color: '#000'
- align-items: center
- justify-content: center
- display: flex
- width: 100px
- height: 100px
- font-size: 12px
- font-weight: bold
- color: '#fff'
- margin-left: 5px
- margin-top: 5px
grid2:
- background-color: '#00FF00'
- border: solid 3px
- border-radius: 9px
- border-color: '#000'
- align-items: center
- justify-content: center
- display: flex
- width: 130px
- height: 100px
- font-size: 12px
- font-weight: bold
- color: '#fff'
- margin-left: 0px
- margin-top: 5px
grid3:
- background-color: '#ffff00'
- border: solid 3px
- border-radius: 9px
- border-color: '#000'
- align-items: center
- justify-content: center
- display: flex
- width: 100px
- height: 65px
- font-size: 12px
- font-weight: bold
- color: '#000'
- margin-left: 5px
grid4:
- background-color: '#FF0000'
- border: solid 3px
- border-radius: 9px
- border-color: '#000'
- align-items: center
- justify-content: center
- display: flex
- width: 130px
- height: 65px
- font-size: 12px
- font-weight: bold
- color: '#000'
custom_fields:
grid2: |
[[[ return `Frame2` ]]]
grid1: |
[[[
return `Frame1`
]]]
grid4: |
[[[
return `Frame4`
]]]
grid3: |
[[[
return `Frame3`
]]]
Code from my card if i like insert in the frame 1
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 "#ff0a00"; 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: '#FFFF00'
- 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: '#0404B4'
- 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: '#000'
- padding: 2px
- animation: ' [[[ if (states["sensor.abfallrestmuell2"].state <= 2) return "blink .7s linear infinite"; if (states["sensor.abfallrestmuell2"].state <= 5 && states["sensor.abfallrestmuell2"].state > 2) return "blink 2.5s linear infinite"; ]]] '
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 0px
- color: '#FFF'
- font-size: 15px
- 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: black; ">
</ha-icon>`
]]]
paper: |
[[[
return states['sensor.abfallpapier2'].state
]]]
ipaper: |
[[[
return `<ha-icon
icon="mdi:trash-can"
style="width: 20px; height: 20px; color: white; ">
</ha-icon>`
]]]
irest: |
[[[
return `<ha-icon
icon="mdi:trash-can"
style="width: 20px; height: 20px; color: white; ">
</ha-icon>`
]]]
rest: |
[[[
return states['sensor.abfallrestmuell2'].state
]]]
pedolsky
(Pedolsky)
February 3, 2022, 10:33pm
13
You can put any card into a custom_field in this way:
custom_fields:
grid2:
card:
type: custom:button-card
name: Müllabfuhr
styles:
…
…
Add this to your main card to ensure, that your nested sensors update properly:
type: custom:button-card
triggers_update: all
name: Erdgeschoss
styles:
…
…