Try this once again
cd to your www/custom_ui folder
rm dark-sky-weather-card.js
wget https://raw.githubusercontent.com/iammexx/home-assistant-config/master/ui/darksky/dark-sky-weather-card.js
still same thing after putting this in and redownloading the js. This is what I see iin the log:
Log Details (ERROR)
Sat Jan 12 2019 16:32:17 GMT-0500 (Eastern Standard Time)
https://xxxxxxxxx.duckdns.org/local/custom_ui/dark-sky-weather-card.js?v=7.1:7:1 Uncaught SyntaxError: Unexpected token <
4:32pm components/system_log/init.py (error)
on overview page it says custom element does not exist: dark-sky-weather-card
EDIT Got it working. I had to put the card in the /www folder not the /www/custom_ui folder. Thanks for the help everyone
1 Like
i dont know what youre seeing but i see this in the first post:
Well that’s not my post. I’ve got it working now putting the js file in the www folder not custom ui folder. Appreciate the help
@m.p.frankland Hi, translation in italian for “Feels like” is “Percepito” instead your “Si sente come” 
Love this card and the things that keep getting added. Keep up the good job @m.p.frankland!!!
I do have a few issues with this version where I will refresh the screen and it will not be there and just a card with the text Custom element doesn’t exist: dark-sky-weather-card. but I don’t understand why this is happening and why it’s causing some of my other cards to fail. The only way to fix it is to click the 3 dots button on the top right and select Refresh.
Anyway, here is my card below. It’s a combination of using sensors from my personal weather station for current readings, Australian Weather Forecast using BOM Public FTP, and Dark Sky to fill in any blanks (icons, visibility reading, and apparent temperature). I’ve also added a little working to the new daily maximum sensor. I just looks odd having a rather random temperature value sitting there with no explanation.
Could you please share your code / entity setup / procedure to get this working with BOM data? I am currently trying to do just that but having some issues. It is currently breaking my Lovelace weather screen completely with the below error in the log:
https://xxxxx:8123/local/custom_ui/dark-sky-weather-card.js?v=4:134:87 Uncaught TypeError: Cannot read property ‘state’ of undefined
yep, suggested that too. see Custom Dark Sky Animated Weather Card - #485 by Mariusthvdb
hope @m.p.frankland can make this ‘official’
did you simply add these words to the line, or did it involve other code than:
var daytimeHigh = this.config.entity_daytime_high ? html`<li><span class="ha-icon"><ha-icon icon="mdi:thermometer"></ha-icon></span>Max today: ${Math.round(this.hass.states[this.config.entity_daytime_high].state)}<span> ${this.getUOM('temperature')}</span></li>` : ``;
suppose this should be done the way the feels like text is done with a locale setting?
feature request:
would it be possible to have the current condition as a header above the large icon? Seems we’re missing that right now, and it reallyiq a nice addition to immediately see what the current condition is:
like:
it is the sensor.dark_sky_forecast_icon_0 if your using this in the forecast sensor, or sensor.dark_sky_forecast_icon for the regular sensor.
I just setup the Aussie weather forecast using BOM FTP as per the link above. I did nothing special there. It just works, and I set it up for a forecast area close by that works for me. Unfortunatly for me it’s not the local BOM station at the airport a few kms away, but it’s the regional centre almost 30 minutes away. Below is my bom_forecast code:
## BOM Forecast
- platform: bom_forecast
product_id: IDN11053
name: WG Forecast
forecast_days: 5
rest_of_today: True
friendly: false
friendly_state_format: '{min} to {max}, {summary}'
monitored_conditions:
- 'max'
- 'min'
- 'chance_of_rain'
- 'possible_rainfall'
- 'summary'
- 'detailed_summary'
This gives my a bunch of sensors starting with sensor.bom_wg_forecast_ for rain, detailed_summary, summary, max_temp_c, min_temp_c, and possible_rainfall, and does this for 5 days, 0-5. IDN11053 is for Wollongong.
My code for the weather card is as follows:
- type: custom:card-modder
card:
type: custom:dark-sky-weather-card
entity_sun: sun.sun
entity_daily_summary: sensor.bom_wg_forecast_detailed_summary_0
entity_current_conditions: sensor.dark_sky_icon
entity_humidity: sensor.pws_relative_humidity
entity_pressure: sensor.pws_pressure_mb
entity_pop: sensor.bom_wg_forecast_chance_of_rain_0
entity_temperature: sensor.pws_temp_c
entity_apparent_temp: sensor.dark_sky_apparent_temperature
entity_daytime_high: sensor.bom_wg_forecast_max_temp_c_0
entity_visibility: sensor.dark_sky_visibility
entity_wind_bearing: sensor.bom_wind_bear
entity_wind_speed: sensor.pws_wind_kph
entity_forecast_high_temp_1: sensor.bom_wg_forecast_max_temp_c_1
entity_forecast_high_temp_2: sensor.bom_wg_forecast_max_temp_c_2
entity_forecast_high_temp_3: sensor.bom_wg_forecast_max_temp_c_3
entity_forecast_high_temp_4: sensor.bom_wg_forecast_max_temp_c_4
entity_forecast_high_temp_5: sensor.bom_wg_forecast_max_temp_c_5
entity_forecast_low_temp_1: sensor.bom_wg_forecast_min_temp_c_1
entity_forecast_low_temp_2: sensor.bom_wg_forecast_min_temp_c_2
entity_forecast_low_temp_3: sensor.bom_wg_forecast_min_temp_c_3
entity_forecast_low_temp_4: sensor.bom_wg_forecast_min_temp_c_4
entity_forecast_low_temp_5: sensor.bom_wg_forecast_min_temp_c_5
entity_forecast_icon_1: sensor.dark_sky_icon_1
entity_forecast_icon_2: sensor.dark_sky_icon_2
entity_forecast_icon_3: sensor.dark_sky_icon_3
entity_forecast_icon_4: sensor.dark_sky_icon_4
entity_forecast_icon_5: sensor.dark_sky_icon_5
entity_pop_1: sensor.bom_wg_forecast_chance_of_rain_1
entity_pop_2: sensor.bom_wg_forecast_chance_of_rain_2
entity_pop_3: sensor.bom_wg_forecast_chance_of_rain_3
entity_pop_4: sensor.bom_wg_forecast_chance_of_rain_4
entity_pop_5: sensor.bom_wg_forecast_chance_of_rain_5
entity_summary_1: sensor.bom_wg_forecast_summary_1
entity_summary_2: sensor.bom_wg_forecast_summary_2
entity_summary_3: sensor.bom_wg_forecast_summary_3
entity_summary_4: sensor.bom_wg_forecast_summary_4
entity_summary_5: sensor.bom_wg_forecast_summary_5
static_icons: true
sunset: true
locale: en
old_daily_format: false
tooltips: true
tooltip_bg_color: 'rgb( 75,155,239)'
tooltip_border_color: orange
tooltip_border_width: 1
tooltip_caret_size: 10
tooltip_fg_color: '#fff'
tooltip_left_offset: -5
tooltip_width: 100
style:
background: -webkit-linear-gradient(top,rgba(25,25,25,0.9),rgba(25,25,25,0.8),rgba(50,50,50,0.3))
border-radius: 10px
border: solid 1px rgba(100,100,100,0.3)
color: "#999999"
box-shadow: 3px 3px rgba(0,0,0,0.4)
Yep. Exactly that on line 23. Ideally something with different language settings would be great for everyone, but that is beyond my skill level today.
Thank you! It took a lot of messing around with indentation (I hate how the Raw editor doesn’t have line numbers or any indentation tracking) but after copying/pasting into my IDE editor to get that side of things sorted, it is finally working…all but I lost the background image on that page… now to fix that
I still seem to have a few issues with this card… missing data: no rain, max temp, sunrise / sunset times and there is an ‘undefined’ preceding the wind speed. Any tips?
lovelace code:
- cards:
- type: 'custom:card-modder'
card:
type: 'custom:dark-sky-weather-card'
entity_sun: sun.sun
entity_daily_summary: sensor.bom_perth_forecast_detailed_summary_0
entity_current_conditions: sensor.dark_sky_icon
entity_humidity: sensor.bom_perth_relative_humidity
entity_pressure: sensor.bom_perth_pressure_mb
entity_pop: sensor.bom_perth_forecast_chance_of_rain_0
entity_temperature: sensor.bom_perth_feels_like_c
entity_apparent_temp: sensor.dark_sky_apparent_temperature
entity_daytime_high: sensor.bom_perth_forecast_max_temp_c_0
entity_visibility: sensor.dark_sky_visibility
entity_wind_bearing: sensor.bom_perth_wind_direction
entity_wind_speed: sensor.bom_perth_wind_speed_kmh
entity_forecast_high_temp_1: sensor.bom_perth_forecast_max_temp_c_1
entity_forecast_high_temp_2: sensor.bom_perth_forecast_max_temp_c_2
entity_forecast_high_temp_3: sensor.bom_perth_forecast_max_temp_c_3
entity_forecast_high_temp_4: sensor.bom_perth_forecast_max_temp_c_4
entity_forecast_high_temp_5: sensor.bom_perth_forecast_max_temp_c_5
entity_forecast_low_temp_1: sensor.bom_perth_forecast_min_temp_c_1
entity_forecast_low_temp_2: sensor.bom_perth_forecast_min_temp_c_2
entity_forecast_low_temp_3: sensor.bom_perth_forecast_min_temp_c_3
entity_forecast_low_temp_4: sensor.bom_perth_forecast_min_temp_c_4
entity_forecast_low_temp_5: sensor.bom_perth_forecast_min_temp_c_5
entity_forecast_icon_1: sensor.dark_sky_icon_1
entity_forecast_icon_2: sensor.dark_sky_icon_2
entity_forecast_icon_3: sensor.dark_sky_icon_3
entity_forecast_icon_4: sensor.dark_sky_icon_4
entity_forecast_icon_5: sensor.dark_sky_icon_5
entity_pop_1: sensor.bom_perth_forecast_chance_of_rain_1
entity_pop_2: sensor.bom_perth_forecast_chance_of_rain_2
entity_pop_3: sensor.bom_perth_forecast_chance_of_rain_3
entity_pop_4: sensor.bom_perth_forecast_chance_of_rain_4
entity_pop_5: sensor.bom_perth_forecast_chance_of_rain_5
entity_summary_1: sensor.bom_perth_forecast_summary_1
entity_summary_2: sensor.bom_perth_forecast_summary_2
entity_summary_3: sensor.bom_perth_forecast_summary_3
entity_summary_4: sensor.bom_perth_forecast_summary_4
entity_summary_5: sensor.bom_perth_forecast_summary_5
static_icons: true
sunset: true
locale: en
old_daily_format: false
tooltips: true
tooltip_bg_color: 'rgb( 75,155,239)'
tooltip_border_color: orange
tooltip_border_width: 1
tooltip_caret_size: 10
tooltip_fg_color: '#fff'
tooltip_left_offset: -5
tooltip_width: 100
style:
background: -webkit-linear-gradient(top,rgba(25,25,25,0.9),rgba(25,25,25,0.8),rgba(50,50,50,0.3))
border-radius: 10px
border: 'solid 1px rgba(100,100,100,0.3)'
color: '#999999'
box-shadow: '3px 3px rgba(0,0,0,0.4)'
weather.yaml
sensor:
- platform: darksky # DarkSky sensors (separate to component)
api_key: !secret darksky_api_key
## name: Perth Weather
update_interval: '00:15:00'
forecast:
- 1
- 2
- 3
- 4
- 5
## - 6
## - 7
monitored_conditions:
## - summary
## - precip_type
# - precip_intensity
## - precip_probability
# - precip_accumulation
## - temperature
## - apparent_temperature
# - dew_point
## - wind_speed
## - wind_bearing
## - cloud_cover
## - humidity
## - pressure
- visibility
- icon
# - ozone
# - minutely_summary
## - hourly_summary
## - daily_summary
## - temperature_high
## - temperature_low
## - apparent_temperature_high
## - apparent_temperature_low
## - precip_intensity_max
## - uv_index
- platform: bom # Bureau of Meteorology Australia (separate to component)
# station: IDW60901.94608 # main Perth city station (doesnt seem to work for the Weather parameter)
station: IDW60901.94610 # Perth airport station
name: Perth
monitored_conditions:
- apparent_t
# - cloud
# - cloud_base_m
# - cloud_oktas
# - cloud_type_id
# - cloud_type
# - delta_t
# - gust_kmh
# - gust_kt
# - air_temp
# - dewpt
- 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: IDW12300
name: Perth Forecast
forecast_days: 6
rest_of_today: True
friendly: False
friendly_state_format: '{min} to {max}, {summary}'
monitored_conditions:
- 'max'
- 'min'
- 'chance_of_rain'
- 'possible_rainfall'
- 'summary'
- 'detailed_summary'@sparkydave The background should be an easy fix. Either for the page or the card itself using card-modder.
You seem to have a lot of lines commented out. Make sure none of them are the lines you want to use.
Actually, the undefined in the wind is the wind bearing. It needs to have a bearing degree that’s then converted to N,S,E,W, etc. I got mine from my local bom station using the standard weather platform and make sure you have the monitored condition for wind-dir at the very least. I just have everything.
weather:
- platform: bom
station: Station ID
and then I created a sensor template to extract the wind bearing value from that and expose it as it’s own sensor that I can use with the card.
platform: template
sensors:
bom_wind_bear:
friendly_name: "Station ID Wind Bearing"
value_template: "{{ states.weather.bom_stationID.attributes.wind_bearing }}"
I’m not sure why sunrise/sunset isn’t working. Do you have the sun component enabled? That’s all I can think of there, and the max temp and rain are part of the latest version of this weather card, so update the card if you haven’t already.
@m.p.frankland On another note, what does this mean?? I’m getting it in my error logs. I do use the card on 2 different tabs and never had this issue until this version.
https://myhassio/local/custom_ui/dark-sky-weather-card.js?v=0.7411:523:22 NotSupportedError: Cannot define multiple custom elements with the same tag name
I had the background working before. Its coded like this:
title: Weather
id: 6
icon: 'mdi:weather-partlycloudy'
background: center / cover no-repeat url("/local/images/elizabeth_quay_perth.jpg") fixed
…which sits with the rest of the code posted above.
I basically just kept what is used by this card and left the rest out.
I do have a sensor which gives the direction as a N, S, E, W etc. already (part of the BOM stuff) but does the card do the conversion from an angle itself? I have linked the card the the existing sensor with the N, S, E, W etc.
I do have the sun: component active
Yes, you need to give it a value between 0-360. I don’t know why this is the case, but it’s how it done.
I didnt realise that I wasn’t using the latest version. Updated and now I get this:
yet I put card-tools on the system this morning and have restarted HA a few times since
then after some more mucking around with indentation and restarts… the whole card has gone and I get this error in the log:
https://unpkg.com/@polymer/[email protected]/lib/utils/async.js?module:44:11 Uncaught TypeError: Cannot read property ‘state’ of undefined
…which spams the log over and over as long as I am looking at the weather page
Pls use the RAW source and clear the browser cache plus increase the v value in the ui_lovelace. yaml.
I did use the RAW code and the v=number is as per the instructions on the Git page… being the latest version number. Using Chrome I cleared the cache with Control+F5
Try F12 for dev console and right click on refresh button and select Hard Reload and Delete Cache… Lovelace can be a bugger with this…
It’s possible to move the icon of today weather condition a little bit down. Now is on top with no margin