Customising the BOM Weather and lovelace - now in HACS

You still have weather: somewhere

odd, rebooted hass and its working!

thank you David, your a legend

1 Like

Hi There,

I am trying to install your package / lovelace card but the sensors are not showing.
configuration.yaml code snipet

# Configure a default setup of Home Assistant (frontend, api, etc)

default_config:

# Example configuration.yaml entry

local_ip:

# Uncomment this if you are using SSL/TLS, running in Docker container, etc.

# http:

#   base_url: example.duckdns.org:8123

# Text to speech

tts:

  - platform: google_translate

weather: !include_dir_merge_named /packages/weather.yaml

group: !include groups.yaml

I am new to all of this and just am not able to see what i have done wrong.

Any ideas would be great

Wellā€¦ can you point to ANYWHERE in my docs that I tell you to put the package in the weather domain???

weather: !include_dir_merge_named /packages/weather.yaml

DONā€™T DO THAT

They are all sensors. You include it as a PACKAGE

Sorry to be testy but you are the third person in a week who has done this for inexplicable reasons!

(In fact just look at the 6 or so posts immediately above your one)

Firstly @DavidFW1960 thank you for all your effort to bring the BOM forecast and weather card into HACs.

I have followed your instructions and installed both the bom_forecast and the bom weather card.
I am using the Melbourne forecast (IDV10450) and the Melbourne (Olympic Park) observation (IDV60901.95936)



I am definitely getting some of the sensor data (i compared to the BOM website) but Iā€™m missing some of the key data.

My lovelace card is as follows:

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_melbourne_feels_like_c
entity_current_conditions: sensor.bom_melbourne_icon_0
entity_current_text: sensor.bom_current_text
entity_daily_summary: sensor.bom_melbourne_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_melbourne_max_temp_c_1
entity_forecast_high_temp_2: sensor.bom_melbourne_max_temp_c_2
entity_forecast_high_temp_3: sensor.bom_melbourne_max_temp_c_3
entity_forecast_high_temp_4: sensor.bom_melbourne_max_temp_c_4
entity_forecast_high_temp_5: sensor.bom_melbourne_max_temp_c_5
entity_forecast_icon_1: sensor.bom_melbourne_icon_1
entity_forecast_icon_2: sensor.bom_melbourne_icon_2
entity_forecast_icon_3: sensor.bom_melbourne_icon_3
entity_forecast_icon_4: sensor.bom_melbourne_icon_4
entity_forecast_icon_5: sensor.bom_melbourne_icon_5
entity_forecast_low_temp_1: sensor.bom_melbourne_min_temp_c_1
entity_forecast_low_temp_2: sensor.bom_melbourne_min_temp_c_2
entity_forecast_low_temp_3: sensor.bom_melbourne_min_temp_c_3
entity_forecast_low_temp_4: sensor.bom_melbourne_min_temp_c_4
entity_forecast_low_temp_5: sensor.bom_melbourne_min_temp_c_5
entity_humidity: sensor.bom_melbourne_relative_humidity
entity_pop: sensor.bom_melbourne_chance_of_rain_0
entity_pop_1: sensor.bom_melbourne_chance_of_rain_1
entity_pop_2: sensor.bom_melbourne_chance_of_rain_2
entity_pop_3: sensor.bom_melbourne_chance_of_rain_3
entity_pop_4: sensor.bom_melbourne_chance_of_rain_4
entity_pop_5: sensor.bom_melbourne_chance_of_rain_5
entity_pop_intensity: sensor.bom_melbourne_rain_today
entity_pos_1: sensor.bom_melbourne_possible_rainfall_1
entity_pos_2: sensor.bom_melbourne_possible_rainfall_2
entity_pos_3: sensor.bom_melbourne_possible_rainfall_3
entity_pos_4: sensor.bom_melbourne_possible_rainfall_4
entity_pos_5: sensor.bom_melbourne_possible_rainfall_5
entity_possible_today: sensor.bom_melbourne_possible_rainfall_0
entity_summary_1: sensor.bom_melbourne_summary_1
entity_summary_2: sensor.bom_melbourne_summary_2
entity_summary_3: sensor.bom_melbourne_summary_3
entity_summary_4: sensor.bom_melbourne_summary_4
entity_summary_5: sensor.bom_melbourne_summary_5
entity_sun: sun.sun
entity_temperature: sensor.bom_melbourne_air_temp_c
entity_uv_alert: sensor.bom_uv_alert
entity_uv_alert_summary: sensor.bom_uv_alert_summary
entity_wind_bearing: sensor.bom_melbourne_wind_direction
entity_wind_gust: sensor.bom_melbourne_wind_gust_kmh
entity_wind_gust_kt: sensor.bom_melbourne_wind_gust_kt
entity_wind_speed: sensor.bom_melbourne_wind_speed_kmh
entity_wind_speed_kt: sensor.bom_melbourne_wind_speed_kt
large_icon_left_position: 0px
large_icon_top_margin: '-3.2em'
locale: en
old_daily_format: false
refresh_interval: 10
separator_top_margin: 6em
show_beaufort: false
show_decimals: true
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'

my sensors.yaml:

# Show BOM Satellite and Radar
  - platform: bom
    station: !secret my_bom_station
    name: !secret my_bom_name
    monitored_conditions:
      - apparent_t
      - cloud
      - cloud_base_m
      - cloud_oktas
      - cloud_type_id
      - cloud_type
      - delta_t
      - gust_kmh
      - gust_kt
      - air_temp
      - dewpt
      - local_date_time
      - local_date_time_full
      - press
      - press_qnh
      - press_msl
      - press_tend
      - rain_trace
      - rel_hum
      - sea_state
      - swell_dir_worded
      - swell_height
      - swell_period
      - vis_km
      - weather
      - wind_dir
      - wind_spd_kmh
      - wind_spd_kt

  - platform: bom_forecast
    product_id: !secret my_bom_product_id
    name: !secret my_bom_name
    forecast_days: 6
    rest_of_today: true
    friendly: false
    friendly_state_format: '{max}, {summary}'
    monitored_conditions:
      - 'max'
      - 'min'
      - 'chance_of_rain'
      - 'possible_rainfall'
      - 'summary'
      - 'detailed_summary'
      - 'icon'
      - 'uv_alert'
      - 'fire_danger'
      
  - platform: template
    sensors:
      bom_current_text:
        value_template: >
            {% set val = states('sensor.bom_melboune_summary_0').split('.')[0] %} 
            {{ val | title }}
      bom_uv_alert:
        value_template: >
            {%- if states('sensor.bom_melboune_uv_alert_0') == '##' -%}
            UV Today: No Data
            {%- elif states('sensor.bom_melboune_uv_alert_0') != 'n/a' -%} 
            UV Today: {{ states('sensor.bom_melboune_uv_alert_0') }}
            {%- elif states('sensor.bom_melboune_uv_alert_1') == '##' -%}
            UV Tomorrow: No Data
            {%- else -%}
            UV Tomorrow: {{ states('sensor.bom_melboune_uv_alert_1') }}
            {%- endif -%}
      bom_uv_alert_summary:
        value_template: >
            {%- if states('sensor.bom_melboune_uv_alert_0') == '##' -%} 
            {% set val = 'No Data' %}
            {%- elif states('sensor.bom_melboune_uv_alert_0') != 'n/a' -%} 
            {% set val = states('sensor.bom_melboune_uv_alert_0').split('[')[1].split(']')[0] %}
            {%- elif states('sensor.bom_melboune_uv_alert_1') == '##' -%} 
            {% set val = 'No Data' %}
            {%- elif states('sensor.bom_melboune_uv_alert_1') != 'n/a' -%} 
            {% set val = states('sensor.bom_melboune_uv_alert_1').split('[')[1].split(']')[0] %}
            {%- else -%}
            {%- set val = 'No Data' -%}
            {%- endif -%}
            {{ val | title }} 
          
      bom_fire_danger:
        value_template: >
            {%- if states('sensor.bom_melboune_fire_danger_0') == '##' -%}
            Fire Danger Today: No Data
            {%- elif states('sensor.bom_melboune_fire_danger_0') != 'n/a' -%} 
            Fire Danger Today: {{ states('sensor.bom_melboune_fire_danger_0') }}
            {%- elif states('sensor.bom_melboune_fire_danger_1') == '##' -%}
            Fire Danger Tomorrow: No Data
            {%- else -%}
            Fire Danger Tomorrow: {{ states('sensor.bom_melboune_fire_danger_1') }}
            {%- endif -%}
      bom_fire_danger_summary:
        value_template: >
            {%- if states('sensor.bom_melboune_fire_danger_0') == '##' -%}
            No Data
            {%- elif states('sensor.bom_melboune_fire_danger_0') != 'n/a' -%} 
            {{ states('sensor.bom_melboune_fire_danger_0') }}
            {%- elif states('sensor.bom_melboune_fire_danger_1') == '##' -%}
            No Data
            {%- else -%}
            {{ states('sensor.bom_melboune_fire_danger_1') }}
            {%- endif -%}
      bom_forecast_0:
        entity_id:
          - sensor.bom_today_max
          - sensor.bom_today_min
          - sensor.bom_melboune_chance_of_rain_0
          - sensor.bom_melboune_icon_0
        friendly_name: "Today"
        value_template: >
          {{states('sensor.bom_today_max')|round(0)}}Ā°/{{states('sensor.bom_today_min')|round(0)}}Ā°/{{states('sensor.bom_melboune_chance_of_rain_0')|round(0)}}%
        entity_picture_template: >-
          {%- if states('sun.sun') == 'below_horizon' and (states('sensor.bom_melboune_icon_0') == 'fog' or states('sensor.bom_melboune_icon_0') == 'haze' or states('sensor.bom_melboune_icon_0') == 'light-showers' or states('sensor.bom_melboune_icon_0') == 'partly-cloudy' or states('sensor.bom_melboune_icon_0') == 'showers') -%}
          {{ '/local/icons/bom_icons/' ~ states('sensor.bom_melboune_icon_0') ~ '-night.png' }}
          {%- else -%}
          {{ '/local/icons/bom_icons/' ~ states('sensor.bom_melboune_icon_0') ~ '.png' }}
          {%- endif -%}
      bom_forecast_1:
        entity_id:
          - sensor.bom_melboune_max_temp_c_1
          - sensor.bom_melboune_min_temp_c_1
          - sensor.bom_melboune_chance_of_rain_1
          - sensor.bom_melboune_icon_1
        friendly_name_template: >
          {%- set date = as_timestamp(now()) + (1 * 86400 ) -%}
          {{ date | timestamp_custom('Tomorrow (%-d/%-m)') }}
        value_template: >
          {{states('sensor.bom_melboune_max_temp_c_1')|round(0)}}Ā°/{{states('sensor.bom_melboune_min_temp_c_1')|round(0)}}Ā°/{{states('sensor.bom_melboune_chance_of_rain_1')|round(0)}}%
        entity_picture_template: >-
          {{ '/local/icons/bom_icons/' ~ states('sensor.bom_melboune_icon_1') ~ '.png' }}
      bom_forecast_2:
        entity_id:
          - sensor.bom_melboune_max_temp_c_2
          - sensor.bom_melboune_min_temp_c_2
          - sensor.bom_melboune_chance_of_rain_2
          - sensor.bom_melboune_icon_2
        friendly_name_template: >
          {%- set date = as_timestamp(now()) + (2 * 86400 ) -%}
          {{ date | timestamp_custom('%A (%-d/%-m)') }}
        value_template: >
          {{states('sensor.bom_melboune_max_temp_c_2')|round(0)}}Ā°/{{states('sensor.bom_melboune_min_temp_c_2')|round(0)}}Ā°/{{states('sensor.bom_melboune_chance_of_rain_2')|round(0)}}%
        entity_picture_template: >-
          {{ '/local/icons/bom_icons/' ~ states('sensor.bom_melboune_icon_2') ~ '.png' }}
      bom_forecast_3:
        entity_id:
          - sensor.bom_melboune_max_temp_c_3
          - sensor.bom_melboune_min_temp_c_3
          - sensor.bom_melboune_chance_of_rain_3
          - sensor.bom_melboune_icon_3
        friendly_name_template: >
          {%- set date = as_timestamp(now()) + (3 * 86400 ) -%}
          {{ date | timestamp_custom('%A (%-d/%-m)') }}
        value_template: >
          {{states('sensor.bom_melboune_max_temp_c_3')|round(0)}}Ā°/{{states('sensor.bom_melboune_min_temp_c_3')|round(0)}}Ā°/{{states('sensor.bom_melboune_chance_of_rain_3')|round(0)}}%
        entity_picture_template: >-
          {{ '/local/icons/bom_icons/' ~ states('sensor.bom_melboune_icon_3') ~ '.png' }}
      bom_forecast_4:
        entity_id:
          - sensor.bom_melboune_max_temp_c_4
          - sensor.bom_melboune_min_temp_c_4
          - sensor.bom_melboune_chance_of_rain_4
          - sensor.bom_melboune_icon_4
        friendly_name_template: >
          {%- set date = as_timestamp(now()) + (4 * 86400 ) -%}
          {{ date | timestamp_custom('%A (%-d/%-m)') }}
        value_template: >
          {{states('sensor.bom_melboune_max_temp_c_4')|round(0)}}Ā°/{{states('sensor.bom_melboune_min_temp_c_4')|round(0)}}Ā°/{{states('sensor.bom_melboune_chance_of_rain_4')|round(0)}}%
        entity_picture_template: >-
          {{ '/local/icons/bom_icons/' ~ states('sensor.bom_melboune_icon_4') ~ '.png' }}
      bom_forecast_5:
        entity_id:
          - sensor.bom_melboune_max_temp_c_5
          - sensor.bom_melboune_min_temp_c_5
          - sensor.bom_melboune_chance_of_rain_5
          - sensor.bom_melboune_icon_5
        friendly_name_template: >
          {%- set date = as_timestamp(now()) + (5 * 86400 ) -%}
          {{ date | timestamp_custom('%A (%-d/%-m)') }}
        value_template: >
          {{states('sensor.bom_melboune_max_temp_c_5')|round(0)}}Ā°/{{states('sensor.bom_melboune_min_temp_c_5')|round(0)}}Ā°/{{states('sensor.bom_melboune_chance_of_rain_5')|round(0)}}%
        entity_picture_template: >-
          {{ '/local/icons/bom_icons/' ~ states('sensor.bom_melboune_icon_5') ~ '.png' }}
      bom_forecast_6:
        entity_id:
          - sensor.bom_melboune_max_temp_c_6
          - sensor.bom_melboune_min_temp_c_6
          - sensor.bom_melboune_chance_of_rain_6
          - sensor.bom_melboune_icon_6
        friendly_name_template: >
          {%- set date = as_timestamp(now()) + (6 * 86400 ) -%}
          {{ date | timestamp_custom('%A (%-d/%-m)') }}
        value_template: >
          {{states('sensor.bom_melboune_max_temp_c_6')|round(0)}}Ā°/{{states('sensor.bom_melboune_min_temp_c_6')|round(0)}}Ā°/{{states('sensor.bom_melboune_chance_of_rain_6')|round(0)}}%
        entity_picture_template: >-
          {{ '/local/icons/bom_icons/' ~ states('sensor.bom_melboune_icon_6') ~ '.png' }}
      bom_today_max:
        entity_id:
          - sensor.bom_melboune_max_temp_c_0
          - sensor.today_temp_bom
        value_template: >
          {%- if states('sensor.bom_melboune_max_temp_c_0') == 'n/a' -%} 
            {{ state_attr('sensor.today_temp_bom', 'max_value') }}
          {% else %}
            {{ states('sensor.bom_melboune_max_temp_c_0') }}
          {% endif %}
      bom_today_min:
        entity_id:
          - sensor.bom_melboune_min_temp_c_0
          - sensor.today_temp_bom
        value_template: >
          {%- if states('sensor.bom_melboune_min_temp_c_0') == 'n/a' -%} 
            {{ state_attr('sensor.today_temp_bom', 'min_value') }}
          {% else %}
            {{ states('sensor.bom_melboune_min_temp_c_0') }}
          {% endif %}
  - platform: statistics
    name: today_temp_bom
    sampling_size: 150
    entity_id: sensor.bom_melboune_air_temp_c
    max_age:
      hours: 24

my automations.yaml:

# Configuration for BOM Weather
 - alias: 'Update BOM Icons'
   trigger:
    - event: start
      platform: homeassistant
    - entity_id: sun.sun
      platform: state
      to: 'above_horizon'
    - entity_id: sun.sun
      platform: state
      to: 'below_horizon'
   action:
    - service: homeassistant.update_entity
      entity_id: sensor.bom_forecast_0, sensor.bom_forecast_1, sensor.bom_forecast_2, sensor.bom_forecast_3, sensor.bom_forecast_4, sensor.bom_forecast_5, sensor.bom_forecast_6

Any advice would be greatly appreciated.

You have not added the Template sensors needed for current text and todayā€™s high/low. Some of the conditions in the FTP component donā€™t existā€¦ Check the docs for valid configuration entries. For UV and Fire it looks like you have the wrong entity being parsed through. (They probably need Melbourne in them)
Check the dev-tools that states exist.

Thanks for the advice - Iā€™ve been able to fix the issues and have the card working correctly now.

A couple of quick questions:

  • I tried to update a couple of the font sizes (eg current_text from 1.5em to 2 or even 3 - also tried summary) but this didnā€™t change the text size on the card - is there something else I need to do?
  • is there a way to display other information such as the sensor ā€œbom__local_timeā€ on the card - I tried adding to the card but it didnā€™t display
  • I see that station_name is an attribute in many of the sensors and I can extract that via a template - again unsure how to display on the card.

Not sure if the above are worth coding directly into the card (maybe with toggles to display / not display) - not sure if others would like to see this but I the BOM app on my phone shows this under a ā€œLast Updateā€ section at the bottom of the weather tab and is handy to know.

Anyway thanks again for your help.

OK. Glad you got it going. I have you a bum steer regarding the UV and Fire - they also use a Template sensor but you hopefully found it.
Regarding the timeā€¦ The last updated is an attribute of some of the entities like this one:


Iā€™m reluctant to add any more new information to the card - itā€™s already pretty big and I have had requests to make it smaller.
I have a few other things Iā€™m interested in and I just show them in an entities card below the BOM card. You could display that attribute using that card yourself if you wanted to.
Using the custom config-template card see thisā€¦

          - type: 'custom:config-template-card'
            variables:
              - states['sensor.beaufort'].state
              - states['sensor.heatindex'].state
              - states['sensor.heatindexrating'].state
              - states['sensor.bom_gosford_air_temp_c'].attributes['last_update']
            entities:
              - sensor.beaufort
              - sensor.heatindex
              - sensor.heatindexrating
              - sensor.bom_gosford_air_temp_c
            card:
              type: 'custom:hui-entities-card'
              entities:
                - entity: sensor.beaufort
                  name: "${'Beaufort force:' + '\xa0'.repeat(2) + (vars[0] == 12 ? 'Hurricane Force' : vars[0] == 11 ? 'Violent Storm' : vars[0] == 10 ? 'Storm, whole gale' : vars[0] == 9 ? 'Strong/severe gale' : vars[0] == 8 ? 'Gale/ fresh gale' : vars[0] == 7 ? 'High wind, moderate/near gale' : vars[0] == 6 ? 'Strong breeze' : vars[0] == 5 ? 'Fresh breeze' : vars[0] == 4 ? 'Moderate breeze' : vars[0] == 3 ? 'Gentle breeze' : vars[0] == 2 ? 'Light breeze' : vars[0] == 1 ? 'Light air' : 'Calm')}"
                - entity: sensor.heatindex
                  name: "${'Heat Index:' + '\xa0'.repeat(2) + vars[2]}"
                - entity: sensor.bom_gosford_air_temp_c
                  name: "${'BOM Update:' + '\xa0'.repeat(2) + ( new Date(vars[3]).toLocaleTimeString('en-US') ) + '\xa0'.repeat(2) + 'Current Temp' }"

There is no current way to display the station name on the card but you could do similar to the above for that as well. I canā€™t see myself adding these to the card itself.

Ohā€¦ the font size should work. Iā€™m going to check that now and seeā€¦
EDIT: They seem to be ignored. Iā€™ll check that now
EDIT2: I donā€™t seem to be able to fix it easily. Not sure why at the moment

hey David!
please let me ask if you recognize this iOS app Scrollbar using dark-sky-weather-card? issue I have with the ā€˜originalā€™ dark-sky-weather-card causing a left hand side scrollbar on the iPhone (in the App and iPhone safari browser).

Does that happen with your card too?
Ive checked the css styles, and quickly dont see too many differences that could come near a reason for this to happen.

thanks if you could check.

I use this card and do not see the scroll bar.

the Bom card of the DS cardā€¦?

BoM

ā€œThisā€ being the topic we are chatting in.

Mariusā€¦ try using this BOM card - it should work as is with the configuration you already have.

yeah,thanks, must try that soon, with the demise of DS next yearā€¦ better prepare :wink:

btw, Ive found the culprit in my card, had the tooltip_width set to 110. Corrected that to:

tooltip_width: 80

and now showing just beautiful.

1 Like

Hi David, Iā€™ve really tried hard to get the card working without asking for help but Iā€™m still having problems. I was wondering if one of my mistakes is to use the sensors defined in the package when I also have sensors in sensors.yaml. Should all sensors be in the same file?

Yeah if you use the package, you donā€™t add your own sensors as well. You will need to change Gosford to whatever city/town you are in. The #1 thing to look for is that if you use Developer Tools>States, make sure every sensor your are parsing through to the card existsā€¦ That is the #1 reason people have problems. Feel free to ask for help tooā€¦

Thanks Dave, The BOM sensors were all created bar about 6 so I deleted the lines for those in the card. The card still doesnā€™t show so Iā€™m digging deeper. This is my first use of the HACS.

I have a strange thing happening. I run hassio on a Raspberry Pi and access the folders via SMB from my Mac. I can create folders with any name bar ā€˜iconsā€™ via the SMB so I renamed the icons folder before copying it over via SMB then used configurator to rename it back to icons. I can see the folder and contents in hassio but not on the Mac via SMB. I did a search to look for reserved names but nothing came up. Have you ever heard of that as a problem before? Not sure if that is inhibiting the card from appearing?

The SMB addon in Hassio has icons listed in the veto by default - so remove that and restart the addon.

IF the card doesnā€™t show it means you have entities being parsed to the card that donā€™t exist. Check them against dev-tools. Or post your card config hereā€¦ I can most likely spot it. (pressure missing is common). Also make sure you have got the template sensorsā€¦

Some sensors are mandatory so deleting them wonā€™t help - they will stop the card appearing. Specifically which sensors?

Thanks David. I seem to be progressing however now I am getting ā€œCustom element doesnā€™t exist: bom-weather-card.ā€ Wondering if I should remove and reinstall HACS as I read somewhere?

Check your card is correctly configured in configuration / resources (you may have to enable advanced mode in your profile to see this).