Indeed making a lot of noise these custom-cards…My fan starts howling whenever I load the page.
Could you share the code you use now? both for the card, and the sensors?
Just make sure that all your sensor.bom_* sensors are working correctly. It looks like it’s unable to read the state of a sensor.
Actually, now that I look at your config in weather.yaml I see you are using bom_forecast. Change the product_id to one that is forecast ID. I see you have a SYD station in there. The forecast for SYD is IDN10064. See if that makes any difference.
In case you haven’t come across the bom_forecast post, here is the link to set it up. Has everything you need to know and explains how to get the correct product_id.
Sure:
sensors:
- platform: darksky
api_key: !secret dark_sky_secret
name: dark_sky_forecast
monitored_conditions:
- icon
- temperature_low
- temperature_high
forecast:
- 1
- 2
- 3
- 4
- 5
units: auto
update_interval:
minutes: 720
- platform: darksky
api_key: !secret dark_sky_secret
name: dark_sky_current
monitored_conditions:
- icon
- temperature
- humidity
- daily_summary
- precip_probability
- pressure
- wind_speed
- wind_bearing
- visibility
units: auto
update_interval:
minutes: 60
lovelace:
- type: custom:dark-sky-weather-card
entity_sun: sun.sun
entity_daily_summary: sensor.dark_sky_current_daily_summary
entity_current_conditions: sensor.dark_sky_current_icon
entity_humidity: sensor.dark_sky_current_humidity
entity_pressure: sensor.dark_sky_current_pressure
entity_temperature: sensor.dark_sky_current_temperature
entity_visibility: sensor.dark_sky_current_visibility
entity_wind_bearing: sensor.dark_sky_current_wind_bearing
entity_wind_speed: sensor.dark_sky_current_wind_speed
entity_forecast_high_temp_1: sensor.dark_sky_forecast_daytime_high_temperature_1
entity_forecast_high_temp_2: sensor.dark_sky_forecast_daytime_high_temperature_2
entity_forecast_high_temp_3: sensor.dark_sky_forecast_daytime_high_temperature_3
entity_forecast_high_temp_4: sensor.dark_sky_forecast_daytime_high_temperature_4
entity_forecast_high_temp_5: sensor.dark_sky_forecast_daytime_high_temperature_5
entity_forecast_low_temp_1: sensor.dark_sky_forecast_overnight_low_temperature_1
entity_forecast_low_temp_2: sensor.dark_sky_forecast_overnight_low_temperature_2
entity_forecast_low_temp_3: sensor.dark_sky_forecast_overnight_low_temperature_3
entity_forecast_low_temp_4: sensor.dark_sky_forecast_overnight_low_temperature_4
entity_forecast_low_temp_5: sensor.dark_sky_forecast_overnight_low_temperature_5
entity_forecast_icon_1: sensor.dark_sky_forecast_icon_1
entity_forecast_icon_2: sensor.dark_sky_forecast_icon_2
entity_forecast_icon_3: sensor.dark_sky_forecast_icon_3
entity_forecast_icon_4: sensor.dark_sky_forecast_icon_4
entity_forecast_icon_5: sensor.dark_sky_forecast_icon_5
Nothing to do in the js file as its referencing the entity names from lovelace.
The only thing I couldn’t get to work is the overnight_low_temperature. According to the api it’s only available on the daily foreacasts, so I guess I need to call for a 6th day and offset the overnight lows by 1
1 Like
Ah yes, of course! elegant and simple. thanks for this.
will adapt quickly.
and because today a new Custom-ui version was released by customize magician @andrey, I thought it appropriate to share the following, based on the Dark Sky sensors:
homeassistant:
customize_glob:
sensor.dark_sky*icon*:
templates:
entity_picture: >
return '/local/weather/icons/' + state + '.png';
and maybe this:
sensor.dark_sky_*temperature*:
templates:
icon_color: >
if (state < -5) return 'rgb(30, 255, 255)';
if (state < 0) return 'rgb(30, 144, 255)';
if (state < 10) return 'rgb(255, 255, 0)';
if (state < 15) return 'rgb(255, 211, 30)';
if (state < 20) return 'rgb(0, 128, 0)';
return 'rgb(255, 165, 0)';
Have fun!
sorry can you provide the link. there was no hyperlink
Oops… I missed the link. 
I’ve updated my post, but here is is as well. Australian Weather Forecast using BOM Public FTP
It’s so beautiful to finally see it working!
Thank you so much! been trying to fix this for a while now!
could you help me with another thing… can i change the colour of the text to white ?
to something like this…
Glad you got it working!! Looks like you have the exact same style settings as I have. Must have got them from the same place. For me, I’m running the theme Midnight, and then style the cards as needed. This gives me the white text. Not sure how else to change it. It might be your theme?? I’m not exactly sure. Maybe someone else might be able to help. Sorry I can’t be of more help. 
where do you get the theme midnight from ?
It’s in the theme section on the forum, under the share your project section. There’s a collection of different themes. Have a look in there for the Midnight theme.
got the theme working.
i had a typo in one of my includes, so the theme wasnt activating.
1 Like
New version of the card is available in this post: Custom Dark Sky Animated Weather Card.
Major breaking changes:
- The card has been refactored using LitElement instead of HTMLElement.
- The code has been moved around and cleaned up alot.
- The CSS code has been incorporated into the card which allows for configuration of CSS classes from the card configuration. The old .css file is no longer used.
- The following new configuration flags have been added:
tooltip_bg_color: 'rgb( 75,155,239)'
tooltip_border_color: orange
tooltip_border_width: 3
tooltip_caret_size: 10
tooltip_fg_color: '#fff'
tooltip_left_offset: -5
tooltip_width: 100
Special note: If you use this version and beyond you must change the resource type for the card to module from js. Failure to do so will result in the card not loading and an error thrown stating there is an invalid token on line 1.
resources:
- type: module
url: /local/custom_ui/dark-sky-weather-card.js?v=7.2
2 Likes
Thank you.
A question: what is benefit about changing to
LitElement?
ok sorry, had a wring version, so deleted my issue on the error log. Only thing i can’t get the icons to display…
/local/weather/animated/
/local/weather/animated/forecast
are the 2 paths I use, and I’ve change to this in the card:
<span class="icon bigger" style="background: none, url(/local/weather/animated/${this.weatherIcons[this.current.conditions]}.svg) no-repeat; background-size: contain;">${this.current.conditions}</span>
and
<br><i class="icon" style="background: none, url(/local/weather/animated/forecast/${this.weatherIcons[this.hass.states[daily.condition].state]}.svg) no-repeat; background-size: contain;"></i>
isn’t that correct?
btw here’s -nl:
const windDirections_nl = ['N','NNO','NO','ONO','O','OZO','ZO','ZZO','Z','ZZW','ZW','WZW','W','WNW','NW','NNW','N'];const windDirections_nl = ['N','NNO','NO','ONO','O','OZO','ZO','ZZO','Z','ZZW','ZW','WZW','W','WNW','NW','NNW','N'];
too man ‘N’ defined.
Try:
const windDirections_nl = ['N','NNO','NO','ONO','O','OZO','ZO','ZZO','Z','ZZW','ZW','WZW','W','WNW','NW','NNW'];
you mean the first and the last? That is correct though for the first 11.25 and last 11.25 degrees to round to N
Shoot you’re right, ignore me 
the /local directory maps to the www directory on disk so assuming you have a www/weather/animated directory with the appropriate icons in it you should be good.
LitElement is much more light weight than HTMLElement. From what I have seen in code from other custom card developers it appears that the Lovelace UI is moving away from HTMLElement to LitElement.
I have noticed that when using HTMLElement the card was using about 20% cpu with animated icons… now that it is using LitElement, CPU usage is down to 8 - 10% with animated icons.