Customising the BOM Weather and lovelace - now in HACS

OK Surprised no one has noticed this yet but it’s got the 30 seconds refresh bug… I was wondering about that today/yesterday but just sat and watched it now and it reverts to night icons after 30 seconds. I’ll crush that bastard tomorrow…

Hmm I should have noticed that but didn’t. The weather tab I normally just flick over to for the occasional update, but I am sure I had it up for more than 30 secs for testing… maybe not.

OK 0.87a pre-release. I’m pretty sure I have fixed it…

Still broken I think…

Screen Shot 2021-01-19 at 21.06.17

Hmm, it only changes the icons when some background data changes - for instance if the BOM sensor updates or my barometric pressure sensor updates. Otherwise they sit there just fine for ages.

Mine didn’t show any night icons for the forecast. Did you do a F12 right click empty cache and hard reload and then CTRL+R twice? Also check which version it’s showing for the card in the console.
There’s no reason why it should show any night icons at all for you unless it’s cache…

I’ll have to stop testing with an iPad… Looks fine now - was working before I started work this morning (before the sun came up) on my Mac.

1 Like

Yeah pretty sure was a caching issue…

OK I did another new pre-release 0.87b
Only change from 0.87a is that I added a night icon for the light-rain and showers conditions.
You MUST download the icon file and install it otherwise you won’t get any icon for those conditions.
THIS IS A BREAKING CHANGE UNLESS you have old_icons set to true.

David you may want to check the release notes for 0.87b, you may have day and night swapped around…

1 Like

Well Bugger. Thanks for that. I edited the note for the release. Does anyone ever read that? At least I don’t appear to have screwed up the card anyway

Thanks for fixing this, it always bugged me that the forecasts would show a picture of a moon… I was like, yes i know it will be night time at night time.

1 Like

Um…WHY???

Hi @DavidFW1960. Firstly let me say thanks for such a wonderful card. I had a peek into weather.js - there is a quite a bit of dev in there!! So now that ive buttered you up haha, hoping you might consider a feature request to alter the size of the text ive circled in red below (to compliment those sizing controls you have already made accessible to us in Lovelace yaml that ive circled green).

Reason is, ive fiddled with your left and right ‘slots’ for my optimal / intuitive presentation of data, and about half the time the formatting screws up on smaller screens (which is 95% of our households use-cases!) as per:

I notice some time above @tom_l spotted the same thing (on his ipad), ive debugged it enough to know that its simply the length of the longest text string in the left table to screw it up- i.e. not enough horizontal screen real estate to show both tables side by side. If you really get in the weeds we can see above the the wind gust row, all it takes is insertion of 2 extra chars (both 1’s) to force the table wrap.

I think for the most part, people sidestep this condition as they default to your lovelace yaml which (by luck? Design?) has all the longggggg text in the left hand table alone. Not spread over both like i do

You can also see i often get the ‘mm’ wrapping in the per-day look ahead data too, so text sizing controls would solve this too.

If you didnt want to expose the sizing controls other options that occurred to me

  • let me pick wind variable without gusts appended (as you used to have it)
  • run all table text thru an rtrim function forcing a hard cap on string length

Thanks again mate, really appreciate the time you have given to the community on this. This thread alone is immense!!

Yeah it’s usually the wind… whenever it shows calm it will do it… spacing as you say.
It’s a trade off between readability and wrapping. Sometimes the expected rain will wrap the mm to an extra row. I don’t think there was any design in the left/right slots lol. It seems to align vertically with the longest text on the right being at the edge of the column so the Center will move.
So wind gust is optional and always has been. If you don’t parse that variable to the card it will only show the wind speed… showing the gust speed was an optional addition.
I’d rather the text wrap than be trimmed.
There’s a couple of ways to ‘fix’ this that are in your total control.

  1. Use card-mod to change any text size you want
  2. Make a template sensor for every slot entity trimming the entity length in Home Assistant and pass that new sensor to the card
  3. Learn to live with the benefits of text wrapping and readability.

Changing those text sizes is of course possible with config options but that is likely to have unintended consequences and other problems. I really think card-mod can solve this for you instead.

Thanks for your comments and interest.

Hi Keiran,
My weather card is grey, dull and lacking in everything yours has. Would you please post your code?

He is using this custom-card as per the instructions.

With a card background set by the looks of it.

Maybe a lovelace background? Looks nice though…

yup, all credit for the prettiness goes to @DavidFW1960 of course, and yup, you guys guessed correctly im using card-mod to allow me to set a background image, which just happens to be my pool :). Through trial / error, I worked out that 660 pixels works best for image height on this card, and best if you jack exposure riiiight down (bring’s up the ‘blackness’) otherwise your image competes with the weather text… also vignette works well. Happy fiddling!

Below is my card yaml - it will be mostly uninteresting to this thread if you follow the instructions as David says (I haven’t done anything special 'cept add some readability comments), but here you go anyway. The background image card-mod stuff is the last 4 lines.

        - type: custom:bom-weather-card
          title: BOM Weather
          entity_current_conditions: sensor.bexley_icon_descriptor_0
          entity_temperature: sensor.sydney_airport_temp
          entity_forecast_high_temp_1: sensor.bexley_temp_max_1
          entity_forecast_high_temp_2: sensor.bexley_temp_max_2
          entity_forecast_high_temp_3: sensor.bexley_temp_max_3
          entity_forecast_high_temp_4: sensor.bexley_temp_max_4
          entity_forecast_high_temp_5: sensor.bexley_temp_max_5
          entity_forecast_icon_1: sensor.bexley_icon_descriptor_1
          entity_forecast_icon_2: sensor.bexley_icon_descriptor_2
          entity_forecast_icon_3: sensor.bexley_icon_descriptor_3
          entity_forecast_icon_4: sensor.bexley_icon_descriptor_4
          entity_forecast_icon_5: sensor.bexley_icon_descriptor_5
          entity_forecast_low_temp_1: sensor.bexley_temp_min_1
          entity_forecast_low_temp_2: sensor.bexley_temp_min_2
          entity_forecast_low_temp_3: sensor.bexley_temp_min_3
          entity_forecast_low_temp_4: sensor.bexley_temp_min_4
          entity_forecast_low_temp_5: sensor.bexley_temp_min_5
          entity_summary_1: sensor.bexley_short_text_1
          entity_summary_2: sensor.bexley_short_text_2
          entity_summary_3: sensor.bexley_short_text_3
          entity_summary_4: sensor.bexley_short_text_4
          entity_summary_5: sensor.bexley_short_text_5
          entity_sun: sun.sun
          #           entity_visibility: sensor.dark_sky_visibility
          entity_daytime_high: sensor.bexley_temp_max_0
          entity_daytime_low: sensor.bexley_temp_min_0
          entity_wind_bearing: sensor.sydney_airport_wind_direction
          entity_wind_speed: sensor.sydney_airport_wind_speed_kilometre
          entity_wind_gust: sensor.sydney_airport_gust_speed_kilometre
          #           entity_wind_speed_kt: sensor.sydney_airport_wind_speed_knot
          #           entity_wind_gust_kt: sensor.sydney_airport_gust_speed_knot
          entity_humidity: sensor.sydney_airport_humidity
          ############################## IMPORTANT!!! BOM are NOT providing Pressure sensor for forecast.
          ############################## IF you use my entity_pressure sensor the card won't display
          # entity_pressure: sensor.nodemcu_lounge_bme280_seapressure
          entity_apparent_temp: sensor.sydney_airport_temp_feels_like
          entity_daily_summary: sensor.bexley_extended_text_0
          entity_pop: sensor.bexley_rain_chance_0
          entity_pop_intensity: sensor.sydney_airport_rain_since_9am
          entity_possible_today: sensor.bexley_rain_amount_range_0
          entity_pos_1: sensor.bexley_rain_amount_range_1
          entity_pos_2: sensor.bexley_rain_amount_range_2
          entity_pos_3: sensor.bexley_rain_amount_range_3
          entity_pos_4: sensor.bexley_rain_amount_range_4
          entity_pos_5: sensor.bexley_rain_amount_range_5
          entity_pop_1: sensor.bexley_rain_chance_1
          entity_pop_2: sensor.bexley_rain_chance_2
          entity_pop_3: sensor.bexley_rain_chance_3
          entity_pop_4: sensor.bexley_rain_chance_4
          entity_pop_5: sensor.bexley_rain_chance_5
          entity_current_text: sensor.bom_current_text
          entity_uv_alert: sensor.bom_uv_alert
          entity_fire_danger: sensor.bom_fire_danger
          entity_uv_alert_summary: sensor.bexley_uv_category_0
          entity_fire_danger_summary: sensor.bexley_fire_danger_0
          locale: en
          sunset: true
          static_icons: false
          old_icon: hybrid
          tooltip_bg_color: 'rgb( 75,155,239)'
          tooltip_border_color: 'rgb(255,161,0)'
          tooltip_border_width: 1
          tooltip_caret_size: 5
          tooltip_fg_color: '#fff'
          tooltip_left_offset: -12
          tooltip_width: 110
          tooltips: true
          old_daily_format: false
          time_format: 12
          show_beaufort: false
          #           show_decimals: true
          refresh_interval: 60
          tempformat: highlow             #OPTIONAL to show max/min in daily
          show_separator: false
          ############################################K: THESE CONTROL THE MAIN TEMP (TOP-RIGHT)
          temp_top_margin: 0px            #default 0px px or em Note: pre-0.109.x default was -0.3em
          temp_font_weight: 300           #default 300 numeric
          temp_font_size: 4.0em             #default 4em em
          temp_right_pos: 0.85em          #default .85em px or em
          temp_uom_top_margin: -12px      #default -12px px or em Note: pre-0.109.x default was -9px
          temp_uom_right_margin: 4px      #default 4px px or em
          ############################################K: THESE CONTROL THE 'FEELS LIKE' DIRECTLY UNDER MAIN TEMP, TOP-RIGHT
          apparent_top_margin: 45px       #default 45px px or em
          apparent_right_pos: 1em         #default 1em px or em
          apparent_right_margin: 1em      #default 1em px or em
          ############################################K: THESE CONTROL THE MAIN SHORT-TEXT WORDING (TOP-CENTRE)
          current_text_top_margin: 4.5em  #default 4.5em px or em pre-0.109.x default was 39px
          current_text_left_pos: 0px      #default 0px px or em pre-0.109.x default was 5em
          current_text_font_size: 1.5em   #default 1.5em em
          current_text_alignment: center  #default center
          current_text_width: 100%        #default 100%
          current_data_top_margin: 10em   #default 10em px or em pre-0.109.x default was 7em
          large_icon_top_margin: -3.2em   #default -3.2em px or em Note: pre-0.109.x default was -3.5em
          large_icon_left_position: 0px   #default 0em px or em
          separator_top_margin: 6em       #default 6em px or em
          ############################################K: THESE CONTROL THE FULL-TEXT TODAY FORECAST (RIGHT AT BOTTOM) 
          summary_top_padding: 2em        #default 2em px or em pre-0.109.x default was 1em
          summary_font_size: 0.8em        #default 0.8em px or em
          ############################################K: THESE CONTROL THE 2x TABLE'S SHOWING THE KPI's FOR TODAY
          slot_l1: daytime_high         
          slot_l2: popforecast         
          slot_l3: wind #remove #wind                   
          slot_l4: sun_next
          slot_l5: remove   

          slot_r1: daytime_low                
          slot_r2: humidity # possible_today                     
          slot_r3: uv_summary 
          slot_r4: sun_following
          slot_r5: remove      
          style:  |
            ha-card {
              background: url("/local/backgrounds/pool_xxxWx660H.jpg");
            }

PS - and thanks @DavidFW1960 for the workaround to my problem. Your suggestion makes sense. I only suggested exposing the sizing hooks in config yaml as you have clearly already done so for at least half of the other text elements on the card - but hey, you are supporting this card so I can understand you treading carefully here as any problems magnify!

1 Like

They all pre-dated card-mod…

1 Like