Customising the BOM Weather and lovelace - now in HACS

hi @DavidFW1960 just letting you know that i have finally got my entities card to work with icons for the forecast working. Thanks for that. Now to tackle the weather card

Now you probably have been asked many times but i get the following error & empty pane when
"No visual editor available for: custom:bom-weather-card"

My config is as follows:
entity_apparent_temp: sensor.bom_melbourne_feels_like_c
entity_current_conditions: sensor.bom_melbourne_icon_0
entity_temperature: sensor.bom_melbourne_air_temp_c
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_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_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
title: BOM Weather
type: ‘custom:bom-weather-card’

That’s not an error. That’s telling you you have to use the card code editor because there is no GUI editor. There are many cards like this.

Like Tom said. Add a manual card and post in your code.

Hi @DavidFW1960 please find below my manual card code:

type: ‘custom:bom-weather-card’
title: BOM Weather
entity_apparent_temp: sensor.bom_melbourne_feels_like_c
entity_current_conditions: sensor.bom_melbourne_icon_0
entity_temperature: sensor.bom_melbourne_air_temp_c
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_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_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

Thanks in advance

is the card not displaying when you paste that into the manual card? Do all those entities exist?

Hi Mark I just changed the entity from melbourne to essendon_airport but still no luck.

so to answer you question:
a) Yes it does not display anything at all & has the message at the bottom
b) I check that the entity “sensor.bom_essendon_airport_feels_like_c” is available as per below screenshot.

"No visual editor available for: custom:bom-weather-card"

You need ALL those lines pasted in there not just that single one. ALL those entities must exist or the card won’t display. In your post, you will need to change melbourne to essendon_airport…

Hi alex.hart645, can you explain what ‘Place this in packages folder’ means?

My best guess would be ‘rename weather.yaml as “configuration.yaml” and save it in your Home Assistant directory’ but that doesn’t seem to work so it’s probably not that.

I also don’t understand step 3 at all so seem to have a complete blank on the topic of ‘packages’. What does ‘add packages’ mean in step 3?

see packages here

https://www.home-assistant.io/docs/configuration/packages/

Hi @DavidFW1960 thank you so much for helping me out, it is now working. I had mish mash between melbourne & essendon_airport. I ended changing my weather station to Melbourne (olympic park) and calling all sensors with melbourne as per below. The next thing is to make sure the BOM is accurate when compared to my Google weather :slight_smile:

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_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_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_temperature: sensor.bom_melbourne_air_temp_c
title: BOM Weather
type: ‘custom:bom-weather-card’

BOM should be most accurate. I don’t know where Google gets it’s weather data from…

:grinning: thanks once again

1 Like

Inch by inch I am making progress towards getting this working. The weather.yaml file works EXCEPT for every entry from bom_forecast_0 through to bom_forecast_6. All the prerequisite sensor data is available to those sections.

Typical errors I get are:
‘Error loading /config/configuration.yaml: ‘utf-8’ codec can’t decode byte 0xb0 in position 4099: invalid start byte’

When I open weather.yaml in Notepad++ position 4099 is the ° character.

E.g. this section.

value_template: >
{{states(‘sensor.bom_today_max’)|round(0)}}°/{{states(‘sensor.bom_today_min’)|round(0)}}°/{{states(‘sensor.bom_canberra_chance_of_rain_0’)|round(0)}}%

I tried replacing the existing code with versions that didn’t have that character but have no real idea what I’m doing so failed. Could there be an issue with that character for me or should I be looking elsewhere for the problem?

Make sure you save the file as UTF8 and Linux line endings

I now have everything working and it’s great!! We even had a brief burst of snow here today and seeing the little animated snow going was good fun. Many thanks to David for your work in developing and supporting this fantastic integration.

I did have one troubleshooting moment when I was deleting as much as possible from the config file to try and simply things and (eventually) realised that removing default_config kills the sun! I was like - where’s the sun gone?? It’s always there!

Anyway, this has been a fun little project and a good learning process for a beginner like myself so thanks again.

2 Likes

Hi all,
I thought i was following everything OK but I appear to have stuffed up somewhere.
For the weather.yaml file i copy and pasted and changed gosford to melbourne.

My BOM details are
station_id: IDV60901.94864
name: melbourne
location: Melbourne
product_id: IDV10450

and this is in my configuration.yaml file.

#BOM Weather Template

  • platform: bom
    station: !secret station_id
    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 product_id
    name: !secret name #In my examples I use melbourne
    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_melbourne_summary_0’).split(’.’)[0] %}
    {{ val | title }}
    bom_uv_alert:
    value_template: >
    {%- if states(‘sensor.bom_melbourne_uv_alert_0’) == ‘##’ -%}
    UV Today: No Data
    {%- elif states(‘sensor.bom_melbourne_uv_alert_0’) != ‘n/a’ -%}
    UV Today: {{ states(‘sensor.bom_melbourne_uv_alert_0’) }}
    {%- elif states(‘sensor.bom_melbourne_uv_alert_1’) == ‘##’ -%}
    UV Tomorrow: No Data
    {%- else -%}
    UV Tomorrow: {{ states(‘sensor.bom_melbourne_uv_alert_1’) }}
    {%- endif -%}
    bom_uv_alert_summary:
    value_template: >
    {%- if states(‘sensor.bom_melbourne_uv_alert_0’) == ‘##’ -%}
    {% set val = ‘No Data’ %}
    {%- elif states(‘sensor.bom_melbourne_uv_alert_0’) != ‘n/a’ -%}
    {% set val = states(‘sensor.bom_melbourne_uv_alert_0’).split(’[’)[1].split(’]’)[0] %}
    {%- elif states(‘sensor.bom_melbourne_uv_alert_1’) == ‘##’ -%}
    {% set val = ‘No Data’ %}
    {%- elif states(‘sensor.bom_melbourne_uv_alert_1’) != ‘n/a’ -%}
    {% set val = states(‘sensor.bom_melbourne_uv_alert_1’).split(’[’)[1].split(’]’)[0] %}
    {%- else -%}
    {%- set val = ‘No Data’ -%}
    {%- endif -%}
    {{ val | title }}

    bom_fire_danger:
    value_template: >
    {%- if states(‘sensor.bom_melbourne_fire_danger_0’) == ‘##’ -%}
    Fire Danger Today: No Data
    {%- elif states(‘sensor.bom_melbourne_fire_danger_0’) != ‘n/a’ -%}
    Fire Danger Today: {{ states(‘sensor.bom_melbourne_fire_danger_0’) }}
    {%- elif states(‘sensor.bom_melbourne_fire_danger_1’) == ‘##’ -%}
    Fire Danger Tomorrow: No Data
    {%- else -%}
    Fire Danger Tomorrow: {{ states(‘sensor.bom_melbourne_fire_danger_1’) }}
    {%- endif -%}
    bom_fire_danger_summary:
    value_template: >
    {%- if states(‘sensor.bom_melbourne_fire_danger_0’) == ‘##’ -%}
    No Data
    {%- elif states(‘sensor.bom_melbourne_fire_danger_0’) != ‘n/a’ -%}
    {{ states(‘sensor.bom_melbourne_fire_danger_0’) }}
    {%- elif states(‘sensor.bom_melbourne_fire_danger_1’) == ‘##’ -%}
    No Data
    {%- else -%}
    {{ states(‘sensor.bom_melbourne_fire_danger_1’) }}
    {%- endif -%}
    bom_forecast_0:
    entity_id:
    - sensor.bom_today_max
    - sensor.bom_today_min
    - sensor.bom_melbourne_chance_of_rain_0
    - sensor.bom_melbourne_icon_0
    friendly_name: “Today”
    value_template: >
    {{states(‘sensor.bom_today_max’)|round(0)}}°/{{states(‘sensor.bom_today_min’)|round(0)}}°/{{states(‘sensor.bom_melbourne_chance_of_rain_0’)|round(0)}}%
    entity_picture_template: >-
    {%- if states(‘sun.sun’) == ‘below_horizon’ and (states(‘sensor.bom_melbourne_icon_0’) == ‘fog’ or states(‘sensor.bom_melbourne_icon_0’) == ‘haze’ or states(‘sensor.bom_melbourne_icon_0’) == ‘light-showers’ or states(‘sensor.bom_melbourne_icon_0’) == ‘partly-cloudy’ or states(‘sensor.bom_melbourne_icon_0’) == ‘showers’) -%}
    {{ ‘/local/icons/bom_icons/’ ~ states(‘sensor.bom_melbourne_icon_0’) ~ ‘-night.png’ }}
    {%- else -%}
    {{ ‘/local/icons/bom_icons/’ ~ states(‘sensor.bom_melbourne_icon_0’) ~ ‘.png’ }}
    {%- endif -%}
    bom_forecast_1:
    entity_id:
    - sensor.bom_melbourne_max_temp_c_1
    - sensor.bom_melbourne_min_temp_c_1
    - sensor.bom_melbourne_chance_of_rain_1
    - sensor.bom_melbourne_icon_1
    friendly_name_template: >
    {%- set date = as_timestamp(now()) + (1 * 86400 ) -%}
    {{ date | timestamp_custom(‘Tomorrow (%-d/%-m)’) }}
    value_template: >
    {{states(‘sensor.bom_melbourne_max_temp_c_1’)|round(0)}}°/{{states(‘sensor.bom_melbourne_min_temp_c_1’)|round(0)}}°/{{states(‘sensor.bom_melbourne_chance_of_rain_1’)|round(0)}}%
    entity_picture_template: >-
    {{ ‘/local/icons/bom_icons/’ ~ states(‘sensor.bom_melbourne_icon_1’) ~ ‘.png’ }}
    bom_forecast_2:
    entity_id:
    - sensor.bom_melbourne_max_temp_c_2
    - sensor.bom_melbourne_min_temp_c_2
    - sensor.bom_melbourne_chance_of_rain_2
    - sensor.bom_melbourne_icon_2
    friendly_name_template: >
    {%- set date = as_timestamp(now()) + (2 * 86400 ) -%}
    {{ date | timestamp_custom(’%A (%-d/%-m)’) }}
    value_template: >
    {{states(‘sensor.bom_melbourne_max_temp_c_2’)|round(0)}}°/{{states(‘sensor.bom_melbourne_min_temp_c_2’)|round(0)}}°/{{states(‘sensor.bom_melbourne_chance_of_rain_2’)|round(0)}}%
    entity_picture_template: >-
    {{ ‘/local/icons/bom_icons/’ ~ states(‘sensor.bom_melbourne_icon_2’) ~ ‘.png’ }}
    bom_forecast_3:
    entity_id:
    - sensor.bom_melbourne_max_temp_c_3
    - sensor.bom_melbourne_min_temp_c_3
    - sensor.bom_melbourne_chance_of_rain_3
    - sensor.bom_melbourne_icon_3
    friendly_name_template: >
    {%- set date = as_timestamp(now()) + (3 * 86400 ) -%}
    {{ date | timestamp_custom(’%A (%-d/%-m)’) }}
    value_template: >
    {{states(‘sensor.bom_melbourne_max_temp_c_3’)|round(0)}}°/{{states(‘sensor.bom_melbourne_min_temp_c_3’)|round(0)}}°/{{states(‘sensor.bom_melbourne_chance_of_rain_3’)|round(0)}}%
    entity_picture_template: >-
    {{ ‘/local/icons/bom_icons/’ ~ states(‘sensor.bom_melbourne_icon_3’) ~ ‘.png’ }}
    bom_forecast_4:
    entity_id:
    - sensor.bom_melbourne_max_temp_c_4
    - sensor.bom_melbourne_min_temp_c_4
    - sensor.bom_melbourne_chance_of_rain_4
    - sensor.bom_melbourne_icon_4
    friendly_name_template: >
    {%- set date = as_timestamp(now()) + (4 * 86400 ) -%}
    {{ date | timestamp_custom(’%A (%-d/%-m)’) }}
    value_template: >
    {{states(‘sensor.bom_melbourne_max_temp_c_4’)|round(0)}}°/{{states(‘sensor.bom_melbourne_min_temp_c_4’)|round(0)}}°/{{states(‘sensor.bom_melbourne_chance_of_rain_4’)|round(0)}}%
    entity_picture_template: >-
    {{ ‘/local/icons/bom_icons/’ ~ states(‘sensor.bom_melbourne_icon_4’) ~ ‘.png’ }}
    bom_forecast_5:
    entity_id:
    - sensor.bom_melbourne_max_temp_c_5
    - sensor.bom_melbourne_min_temp_c_5
    - sensor.bom_melbourne_chance_of_rain_5
    - sensor.bom_melbourne_icon_5
    friendly_name_template: >
    {%- set date = as_timestamp(now()) + (5 * 86400 ) -%}
    {{ date | timestamp_custom(’%A (%-d/%-m)’) }}
    value_template: >
    {{states(‘sensor.bom_melbourne_max_temp_c_5’)|round(0)}}°/{{states(‘sensor.bom_melbourne_min_temp_c_5’)|round(0)}}°/{{states(‘sensor.bom_melbourne_chance_of_rain_5’)|round(0)}}%
    entity_picture_template: >-
    {{ ‘/local/icons/bom_icons/’ ~ states(‘sensor.bom_melbourne_icon_5’) ~ ‘.png’ }}
    bom_forecast_6:
    entity_id:
    - sensor.bom_melbourne_max_temp_c_6
    - sensor.bom_melbourne_min_temp_c_6
    - sensor.bom_melbourne_chance_of_rain_6
    - sensor.bom_melbourne_icon_6
    friendly_name_template: >
    {%- set date = as_timestamp(now()) + (6 * 86400 ) -%}
    {{ date | timestamp_custom(’%A (%-d/%-m)’) }}
    value_template: >
    {{states(‘sensor.bom_melbourne_max_temp_c_6’)|round(0)}}°/{{states(‘sensor.bom_melbourne_min_temp_c_6’)|round(0)}}°/{{states(‘sensor.bom_melbourne_chance_of_rain_6’)|round(0)}}%
    entity_picture_template: >-
    {{ ‘/local/icons/bom_icons/’ ~ states(‘sensor.bom_melbourne_icon_6’) ~ ‘.png’ }}
    bom_today_max:
    entity_id:
    - sensor.bom_melbourne_max_temp_c_0
    - sensor.today_temp_bom
    value_template: >
    {%- if states(‘sensor.bom_melbourne_max_temp_c_0’) == ‘n/a’ -%}
    {{ state_attr(‘sensor.today_temp_bom’, ‘max_value’) }}
    {% else %}
    {{ states(‘sensor.bom_melbourne_max_temp_c_0’) }}
    {% endif %}
    bom_today_min:
    entity_id:
    - sensor.bom_melbourne_min_temp_c_0
    - sensor.today_temp_bom
    value_template: >
    {%- if states(‘sensor.bom_melbourne_min_temp_c_0’) == ‘n/a’ -%}
    {{ state_attr(‘sensor.today_temp_bom’, ‘min_value’) }}
    {% else %}
    {{ states(‘sensor.bom_melbourne_min_temp_c_0’) }}
    {% endif %}

  • platform: statistics
    name: today_temp_bom
    sampling_size: 150
    entity_id: sensor.bom_melbourne_air_temp_c
    max_age:
    hours: 24

The page complies but its not displaying at all.
I’ve got the following in my resources

  • url: /hacsfiles/bom-weather-card/bom-weather-card.js
    type: module

I’ve loaded the bom forecast integration ffrom HACS so i think its something simple.
any suggestions would be great

thanks

Check all the entities being parsed actually exist (Check in dev-tools)
Also please post using code blocks. (The </> on the toolbar when you write a message)

Thanks David,
So under the dev-tools -> States if it has for example
sensor.bom_cloud and unknown next to it is that ok because the entity exists or bad because it doesn’t have a value?

Also i have realised that the attributes for the sensor.bom.x ones say the station ID is coldstream (which is closer to me than Melbourne) should I go back to the code and swap melbourne for coldstream?
The ones i cut and pasted from the guide are all saying Melbourne in the attributes (which i would expect)

I’ll go line by line to check that all the entities in weather.yaml are in the states list

thanks for the quick response

Unknown means BOM doesn’t have that sensor. Not all the sensors configurable in core are available from BOM. For instance I don’t have that cloud one and we don’t have an air pressure one either.

Look at the sensors you are configuring in lovelace to parse through to the card - they need to exist. The docs for the card tell you what entities are mandatory.