hey peeps.
im getting this error when i load lovelace.
any help will be fantastic !
cheers
Lovelace ui:
resources:
- url: /local/custom_ui/dark-sky-weather-card.js?v=4
type: js
- url: /local/custom_ui/card-modder.js
# Weather #
- id: 3f7cfc0b210d4e408f5737d92108a358 # Automatically created id
type: vertical-stack
cards:
- type: custom:card-modder
card:
entity_current_conditions: sensor.dark_sky_icon
entity_daily_summary: sensor.bom_syd_forecast_detailed_summary_0
entity_forecast_high_temp_1: sensor.bom_syd_forecast_max_temp_c_1
entity_forecast_high_temp_2: sensor.bom_syd_forecast_max_temp_c_2
entity_forecast_high_temp_3: sensor.bom_syd_forecast_max_temp_c_3
entity_forecast_high_temp_4: sensor.bom_syd_forecast_max_temp_c_4
entity_forecast_high_temp_5: sensor.bom_syd_forecast_max_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_forecast_low_temp_1: sensor.bom_syd_forecast_min_temp_c_1
entity_forecast_low_temp_2: sensor.bom_syd_forecast_min_temp_c_2
entity_forecast_low_temp_3: sensor.bom_syd_forecast_min_temp_c_3
entity_forecast_low_temp_4: sensor.bom_syd_forecast_min_temp_c_4
entity_forecast_low_temp_5: sensor.bom_syd_forecast_min_temp_c_5
entity_humidity: sensor.bom_humd
entity_pressure: sensor.bom_pres
entity_sun: sun.sun
entity_temperature: sensor.bom_temp
entity_visibility: sensor.dark_sky_visibility
entity_wind_bearing: sensor.bom_wind_bear
entity_wind_speed: sensor.bom_wind_sp
type: 'custom:dark-sky-weather-card'
style:
background-image: url("/local/lovelace/cardbackK.png")
background-repeat: no-repeat
background-color: rgba(50,50,50,0.3)
background-size: 100% 400px
border-radius: 20px
border: solid 1px rgba(100,100,100,0.3)
color: "#999999"
box-shadow: 3px 3px rgba(0,0,0,0.4)
weather.yaml:
group:
sun:
name: Sun
view: no
entities:
- sun.sun
- sensor.moon
weather overview:
name: Weather Overview
view: no
entities:
- sensor.pws_temp_c
- sensor.pws_relative_humidity
- sensor.pws_precip_1d
- sensor.pws_wind_kph
- sensor.pws_alerts
daily forcast:
name: Daily Forcast
view: no
entities:
- sensor.pws_temp_high_1d_c
- sensor.pws_temp_high_2d_c
- sensor.pws_temp_high_3d_c
- sensor.pws_temp_high_4d_c
# Sensors #
sensor:
- platform: moon
## Weather Dark Sky
- platform: darksky
api_key: !secret darksky_api
forecast:
- 1
- 2
- 3
- 4
- 5
monitored_conditions:
- icon
- summary
- nearest_storm_distance
- nearest_storm_bearing
- humidity
- temperature
- temperature_high
- temperature_low
- apparent_temperature
- apparent_temperature_high
- apparent_temperature_low
- wind_speed
- wind_bearing
- precip_type
- precip_probability
- precip_accumulation
- precip_intensity
- precip_intensity_max
- uv_index
- daily_summary
- pressure
- visibility
update_interval:
minutes: 5
## BOM Forecast
# IDN60901.94767
- platform: bom_forecast
product_id: IDN60901
name: SYD Forecast
forecast_days: 5
rest_of_today: True
friendly: False
friendly_state_format: '{max}, {summary}'
monitored_conditions:
- 'max'
- 'min'
- 'chance_of_rain'
- 'possible_rainfall'
- 'summary'
- 'detailed_summary'
- platform: template
sensors:
bom_temp:
friendly_name: "Sydney Temperature"
value_template: "{{ states.weather.bom_sydney.attributes.temperature }}"
device_class: temperature
unit_of_measurement: °C
bom_humd:
friendly_name: "Sydney Humidity"
value_template: "{{ states.weather.bom_sydney.attributes.humidity }}"
#device_class: humidity
unit_of_measurement: '%'
bom_wind_sp:
friendly_name: "Sydney Wind Speed"
value_template: "{{ states.weather.bom_sydney.attributes.wind_speed }}"
#device_class: temperature
unit_of_measurement: km
bom_wind_bear:
friendly_name: "Sydney Wind Bearing"
value_template: "{{ states.weather.bom_sydney.attributes.wind_bearing }}"
#device_class: temperature
#unit_of_measurement: km
bom_pres:
friendly_name: "Sydney Pressure"
value_template: "{{ states.weather.bom_sydney.attributes.pressure }}"
#device_class: temperature
unit_of_measurement: hPa
# Weather #
sun:
weather:
- platform: bom
station: IDN60901.94767
name: Sydney
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
darkskycard:
class DarkSkyWeatherCard extends HTMLElement {
set hass(hass) {
if (!this.content) {
const card = document.createElement('ha-card');
const link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = '/local/custom_ui/dark-sky-weather-card.css';
card.appendChild(link);
this.content = document.createElement('div');
this.content.className = 'card';
card.appendChild(this.content);
this.appendChild(card);
}
const getUnit = function (measure) {
const lengthUnit = hass.config.unit_system.length;
switch (measure) {
case 'air_pressure':
return lengthUnit === 'km' ? 'hPa' : 'inHg';
case 'length':
return lengthUnit;
case 'precipitation':
return lengthUnit === 'km' ? 'mm' : 'in';
default:
return hass.config.unit_system[measure] || '';
}
};
const transformDayNight = {
"below_horizon": "night",
"above_horizon": "day",
}
const sunLocation = transformDayNight[hass.states[this.config.entity_sun].state];
const weatherIcons = {
'clear-day': 'day',
'clear-night': 'night',
'rain': 'rainy-5',
'snow': 'snowy-6',
'sleet': 'rainy-6',
'wind': 'cloudy',
'fog': 'cloudy',
'cloudy': 'cloudy',
'partly-cloudy-day': 'cloudy-day-3',
'partly-cloudy-night': 'cloudy-night-3',
'hail': 'rainy-7',
'lightning': 'thunder',
'thunderstorm': 'thunder',
'windy-variant': `cloudy-${sunLocation}-3`,
'exceptional': '!!',
}
const windDirections = [
'N',
'NNE',
'NE',
'ENE',
'E',
'ESE',
'SE',
'SSE',
'S',
'SSW',
'SW',
'WSW',
'W',
'WNW',
'NW',
'NNW',
'N'
];
var forecastDate1 = new Date();
forecastDate1.setDate(forecastDate1.getDate()+1);
var forecastDate2 = new Date();
forecastDate2.setDate(forecastDate2.getDate()+2);
var forecastDate3 = new Date();
forecastDate3.setDate(forecastDate3.getDate()+3);
var forecastDate4 = new Date();
forecastDate4.setDate(forecastDate4.getDate()+4);
var forecastDate5 = new Date();
forecastDate5.setDate(forecastDate5.getDate()+5);
const currentConditions = hass.states[this.config.entity_current_conditions].state;
const humidity = hass.states[this.config.entity_humidity].state;
const pressure = Math.round(hass.states[this.config.entity_pressure].state);
const temperature = Math.round(hass.states[this.config.entity_temperature].state);
const visibility = hass.states[this.config.entity_visibility].state;
const windBearing = windDirections[(Math.round((hass.states[this.config.entity_wind_bearing].state / 360) * 16))];
const windSpeed = Math.round(hass.states[this.config.entity_wind_speed].state);
const forecast1 = { date: forecastDate1,
condition: this.config.entity_forecast_icon_1,
temphigh: this.config.entity_forecast_high_temp_1,
templow: this.config.entity_forecast_low_temp_1, };
const forecast2 = { date: forecastDate2,
condition: this.config.entity_forecast_icon_2,
temphigh: this.config.entity_forecast_high_temp_2,
templow: this.config.entity_forecast_low_temp_2, };
const forecast3 = { date: forecastDate3,
condition: this.config.entity_forecast_icon_3,
temphigh: this.config.entity_forecast_high_temp_3,
templow: this.config.entity_forecast_low_temp_3, };
const forecast4 = { date: forecastDate4,
condition: this.config.entity_forecast_icon_4,
temphigh: this.config.entity_forecast_high_temp_4,
templow: this.config.entity_forecast_low_temp_4, };
const forecast5 = { date: forecastDate5,
condition: this.config.entity_forecast_icon_5,
temphigh: this.config.entity_forecast_high_temp_5,
templow: this.config.entity_forecast_low_temp_5, };
const forecast = [forecast1,forecast2,forecast3,forecast4,forecast5];
this.content.innerHTML = `
<span class="icon bigger" style="background: none, url(/local/icons/weather_icons/animated/${weatherIcons[currentConditions]}.svg) no-repeat; background-size: contain;">${currentConditions}</span>
<span class="temp">${temperature}</span><span class="tempc"> ${getUnit('temperature')}</span>
<span>
<ul class="variations right">
<li><span class="ha-icon"><ha-icon icon="mdi:water-percent"></ha-icon></span>${humidity}<span class="unit"> %</span></li>
<li><span class="ha-icon"><ha-icon icon="mdi:gauge"></ha-icon></span>${pressure}<span class="unit"> ${getUnit('air_pressure')}</span></li>
</ul>
<ul class="variations">
<li><span class="ha-icon"><ha-icon icon="mdi:weather-windy"></ha-icon></span>${windBearing} ${windSpeed}<span class="unit"> ${getUnit('length')}/h</span></li>
<li><span class="ha-icon"><ha-icon icon="mdi:weather-fog"></ha-icon></span>${visibility}<span class="unit"> ${getUnit('length')}</span></li>
</ul>
</span>
<div class="forecast clear">
${forecast.map(daily => `
<div class="day">
<span class="dayname">${(daily.date).toString().split(' ')[0]}</span>
<br><i class="icon" style="background: none, url(/local/icons/weather_icons/animated/${weatherIcons[hass.states[daily.condition].state]}.svg) no-repeat; background-size: contain;"></i>
<br><span class="highTemp">${Math.round(hass.states[daily.temphigh].state)}${getUnit('temperature')}</span>
<br><span class="lowTemp">${Math.round(hass.states[daily.templow].state)}${getUnit('temperature')}</span>
</div>`).join('')}
</div>
<br><span class="unit">${hass.states[this.config.entity_daily_summary].state}</span></br>`;
}
setConfig(config) {
if (!config.entity_current_conditions ||
!config.entity_humidity ||
!config.entity_pressure ||
!config.entity_temperature ||
!config.entity_visibility ||
!config.entity_wind_bearing ||
!config.entity_wind_speed) {
throw new Error('Please define entities');
}
this.config = config;
}
// @TODO: This requires more intelligent logic
getCardSize() {
return 3;
}
}
customElements.define('dark-sky-weather-card', DarkSkyWeatherCard);
darksky.css:
.clear {
clear: both;
}
.card {
margin: auto;
padding-top: 2em;
padding-bottom: 1em;
padding-left: 1em;
padding-right:1em;
position: relative;
}
.ha-icon {
height: 18px;
margin-right: 5px;
color: var(--paper-item-icon-color);
}
.temp {
font-weight: 300;
font-size: 4em;
color: var(--primary-text-color);
position: absolute;
right: 1em;
}
.tempc {
font-weight: 300;
font-size: 1.5em;
vertical-align: super;
color: var(--primary-text-color);
position: absolute;
right: 1em;
margin-top: -14px;
margin-right: 7px;
}
.variations {
display: inline-block;
font-weight: 300;
color: var(--primary-text-color);
list-style: none;
margin-left: -2em;
margin-top: 4.5em;
}
.variations.right {
position: absolute;
right: 1em;
margin-left: 0;
margin-right: 1em;
}
.unit {
font-size: .8em;
}
.forecast {
width: 100%;
margin: 0 auto;
height: 10em;
}
.day {
display: block;
width: 20%;
float: left;
text-align: center;
color: var(--primary-text-color);
border-right: .1em solid #d9d9d9;
line-height: 2;
box-sizing: border-box;
}
.dayname {
text-transform: uppercase;
}
.forecast .day:first-child {
margin-left: 0;
}
.forecast .day:nth-last-child(1) {
border-right: none;
margin-right: 0;
}
.highTemp {
font-weight: bold;
}
.lowTemp {
color: var(--secondary-text-color);
}
.icon.bigger {
width: 10em;
height: 10em;
margin-top: -4em;
position: absolute;
left: 0em;
}
.icon {
width: 50px;
height: 50px;
margin-right: 5px;
display: inline-block;
vertical-align: middle;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
text-indent: -9999px;
}
.weather {
font-weight: 300;
font-size: 1.5em;
color: var(--primary-text-color);
text-align: left;
position: absolute;
top: -0.5em;
left: 6em;
word-wrap: break-word;
width: 30%;
}