Customising the BOM Weather and lovelace - now in HACS

Configuration
21

Hi @DavidFW1960, I must be missing something.

I put the bom icons in \config\www\icons\bom_icons

I put your lovelace card here \config\www\custom_ui\bom-weather-card.js

I included this at the top of my raw config (along with a lot of others that work) :

resources:
  - type: js
    url: /local/custom_ui/bom-weather-card.js

I’ve added all the sensors (and the automation) and confirmed they are available and give the expected info in the dev tools states menu.

But when I add this Lovelace card it show up empty, as in completely blank.

(it has been alphabetised by HA):

apparent_right_margin: 1em
apparent_right_pos: 1em
apparent_top_margin: 45px
current_data_top_margin: 7em
current_text_font_size: 1.5em
current_text_left_pos: 5em
current_text_top_margin: 39px
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_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_pressure: sensor.bom_hobart_pressure
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_wind_bearing: sensor.bom_hobart_wind_direction
entity_wind_speed: sensor.bom_hobart_wind_speed_kmh
large_icon_left_position: 0em
large_icon_top_margin: '-3.5em'
locale: en
old_daily_format: false
refresh_interval: 60
separator_top_margin: 6em
show_beaufort: false
show_separator: false
slot_l1: daytime_high
slot_l2: wind
slot_l3: pressure
slot_l4: sun_next
slot_r1: empty
slot_r2: pop
slot_r3: humidity
slot_r4: sun_following
static_icons: false
sunset: true
temp_font_size: 4em
temp_font_weight: 300
temp_right_pos: 0.85em
temp_top_margin: '-0.3em'
temp_uom_right_margin: 7px
temp_uom_top_margin: '-9px'
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'

EDIT: oh yeah I also added your version of the custom component to:

\config\custom_components\bom_forecast

I did this by pasting the contents of your directory over my existing one.

EDIT2: Ah, the web inspector shows the culprit:


TypeError: this._hass.states[this.config.entity_pressure] is undefined

Removing: entity_pressure: sensor.bom_hobart_pressure has resulted in this:

Just have to sort out why the icons are not showing now.

EDIT3: Ah! \config\www\icons\weather_icons

Almost all sorted. The only thing wrong is that I’m using knots not km/h for the wind speed. I guess I have to edit your bom-weather-card.js for that as I see no options to change it in the dark sky card.

1 Like
22

Good job… It’s a pain editing the JS but should be doable to fix the units…

You aren’t getting a pressure showing?

23

I am now. The sensor is sensor.bom_hobart_pressure_mb not sensor.bom_hobart_pressure

I don’t like the way the whole card disappears if a single sensor is invalid.

I just added the km/h sensor to the monitored conditions. It was easier.

Also I’m having issues with the bom sensor. Two out of every three restarts it fails to be set up. No idea why.

24

Yeah I worked out that you’d probably gotten the wrong entity_id for the pressure when I was in bed last night and was going to tell you today if you hadn’t worked it out. I have not had any issues with the BOM custom component loading or the BOM sensor either…

25

After all that I took the pressure slot out anyway. Looks cleaner without it and to be honest I rarely look at the pressure anyway.

Many thanks for the card David.

1 Like
26

Any plans to add it to HACS?

27

I have thought about it given neither the card nor FTP component appear to be supported by anyone at the moment. But it’s 99% not my work - I just made pretty minor changes to both. Also - I don’t expect to be making many changes going forward.

1 Like
28

That’s ok, still worthy of being added as it is. The alarm component that I use was originally some else’s but the original author bailed out on it, it was taken over and now appears in HACS. The beauty of open source means that anyone can contribute. Even if you have nothing else you want to add later, someone else might and it will keep evolving

29

Hey @DavidFW1960 the icon selection for ‘mostly sunny’ is cloudy?:

30

Ok but what is the icon property? The Text comes from the summary_0 but the icon could be saying something different. Mostly sunny is also the same in the BOM pdf file as partly cloudy…
image
image
image

Confusing…

Also the detailed_summary can be different as well…
image

Probably should add I changed the detailed_summary to just the summary in the current text… it’s a juggle. Also there are limited animated icons available. I found a few more but everything is a compromise and it’s possible you might prefer some of the other icons for various conditions… Open to ideas there.

31

Ahh! That explains it:

 sensor.bom_hobart_icon_0 	fog

Thanks.

32

See the paragraph I just added - I don’t know when you grabbed the package but I did change a few things so the latest is always on my github. Maybe I should do the HACS thing…

1 Like
33

If I wanted to alter the card to use the BoM icons (and I’m not 100% sure I do, I like the animated ones), is this the only bit I have to edit (after moving the BoM icons to /weather_icons?

bom-weather-card.js

// #####
// ##### weatherIcons: returns icon names based on current conditions text
// #####

  get weatherIcons() {
    return {
	  'sunny': 'day',
	  'clear': 'day',
	  'mostly-sunny': 'day',
	  'partly-cloudy': 'cloudy-day-3',
          'cloudy': 'cloudy',
	  'hazy': 'cloudy-day-1',
	  'hazey': 'cloudy-day-1',
	  'light-rain': 'rainy-1',
	  'windy': 'cloudy',
          'fog': 'cloudy',
	  'foggy': 'cloudy',
          'showers': 'rainy-3',
          'shower': 'rainy-3',
          'rain': 'rainy-5',
          'rainy': 'rainy-5',
          'dust': 'cloudy-day-1',
	  'dusty': 'cloudy-day-1',
          'snow': 'snowy-6',
          'snowy': 'snowy-6',
	  'storm': 'scattered-thunderstorms',
	  'stormy': 'scattered-thunderstorms',
	  'light-showers': 'rainy-5',
	  'light-shower': 'rainy-5',
	  'heavy-showers': 'rainy-7',
	  'heavy-shower': 'rainy-7',
	  'tropical-cyclone': 'tornado',
	  'clear-day': 'day',
          'clear-night': 'night',
          'sleet': 'rainy-6',
          'wind': 'cloudy',
          'partly-cloudy-day': 'cloudy-day-3',
          'partly-cloudy-night': 'cloudy-night-3',
          'hail': 'rainy-7',
          'lightning': 'thunder',
          'thunderstorm': 'thunder',
          'windy-variant': html`cloudy-${this.dayOrNight}-3`,
          'exceptional': '!!',
    }
  }

Is the fact that they are PNG files instead of SVG files going to be a problem?

34

there’s an animated and static folder so copy to whichever you are using.

Just FYI I’ve added both these repos to HACS now… just tidying things up.

1 Like
35

OK Due to popular demand (and against my better judgement), I have added both the card and custom component to HACS now.

You need to add both repos to hacs.
Custom Component (Integration)


Weather Card

image

4 Likes
36

I tried the BoM icons. Ick!
Reverting now.

37

Ewe… lol. Yeah. It’s a bugger - I searched high and low for animated svg weather files but could barely expand on what was already there. It’s a pity there aren’t more available.

38

@DavidFW1960 thanks for putting this together. was a bit tricky to set up but i think im all good now.

was hoping i could replace the chance of rain % in the forecast to the forecast amount of rain. so instead of saying 20%, would say 6-10mm.

do you know if this is possible?

39

It is. It’s one of the sensors created possible_rainfall. I’ll see if I can add that to the card. Perhaps add this as an issue to the card on github.

40

I don’t suppose it would be possible to squeeze both values in there?

At the moment I have an extra card to show the amount of rain predicted for the rest of the day and tomorrow.