- value: "cool"
icon: mdi:fan
spin: >
[[[
return states['climate.bedrooms'].attributes.fan_action === 'Running';
]]]
and if it’s the entitty that’s attached
- value: "cool"
icon: mdi:fan
spin: >
[[[
return entity.attributes.fan_action === 'Running';
]]]
Thanks petro - but does not seem to work. The entity says Idle, yet Icon is spinning… even tried a restart. See anything else?
Here is my entity:
hvac_modes:
- heat
- cool
- 'off'
min_temp: 45
max_temp: 95
fan_modes:
- On Low
- Circulate
- Auto Low
preset_modes:
- Heat Econ
- Resume
- Cool Econ
- none
current_temperature: 72
temperature: 74
fan_mode: Auto Low
hvac_action: idle
preset_mode: none
node_id: 33
value_index: 0
value_instance: 1
value_id: '72057594596818948'
fan_action: Idle
friendly_name: Bedrooms Climate
supported_features: 25
ui-lovelace:
- badges: []
title: test page
cards:
- type: 'custom:button-card'
entity: climate.bedrooms
template: climate_button
state:
- value: "cool"
icon: mdi:fan
spin: >
[[[
return entity.attributes.fan_action === 'Running';
]]]
label: |
[[[
return 'Temp ' + states["climate.bedrooms"].attributes.current_temperature + '°F '
+ 'Set ' + states["climate.bedrooms"].attributes.temperature + '°F'
]]]
button template:
climate_button:
tap_action:
action: navigate
navigation_path: /lovelace/4
styles:
card:
- font-size: 12px
- fort_weight: bold
- height: 200px
show_label: true
show_state: true
spin doesn’t support templating.
So you can do it this way:
- value: |
[[[
return entity.attributes.fan_action === 'Running' && entity.state === 'cool';
]]]
operator: template
icon: mdi:fan
spin: true
Perfect - That did it. Added Idle too.
Final:
- type: 'custom:button-card'
entity: climate.bedrooms
template: climate_button
state:
- value: |
[[[
return entity.attributes.fan_action === 'Running' && entity.state === 'cool';
]]]
operator: template
icon: mdi:fan
spin: true
- value: |
[[[
return entity.attributes.fan_action === 'Idle';
]]]
operator: template
icon: mdi:fan
spin: false
label: |
[[[
return 'Temp ' + states["climate.bedrooms"].attributes.current_temperature + '°F '
+ 'Set ' + states["climate.bedrooms"].attributes.temperature + '°F'
]]]
I’ll have a look at this. This is different from the PR you mentioned
Is there any way that a template could get the local IP address of the device on which a button is pressed? I’d like to be able to return it as service data in a tap_action service call. Thanks.
If you’re looking to retrieve the private IP (on your LAN), it is not possible with javascript.
Thanks for the reply. Yes, that’s what I was looking for. Googling leads to some examples using WebRTC in HTML 5. Example here: http://net.ipcalf.com/ But, I guess that’s out of scope for use in a template?
I’m hoping to get the IP for use with a rest_command service call to the Fully Kiosk REST API as a tap_action. I noticed that the Fully Kiosk JavaScript interface has a call to get the private IP address as a string, simply:
fully.getIp4Address()
I’ll play around with that later to see if I can get it working in a template.
Hi! Trying to template my garage sensor… Knowing this is wrong. Can someone help me in the right direction?
Do I need to make a cover for this?
As you can see I have a switch for the garage door and one sensor for checking if it is closed or not.
entity: switch.malles_garageport_switch
show_state: false
name: Malles garageport
icon: '[[[ if (binary_sensor.garageportsensor_jocke = on) return "mdi:garage"; else return return "mdi:garage-open" ]]]'
styles:
card:
- font-size: 10px
type: 'custom:button-card'
I went the route of defining a cover. The benefit is that where ever you use it, any card that is aware of state (like the custom button card) will probably automatically show the correct icon, which will lead to less duplication of templates and config.
Here is what I did for my rolling gate, but it’s the same for my two garage doors. I have a sensor that tells me whether it’s open or closed and a circuit that performs a “button press” connected to the door’s motor (including that in case you’re going the same way).
cover:
- platform: template
covers:
main_gate:
friendly_name: "Main Gate"
open_cover:
service: switch.turn_on
data:
entity_id: switch.gate_remote
close_cover:
service: switch.turn_on
data:
entity_id: switch.gate_remote
stop_cover:
service: switch.turn_on
data:
entity_id: switch.gate_remote
value_template: "{{ is_state('binary_sensor.gate_status', 'on') }}"
icon_template: >-
{% if is_state('binary_sensor.gate_status', 'on') %}
mdi:gate-open
{% else %}
mdi:gate
{% endif %}
For your button, you basically then just need this:
- type: custom:button-card
name: Gate
entity: cover.main_gate
color_type: icon
An easier way would be to use the hack I described here if you’re using fully:
Thanks for fast reply. Will test this later today.
Thanks for the tip. I can confirm that works to launch a local Android app without also opening a new tab in Fully. That was my use case with for the res_command.
Example following your tip::
type: 'custom:button-card'
name: Chrome
icon: 'mdi:web'
tap_action:
action: javascript
launch: |
[[[
fully.startApplication('com.android.chrome')
]]]
where, of course, “javascript” and “launch” are arbitrary.
Nice hack.
Great. This is now applied. Works like a charm!
How do I customise the ripple effect so it follows the shape of the button? I have a button with a border-radius of 10px, but when the button is clicked the rippled effect goes outside the rounded corners and shows as a perfect rectangle with 90 degree corners. Thanks.
I have a button that looks like this, the fan icon on the side is only shown when its on, i would also like that it would spin, is it possible and in that case, how?
The code for the specific icon is this:
additional_info_2: >
[[[
var icon = states['sensor.shelly_shplg_s_266f08_current_consumption'].state > '50' ? 'fas:fan' : '';
var icon_color = states['sensor.shelly_shplg_s_266f08_current_consumption'].state > '50' ? 'var(--dwains-theme-accent)' : '';
return '<ha-icon icon="' + icon +'" style="width: 25px; color:' + icon_color; +';"></ha-icon>'
]]]
Add this animation: rotating 2s linear infinite; to the style=... of your <ha-icon>
Thank you very much! Worked like a charm.
hi ,
Love the custom button … need help to action a script. I cant seem to use the right syntax within the card to action a script . below is the yaml configuration
color_type: card
colour: red
entity: group.kitchen_cinema
icon: 'mdi:cast-connected'
name: Kitchen Cinema
show_state: true
state:
- color: green
value: 'on'
- color: red
value: 'off'
styles:
card:
- height: 100px
- width: 150px
type: 'custom:button-card'
action: call-service
service: script.1592552313813
Try this variant.