You are awesome ! This did the trick !
Hi Rusell,
Iām trying to build a colour picker inside love lace. Iām using the following to create the card.
cards:
- type: entities
entities:
- type: "custom:slider-entity-row"
entity: input_number.input_color
full_row: true
hide_state: true
attribute: hue
style: |
ha-card {
background: linear-gradient(to right, rgb(255,0,0) 0%, rgb(255,255,0) 16.6%, rgb(0,255,0) 33.2%, rgb(0,255,255) 49.8%, rgb(0,0,255) 66.4%, rgb(255,0,255) 83%, rgb(255,0,0) 100%);
}
Result
Now I want the icon associated with the colour picker to take the same colour and the light itself to take on the colour.
the logic is something like the following
if (states["input_number.input_color"].state <= 16.6)
return "rgb(255, states["input_number.input_color"].state/16.6*255, 0)";
else if (states["input_number.input_color"].state <= 33.2)
return "rgb(255- (states["input_number.input_color"].state-16.6)/16.6*255, 255, 0)";
else if (states["input_number.input_color"].state <= 49.8)
return "rgb(0, 255, (states["input_number.input_color"].state-33.2)/16.6*255)";
else if (states["input_number.input_color"].state <= 66.4)
return "rgb(0, 255- (states["input_number.input_color"].state-49.8)/16.6*255, 255)";
else if (states["input_number.input_color"].state <= 83)
return "rgb((states["input_number.input_color"].state-49.8)/16.6*255, 0, 255)";
else
return "rgb(255, 0, 255- (states["input_number.input_color"].state-83)/16.6*255)";
Any ideas ?
Within the card definition in Lovelace:
styles:
icon:
- color: |
[[[
if (states["input_number.input_color"].state <= 16.6)
return "rgb(255, states["input_number.input_color"].state/16.6*255, 0)";
if (states["input_number.input_color"].state <= 33.2)
return "rgb(255- (states["input_number.input_color"].state-16.6)/16.6*255, 255, 0)";
if (states["input_number.input_color"].state <= 49.8)
return "rgb(0, 255, (states["input_number.input_color"].state-33.2)/16.6*255)";
if (states["input_number.input_color"].state <= 66.4)
return "rgb(0, 255- (states["input_number.input_color"].state-49.8)/16.6*255, 255)";
if (states["input_number.input_color"].state <= 83)
return "rgb((states["input_number.input_color"].state-49.8)/16.6*255, 0, 255)";
return "rgb(255, 0, 255- (states["input_number.input_color"].state-83)/16.6*255)";
Note that because the returns donāt execute anything following, we donāt actually need the āelse ifsā.
I havenāt tested this code, but it should be about what you need. Iām also assuming that the icon is the icon associated with the entity. If thatās not the case, thereās another way to code this.
Thank you for your help. Iām now looking to find a way to get this in a variable so I can use it multiple times. Any ideas there ?
And how can I create one card that includes multiple sliders. The purpose is to have one card for a light which you can easily change the color, brightness or switch to temperatue.
I couldnt get the override working. Has something changed?
@alkissack, it should work, but I just tested it locally and it didnāt work. I wonder if something changed in the custom button card itself since I wrote that post? If you change it directly in the template it works fine, so itās the override feature that isnāt working as expected. Feel free to create a bug ticket on github for it and see if the author has any insight into the issue. You may use my example yaml for the ticket if you like. In the meantime, you can create a separate template with each combination of hot/cold range you need.
Thanks Keith
very beautiful slider!
but, how do you get this card assigned to a lamp?
Hi,
your dashboard looks great.
can you share it?
Hi,
I have a custom button card that when pressed opens a climate pop up. All good up to here.
I saw that climate has āhvac_modesā with states āheatā and āoffā and hvac_action with 3 states: āidleā, āheatingā and āoffā.
I want that button to have 3 colors: red glow around button and red name/icon that blinks if my thermostat is actively heating, white name/icon when idle and blue if OFF.
All I manage to do is to get climate state (heat and off) and set red glow and red blinking name/icon when idle and blue when off.
This is my button code and button card:
type: custom:button-card
entity: climate.heating
icon: mdi:heat-wave
name: Climate
show_name: true
show_state: false
layout: vertical
size: 20%
styles:
card:
- height: 55px
- background-color: rgb(33,38,40)
- border: 1px solid rgb(80,80,80)
- border-radius: 10%
- font-family: sans-serif
- padding: 5%
- color: white
label:
- color: white
- font-size: 7px
- justify-self: start
- padding: 0px 2px
name:
- text-transform: none
- font-size: 13px
- justify-self: center
- padding: 0px 5px
icon:
- color: white
- width: 30px
- height: 30px
- padding: 0px 0px 5px 0px
state:
- justify-self: null
- font-size: 11px
- padding: 0px 0px
state:
- value: heat
styles:
state:
- color: red
name:
- color: red
icon:
- color: red
- animation:
- blink 2s linear infinite
card:
- filter: drop-shadow(0 0 1.0rem rgb(136,8,8))
- border: 10px
- value: idle
styles:
state:
- color: white
name:
- color: white
icon:
- color: white
- value: 'off'
styles:
state:
- color: green
name:
- color: green
icon:
- color: green
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Heating
style:
$: |
.mdc-dialog
.mdc-dialog__container
.mdc-dialog__surface {
border-radius: 25px;
}
.mdc-dialog
.mdc-dialog__content {
padding: 40px 40px !important;
}
content:
type: horizontal-stack
cards:
- type: custom:better-thermostat-ui-card
entity: climate.heating
eco_temperature: 22
double_tap_action:
action: more-info
How do I set button collors and animations based on those 3 hvac_action instead of hvac_modes states?
Sorry to reply to a post over 2 years old, but this dashboard is incredible. I marvel that you were able to do most of this with the custom button card. Do you have the lovelace yaml code posted on github, or can you post it here? I would love to study it to better understand the techniques you used. If not, do you mind if I ask you a few questions about it?
Hi Keith, trying to show humidity to the bigtemp card, the humidity sensor for NEST is an individual sensor and doesnāt have attributes, instead it is the state.
Any advice how to show it on the card ?
@Mmohab, you should be able to change the logic in the javascript for the humidity card in custom fields.
custom_fields:
humidity:
card:
state_display: |
[[[
if (entity.attributes.current_humidity)
return entity.attributes.current_humidity;
return variables.alt_humidity_entity && states[variables.alt_humidity_entity].state;
]]]
1 Like
Thanks a lot, done
Thank you for the nice code. So customized it for me, because i want the outdoor temperatur as a big number only. So it works good, but the card shows an undefined, when the sensor has no decimal place if itās a whole number.
Is it possible to show a zero than? x.0
type: custom:button-card
entity: sensor.outdoor_temperature
show_state: true
show_icon: false
show_name: false
show_label: true
state_display: '[[[ return parseInt(entity.state) + "Ā°" ]]]'
label: '[[[ return "." + entity.state.split(".")[1] ]]]'
styles:
grid:
- display: contents
img_cell:
- display: contents
state:
- color: var(--primary-text-color)
- font-size: 105px
- line-height: 125px
- text-shadow: 0 0 2px black
- overflow: visible
- z-index: 1
label:
- color: var(--primary-text-color)
- position: absolute
- bottom: 0
- left: 200px
- font-size: 40px
- line-height: 105px
- font-weight: 600
- text-shadow: 0 0 2px black
- overflow: visible
@Soulfly999, try this for label:
label: '[[[ return "." + (entity.state.split(".")[1] || 0) ]]]'
You can also just delete the label config if you donāt want to show the decimal.
1 Like