Customising the BOM Weather and lovelace - now in HACS

DavidFW1960 · January 21, 2022, 5:20am

You aren’t showing current conditions text or apparent temperature. You can also change the padding… it’s one of the formatting options in the card or use card-mod.

MildMethod · January 21, 2022, 6:11am

I assume you mean this line?

It’s in there, but doesn’t appear to be returning anything.

I’ve added the apparent temp and that is working.

DavidFW1960 · January 21, 2022, 9:42pm

It uses a template sensor to derive the text from the summary conditions

DavidFW1960 · January 27, 2022, 3:06am

Well the wind and current temp etc are gone now. Maybe it’s under maintenance?
http://www.bom.gov.au/products/IDN60901/IDN60901.94782.shtml

Yep!

robdog · January 28, 2022, 5:01am

Fist time poster here… thank you @DavidFW1960 for all the work you’ve put into this. I was able to copy a lot of your code being not far from Kariong myself.

A couple of things…

I’m not getting the “Feels like” reading - I’m assuming this is because of no humidity sensor at Gosford at the moment.
Humidity - as above.
Low Temperature - I checked using the developer tools and temp_min_0 resulted in an “unknown” state. The temp_min_1 to 5 readings were all correct.
Pressure - I was able to utilise the pressure readings from a local sensor at home.
How do we get the leading zero back when using 24 hour time?

Edit: formatting

Andrew123 · January 28, 2022, 12:18pm

Hi @DavidFW1960 - thanks for making this card - awesome work. I was missing a few things from the BOM - so got them from my Willyweather subscription via another hacs. I now have it and the radar you linked to working.

PS. As a newbie, it was a bit tricky to get my head around but this thread helped - thanks again!

DavidFW1960 · January 28, 2022, 11:20pm

Yes Gosford Humidity sensor seems kaput so because of that there is no apparent temp either. There is a custom component I linked above so I am using that with some humidity sensors I have at home as well to show apparent temp and humidity. I also have a pressure sensor here so I use that as well just like you do. The minimum as I explain in the docs… well BOM stop publishing that during the afternoon these days which is why all my examples include using an average sensor (custom component) or the statistics sensor to extract the min/max for the current day.
Regarding the time… the sunset looks right but the sunrise looks like it’s h:mm format. I don’t understand why it’s dropping the leading 0. Pretty sure I can fix that so stay tuned. It’s actually not correct to include the : in 24hr time either so I will look at that as well

obrien.craig · January 29, 2022, 12:40am

I also noticed that my local weather observation (Moorabbin Airport, South East Melb) wasn’t displaying all sensors correctly. We had a lot of rain over the past 2 days, but it shows that there was no rain at all…
http://www.bom.gov.au/products/IDV60901/IDV60901.94870.shtml

I checked some other ones in Melbourne, and they displayed the rainfall. So I think that there might be an issue with some of them not displaying all sensors correctly.

DavidFW1960 · January 29, 2022, 12:54am

Yeah the card only shows what the sensors are seeing.

DavidFW1960 · January 31, 2022, 12:54am

I had a look at this amd made half a dozen or so attampts to fix it but it’s looping in a way I don’t understand right now. I’m just a hack with JS so I don’t seem to be able to fix this right now.

theRat · January 31, 2022, 2:25am

The logic in get SunSet is a bit flawed. No matter what time_format you have set it gets the hours in 2 digits then lines 493 and 495 explicitly removes the leading zero. This should only be done when using 12 hour time.
I would refactor the if/else statement in there to have different blocks depending on whether you have 12 or 24 hour time selected. At the moment it uses the same block for both if you define time_format in your config.

DavidFW1960 · January 31, 2022, 2:58am

Yeah. I remember adding the strip leading zero when I first started working on this card. It seems to run through that but then does something else when it runs through building the html. To make it worse the logic to detect 12 or 24 hrs simply marks the time format true or false (for 24hr) so then the lines you mention are looking for variable set (true) or false… When I was playing with it I was getting a different result if I passed 24 or left it blank. Weird.
I’m open to any PR you might propose…

NeilsOnWheels · January 31, 2022, 7:50pm

Loving this card, it’s so helpful.
I’m using David’s sample card modified for my location.
I was wondering how I go about changing the row showing the 5 day forecast. I would prefer to have today’s forecast listed first, then tomorrow and so on.

Thanks

theRat · January 31, 2022, 9:49pm

I don’t have a dev envirnment set up right now, but I believe if you change the sunSet function to this it will then work. I have included the entire function, but only the first if/then/else has changes.

get sunSet() {
    var nextSunSet;
    var nextSunRise;
    if (this.is12Hour) {
      nextSunSet = new Date(this._hass.states[this.config.entity_sun].attributes.next_setting).toLocaleTimeString(this.config.locale, {hour: 'numeric', minute: '2-digit', hour12: true});
      nextSunRise = new Date(this._hass.states[this.config.entity_sun].attributes.next_rising).toLocaleTimeString(this.config.locale, {hour: 'numeric', minute: '2-digit', hour12: true});
    }
    else {
      nextSunSet = new Date(this._hass.states[this.config.entity_sun].attributes.next_setting).toLocaleTimeString(this.config.locale, {hour: '2-digit', minute: '2-digit', hour12: false});
      nextSunRise = new Date(this._hass.states[this.config.entity_sun].attributes.next_rising).toLocaleTimeString(this.config.locale, {hour: '2-digit', minute: '2-digit', hour12: false});
    }
    var nextDate = new Date();
    nextDate.setDate(nextDate.getDate() + 1);
    if (this._hass.states[this.config.entity_sun].state == "above_horizon" ) {
      nextSunRise = nextDate.toLocaleDateString(this.config.locale,{weekday: 'short'}) + " " + nextSunRise;
      return {
      'next': html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-sunset-down"></ha-icon></span><span id="sun-next-text">${nextSunSet}</span></li>`,
      'following': html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-sunset-up"></ha-icon></span><span id="sun-following-text">${nextSunRise}</span></li>`,
      'nextText': nextSunSet,
      'followingText': nextSunRise,
      };
    } else {
      if (new Date().getDate() != new Date(this._hass.states[this.config.entity_sun].attributes.next_rising).getDate()) {
        nextSunRise = nextDate.toLocaleDateString(this.config.locale,{weekday: 'short'}) + " " + nextSunRise;
        nextSunSet = nextDate.toLocaleDateString(this.config.locale,{weekday: 'short'}) + " " + nextSunSet;
      }
      return {
      'next': html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-sunset-up"></ha-icon></span><span id="sun-next-text">${nextSunRise}</span></li>`,
      'following': html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-sunset-down"></ha-icon></span><span id="sun-following-text">${nextSunSet}</span></li>`,
      'nextText': nextSunRise,
      'followingText': nextSunSet,
      };
    }
}

DavidFW1960 · January 31, 2022, 10:59pm

It doesn’t work that wat. You do already have that information on the card anyway if you are showing minimum/maximum and the rain options (Slot L1 and L2 and R1 by default)

It would take some editing of the JS to display day 0 and screwing up the days etc

DavidFW1960 · January 31, 2022, 11:53pm

Same problems I was having yesterday.
if I set 24:

If I remove the format completely:

12hr is fine:

theRat · February 1, 2022, 12:38am

This is what mine looks like when I set it to 24.

DavidFW1960 · February 1, 2022, 12:43am

I only substituted this bit:

get sunSet() {
    var nextSunSet;
    var nextSunRise;
    if (this.is12Hour) {
      nextSunSet = new Date(this._hass.states[this.config.entity_sun].attributes.next_setting).toLocaleTimeString(this.config.locale, {hour: 'numeric', minute: '2-digit', hour12: true});
      nextSunRise = new Date(this._hass.states[this.config.entity_sun].attributes.next_rising).toLocaleTimeString(this.config.locale, {hour: 'numeric', minute: '2-digit', hour12: true});
    }
    else {
      nextSunSet = new Date(this._hass.states[this.config.entity_sun].attributes.next_setting).toLocaleTimeString(this.config.locale, {hour: '2-digit', minute: '2-digit', hour12: false});
      nextSunRise = new Date(this._hass.states[this.config.entity_sun].attributes.next_rising).toLocaleTimeString(this.config.locale, {hour: '2-digit', minute: '2-digit', hour12: false});
    }

Do you want to submit a PR in the repo?

theRat · February 1, 2022, 12:46am

I’ll try and find some time later today to set up a proper dev environment again. So far I have just deleted the .gz and edited the .js directly so it doesn’t track any changes I make. I am almost 100% certain that is the only bit of code I touched.

DavidFW1960 · February 1, 2022, 12:48am

Well different result here…