would you mind sharing how you have done this?
almost all my buttons have the same styling. It would be very good to centralize the styling so if i want to change something up i dont have to apply it to every card seperate. Especially grid layout and stuff is annoying.
Basically just follow the ReadMe of button card. If you can post your code of your button, I can help you with creating it as a template so you can copy/paste.
thanks, i have overlooked this part of the docs!
Hi, I have a button card that I want to turn into a toggle button that will trigger a Harmony activity, I’m wondering if anyone can help me with?
This is my current config:
- type: "custom:button-card"
icon: mdi:nintendo-switch
color: rgb(230, 0, 18)
show_name: false
aspect_ratio: 1/1
tap_action:
action: call-service
service: remote.turn_on
service_data:
activity: "Play Switch"
entity_id: remote.harmony_hub
So 2 major issues:
I’m new to home assistant and still figuring out how thing works, so really appreciate if you can explain things in details. Thanks
The button is always on, because there is no entity defined to check the state on. If you have a way to see if your Switch is on, you can use that as an entity so the button can change depending on the state. I believe the Switch has no API’s etc to really integrate it to HA. If that’s the case, you can try to emulate it some way.
There a different ways you can do this, I personally use input booleans. You can create a virtual entity basically that way, then you use that as a trigger for your Harmony automation. I suggest you read about input boolean to see what the benefits are and how to use them.
This is what you can setup for instance: you can create an input boolean (which is basically a virtual switch (as in button, not Nintendo Switch, the word switch is confusing in this context lol). You can create an automation so when you turn the input boolean state to on, your Harmony automation will trigger. And also create an automation that will trigger when you turn the input boolean state to off (for instance turn of your Switch via Harmony, if that’s possible).
If you tie the input boolean as an entity to the custom button card (so use the entity variable as mentioned in the ReadMe), it will use the state of that entity. So when you turn it on (and trigger your automation), the button card will use the ‘on’ state. In that case you don’t need to use call-service in custom button (since you created an automation withing HA already with the input boolean as a trigger). You can then just use action: toggle
tap_action:
action: toggle
That way you can turn the input boolean on and off by pressing the button, which will trigger your automations turning on the Switch or turning it off. Which will then be used by button card to show the state of the automation to on or off.
This is how i handle harmony. build a template sensor and template switch to watch your harmony integration.
sensor:
- platform: template
sensors:
harmony_hub:
friendly_name: Harmony Hub
value_template: >
{% if states.remote.harmony_hub.attributes.current_activity == "PowerOff" %}
OFF
{% elif states.remote.harmony_hub.attributes.current_activity == "Fernsehen" %}
Fernsehen
{% elif states.remote.harmony_hub.attributes.current_activity == "Playstation 4" %}
Playstation 4
{% endif %}
switch:
- platform: template
switches:
# HARMONY PS4
ps4:
friendly_name: PS4
value_template: "{{ is_state_attr('remote.harmony_hub', 'current_activity', 'Playstation 4') }}"
turn_on:
service: remote.turn_on
data:
entity_id: remote.harmony_hub
activity: 'Playstation 4'
turn_off:
service: remote.turn_on
data:
entity_id: remote.harmony_hub
activity: 'PowerOff'
Just replace playstation 4 to fit your needs. go into dev settings or the harmony_config file to look which activites you have set up.
and then lovelace. you dont need tap action btw if you just want to use a toggle.
- entity: switch.ps4
.... whatever you want
type: 'custom:button-card'
Check out this thread for more harmony home assistant stuff.
Just out of curiosity, why don’t use the PS4 integration for the remote functions? I don’t use Harmony myself but I have setup my PS4 with the official integration. Works like charm, shows the state of PS4 (standby, playing), which game is playing (is displayed as a media_player) and has remote service. You can even launch games directly with input select. I have automations setup where the PS4 will turn on and where other automations will trigger depending on the state of PS4.
I want to turn on the ps4 with the harmony remote control. The Harmony System is activity based, every activity turns on the correct channel etc and sends the command directly via ir or bt to your tv, avr, beamer, firetv stick, ps4… so your devices dont have to have things like cec, arc, or a home assistant network integration (that are sometimes unreliable). You can control everything with one remote, as long as your device has ir or bt. You can even interrupt button presses with Home Assistant and the emulated roku integration which is quite nice as you can remap every button on the harmony remote to do whatever you want.
I use the PS4 integration too. If the ps4 template switch turns on my ps4 turns on via the ps4 integration and the other way around.
I used Harmony a few years ago a lot. But ever since I stepped in to home automation, I didn’t see any need for it anymore since I can hook up IR etc with home automation platforms as well. Though I do know that Harmony’s activity setup is solid, I don’t like using IR that much (especially with turning devices on/off or when it’s not in sync). Or when trying to read the state of the device consistently (like what HDMI port the soundbar is on etc). Perhaps if you strictly use Harmony and template sensors, you can solve those issues. Might try it again in the future to have one central way of controlling media (and not be dependable of custom integrations with broken support etc).
Edit: damnit, I just ordered myself a Harmony Hub to see experiment with it. Why must you tempt me?? lol
Hi everyone. With this card, or card mod, or marckdown or whatever :0)
is there any way to set this as background or import as animation?
edit Tanks Sakara (little test…)
- type: markdown
style: |
<style>
div {
width: 300px;
margin-left: auto;
margin-right: auto;
}
svg.ha-logo {
width: 250px;
height: 250px;
}
/*main-logo*/
.ha-logo path,
.ha-logo circle {
fill: none;
stroke: #99e1fd;
stroke-width: 0.125px;
stroke-linejoin: round;
}
.ha-logo path.house,
.ha-logo circle.house {
stroke-linecap: round;
stroke-width: .3px;
}
.loading.ha-logo circle {
animation: nodes 6s linear infinite;
}
.loading.ha-logo .house {
animation: house 6s ease infinite;
}
.loading.ha-logo .circut {
animation: circut 6s cubic-bezier(0.7, 0.1, 0.1, 0.9) infinite;
}
@keyframes house {
0% {
stroke-dashoffset: -50;
stroke-dasharray: 50 50;
}
45% {
stroke-dashoffset: -100;
}
50% {
stroke: #99e1fd;
}
60% {
stroke: white;
}
75% {
stroke: #99e1fd;
}
80% {
stroke-dashoffset: -100;
}
100% {
stroke-dashoffset: -130;
stroke-dasharray: 50 50;
}
}
@keyframes circut {
0% {
stroke-dasharray: 20 20;
stroke-dashoffset: -20;
}
13% {
stroke-dashoffset: -20;
}
50% {
stroke-dashoffset: -40;
stroke: #99e1fd;
}
60% {
stroke: white;
}
70% {
stroke: #99e1fd;
}
85% {
stroke-dashoffset: -40;
}
100% {
stroke-dashoffset: -60;
stroke-dasharray: 20 20;
}
}
@keyframes nodes {
0% {
stroke-dasharray: 0 4;
}
25% {
stroke-dasharray: 0 4;
}
35% {
stroke-dasharray: 4 0;
stroke: #99e1fd;
}
41% {
fill: none;
}
42% {
fill: #99e1fd;
}
55% {
fill: none;
stroke: #99e1fd;
}
65% {
fill: white;
stroke: white;
}
75% {
stroke: #99e1fd;
fill: none;
stroke-dasharray: 4 0;
}
85% {
fill: #99e1fd;
stroke: #99e1fd;
}
93% {
fill: none;
stroke-dasharray: 4 0;
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -4;
stroke-dasharray: 0 4;
}
}
.ha-logo circle:nth-child(1n) {
animation-delay: -0.054s;
}
.ha-logo circle:nth-child(2n) {
animation-delay: -0.108s;
}
.ha-logo circle:nth-child(3n) {
animation-delay: -0.162s;
}
.ha-logo circle:nth-child(4n) {
animation-delay: -0.216s;
}
.ha-logo circle:nth-child(5n) {
animation-delay: -0.27s;
}
.ha-logo circle:nth-child(6n) {
animation-delay: -0.324s;
}
.ha-logo circle:nth-child(7n) {
animation-delay: -0.378s;
}
.ha-logo circle:nth-child(8n) {
animation-delay: -0.432s;
}
.ha-logo circle:nth-child(9n) {
animation-delay: -0.486s;
}
.ha-logo circle:nth-child(10n) {
animation-delay: -0.54s;
}
.ha-logo circle:nth-child(11n) {
animation-delay: -0.594s;
}
.ha-logo circle:nth-child(12n) {
animation-delay: -0.648s;
}
.ha-logo circle:nth-child(13n) {
animation-delay: -0.702s;
}
.ha-logo circle:nth-child(14n) {
animation-delay: -0.756s;
}
</style>
<div class="logo-ha">
<svg class="ha-logo loading" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
<path class="house" d="M1.9 8.5V5.3h-1l4-4.3 2.2 2.1v-.6h1v1.7l1 1.1H7.9v3.2z" />
<path class="circut" d="M5 8.5V4m0 3.5l1.6-1.6V4.3M5 6.3L3.5 4.9v-.6m2.7.7l.4.4L7 5M5.9 6.1v.5h.5M4.2 5v.5h-.8m1 1.5v.6h-.6m1.2.8L3.6 6.7M5 8.4l1-.9h.7M4.6 3.6L5 4l.4-.4" />
<g>
<circle cx="5.5" cy="3.4" r="0.21" />
<circle cx="4.5" cy="3.4" r="0.21" />
<circle cx="6.6" cy="4.1" r="0.21" />
<circle cx="3.5" cy="4.1" r="0.21" />
<circle cx="4.2" cy="4.8" r="0.21" />
<circle cx="6.1" cy="4.8" r="0.21" />
<circle cx="7.1" cy="4.8" r="0.21" />
<circle cx="6.6" cy="6.6" r="0.21" />
<circle cx="5.9" cy="5.9" r="0.21" />
<circle cx="3.2" cy="5.5" r="0.21" />
<circle cx="3.5" cy="6.5" r="0.21" />
<circle cx="4.4" cy="6.8" r="0.21" />
<circle cx="3.6" cy="7.6" r="0.21" />
<circle cx="6.9" cy="7.5" r="0.21" />
</g>
</svg>
</div>
That should be possible, but I don’t quite understand your question since you already seem to have a solution?
no, it’s a half solution. 
… the final solution would be to display this animation as an icon or image based on a state … with your card
@RomRider yess!! 
Understood how to do it, now I try to fix colors and states … thank you very much.
Right, then you should be able to use a custom_field to achieve this and have this custom field replace the current icon in the grid.
If you put everything that you have in style: | from your markdown card in a custom_field, that should be a starting point and then adapt it using javascript templates to do what you want with it
i want to use templating with labels.
show_label: true
label: >
[[[ return 'states[sensor.tankstelle_2_e5].state' ]]]
i tried it with this but no luck.
Thanks for putting me in the right direction, I’ll try as soon as I get home:+1:
PS
I take this opportunity to tell you that this card is complex but the most complete👍
Your quotes are wrong. You quote the entity_id, not the entire state object.
I have tried to “close” my climate card n a button card for my dashboard:
The result is interesting, it is working on PC with the mouse but doesn’t work with touching either windows and android.
Is there any solution for the touch working?
The card:
custom_fields:
ac:
card:
aspect_ratio: 1
entity: climate.gree_ac
highlight_tap: true
no_card: false
step: 1
title: Klíma
type: 'custom:thermostat-card'
styles:
card:
- overflow: unset
- background: 'linear-gradient(rgba(255,255,255,0.1) 50%, rgba(0,0,20,0.3) 50%)'
- border-radius: 15px
- border: 'solid 1.5px rgba(57,128,228)'
- text-shadow: 0px 0px 5px black
- width: 264px
- height: 264px
custom_fields:
ac:
- filter: opacity(100%)
grid:
- grid-template-areas: '"graph"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr
type: 'custom:button-card'
I’m not using the thermostat-card but is it working when outside of the button-card? (I guess so, but still asking 
)
Could you please try with:
custom_fields:
ac:
- filter: opacity(100%)
- z-index: 10
The result is same, works with only pointer. Yes, the card is working and I use it outside.
someone can help me to understand to how transform or the 3 graph with a shady background or the last smaller without the black behind?
- entities:
- sensor.0x00158d00044b3373_humidity_1
font_size: 75
line_color: blue
line_width: 8
type: 'custom:mini-graph-card'
name: Living room
hours_to_show: 24
points_per_hour: 0.5
- type: custom:button-card
aspect_ratio: 1/1
custom_fields:
graph:
card:
type: sensor
entity: sensor.0x00158d00044b3373_temperature_1
graph: line
style: |
ha-card {
box-shadow: none;
}
styles:
custom_fields:
graph:
- filter: opacity(50%)
- overflow: unset
card:
- overflow: unset
grid:
- grid-template-areas: '"i" "n" "graph"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
- type: "custom:button-card"
color_type: blank-card
thanks