Customising the BOM Weather and lovelace - now in HACS

I haven’t added in your templates for average sensor yet just been building the UI look n feel

1 Like

I have got this up and running today but am unable to get the two columns in the L/R slots.
screen shot below.
I am assuming the length of the text is what is making it all fit onto the one column, Im in Perth and have seen there is a template to select which station I want to use the data from but have no idea where to put this…

Are my assumptions correct?
If so can someone help with what to edit/add in the template section?

Yes that is why. I think there is a sample template sensor for Perth in the template file in the repo.

Hi David, Yes. I have seen there is info on it but have no idea where to actually put the additional parts into the template sensor itself?

interesting - 0.110 now resizes cards depending on the screen width before changing the number of columns:



Yeah it does. I noticed that yesterday. You need to use the vertical-stack or layout card. This is Home Assistant - nothing I can control.

sorry - wasn’t suggesting it was your fault, just that it is more evident with the weather card (but not your fault)

1 Like

No worries mate. All good.

I have pushed version 0.71 this morning.
There was an issue with the card not getting updated unless you refreshed the screen. @rudders helped me fix that. Thanks Adrian!

Also when I first forked this card (and I was pretty clueless about js) I changed the precipitation from x mm/h (or in/h) just to show mm by changing the unit of measurement. No one complained about that or even noticed however I have added a new variable you can define if your weather provider actually gives you a rate in mm/h or in/hr. You can not define both a flat rate of rainfall AND a rate/hr - if you do you will get an error saying invalid.

Check the info.md file or the docs for details.

I was also asked recently to be able to show windspeeds as knots instead of km/h. Is there any interest from anyone for me to do that? I see from BOM that there are sensors both for kt and km/h - I could just define another slot to show that as an option.

1 Like

Ok I just also added a new slot option to display the windspeed in knots instead of km/h
Version 0.72. Have at it!

1 Like

Hi David, I’ve updated, restarted and added my wind speed in knots sensor to the card, and added wind_kt to one of the slots but it is still showing km/h. I have tried clearing cache without effect.

Can you post card config Tom?

Yeah it’s not you it’s the ‘wonderful’ card UI editor.

It keeps refreshing when I’m editing the card and replacing what I’ve written.

EDIT: hmmm. Even after replacing the config in the raw editor and refreshing the cache I’m still getting km/h as the unit. Though I now have the correct knots value.

apparent_right_margin: 1em
apparent_right_pos: 1em
apparent_top_margin: 45px
current_data_top_margin: 7em
current_text_alignment: center
current_text_font_size: 1.5em
current_text_left_pos: 0px
current_text_top_margin: 3em
current_text_width: 100%
entity_apparent_temp: sensor.bom_hobart_feels_like_c
entity_current_conditions: sensor.bom_hobart_icon_0
entity_current_text: sensor.bom_current_text
entity_daily_summary: sensor.bom_hobart_detailed_summary_0
entity_daytime_high: sensor.bom_today_max
entity_fire_danger: sensor.bom_fire_danger
entity_fire_danger_summary: sensor.bom_fire_danger_summary
entity_forecast_high_temp_1: sensor.bom_hobart_max_temp_c_1
entity_forecast_high_temp_2: sensor.bom_hobart_max_temp_c_2
entity_forecast_high_temp_3: sensor.bom_hobart_max_temp_c_3
entity_forecast_high_temp_4: sensor.bom_hobart_max_temp_c_4
entity_forecast_high_temp_5: sensor.bom_hobart_max_temp_c_5
entity_forecast_icon_1: sensor.bom_hobart_icon_1
entity_forecast_icon_2: sensor.bom_hobart_icon_2
entity_forecast_icon_3: sensor.bom_hobart_icon_3
entity_forecast_icon_4: sensor.bom_hobart_icon_4
entity_forecast_icon_5: sensor.bom_hobart_icon_5
entity_forecast_low_temp_1: sensor.bom_hobart_min_temp_c_1
entity_forecast_low_temp_2: sensor.bom_hobart_min_temp_c_2
entity_forecast_low_temp_3: sensor.bom_hobart_min_temp_c_3
entity_forecast_low_temp_4: sensor.bom_hobart_min_temp_c_4
entity_forecast_low_temp_5: sensor.bom_hobart_min_temp_c_5
entity_humidity: sensor.bom_hobart_relative_humidity
entity_pop: sensor.bom_hobart_chance_of_rain_0
entity_pop_1: sensor.bom_hobart_chance_of_rain_1
entity_pop_2: sensor.bom_hobart_chance_of_rain_2
entity_pop_3: sensor.bom_hobart_chance_of_rain_3
entity_pop_4: sensor.bom_hobart_chance_of_rain_4
entity_pop_5: sensor.bom_hobart_chance_of_rain_5
entity_pop_intensity: sensor.bom_hobart_rain_today
entity_pos_1: sensor.bom_hobart_possible_rainfall_1
entity_pos_2: sensor.bom_hobart_possible_rainfall_2
entity_pos_3: sensor.bom_hobart_possible_rainfall_3
entity_pos_4: sensor.bom_hobart_possible_rainfall_4
entity_pos_5: sensor.bom_hobart_possible_rainfall_5
entity_possible_today: sensor.bom_hobart_possible_rainfall_0
entity_summary_1: sensor.bom_hobart_summary_1
entity_summary_2: sensor.bom_hobart_summary_2
entity_summary_3: sensor.bom_hobart_summary_3
entity_summary_4: sensor.bom_hobart_summary_4
entity_summary_5: sensor.bom_hobart_summary_5
entity_sun: sun.sun
entity_temperature: sensor.bom_hobart_air_temp_c
entity_uv_alert: sensor.bom_uv_alert
entity_uv_alert_summary: sensor.bom_uv_alert_summary
entity_wind_bearing: sensor.bom_hobart_wind_direction
entity_wind_gust: sensor.bom_hobart_wind_gust_kt
entity_wind_speed: sensor.bom_hobart_wind_speed_kt
large_icon_left_position: 0em
large_icon_top_margin: '-3.2em'
locale: en
old_daily_format: false
old_icon: 'true'
refresh_interval: 60
separator_top_margin: 6em
show_beaufort: false
show_separator: false
slot_l1: daytime_high
slot_l2: wind
slot_l3: pop
slot_l4: possible_today
slot_l5: remove
slot_l6: remove
slot_r1: sun_next
slot_r2: sun_following
slot_r3: uv_summary
slot_r4: fire_summary
slot_r5: remove
slot_r6: remove
static_icons: false
style:
  .: |
    ha-card {
      border: solid 1px var(--primary-color);
      background: url("/local/background/card_bg_{{states('input_select.select_theme')}}.png");
    }
    ha-card div.card-header {
      padding-top: 8px;
      padding-bottom: 36px;
    }
summary_font_size: 1em
summary_top_padding: 1em
sunset: true
temp_font_size: 4em
temp_font_weight: 300
temp_right_pos: 0.85em
temp_top_margin: 0px
temp_uom_right_margin: 7px
temp_uom_top_margin: '-12px'
time_format: 12
title: BOM Weather
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
type: 'custom:bom-weather-card'

Using slot_l2: wind_kt results in no display for that slot.

EDIT2: Worked it out - read the instructions :slight_smile:

apparent_right_margin: 1em
apparent_right_pos: 1em
apparent_top_margin: 45px
current_data_top_margin: 7em
current_text_alignment: center
current_text_font_size: 1.5em
current_text_left_pos: 0px
current_text_top_margin: 3em
current_text_width: 100%
entity_apparent_temp: sensor.bom_hobart_feels_like_c
entity_current_conditions: sensor.bom_hobart_icon_0
entity_current_text: sensor.bom_current_text
entity_daily_summary: sensor.bom_hobart_detailed_summary_0
entity_daytime_high: sensor.bom_today_max
entity_fire_danger: sensor.bom_fire_danger
entity_fire_danger_summary: sensor.bom_fire_danger_summary
entity_forecast_high_temp_1: sensor.bom_hobart_max_temp_c_1
entity_forecast_high_temp_2: sensor.bom_hobart_max_temp_c_2
entity_forecast_high_temp_3: sensor.bom_hobart_max_temp_c_3
entity_forecast_high_temp_4: sensor.bom_hobart_max_temp_c_4
entity_forecast_high_temp_5: sensor.bom_hobart_max_temp_c_5
entity_forecast_icon_1: sensor.bom_hobart_icon_1
entity_forecast_icon_2: sensor.bom_hobart_icon_2
entity_forecast_icon_3: sensor.bom_hobart_icon_3
entity_forecast_icon_4: sensor.bom_hobart_icon_4
entity_forecast_icon_5: sensor.bom_hobart_icon_5
entity_forecast_low_temp_1: sensor.bom_hobart_min_temp_c_1
entity_forecast_low_temp_2: sensor.bom_hobart_min_temp_c_2
entity_forecast_low_temp_3: sensor.bom_hobart_min_temp_c_3
entity_forecast_low_temp_4: sensor.bom_hobart_min_temp_c_4
entity_forecast_low_temp_5: sensor.bom_hobart_min_temp_c_5
entity_humidity: sensor.bom_hobart_relative_humidity
entity_pop: sensor.bom_hobart_chance_of_rain_0
entity_pop_1: sensor.bom_hobart_chance_of_rain_1
entity_pop_2: sensor.bom_hobart_chance_of_rain_2
entity_pop_3: sensor.bom_hobart_chance_of_rain_3
entity_pop_4: sensor.bom_hobart_chance_of_rain_4
entity_pop_5: sensor.bom_hobart_chance_of_rain_5
entity_pop_intensity: sensor.bom_hobart_rain_today
entity_pos_1: sensor.bom_hobart_possible_rainfall_1
entity_pos_2: sensor.bom_hobart_possible_rainfall_2
entity_pos_3: sensor.bom_hobart_possible_rainfall_3
entity_pos_4: sensor.bom_hobart_possible_rainfall_4
entity_pos_5: sensor.bom_hobart_possible_rainfall_5
entity_possible_today: sensor.bom_hobart_possible_rainfall_0
entity_summary_1: sensor.bom_hobart_summary_1
entity_summary_2: sensor.bom_hobart_summary_2
entity_summary_3: sensor.bom_hobart_summary_3
entity_summary_4: sensor.bom_hobart_summary_4
entity_summary_5: sensor.bom_hobart_summary_5
entity_sun: sun.sun
entity_temperature: sensor.bom_hobart_air_temp_c
entity_uv_alert: sensor.bom_uv_alert
entity_uv_alert_summary: sensor.bom_uv_alert_summary
entity_wind_bearing: sensor.bom_hobart_wind_direction
entity_wind_gust_kt: sensor.bom_hobart_wind_gust_kt
entity_wind_speed_kt: sensor.bom_hobart_wind_speed_kt
large_icon_left_position: 0em
large_icon_top_margin: '-3.2em'
locale: en
old_daily_format: false
old_icon: 'true'
refresh_interval: 60
separator_top_margin: 6em
show_beaufort: false
show_separator: false
slot_l1: daytime_high
slot_l2: wind_kt
slot_l3: pop
slot_l4: possible_today
slot_l5: remove
slot_l6: remove
slot_r1: sun_next
slot_r2: sun_following
slot_r3: uv_summary
slot_r4: fire_summary
slot_r5: remove
slot_r6: remove
static_icons: false
style: |
  ha-card {
    border: solid 1px var(--primary-color);
    background: url("/local/background/card_bg_{{states('input_select.select_theme')}}.png");
  }
summary_font_size: 1em
summary_top_padding: 1em
sunset: true
temp_font_size: 4em
temp_font_weight: 300
temp_right_pos: 0.85em
temp_top_margin: 0px
temp_uom_right_margin: 7px
temp_uom_top_margin: '-12px'
time_format: 12
title: BOM Weather
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
type: 'custom:bom-weather-card'

Hahahahaha!!! Glad it wasn’t me… yeah 2 new variables… it was the easiest way to get it to work.
So all is good now?

Yep. All good. Thanks.

1 Like

Can’t work out what to adjust to stop the chopping of current conditions text. Everything else is good.

apparent_right_margin: 1em
apparent_right_pos: 1em
apparent_top_margin: 45px
current_data_top_margin: 10em
current_text_alignment: center
current_text_font_size: 1.5em
current_text_left_pos: 0px
current_text_top_margin: 4.5em
current_text_width: 100%
entity_apparent_temp: sensor.bom_watsonia_feels_like_c
entity_current_conditions: sensor.bom_watsonia_icon_0
entity_current_text: sensor.bom_current_text
entity_daily_summary: sensor.bom_watsonia_detailed_summary_0
entity_daytime_high: sensor.bom_today_max
entity_daytime_low: sensor.bom_today_min
entity_fire_danger: sensor.bom_fire_danger
entity_fire_danger_summary: sensor.bom_fire_danger_summary
entity_forecast_high_temp_1: sensor.bom_watsonia_max_temp_c_1
entity_forecast_high_temp_2: sensor.bom_watsonia_max_temp_c_2
entity_forecast_high_temp_3: sensor.bom_watsonia_max_temp_c_3
entity_forecast_high_temp_4: sensor.bom_watsonia_max_temp_c_4
entity_forecast_high_temp_5: sensor.bom_watsonia_max_temp_c_5
entity_forecast_icon_1: sensor.bom_watsonia_icon_1
entity_forecast_icon_2: sensor.bom_watsonia_icon_2
entity_forecast_icon_3: sensor.bom_watsonia_icon_3
entity_forecast_icon_4: sensor.bom_watsonia_icon_4
entity_forecast_icon_5: sensor.bom_watsonia_icon_5
entity_forecast_low_temp_1: sensor.bom_watsonia_min_temp_c_1
entity_forecast_low_temp_2: sensor.bom_watsonia_min_temp_c_2
entity_forecast_low_temp_3: sensor.bom_watsonia_min_temp_c_3
entity_forecast_low_temp_4: sensor.bom_watsonia_min_temp_c_4
entity_forecast_low_temp_5: sensor.bom_watsonia_min_temp_c_5
entity_humidity: sensor.bom_watsonia_relative_humidity
entity_pop: sensor.bom_watsonia_chance_of_rain_0
entity_pop_1: sensor.bom_watsonia_chance_of_rain_1
entity_pop_2: sensor.bom_watsonia_chance_of_rain_2
entity_pop_3: sensor.bom_watsonia_chance_of_rain_3
entity_pop_4: sensor.bom_watsonia_chance_of_rain_4
entity_pop_5: sensor.bom_watsonia_chance_of_rain_5
entity_pop_intensity: sensor.bom_watsonia_rain_today
entity_pos_1: sensor.bom_watsonia_possible_rainfall_1
entity_pos_2: sensor.bom_watsonia_possible_rainfall_2
entity_pos_3: sensor.bom_watsonia_possible_rainfall_3
entity_pos_4: sensor.bom_watsonia_possible_rainfall_4
entity_pos_5: sensor.bom_watsonia_possible_rainfall_5
entity_possible_today: sensor.bom_watsonia_possible_rainfall_0
entity_pressure: sensor.bom_watsonia_pressure_mb
entity_summary_1: sensor.bom_watsonia_summary_1
entity_summary_2: sensor.bom_watsonia_summary_2
entity_summary_3: sensor.bom_watsonia_summary_3
entity_summary_4: sensor.bom_watsonia_summary_4
entity_summary_5: sensor.bom_watsonia_summary_5
entity_sun: sun.sun
entity_temperature: sensor.bom_watsonia_air_temp_c
entity_uv_alert: sensor.bom_uv_alert
entity_uv_alert_summary: sensor.bom_uv_alert_summary
entity_wind_bearing: sensor.bom_watsonia_wind_direction
entity_wind_gust: sensor.bom_watsonia_wind_gust_kmh
entity_wind_speed: sensor.bom_watsonia_wind_speed_kmh
large_icon_left_position: 0px
large_icon_top_margin: '-3.2em'
locale: en
old_daily_format: false
refresh_interval: 60
separator_top_margin: 5em
show_beaufort: false
show_separator: false
slot_l1: daytime_high
slot_l2: daytime_low
slot_l3: wind
slot_l4: pressure
slot_l5: sun_next
slot_r1: pop
slot_r2: humidity
slot_r3: uv_alert
slot_r4: fire_danger
slot_r5: sun_following
static_icons: false
summary_font_size: 0.8em
summary_top_padding: 2em
sunset: true
temp_font_size: 4em
temp_font_weight: 300
temp_right_pos: 0.85em
temp_top_margin: 0px
temp_uom_right_margin: 7px
temp_uom_top_margin: '-12px'
time_format: 12
title: BOM Weather
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
type: 'custom:bom-weather-card'

have you tried decreasing the current_text_top_margin? Or possibly increasing the separator_top_margin a bit?

It’s odd because you seem to have pretty out-of-the-box settings.

This is what I use:

apparent_right_margin: 1em
apparent_right_pos: 1em
apparent_top_margin: 45px
current_data_top_margin: 7em
current_text_alignment: center
current_text_font_size: 1.5em
current_text_left_pos: 0px
current_text_top_margin: 3em
current_text_width: 100%

@tom_l

Tried your settings and got this. Still got chopped text.

@DavidFW1960

Couldn’t find separator_top_margin to try. Maybe a font problem?

it’s an option you can add. Check the docs.
You can also remove all css settings from the card anyway - they are optional and will use the defaults if not overridden
Do you use card-mod anywhere or anything else that manipulates css?