I have developed the following person cards using button card.
I am thinking about making a change and wondering if there is a way to color the top half of the card (behind entity and location icon) based on the current state of each person entity? I have not been able to find a way to just color half of the card. Is this possible?
Forgive my crude drawing, but this is what I am thinking.
Here is my code as it stands now. Thanks in advance for any help.
person_complete:
variables:
state_on: >
[[[ return ['home'].indexOf(!entity || entity.state) !== -1; ]]]
state: >
[[[ return !entity || entity.state; ]]]
entity_id: >
[[[ return !entity || entity.entity_id; ]]]
entity_picture: >
[[[ return !entity || entity.attributes.entity_picture; ]]]
translate_home: Home
translate_not_home: Away
aspect_ratio: 1/1
show_state: false
show_label: false
show_icon: false
state_display: >
[[[
if (entity) {
return variables.state === 'home'
? variables.translate_home
: variables.state === 'not_home'
? variables.translate_not_home
: variables.state;
}
return variables.translate_unknown;
]]]
tap_action:
action: more-info
styles:
grid:
- grid-template-areas: |
"icon circle"
"n n"
"s s"
- grid-template-columns: repeat(2, 1fr)
- grid-template-rows: auto repeat(3, min-content)
- gap: 1.3%
- align-items: start
- will-change: transform
name:
- justify-self: start
- line-height: 110%
- font-size: 15px
- font-weight: bold
state:
- justify-self: start
- line-height: 110%
- font-size: 12px
card:
- --c-color-home: '#32a852'
- --c-color-away: rgb(255,0,0)
- --c-color-zone: '#ffbf00'
- --c-color-stationary: '#3182b7'
- --c-stroke-width: 2.3
- --c-icon-color-on: rgb(0,0,0)
- --c-icon-color-off: '#97989c'
- border-radius: 10px
- border-width: 0px
- -webkit-tap-highlight-color: rgba(0,0,0,0)
- transition: none
- --mdc-ripple-color: >
[[[
return variables.state_on
? 'rgb(0,0,0)'
: '#97989c';
]]]
- color: >
[[[
return variables.state_on
? 'rgb(0,0,0)'
: '#97989c';
]]]
- background-color: >
[[[
return variables.state_on
? 'rgba(255,255,255, 0.85)'
: 'rgba(115, 115, 115, 0.25)';
]]]
custom_fields:
icon:
- clip-path: circle()
- width: 85%
- pointer-events: none
- display: grid
circle:
- display: initial
- width: 88%
- margin: -3% 2% 0 0
- justify-self: end
- opacity: 1
custom_fields:
icon: >
[[[
return entity && variables.entity_picture
? `<img src="${variables.entity_picture}" width="100%">`
: null;
]]]
circle: >
[[[
if (variables.state === 'home') {
let input = entity.state,
r = 18,
c = r * 2 * Math.PI,
dasharray = c,
dashoffset = c - input / 100 * c;
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${r}" stroke='var(--c-color-home)' stroke-dashoffset="${dashoffset}" stroke-dasharray="${dasharray}" stroke-width='var(--c-stroke-width)' fill='var(--c-color-home)' style="transform: rotate(-90deg); transform-origin: 50% 50%;" />
<path d="M23 33.5V27.5H27V33.5H32V25.5H35L25 16.5 15 25.5H18V33.5H23Z" fill='var(--c-icon-color-on)'/>
</svg>
`;
}
if (variables.state === 'BHS') {
let input = entity.state,
r = 18,
c = r * 2 * Math.PI,
dasharray = c,
dashoffset = c - input / 100 * c;
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${r}" stroke='var(--c-color-zone)' stroke-dashoffset="${dashoffset}" stroke-dasharray="${dasharray}" stroke-width='var(--c-stroke-width)' fill='var(--c-color-zone)' style="transform: rotate(-90deg); transform-origin: 50% 50%;" />
<path d="M25 16 14 22 25 28 34 23.09V30H36V22M18 26.18V30.18L25 34 32 30.18V26.18L25 30 18 26.18Z" fill='var(--c-icon-color-off)'/>
</svg>
`;
}
if (variables.state === 'CCAC') {
let input = entity.state,
r = 18,
c = r * 2 * Math.PI,
dasharray = c,
dashoffset = c - input / 100 * c;
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${r}" stroke='var(--c-color-zone)' stroke-dashoffset="${dashoffset}" stroke-dasharray="${dasharray}" stroke-width='var(--c-stroke-width)' fill='var(--c-color-zone)' style="transform: rotate(-90deg); transform-origin: 50% 50%;" />
<path d="M25 16 14 22 25 28 34 23.09V30H36V22M18 26.18V30.18L25 34 32 30.18V26.18L25 30 18 26.18Z" fill='var(--c-icon-color-off)'/>
</svg>
`;
}
if (variables.state === 'Lowes') {
let input = entity.state,
r = 18,
c = r * 2 * Math.PI,
dasharray = c,
dashoffset = c - input / 100 * c;
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${r}" stroke='var(--c-color-zone)' stroke-dashoffset="${dashoffset}" stroke-dasharray="${dasharray}" stroke-width='var(--c-stroke-width)' fill='var(--c-color-zone)' style="transform: rotate(-90deg); transform-origin: 50% 50%;" />
<path d="M23 15.5H27A2 2 0 0 1 29 17.5V19.5H33A2 2 0 0 1 35 21.5V32.5A2 2 0 0 1 33 34.5H17C15.89 34.5 15 33.6 15 32.5V21.5C15 20.39 15.89 19.5 17 19.5H21V17.5C21 16.39 21.89 15.5 23 15.5M27 19.5V17.5H23V19.5H27Z" fill='var(--c-icon-color-off)'/>
</svg>
`;
}
if (variables.state === 'Stantec') {
let input = entity.state,
r = 18,
c = r * 2 * Math.PI,
dasharray = c,
dashoffset = c - input / 100 * c;
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${r}" stroke='var(--c-color-zone)' stroke-dashoffset="${dashoffset}" stroke-dasharray="${dasharray}" stroke-width='var(--c-stroke-width)' fill='var(--c-color-zone)' style="transform: rotate(-90deg); transform-origin: 50% 50%;" />
<path d="M23 15.5H27A2 2 0 0 1 29 17.5V19.5H33A2 2 0 0 1 35 21.5V32.5A2 2 0 0 1 33 34.5H17C15.89 34.5 15 33.6 15 32.5V21.5C15 20.39 15.89 19.5 17 19.5H21V17.5C21 16.39 21.89 15.5 23 15.5M27 19.5V17.5H23V19.5H27Z" fill='var(--c-icon-color-off)'/>
</svg>
`;
}
if (variables.state === 'Vernon') {
let input = entity.state,
r = 18,
c = r * 2 * Math.PI,
dasharray = c,
dashoffset = c - input / 100 * c;
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${r}" stroke='var(--c-color-zone)' stroke-dashoffset="${dashoffset}" stroke-dasharray="${dasharray}" stroke-width='var(--c-stroke-width)' fill='var(--c-color-zone)' style="transform: rotate(-90deg); transform-origin: 50% 50%;" />
<path d="M20.5 15A2 2 0 0 1 22.5 17 2 2 0 0 1 20.5 19 2 2 0 0 1 18.5 17 2 2 0 0 1 20.5 15M19 35V29H16L18.6 21.4C18.9 20.6 19.6 20 20.5 20 21.4 20 22.2 20.6 22.4 21.4L25 29 27.6 21.4C27.9 20.6 28.6 20 29.5 20 30.4 20 31.2 20.6 31.4 21.4L34 29H31V35H28V29H25L22 29V35H19M29.5 15A2 2 0 0 1 31.5 17 2 2 0 0 1 29.5 19 2 2 0 0 1 27.5 17 2 2 0 0 1 29.5 15Z" fill='var(--c-icon-color-off)'/>
</svg>
`;
} else {
let input = entity.state,
r = 18,
c = r * 2 * Math.PI,
dasharray = c,
dashoffset = c - input / 100 * c;
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${r}" stroke='var(--c-color-away)' stroke-dashoffset="${dashoffset}" stroke-dasharray="${dasharray}" stroke-width='var(--c-stroke-width)' fill='var(--c-color-away)' style="transform: rotate(-90deg); transform-origin: 50% 50%;" />
<path d="M36.5 26.5 32.5 30.5V27.5H23.5V25.5H32.5V22.5L36.5 26.5M16.5 33.5V25.5H13.5L23.5 16.5 30.5 22.8V23.5H28.29L23.5 19.19 18.5 23.69V31.5H28.5V29.5H30.5V33.5H16.5Z" fill='var(--c-icon-color-off)'/>
</svg>
`;
}
]]]
extra_styles: >
[[[
if (entity) {
if (entity.entity_id.split('.')[0] === 'light' && variables.state_on) {
// theme variable and conditions
let style = getComputedStyle(document.body),
theme_var = style.getPropertyValue('--button-card-light-color-temp'),
is_hsl = theme_var.startsWith('hsl('),
is_color_temp = entity.attributes.color_mode === 'color_temp';
if (is_hsl && is_color_temp && entity.attributes.brightness) {
// calculate lightness in hsl
let regex_pattern = /(\d+)(?!.*\d)/g,
brightness = entity.attributes.brightness / 2.54,
lightness = parseFloat(theme_var.match(regex_pattern)[0]),
min = lightness - 10,
max = lightness + 10,
calc_lightness = brightness * (max - min) / 100 + min;
var light_color = theme_var.replace(regex_pattern, calc_lightness);
}
else {
var light_color = 'var(--button-card-light-color)';
}
}
}
return `
/* * * * * * * * * * * * * * * * * *
* *
* LIGHT *
* *
* * * * * * * * * * * * * * * * * */
svg {
--light-color: ${
variables.state_on && entity.attributes.brightness
? light_color
: variables.state_on && !entity.attributes.brightness
? 'var(--state-icon-active-color);'
: 'var(--state-icon-color);' }
}
.light-color {
fill: var(--light-color);
transition: all 0.25s ease-out;
}
/* magnification */
:host {
--card-portrait: 1.4;
--card-phone: 2.271;
}
${this._config.template.includes('light') ? `
/* * * * * * * * * * * * * * * * * *
* *
* CIRCLE SLIDER *
* *
* * * * * * * * * * * * * * * * * */
#circle_slider {
opacity: 0;
appearance: none;
transform: rotate(270deg);
width: 90%;
position: absolute;
pointer-events: none;
cursor: grab;
left: 26%;
margin-top: 13%;
}
#circle_slider::-webkit-slider-thumb {
pointer-events: initial;
appearance: none;
width: 3vw;
height: 3vw;
border-radius: 50%;
background: green;
}
#circle_slider::-webkit-slider-runnable-track {
background: cornflowerblue;
}
#circle_slider::-moz-range-thumb {
pointer-events: initial;
appearance: none;
width: 3vw;
height: 3vw;
border-radius: 50%;
background: green;
}
#circle_slider::-moz-range-track {
background: cornflowerblue;
height: 3vw;
}
/* portrait */
@media screen and (max-width: 1200px) {
#circle_slider::-webkit-slider-thumb {
width: 4vw;
height: 4vw;
}
#circle_slider::-moz-range-thumb {
width: 4vw;
height: 4vw;
}
}
/* phone */
@media screen and (max-width: 800px) {
#circle_slider::-webkit-slider-thumb {
width: 5.8vw;
height: 5.8vw;
}
#circle_slider::-moz-range-thumb {
width: 5.8vw;
height: 5.8vw;
}
}
`:''}
/* * * * * * * * * * * * * * * * * *
* *
* BASE *
* *
* * * * * * * * * * * * * * * * * */
#container {
text-align: left !important;
z-index: 1;
}
#card {
padding: 10.9% 9.9% 9.9% 10.9%;
}
#state::first-letter {
text-transform: uppercase;
}
#name, #state {
font-size: var(--button-card-font-size);
font-weight: var(--button-card-font-weight);
letter-spacing: var(--button-card-letter-spacing);
}
`;
]]]
