Gladly, but it is far from finished. The idea behind it is primarily to create a dashboard with only one page in bento style without using popup cards. That’s why, for example, I have my rooms in my apartment at the top right. Depending on which room I click on, an input boolean is activated, which in turn displays the lighting of the individual rooms using condition cards. If I click on the living room, I can see all the lamps in this room. If I then click on the bathroom, the lamps in the living room disappear and the lamps in the bathroom are displayed in the same place. The same with temperature, humidity and so on. This way, everything can be reduced to one page.
I also want to visualize a lot of information using icons and colors, such as the weather at the bottom right. The card is black right now because it is currently dark where I am. The icons say cloudy. As soon as I have it completely finished and everything set up, I would like to create a thread here that explains everything in detail to give my contribution back to the community. I’ll let you know as soon as it’s ready
Don’t be surprised about the green cards, those are empty button cards I have to have a better overview when setting it up. I’ll make them black at the end to match the background and make them look invisible
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.
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.
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.
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.
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
@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.
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?
