That looks really good!
1 Like
Thanks. It’s hard work for someone like me who has more or less no knowledge of coding. Without the help of the community and a little chatgpt, I would never have managed it so far. But that’s what I love about the HA community. There is such a strong sense of togetherness and mutual help here that I have rarely experienced in forums
Hey Marius, I’ve been meaning to get back to you on this for a long time. Sorry. This has been sitting in my inbox. 
Anyway, here goes:
function getTZDiff(currentTz, otherTz) {
var selectedTz = new Date((new Date()).toLocaleString("en-ZA", {timeZone: currentTz}));
var targetTz = new Date((new Date()).toLocaleString("en-ZA", {timeZone: otherTz}));
var difference = selectedTz.getTime() - targetTz.getTime();
var hours = (difference / 3600000);
if (hours < 0) return Math.abs(hours) + " hours behind";
return Math.abs(hours) + " hours ahead";
}
I changed toLocaleDateString to toLocaleString (using the correct syntax for specifying the TZ) and made it a Date object again. Just change your locale from en-ZA, but it doesn’t really matter in this case.
Also see this SO post. The function getTimeZoneOffset(date, timeZone) implementation looks cleanest to me.
1 Like
Thanks!
Let me test that 
Meanwhile Phil Bruckner release CC tz_entity which does all the work for us, based on the input of a tracker with lat/long
Please checkout that CC too as it’s the perfection of workdclock integration and then some .
During the initial development I’ve been able to talk him into several nice functions and sensors…
Excellent! I missed that in my HACS updates.
pnbruckner/ha-entity-tz: Home Assistant Entity Time Zone Sensor
Hey - anyone pretty versed w/ merging the templates? I created a post here, having some issues w/ the “merging” of templates and such: Merge styles/state in custom:button-card
I’ve created some button cards and having an issue with spacing. See below for my code and a screenshot. There’s a bunch of extra space below the row of buttons and the next dashboard card (shown in red), which I’d like to remove.
type: custom:layout-card
layout_type: custom:horizontal-layout
cards:
- type: custom:button-card
entity: switch.front_lights
name: Front lights
icon: mdi:lightbulb
show_name: true
show_label: true
show_state: true
size: 20%
state:
- value: 'off'
color: null
icon: mdi:lightbulb
state_display: 'Off'
- value: 'on'
color: null
icon: mdi:lightbulb
state_display: 'On'
styles:
card:
- height: 70px
state:
- font-size: 16px
- color: rgb(177,177,177)
- type: custom:button-card
entity: switch.garage_lights
name: Garage lights
icon: mdi:lightbulb
show_name: true
show_label: true
show_state: true
size: 20%
state:
- value: 'off'
color: null
state_display: 'Off'
- value: 'on'
color: null
state_display: 'On'
styles:
card:
- height: 70px
state:
- font-size: 16px
- color: rgb(177,177,177)
- type: custom:button-card
entity: switch.wemo_wifi_smart_outdoor_plug
name: Bugzapper
icon: mdi:power-plug
show_name: true
show_label: true
show_state: true
size: 20%
state:
- value: 'off'
color: null
state_display: 'Off'
- value: 'on'
color: null
state_display: 'On'
styles:
card:
- height: 70px
state:
- font-size: 16px
- color: rgb(177,177,177)
- type: custom:button-card
entity: sensor.ecobee_downstairs_temperature
name: Downstairs
icon: mdi:thermometer
show_state: true
aspect_ratio: 1/1
size: 20%
color_type: icon
color: rgb(80, 114, 155)
styles:
card:
- height: 70px
state:
- font-size: 16px
- color: rgb(177,177,177)
- type: custom:button-card
entity: sensor.ecobee_master_bedroom_temperature
name: MBR
icon: mdi:thermometer
show_state: true
aspect_ratio: 1/1
card_size: 1
size: 20%
color_type: icon
color: rgb(80, 114, 155)
styles:
card:
- height: 70px
state:
- font-size: 16px
- color: rgb(177,177,177)
- type: custom:button-card
entity: sensor.ecobee_upstairs_temperature
name: Upstairs
icon: mdi:thermometer
show_state: true
aspect_ratio: 1/1
card_size: 1
size: 20%
color_type: icon
color: rgb(80, 114, 155)
styles:
card:
- height: 70px
state:
- font-size: 16px
- color: rgb(177,177,177)
- type: custom:button-card
entity: sensor.mrcool_caddyshack_temperature
name: Caddyshack
icon: mdi:thermometer
show_state: true
aspect_ratio: 1/1
card_size: 1
size: 20%
color_type: icon
color: rgb(80, 114, 155)
styles:
card:
- height: 70px
state:
- font-size: 16px
- color: rgb(177,177,177)
layout:
width: 103
max_cols: 10
Hello all,
Does anyone can help me placing the icons and text on the side to the bottom of the image:
styles:
card:
- background-color: transparent
- border-radius: 5%
- padding: 2% 5% 5% 5%
- color: white
- font-size: 12px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: center
- align-content: center
grid:
- grid-template-areas: '"icon status" "icon proximity"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr 1fr
- align-content: center
name:
- font-size: 15px
- align-self: middle
- justify-self: start
custom_fields:
icon:
- clip-path: circle()
- width: 60%
- pointer-events: none
- display: grid
- border: 5px solid
- border-color: '#808080'
- border-radius: 500px
- margin: 0 0 0 0
- opacity: 1
- align-self: middle
- justify-self: center
status:
- justify-self: start
- color: white
proximity:
- align-self: middle
- justify-self: start
- color: white
What is the card you have below the buttons? That card’s margin or padding appears to be causing the issue. Not the button cards.
Since you are using a layout card you can add a negative botttom margin margin: 0px 0px -20px 0px to your layout settings and bring that second card up.
layout:
width: 103
max_cols: 10
margin: 0px 0px -20px 0px
Your issue is here:
- grid-template-columns: 1fr 1fr
You are telling it to have 2 columns when you only want one
grid:
- grid-template-areas: '"icon status" "icon proximity"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr 1fr
- align-content: center
That i think is not the issue.
It does not work even changing to one collumn
Bellow is the full code:
type: custom:button-card
entity: person.xxxx_xpto
variables:
phone_battery_level_sensor: null
phone_battery_state_sensor: null
phone_wifi_sensor: null
proximity_sensor: >-
[[[ return
states["sensor.inicio_xxxxx_xpto_distance"].state]]]
aspect_ratio: 2.6/1
name: Person
show_entity_picture: true
show_name: false
hold_action:
action: none
state:
- value: home
styles:
card:
- background-color: transparent
custom_fields:
icon:
- border-color: '#77c66e'
- value: not_home
styles:
card:
- background-color: transparent
custom_fields:
icon:
- border-color: '#f51818'
- value: Passo a Passo
styles:
card:
- background-color: transparent
custom_fields:
icon:
- border-color: '#3232ff'
styles:
card:
- background-color: transparent
- border-radius: 5%
- padding: 2% 5% 5% 5%
- color: white
- font-size: 12px
- text-shadow: 0px 0px 0px black
- text-transform: capitalize
- justify-self: center
- align-content: center
grid:
- grid-template-areas: '"icon status" "icon proximity"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr 1fr
- align-content: center
name:
- font-size: 15px
- align-self: middle
- justify-self: start
custom_fields:
icon:
- clip-path: circle()
- width: 60%
- pointer-events: none
- display: grid
- border: 5px solid
- border-color: '#808080'
- border-radius: 500px
- margin: 0 0 0 0
- opacity: 1
- align-self: center
- justify-self: center
status:
- justify-self: start
- color: white
proximity:
- align-self: middle
- justify-self: start
- color: white
custom_fields:
icon: >
[[[ return entity === undefined ? null : `<img
src="${states[entity.entity_id].attributes.entity_picture}"
width="100%">`; ]]]
status: |
[[[
if (entity.state =='not_home') {
return `<ha-icon icon="mdi:home-export-outline"
style="width: 20px; height: 20px; color: '#888888';">
</ha-icon><span> On the way</span>`;
}
if (entity.state =='home') {
return `<ha-icon
icon="mdi:home"
style="width: 20px; height: 20px; color: #7fbf7f;">
</ha-icon><span> ${entity.state}</span>`;
} else {
if (entity.state =='Passo a Passo') {
return `<ha-icon icon="mdi:office-building-marker"
style="width: 20px; height: 20px; color: #3232ff;">
</ha-icon><span> ${entity.state}</span>`;
}
else{
return `<ha-icon
icon="mdi:map-marker-radius"
style="width: 20px; height: 20px; color: '#888888';">
</ha-icon><span> ${entity.state}</span>`;
}
}
]]]
proximity: |
[[[
return `<ha-icon
icon="mdi:map-marker-distance"
style="width: 20px; height: 20px; color: white;">
</ha-icon> <span>\<span style="color: var(--text-color-sensor);">${variables.proximity_sensor} km</span></span>`
]]]
You are not defining where your custom fields should be located. Refer to the example for custom fields in the configuration docs.
look for this an example in the docs on how to place your custom fields. I’d suggest simplifying your card code to start and then expand the styling after you’ve have the placement correct.
- grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd"'
Try:
type: custom:button-card
layout: vertical
Regarding the configuration docs wich ones are you refering?
I have been search but havent found any clarifying it.
thanks
The one’s associated with HACS and the github page.
“i n s”
“i n s”
“i n l”
The end product will results in the following grid layout
Hi, i’m having an issue with displaying the time in a template button card. The time only update if i reload the dashboard. I was reading about triggers_update and with the following code the time works again. is this the right way to do it or? thanks in advance
- type: custom:button-card
template: sidebar
triggers_update:
- sensor.date_time
@xbmcnut I would really like to do something similar. Could you please post the working code of the full card showing the gate and the value at the top right. Thanks so much.
Sure, here you go.
color: green
color_type: icon
custom_fields:
notification: |
[[[ return states['sensor.steel_gate_battery'].state ]]]
entity: binary_sensor.steel_gate
icon: mdi:gate
name: Steel
size: 50%
state:
- color: red
icon: mdi:gate
styles:
icon:
- animation: blink 5s ease infinite
value: 'on'
- color: green
icon: mdi:gate
value: 'off'
- color: orange
icon: mdi:gate-alert
styles:
icon:
- animation: blink 3s ease infinite
value: unavailable
styles:
card:
- border-radius: 10%
- background-color: '--paper-card-background-color'
custom_fields:
notification:
- background-color: |
[[[
if (states['sensor.steel_gate_battery'].state >= 98)
return "green";
return "red";
]]]
- border-radius: 50%
- position: absolute
- left: 75%
- top: 5%
- height: 25px
- width: 25px
- font-size: 12px
- line-height: 25px
- color: var(--text-color)
grid:
- position: relative
type: custom:button-card
1 Like
Trying to change the background of a button when the URL contains a hash:
card:
- background: >
[[[
var hash = window.location.hash;
if (hash == '#test') return 'red';
else return 'none';
]]]
This partly works, but as Bubble Card doesn’t reload the page when it pops up, it only appends a hashtag to the URL, this doesn’t work if I don’t perform a refresh.
How do I make this work without reload/refresh?
Trying your code to change the icon color, but it doesn’t work, only works after a refresh, it seems like it doesn’t listen to the change live?