// ##### // ##### Get the LitElement and HTML classes from an already defined HA Lovelace class // ##### var LitElement = LitElement || Object.getPrototypeOf(customElements.get("home-assistant-main")); var html = LitElement.prototype.html; // ##### // ##### Custom Card Definition begins // ##### class DarkSkyWeatherCard extends LitElement { // ##### // ##### Define Render Template // ##### render() { // Handle Configuration Flags // var icons = this.config.static_icons ? "static" : "animated"; var currentText = this.config.entity_current_text ? html`${this._hass.states[this.config.entity_current_text].state}` : ``; var apparentTemp = this.config.entity_apparent_temp ? html`${this.localeText.feelsLike} ${this.current.apparent} ${this.getUOM("temperature")}` : ``; var summary = this.config.entity_daily_summary ? html`
${this._hass.states[this.config.entity_daily_summary].state}
` : ``; var separator = this.config.show_separator ? html`
` : ``; // Build HTML return html` ${this.current.conditions} ${this.current.temperature}${this.getUOM('temperature')} ${currentText} ${apparentTemp} ${separator}
${this.forecast.map(daily => html`
${(daily.date).toLocaleDateString(this.config.locale,{weekday: 'short'})}
${this.config.old_daily_format ? html`
${Math.round(this._hass.states[daily.temphigh].state)}${this.getUOM("temperature")}
${Math.round(this._hass.states[daily.templow].state)}${this.getUOM("temperature")}` : html`
${Math.round(this._hass.states[daily.templow].state)} / ${Math.round(this._hass.states[daily.temphigh].state)}${this.getUOM("temperature")}`} ${this.config.entity_pop_1 && this.config.entity_pop_2 && this.config.entity_pop_3 && this.config.entity_pop_4 && this.config.entity_pop_5 ? html`
${Math.round(this._hass.states[daily.pop].state)} %` : ``}
${ this.config.tooltips ? this._hass.states[daily.summary].state : ""}
`)}
${summary} `; } // ##### // ##### slots - returns the value to be displyed in a specific current condition slot // ##### getSlot() { return { 'r1' : this.slotValue('r1',this.config.slot_r1), 'r2' : this.slotValue('r2',this.config.slot_r2), 'r3' : this.slotValue('r3',this.config.slot_r3), 'r4' : this.slotValue('r4',this.config.slot_r4), 'r5' : this.slotValue('r5',this.config.slot_r5), 'l1' : this.slotValue('l1',this.config.slot_l1), 'l2' : this.slotValue('l2',this.config.slot_l2), 'l3' : this.slotValue('l3',this.config.slot_l3), 'l4' : this.slotValue('l4',this.config.slot_l4), 'l5' : this.slotValue('l5',this.config.slot_l5), } } // ##### // ##### slots - calculates the specific slot value // ##### slotValue(slot,value){ var sunNext = this.config.alt_sun_next ? html`
  • ${this._hass.states[this.config.alt_sun_next].state}
    • ` : this.config.entity_sun ? this.sunSet.next : ""; var sunFollowing = this.config.alt_sun_following ? html`
  • ${this._hass.states[this.config.alt_sun_following].state}
    • ` : this.config.entity_sun ? this.sunSet.following : ""; var daytimeHigh = this.config.alt_daytime_high ? html`
  • ${this._hass.states[this.config.alt_daytime_high].state}
    • ` : this.config.entity_daytime_high ? html`
  • ${this.localeText.maxToday} ${Math.round(this._hass.states[this.config.entity_daytime_high].state)} ${this.getUOM('temperature')}
    • ` : ``; var intensity = this.config.entity_pop_intensity ? html` - ${this._hass.states[this.config.entity_pop_intensity].state} ${this.getUOM('intensity')}` : ``; var pop = this.config.alt_pop ? html`
  • ${this._hass.states[this.config.alt_pop].state}
    • ` : this.config.entity_pop ? html`
  • ${Math.round(this._hass.states[this.config.entity_pop].state)} %${intensity}
    • ` : ``; var visibility = this.config.alt_visibility ? html`
  • ${this._hass.states[this.config.alt_visibility].state}
    • ` : this.config.entity_visibility ? html`
  • ${this.current.visibility} ${this.getUOM('length')}
    • ` : ``; var wind = this.config.alt_wind ? html`
  • ${this._hass.states[this.config.alt_wind].state}
    • ` : this.config.entity_wind_bearing && this.config.entity_wind_speed ? html`
  • ${this.current.beaufort}${this.current.windBearing} ${this.current.windSpeed} ${this.getUOM('length')}/h
    • ` : ``; var humidity = this.config.alt_humidity ? html`
  • ${this._hass.states[this.config.alt_humidity].state}
    • ` : this.config.entity_humidity ? html`
  • ${this.current.humidity} %
    • ` : ``; var pressure = this.config.alt_pressure ? html`
  • ${this._hass.states[this.config.alt_pressure].state}
    • ` : this.config.entity_pressure ? html`
  • ${this.current.pressure} ${this.getUOM('air_pressure')}
    • ` : ``; var precipIntensityCurrent = this.config.entity_precip_intensity_current ? html`
  • ${this._hass.states[this.config.entity_precip_intensity_current].state} ${this.getUOM('intensity')}` : ``; var precipCurrent = this.config.entity_precip_current ? html`
  • ${this._hass.states[this.config.entity_precip_current].state} ${this.getUOM('precipitation')}` : ``; switch (value){ case 'pop': return pop; case 'humidity': return humidity; case 'pressure': return pressure; case 'sun_following': return sunFollowing; case 'daytime_high': return daytimeHigh; case 'wind': return wind; case 'visibility': return visibility; case 'sun_next': return sunNext; case 'precip_rate_current': return precipIntensityCurrent; case 'precip_current': return precipCurrent; case 'empty': return html` `; case 'remove': return ``; } // If no value can be matched pass back a default for the slot switch (slot){ case 'l1': return daytimeHigh; case 'l2': return wind; case 'l3': return visibility; case 'l4': return sunNext; case 'l5': return precipCurrent; case 'r1': return pop; case 'r2': return humidity; case 'r3': return pressure; case 'r4': return sunFollowing; case 'r5': return precipIntensityCurrent; } } // ##### // ##### windDirections - returns set of possible wind directions by specified language // ##### get windDirections() { const windDirections_en = ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW','N']; const windDirections_fr = ['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSO','SO','OSO','O','ONO','NO','NNO','N']; const windDirections_de = ['N','NNO','NO','ONO','O','OSO','SO','SSO','S','SSW','SW','WSW','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']; const windDirections_he = ['צפון','צ-צ-מז','צפון מזרח','מז-צ-מז','מזרח','מז-ד-מז','דרום מזרח','ד-ד-מז','דרום','ד-ד-מע','דרום מערב','מע-ד-מע','מערב','מע-צ-מע','צפון מערב','צ-צ-מע','צפון']; const windDirections_da = ['N','NNØ','NØ','ØNØ','Ø','ØSØ','SØ','SSØ','S','SSV','SV','VSV','V','VNV','NV','NNV','N']; switch (this.config.locale) { case "it" : case "fr" : return windDirections_fr; case "de" : return windDirections_de; case "nl" : return windDirections_nl; case "he" : return windDirections_he; case "da" : return windDirections_da; default : return windDirections_en; } } // ##### // ##### feelsLikeText returns set of possible "Feels Like" text by specified language // ##### get localeText() { switch (this.config.locale) { case "it" : return { feelsLike: "Percepito", maxToday: "Max oggi:", } case "fr" : return { feelsLike: "Se sent comme", maxToday: "Max aujourd'hui:", } case "de" : return { feelsLike: "Gefühlt", maxToday: "Max heute:", } case "nl" : return { feelsLike: "Voelt als", maxToday: "Max vandaag:", } case "pl" : return { feelsLike: "Odczuwalne", maxToday: "Najwyższa dziś:", } case "he" : return { feelsLike: "מרגיש כמו:", maxToday: "מקסימלי היום:", } case "da" : return { feelsLike: "Føles som", maxToday: "Højeste i dag" } default : return { feelsLike: "Feels like", maxToday: "Today's High", } } } // ##### // ##### dayOrNight : returns day or night depending on the position of the sun. // ##### get dayOrNight() { const transformDayNight = { "below_horizon": "night", "above_horizon": "day", }; return this.config.entity_sun ? transformDayNight[this._hass.states[this.config.entity_sun].state] : 'day'; } // ##### // ##### weatherIcons: returns icon names based on current conditions text // ##### get weatherIcons() { return { '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': html`cloudy-${this.dayOrNight}-3`, 'exceptional': '!!', } } // ##### // ##### forecast : returns forcasted weather information for the next 5 days // ##### get forecast() { 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 forecast1 = { date: forecastDate1, dayIndex: '1', condition: this.config.entity_forecast_icon_1, temphigh: this.config.entity_forecast_high_temp_1, templow: this.config.entity_forecast_low_temp_1, pop: this.config.entity_pop_1, summary: this.config.entity_summary_1, }; const forecast2 = { date: forecastDate2, dayIndex: '2', condition: this.config.entity_forecast_icon_2, temphigh: this.config.entity_forecast_high_temp_2, templow: this.config.entity_forecast_low_temp_2, pop: this.config.entity_pop_2, summary: this.config.entity_summary_2, }; const forecast3 = { date: forecastDate3, dayIndex: '3', condition: this.config.entity_forecast_icon_3, temphigh: this.config.entity_forecast_high_temp_3, templow: this.config.entity_forecast_low_temp_3, pop: this.config.entity_pop_3, summary: this.config.entity_summary_3, }; const forecast4 = { date: forecastDate4, dayIndex: '4', condition: this.config.entity_forecast_icon_4, temphigh: this.config.entity_forecast_high_temp_4, templow: this.config.entity_forecast_low_temp_4, pop: this.config.entity_pop_4, summary: this.config.entity_summary_4, }; const forecast5 = { date: forecastDate5, dayIndex: '5', condition: this.config.entity_forecast_icon_5, temphigh: this.config.entity_forecast_high_temp_5, templow: this.config.entity_forecast_low_temp_5, pop: this.config.entity_pop_5, summary: this.config.entity_summary_5, }; return [forecast1, forecast2, forecast3, forecast4, forecast5]; } // ##### // ##### current : Returns current weather information // ##### get current() { var conditions = this._hass.states[this.config.entity_current_conditions].state; var humidity = this.config.entity_humidity ? this._hass.states[this.config.entity_humidity].state : 0; var pressure = this.config.entity_pressure ? Math.round(this._hass.states[this.config.entity_pressure].state) : 0; var temperature = Math.round(this._hass.states[this.config.entity_temperature].state); var visibility = this.config.entity_visibility ? this._hass.states[this.config.entity_visibility].state : 0; var windBearing = this.config.entity_wind_bearing ? isNaN(this._hass.states[this.config.entity_wind_bearing].state) ? this._hass.states[this.config.entity_wind_bearing].state : this.windDirections[(Math.round((this._hass.states[this.config.entity_wind_bearing].state / 360) * 16))] : 0; var windSpeed = this.config.entity_wind_speed ? Math.round(this._hass.states[this.config.entity_wind_speed].state) : 0; var apparent = this.config.entity_apparent_temp ? Math.round(this._hass.states[this.config.entity_apparent_temp].state) : 0; var beaufort = this.config.show_beaufort ? html`Bft: ${this.beaufortWind} - ` : ``; return { 'conditions': conditions, 'humidity': humidity, 'pressure': pressure, 'temperature': temperature, 'visibility': visibility, 'windBearing': windBearing, 'windSpeed': windSpeed, 'apparent' : apparent, 'beaufort' : beaufort, } } // ##### // ##### sunSetAndRise: returns set and rise information // ##### get sunSet() { var nextSunSet ; var nextSunRise; if (this.config.time_format) { nextSunSet = new Date(this._hass.states[this.config.entity_sun].attributes.next_setting).toLocaleTimeString(this.config.locale, {hour: '2-digit', minute:'2-digit',hour12: this.is12Hour}); nextSunRise = new Date(this._hass.states[this.config.entity_sun].attributes.next_rising).toLocaleTimeString(this.config.locale, {hour: '2-digit', minute:'2-digit', hour12: this.is12Hour}); } else { nextSunSet = new Date(this._hass.states[this.config.entity_sun].attributes.next_setting).toLocaleTimeString(this.config.locale, {hour: '2-digit', minute:'2-digit'}); nextSunRise = new Date(this._hass.states[this.config.entity_sun].attributes.next_rising).toLocaleTimeString(this.config.locale, {hour: '2-digit', minute:'2-digit'}); } var nextDate = new Date(); nextDate.setDate(nextDate.getDate() + 1); if (this._hass.states[this.config.entity_sun].state == "above_horizon" ) { nextSunRise = nextDate.toLocaleDateString(this.config.locale,{weekday: 'short'}) + " " + nextSunRise; return { 'next': html`
  • ${nextSunSet}
    • `, 'following': html`
  • ${nextSunRise}
    • `, 'nextText': nextSunSet, 'followingText': nextSunRise, }; } else { if (new Date().getDate() != new Date(this._hass.states[this.config.entity_sun].attributes.next_rising).getDate()) { nextSunRise = nextDate.toLocaleDateString(this.config.locale,{weekday: 'short'}) + " " + nextSunRise; nextSunSet = nextDate.toLocaleDateString(this.config.locale,{weekday: 'short'}) + " " + nextSunSet; } return { 'next': html`
  • ${nextSunRise}
    • `, 'following': html`
  • ${nextSunSet}
    • `, 'nextText': nextSunRise, 'followingText': nextSunSet, }; } } // ##### // ##### beaufortWind - returns the wind speed on th beaufort scale // ##### get beaufortWind() { if (this.config.entity_wind_speed) { switch (this._hass.states[this.config.entity_wind_speed].attributes.unit_of_measurement) { case 'mph': if (this._hass.states[this.config.entity_wind_speed].state >= 73) return 12; if (this._hass.states[this.config.entity_wind_speed].state >= 64) return 11; if (this._hass.states[this.config.entity_wind_speed].state >= 55) return 10; if (this._hass.states[this.config.entity_wind_speed].state >= 47) return 9; if (this._hass.states[this.config.entity_wind_speed].state >= 39) return 8; if (this._hass.states[this.config.entity_wind_speed].state >= 31) return 7; if (this._hass.states[this.config.entity_wind_speed].state >= 25) return 6; if (this._hass.states[this.config.entity_wind_speed].state >= 18) return 5; if (this._hass.states[this.config.entity_wind_speed].state >= 13) return 4; if (this._hass.states[this.config.entity_wind_speed].state >= 8) return 3; if (this._hass.states[this.config.entity_wind_speed].state >=3) return 2; if (this._hass.states[this.config.entity_wind_speed].state >= 1) return 1; default: // Assume m/s if ((this._hass.states[this.config.entity_wind_speed].state * 3.6) >= 118) return 12; if ((this._hass.states[this.config.entity_wind_speed].state * 3.6) >= 103) return 11; if ((this._hass.states[this.config.entity_wind_speed].state * 3.6) >= 89) return 10; if ((this._hass.states[this.config.entity_wind_speed].state * 3.6) >= 75) return 9; if ((this._hass.states[this.config.entity_wind_speed].state * 3.6) >= 62) return 8; if ((this._hass.states[this.config.entity_wind_speed].state * 3.6) >= 50) return 7; if ((this._hass.states[this.config.entity_wind_speed].state * 3.6) >= 39) return 6; if ((this._hass.states[this.config.entity_wind_speed].state * 3.6) >= 29) return 5; if ((this._hass.states[this.config.entity_wind_speed].state * 3.6) >= 20) return 4; if ((this._hass.states[this.config.entity_wind_speed].state * 3.6) >= 12) return 3; if ((this._hass.states[this.config.entity_wind_speed].state * 3.6) >=6) return 2; if ((this._hass.states[this.config.entity_wind_speed].state * 3.6) >= 1) return 1; } } return 0; } // ##### // ##### is12Hour - returns true if 12 hour clock or false if 24 // ##### get is12Hour() { var hourFormat= this.config.time_format ? this.config.time_format : 12 switch (hourFormat) { case 24: return false; default: return true; } } // ##### // ##### style: returns the CSS style classes for the card // #### style() { // Get config flags or set defaults if not configured var tooltipBGColor = this.config.tooltip_bg_color || "rgb( 75,155,239)"; var tooltipFGColor = this.config.tooltip_fg_color || "#fff"; var tooltipBorderColor = this.config.tooltip_border_color || "rgb(255,161,0)"; var tooltipBorderWidth = this.config.tooltip_border_width || "1"; var tooltipCaretSize = this.config.tooltip_caret_size || "5"; var tooltipWidth = this.config.tooltip_width || "110"; var tooltipLeftOffset = this.config.tooltip_left_offset || "-12"; var tooltipVisible = this.config.tooltips ? "visible" : "hidden"; var tempTopMargin = this.config.temp_top_margin || "0.05em"; var tempFontWeight = this.config.temp_font_weight || "300"; var tempFontSize = this.config.temp_font_size || "4em"; var tempRightPos = this.config.temp_right_pos || "0.85em"; var tempUOMTopMargin = this.config.temp_uom_top_margin || "-9px"; var tempUOMRightMargin = this.config.temp_uom_right_margin || "7px"; var apparentTopMargin = this.config.apparent_top_margin || "45px"; var apparentRightPos = this.config.apparent_right_pos || "1em"; var apparentRightMargin = this.config.apparent_right_margin || "1em"; var currentTextTopMargin = this.config.current_text_top_margin || "39px"; var currentTextLeftPos = this.config.current_text_left_pos || "5em"; var currentTextFontSize = this.config.current_text_font_size || "1.5em"; var largeIconTopMargin = this.config.large_icon_top_margin || "-3.5em"; var largeIconLeftPos = this.config.large_icon_left_pos || "0em"; var currentDataTopMargin = this.config.current_data_top_margin ? this.config.current_data_top_margin : this.config.show_separator ? "1em" : "7em"; var separatorTopMargin = this.config.separator_top_margin || "6em"; return html` .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); } .line { margin-top: ${separatorTopMargin}; margin-left: 1em; margin-right: 1em; } .temp { font-weight: ${tempFontWeight}; font-size: ${tempFontSize}; color: var(--primary-text-color); position: absolute; right: ${tempRightPos}; margin-top: ${tempTopMargin}; } .tempc { font-weight: ${tempFontWeight}; font-size: 1.5em; vertical-align: super; color: var(--primary-text-color); position: absolute; right: 1em; margin-top: ${tempUOMTopMargin}; margin-right: ${tempUOMRightMargin}; } .apparent { color: var(--primary-text-color); position: absolute; right: ${apparentRightPos}; margin-top: ${apparentTopMargin}; margin-right: ${apparentRightMargin}; } .currentText { font-size: ${currentTextFontSize}; color: var(--secondary-text-color); position: absolute; left: ${currentTextLeftPos}; margin-top: ${currentTextTopMargin}; } .pop { font-weight: 400; color: var(--primary-text-color); } .variations { display: flex; flex-flow: row wrap; justify-content: space-between; font-weight: 300; color: var(--primary-text-color); list-style: none; padding: 0.2em; margin-top: ${currentDataTopMargin}; } .unit { font-size: 0.8em; } .forecast { width: 100%; margin: 0 auto; height: 9em; } .day { display: block; width: 20%; float: left; text-align: center; color: var(--primary-text-color); border-right: .1em solid #d9d9d9; line-height: 1.5; box-sizing: border-box; margin-top: 1em; } .dayname { text-transform: uppercase; } .forecast .day:first-child { margin-left: 20; } .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: ${largeIconTopMargin}; position: absolute; left: ${largeIconLeftPos}; } .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%; } .fcasttooltip { position: relative; display: inline-block; } .fcasttooltip .fcasttooltiptext { visibility: hidden; width: ${tooltipWidth}px; background-color: ${tooltipBGColor}; color: ${tooltipFGColor}; text-align: center; border-radius: 6px; border-style: solid; border-color: ${tooltipBorderColor}; border-width: ${tooltipBorderWidth}px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; bottom: 50%; left: 0%; margin-left: ${tooltipLeftOffset}px; } .fcasttooltip .fcasttooltiptext:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -${tooltipCaretSize}px; border-width: ${tooltipCaretSize}px; border-style: solid; border-color: ${tooltipBorderColor} transparent transparent transparent; } .fcasttooltip:hover .fcasttooltiptext { visibility: ${tooltipVisible}; } ` } // ##### // ##### getUOM: gets UOM for specified measure in either metric or imperial // ##### getUOM(measure) { const lengthUnit = this._hass.config.unit_system.length; switch (measure) { case 'air_pressure': return lengthUnit === 'km' ? 'hPa' : 'mbar'; case 'length': return lengthUnit; case 'precipitation': return lengthUnit === 'km' ? 'mm' : 'in'; case 'intensity': return lengthUnit === 'km' ? 'mm/h' : 'in/h' default: return this._hass.config.unit_system[measure] || ''; } } // ##### // ##### Assign the external hass object to an internal class var. // ##### This is called everytime a state change occurs in HA // ##### set hass(hass) { var interval = this.config.refresh_interval || 30; var doRefresh = false; // Make sure hass is assigned first time. if (!this._initialized) { this._initialized= true; this._lasRefresh = new Date(); doRefresh = true; } var now = new Date(); // Check if refresh interval has been exceeded and refresh if necessary if (Math.round((now - this._lastRefresh)/1000) > interval ) { doRefresh = true; } if (doRefresh) { this._lastRefresh = new Date(); this._hass = hass; this.updateValues(); } } // ##### // updateValues - Updates card values as changes happen in the hass object // ##### updateValues() { const root = this.shadowRoot; if (root.childElementCount > 0) { // Current Conditions root.getElementById("temperature-text").textContent = `${this.current.temperature}`; root.getElementById("icon-bigger").textContent = `${this.current.conditions}`; root.getElementById("icon-bigger").style.backgroundImage = `none, url(/local/icons/weather_icons/${this.config.static_icons ? "static" : "animated"}/${this.weatherIcons[this.current.conditions]}.svg)`; // Forecast blocks this.forecast.forEach((daily) => { root.getElementById("fcast-dayName-" + daily.dayIndex).textContent = `${(daily.date).toLocaleDateString(this.config.locale,{weekday: 'short'})}`; root.getElementById("fcast-icon-" + daily.dayIndex).style.backgroundImage = `none, url(/local/icons/weather_icons/${this.config.static_icons ? "static" : "animated"}/${this.weatherIcons[this._hass.states[daily.condition].state]}.svg`; root.getElementById("fcast-high-" + daily.dayIndex).textContent = `${Math.round(this._hass.states[daily.temphigh].state)}${this.getUOM("temperature")}`; root.getElementById("fcast-low-" + daily.dayIndex).textContent = `${Math.round(this._hass.states[daily.templow].state)}${this.config.old_daily_format ? this.getUOM("temperature") : ""}`; if (this.config.entity_pop_1 && this.config.entity_pop_2 && this.config.entity_pop_3 && this.config.entity_pop_4 && this.config.entity_pop_5) { root.getElementById("fcast-pop-" + daily.dayIndex).textContent = `${Math.round(this._hass.states[daily.pop].state)} %` } root.getElementById("fcast-summary-" + daily.dayIndex).textContent = `${this._hass.states[daily.summary].state}`; }); // Optional Entities if (this.config.entity_current_text) { root.getElementById("current-text").textContent = `${this._hass.states[this.config.entity_current_text].state}` } if (this.config.entity_apparent_temp) { root.getElementById("apparent-text").textContent = `${this.current.apparent}` } if (this.config.entity_pressure && !this.config.alt_pressure) { root.getElementById("pressure-text").textContent = `${this.current.pressure}` } if (this.config.entity_humidity && !this.config.alt_humidity) { root.getElementById("humidity-text").textContent = `${this.current.humidity}` } if (this.config.show_beaufort && !this.config.alt_wind) { root.getElementById("beaufort-text").textContent = `Bft: ${this.beaufortWind} - ` } if (this.config.entity_wind_bearing && !this.config.alt_wind) { root.getElementById("wind-bearing-text").textContent = `${this.current.windBearing} ` } if (this.config.entity_wind_speed && !this.config.alt_wind) { root.getElementById("wind-speed-text").textContent = `${this.current.windSpeed}` } if (this.config.entity_visibility && !this.config.alt_visibility) { root.getElementById("visibility-text").textContent = `${this.current.visibility}` } if (this.config.entity_pop && !this.config.alt_pop) { root.getElementById("pop-text").textContent = `${Math.round(this._hass.states[this.config.entity_pop].state)}` } if (this.config.entity_pop_intensity && !this.config.alt_pop) { root.getElementById("pop-intensity-text").textContent = ` - ${this._hass.states[this.config.entity_pop_intensity].state} ${this.getUOM('intensity')}` } if (this.config.entity_daytime_high && !this.config.alt_daytime_high) { root.getElementById("daytime-high-text").textContent = `${Math.round(this._hass.states[this.config.entity_daytime_high].state)}` } if (this.config.entity_sun && !this.config.alt_sun_next) { root.getElementById("sun-next-text").textContent = `${this.sunSet.nextText}` } if (this.config.entity_sun && !this.config.alt_sun_following) { root.getElementById("sun-following-text").textContent = `${this.sunSet.followingText}` } if (this.config.entity_daily_summary) { root.getElementById("daily-summary-text").textContent = `${this._hass.states[this.config.entity_daily_summary].state}` } if (this.config.entity_precip_intensity_current) { root.getElementById("intensity_current-text").textContent = `${this._hass.states[this.config.entity_precip_intensity_current].state}` } if (this.config.entity_precip_current) { root.getElementById("precip_current-text").textContent = `${this._hass.states[this.config.entity_precip_current].state} ` } // Alt Text if (this.config.alt_sun_next) { root.getElementById("alt-sun-next").textContent = `${this._hass.states[this.config.alt_sun_next].state}` } if (this.config.alt_sun_following) { root.getElementById("alt-sun-following").textContent = `${this._hass.states[this.config.alt_sun_following].state}` } if (this.config.alt_pop) { root.getElementById("alt-pop").textContent = `${this._hass.states[this.config.alt_pop].state}` } if (this.config.alt_wind) { root.getElementById("alt-wind").textContent = `${this._hass.states[this.config.alt_wind].state}` } if (this.config.alt_pressure) { root.getElementById("alt-pressure").textContent = `${this._hass.states[this.config.alt_pressure].state}` } if (this.config.alt_humidity) { root.getElementById("alt-humidity").textContent = `${this._hass.states[this.config.alt_humidity].state}` } if (this.config.alt_daytime_high) { root.getElementById("alt-daytime-high").textContent = `${this._hass.states[this.config.alt_daytime_high].state}` } if (this.config.alt_visibility) { root.getElementById("alt-visibility").textContent = `${this._hass.states[this.config.alt_visibility].state}` } } } // ##### // ##### Assigns the configuration vlaues to an internal class var // ##### This is called everytime a config change is made // ##### setConfig(config) { this.config = config; } // ##### // ##### Sets the card size so HA knows how to put in columns // ##### getCardSize() { return 3 } } // ##### // ##### Register the card as a customElement // ##### customElements.define('lovelace-darksky-card', DarkSkyWeatherCard);