skelso
December 15, 2021, 8:03am
6193
I’ve been pulling my hair out over this- trying to create a smaller thermostat card similar to the simple-thermostat integration.
Almost there but four small questions:
How do I make the sensor state (temperature) font larger?
How can I adjust the up/down button sizes to cover the top/bottom halves of the card?
How do I even out the spacing?
How do I get rid of the shadow behind each button? I got rid of it previously but it came back with 2021.12.1
type: custom:button-card
aspect_ratio: 1/1
styles:
card:
- padding: 8%
- shadow: 0px 0px 0px 0px
- margin: 0px 0px 0px 0px
- font-size: 24px
grid:
- grid-template-areas: '"upbutton upbutton" "mid mid" "downbutton downbutton"'
- grid-template-rows: 1fr 2fr 1fr
custom_fields:
upbutton:
- height: 20px
- align-self: middle
- justify-self: middle
- background: transparent
- box-shadow: none
- 'primary-background-color:': none
- '--ha-card-background': rgba(0, 0, 0, 0.0)
- '--ha-card-box-shadow': none
mid:
- align-self: middle
- justify-self: middle
- '--ha-card-box-shadow': none
- '--ha-card-background': rgba(0, 0, 0, 0.0)
downbutton:
- height: 20px
- align-self: end
- justify-self: middle
- '--ha-card-box-shadow': none
- '--ha-card-background': rgba(0, 0, 0, 0.0)
custom_fields:
upbutton:
card:
type: button
icon: mdi:chevron-up
tap_action:
action: call-service
service: input_number.increment
service_data:
entity_id: input_number.office_target_temp
mid:
card:
entity: input_number.office_target_temp
type: button
show_icon: false
show_name: false
show_state: true
tap_action:
action: fire-dom-event
browser_mod:
command: more_info
entity_id: climate.office_2
downbutton:
card:
type: button
icon: mdi:chevron-down
style: |
ha-card {
box-shadow: none;
}
tap_action:
action: call-service
service: input_number.decrement
service_data:
entity_id: input_number.office_target_temp
kimus
December 15, 2021, 10:23am
6194
you do better with "custom:numberbox-card" man…
Haze
December 17, 2021, 5:15am
6195
I am working on an aqara plug customer-button card, and started off the work from @potat0 above (thank you).
smart_plug_aqara:
triggers_update: all
name: "[[[ return variables.var_name ]]]"
#show_name: false
aspect_ratio: 1/1.1
styles:
img_cell:
- justify-content: start
- align-items: start
- margin: none
card:
- padding: 0.2em
- box-shadow: 0px 0px 3px 3px var(--light-primary-color)
#- background-color: var(--disabled-color)
- text-shadow: 0px 0px 5px black
- color: ivory
- font-size: 1em
- text-transform: capitalize
name:
- font-weight: bold
- font-size: 0.8em
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
- overflow: visible
icon:
- color: >
[[[
if (entity.state == 'on') return 'lime';
else return 'red';
]]]
- width: 80%
- margin-top: 0%
custom_fields:
gauge:
- '--ha-card-background': 'rgba(0, 0, 0, 0.0)'
bar:
- margin-top: '-5px'
- '--ha-card-background': 'rgba(0, 0, 0, 0.0)'
graph:
- '--ha-card-background': 'rgba(0, 0, 0, 0.0)'
grid:
- grid-template-areas: '"n n" "i gauge" "graph graph" "bar bar" '
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr 2fr 2fr 2fr
custom_fields:
gauge:
card:
style: |-
.type-gauge {
padding: 0%;
}
div.name {
font-size: 0px;
}
type: gauge
entity: |
[[[
if (states[entity.entity_id].state != 'unavailable') {
var ent = entity.entity_id
var ent_p = ent.replace("switch", "sensor")
ent_p += "_energy"
return `${[ent_p]}`}
]]]
min: 0
max: 1875
severity:
green: 0
yellow: 500
red: 1400
graph:
card:
type: 'custom:mini-graph-card'
entities:
- entity: |
[[[
if (states[entity.entity_id].state != 'unavailable') {
var ent = entity.entity_id
var ent_p = ent.replace("switch", "sensor")
ent_p += "_power"
return `${[ent_p]}`}
]]]
group: true
points_per_hour: 60
line_color: red
line_width: 5
hours_to_show: 24
update_interval: 10
show:
name: false
icon: false
state: false
points: false
labels: false
fill: false
bar:
card:
style: |-
bar-card-currentbar, bar-card-backgroundbar{
border-radius: 3px;
}
.card-content {
text-align: start;
padding: 0.2em
}
bar-card-name, bar-card-value {
overflow: visible;
font-size: 0.7em
font-weight: bold;
}
bar-card-value {
margin-right: auto;
font-size: 0.7em
font-weight: bold;
}
height: 25
animation:
state: 'on'
speed: 1
type: 'custom:bar-card'
entities:
- entity: |
[[[
if (states[entity.entity_id].state != 'unavailable') {
var ent = entity.entity_id
var ent_s = ent.replace("switch", "sensor")
ent_s += "_temperature"
return `${[ent_s]}`}
]]]
name: temp.
icon: 'mdi:thermometer'
min: 0
max: 300
severity:
- from: 0
to: 210
color: '#0000ff'
- from: 210
to: 220
color: '#00ffff'
- from: 220
to: 240
color: '#00ff00'
- from: 240
to: 250
color: '#ffa500'
- from: 250
to: 260
color: '#ff00ff'
- from: 260
to: 300
color: '#ff0000'
positions:
icon: 'inside'
name: inside
indicator: 'off'
hold_action:
action: toggle
tap_action:
action: call-service
service: browser_mod.popup
service_data:
card:
entities: |
[[[
var ent = entity.entity_id
var ent_power = ent.replace("switch", "sensor")
var ent_volt = ent.replace("switch", "sensor")
var ent_today = ent.replace("switch", "sensor")
var ent_month = ent.replace("switch", "sensor")
ent_power += "_power"
ent_volt += "_voltage"
ent_today += "_energy_today"
ent_month += "_energy_total"
return [ent,ent_power,ent_volt,ent_today,ent_month]
]]]
type: entities
title: |
[[[
return [entity.attributes.friendly_name]
]]]
This is how it looks like:
I am trying to see how I can make the box-shadow be the same color as the entity icon. so when on, I would like it to be a lime shadow, and when off, a red shadow.
Can someone point me in the right direction please?
potat0
December 17, 2021, 12:45pm
6196
smart_plug_aqara:
styles:
card:
- box-shadow: >
[[[
if (entity.state == 'on') return '0px 0px 3px 3px lime';
else return '0px 0px 3px 3px red';
]]]
Haze
December 17, 2021, 1:02pm
6197
Awesome! This worked exactly like I wanted. Learned something new. Thank you
Drealine
December 18, 2021, 1:01pm
6198
Hi,
Why ?
Thank you
Awesome!
tiwo3d
December 19, 2021, 2:13pm
6200
Helo,
lock:
enabled: >
{% if state_attr("sensor.ender_e3_sensor", "print_stats") is
search("'state': 'standby'")%}
false
{% else %}
true
{% endif %}
duration: 10
unlock: hold
in the template editor it works like a charm. But in the configuration file, the card is alwas locked.
{{ state_attr('sensor.ender_e3_sensor', 'print_stats') }}
to the devtools. It cames out like this:
{'print_duration': 0.0, 'total_duration': 0.0, 'filament_used': 0.0, 'filename': '', 'state': 'standby', 'message': ''}
It’s like an attribute of an attribute. I don’t know how to code it.
maurizio53
December 20, 2021, 6:32pm
6201
I want to show an entity_picture when the state of an entity is ‘on’ and another when the state is 'off,
state:
- value: "off"
styles:
card:
- border: 5px outset red
entity_picture:
- /local/backgrounds/away1.png
- value: "on"
styles:
card:
- border: 5px outset green
entity_picture:
- /local/backgrounds/home-custom.png
But the button doesn’t show any entity regardless of the entity state…
Vendo232
December 21, 2021, 4:50pm
6202
hi, can you share the whole card?
snowwiddow
December 22, 2021, 6:02pm
6203
Hi,
I Know that the custom button card can render html but I don’t know how to use css format.
table.minimalistBlack {
border: 3px solid #000000;
width: 100%;
text-align: left;
border-collapse: collapse;
}
table.minimalistBlack td, table.minimalistBlack th {
border: 1px solid #000000;
padding: 5px 4px;
}
table.minimalistBlack tbody td {
font-size: 13px;
}
table.minimalistBlack thead {
background: #CFCFCF;
background: -moz-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
background: -webkit-linear-gradient(top, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
background: linear-gradient(to bottom, #dbdbdb 0%, #d3d3d3 66%, #CFCFCF 100%);
border-bottom: 3px solid #000000;
}
table.minimalistBlack thead th {
font-size: 15px;
font-weight: bold;
color: #000000;
text-align: left;
}
table.minimalistBlack tfoot {
font-size: 14px;
font-weight: bold;
color: #000000;
border-top: 3px solid #000000;
}
table.minimalistBlack tfoot td {
font-size: 14px;
}
the correspondenting html is:
<table class="minimalistBlack">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
<th>head5</th>
</tr>
</thead>
<tfoot>
<tr>
<td>foot1</td>
<td>foot2</td>
<td>foot3</td>
<td>foot4</td>
<td>foot5</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>cell1_1</td>
<td>cell2_1</td>
<td>cell3_1</td>
<td>cell4_1</td>
<td>cell5_1</td>
</tr>
<tr>
<td>cell1_2</td>
<td>cell2_2</td>
<td>cell3_2</td>
<td>cell4_2</td>
<td>cell5_2</td>
</tr>
<tr>
<td>cell1_3</td>
<td>cell2_3</td>
<td>cell3_3</td>
<td>cell4_3</td>
<td>cell5_3</td>
</tr>
<tr>
<td>cell1_4</td>
<td>cell2_4</td>
<td>cell3_4</td>
<td>cell4_4</td>
<td>cell5_4</td>
</tr>
<tr>
<td>cell1_5</td>
<td>cell2_5</td>
<td>cell3_5</td>
<td>cell4_5</td>
<td>cell5_5</td>
</tr>
</tbody>
</table>
So how can I get this in the card so it will show me the formatted table?
Hi!, it should be something like:
lock:
enabled: |
[[[
if (states["sensor.ender_e3_sensor"].state != "standby") return true ;
else return false
]]]
duration: 10
unlock: hold
Hope this work for you
I recently ran across something that I COULDN’T do in a Button Card, and had to resort to calling a script (the horror!). But, there probably is a way, I just couldn’t figure it out.
I am trying to implement a button that calls scene.apply to a HUE light entity, setting the necessary/relevant parameters in the service_data: map (hoping I have the terms right here). I have an entity card that takes inputs for Hue, Saturation, and Brightness that I use in the Button Card through templates. This works like a charm.
Then I added the capability, using an input_boolean, to choose between using EITHER Hue/Saturation color selection OR color_temp color selection. When I tried to implement this in Button Card, I ran into difficulty because I could not figure out a way to send EITHER the hs key map or color_temp key map, because they are mutually exclusive.
At first, I tried to add them both and use color_mode, until I realized that that wasn’t even a real key, just something reported by the device . So I tried several versions of JS templates at different places in the service_data: field keys to no avail.
Question is: is there a way to programmatically determine which key (not value) to supply to the service_data map ?
Sure, it is really easy to just call a Script instead, which is what I’m currently doing, but what fun is THAT?
Anybody done anything like that willing to share their secrets?
Swemek
December 27, 2021, 4:16pm
6206
Hi!
I have a card that changes color on a different card state.
Is it possible?
[[[
if (states['input_boolean.barn_light'].state == 'on')
return "blue";
return "red";
]]]
Tsar
December 30, 2021, 7:42am
6207
I have this button card :
type: custom:button-card
name: gang
state:
- value: 'on'
color: red
spin: true
styles:
card:
- height: 50px
tap_action:
action: none
entity: binary_sensor.airco_gang_is_on
Now I want to turn on/off my aircon depending on the state of this binary_sensor.
tap_action:
action: call-service
service: climate.turn_on #or climate.turn_off !
service_data: {}
target:
entity_id: climate.airco_gang
How can I do that ?
tree something like:
service: >
[[[ return 'climate.turn_' + entity.state; ]]]
Tsar
December 30, 2021, 10:08am
6209
I get the error message that there must be at least one entity_id…
type: custom:button-card
name: gang
state:
- value: 'on'
color: red
spin: true
- value: 'off'
color: green
spin: false
tap_action:
action: call-service
service: |
[[[ return 'climate.turn_' + entity.state; ]]]
service_data: {}
target:
entity_id: climate.airco_gang
entity: binary_sensor.airco_gang_is_on
PS : I don’t know why, but I put a “>” after “service:” but when I save it and recall it, it is changed with a “|” ?
I wonder if I don’t have to use a script instead ?
type: custom:button-card
name: gang
state:
- value: 'on'
color: red
spin: true
- value: 'off'
color: green
spin: false
target:
tap_action:
action: call-service
service: script.switch_airco_gang
service_data: {}
entity: binary_sensor.airco_gang_is_on
What do you think ?
how do you edit the files?
both | and > are yaml multi-line indicators , with some differences I stripping white space. That is of no importance here.
You should be able to do it like this, but the entity_id should be under the service_data, check a more complex action, with all fields templated:
hold_action:
action: >
[[[ return variables.z_wave ? 'call-service' : 'call-service'; ]]]
service: >
[[[ return variables.z_wave ? 'zwave_js.refresh_value' : 'script.turn_on'; ]]]
service_data:
entity_id: >
[[[ return variables.z_wave ? 'sensor.' + variables.id + '_actueel' : 'script.' + variables.id + '_meterget_power'; ]]]
which would translate in:
tap_action:
action: call-service
service: >
[[[ return 'climate.turn_' + entity.state; ]]]
service_data:
entity_id: climate.airco_gang
Tsar
December 30, 2021, 10:40am
6211
I edit my files in the UI
Now I don’t have an error, but nothing happens…
In case you want to see the sensor (and yes, I allready restarted HA) :
