Hey All,
So I have a great custom button card that I use for switches and other plugs in my home assistant and I’m wanting to do something similar for my main lights, but have a brightness slider so I can adjust the brightness of the main lights in each room.
Here is what my switch card config is along with a photo;
type: custom:button-card
entity: switch.living_room_lamp
name: Lamp
show_icon: false
styles:
card:
- border-radius: 25px
- border-style: none
- box-shadow: 0px 0px 10px -9px black
- background-color: |
[[[
return states['switch.living_room_lamp'].state === 'on' ? '#CEF595' : '';
]]]
grid:
- grid-template-areas: '"icon_cells" "n" "button"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
custom_fields:
icon_cells:
- justify-self: start
- margin-top: 12px
- margin-left: 15px
name:
- font-size: 90%
- font-weight: bold
- justify-self: start
- margin-top: 6px
- margin-left: 15px
- color: |
[[[
return states['switch.living_room_lamp'].state === 'on' ? '#000000' : 'grey';
]]]
custom_fields:
icon_cells: |
[[[
var state = states['switch.living_room_lamp'].state;
if(state == "on")
return `<ha-icon
icon="mdi:lamp"
style="width: 25px; height: 25px; color: black;">
</ha-icon>
`;
else
return `<ha-icon
icon="mdi:lamp-outline"
style="width: 25px; height: 25px; color: grey;">
</ha-icon>
`;
]]]
button:
card:
type: custom:button-card
entity: switch.living_room_lamp
show_icon: false
show_name: false
styles:
card:
- border-style: none
- margin-top: '-4%'
- margin-bottom: '-5%'
- background-color: transparent
grid:
- grid-template-areas: '"state icon_cells"'
- grid-template-columns: min-content 1fr
- grid-template-rows: min-content
custom_fields:
state:
- justify-self: start
- align-self: middle
- font-size: 12px
- filter: opacity(50%)
- margin-left: 15px
- margin-top: 1.6px
icon_cells:
- justify-self: end
- align-self: start
- margin-right: 15px
- width: 45px
custom_fields:
icon_cells: |
[[[
var state = states['switch.living_room_lamp'].state;
if(state == "on")
return `<ha-icon
icon="mdi:toggle-switch"
style="color: #000000;">
</ha-icon>
`;
else
return `<ha-icon
icon="mdi:toggle-switch-off"
style="color: grey;">
</ha-icon>
`;
]]]
state: |
[[[
var state = states['switch.living_room_lamp'].state
var power = states['sensor.media_centre_power'].state
if(state == "on")
return `<span style="color: black;">On</span>
`;
else
return `<span style="color: grey;">Off</span>
`;
]]]
I have this slider card from the rounded theme but when you put the two together side-by-side they’re not the same height and looks odd, and would prefer to use the code above for the main part of my code, and then have the slider in place where the button switch and state status is.
type: custom:button-card
name: Main Light
icon: '[[[ return entity.attributes.icon ]]]'
entity: light.living_room_light_switch
tap_action:
action: toggle
haptic: medium
hold_action:
action: more-info
haptic: medium
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: '[[[ return entity.entity_id ]]]'
colorMode: brightness
styles:
container:
- background: none
- border-radius: 100px
- overflow: visible
card:
- height: 16px
- padding: 0 8px
- background: |
[[[
if (entity.state == "on") return "linear-gradient(90deg, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 1) 100%)";
else return "var(--contrast4)";
]]]
track:
- overflow: visible
- background: none
progress:
- background: none
thumb:
- background: |
[[[
if (entity.state == "on") return "var(--black)";
if (entity.state == "off") return "var(--contrast20)";
else return "var(--contrast8)";
]]]
- top: 2px
- right: '-8px'
- height: 12px
- width: 12px
- border-radius: 10px
styles:
grid:
- grid-template-areas: '"i" "n" "slider"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
card:
- background: var(--contrast2)
- padding: 16px
- '--mdc-ripple-press-opacity': 0
img_cell:
- justify-self: start
- width: 24px
icon:
- width: 24px
- height: 24px
- color: var(--contrast8)
icon_cells:
- justify-self: start
- margin-top: 12px
- margin-left: 15px
name:
- justify-self: start
- font-size: 90%
- margin: 4px 0 12px 0
- color: var(--contrast8)
- font-weight: bold
state:
- value: 'on'
styles:
card:
- background: |
[[[
var color = entity.attributes?.rgb_color;
if (entity.state != "on"){
return 'var(--contrast20)';
}
else if (color){
return 'rgba(' + color + ')'
}
else{
return 'var(--yellow)'
}
]]]
icon:
- color: var(--black)
name:
- color: var(--black)
- value: 'off'
styles:
icon:
- color: var(--contrast20)
name:
- color: var(--contrast20)
Could someone educate me on adding in the custom-slider-v2 into the first code set so that the card themselves are the same height, whilst maintaining the slider functionality. Plus any other ideas of adding stuff to the card would be appreciated.
Many thanks