I finally got the dark sky card to work. I had two cities defined and that caused me all kinds of grief.
But it works great and Id like to add a label to each card so I know what city I’m looking at. Do I need to do this in the dark-sky-weather-card.js javascript file? I’m assuming yes. I’m NOT a js programmer so any help here much appreciated.
This is what I’d like it to look like (thanks PhotoShop)
Images would be even better:
// #####
// ##### 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`<span class="currentText" id="current-text">${this._hass.states[this.config.entity_current_text].state}</span>` : ``;
var apparentTemp = this.config.entity_apparent_temp ? html`<span class="apparent">${this.localeText.feelsLike} <span id="apparent-text">${this.current.apparent}</span> ${this.getUOM("temperature")}</span>` : ``;
var summary = this.config.entity_daily_summary ? html`<br><span class="unit" id="daily-summary-text">${this._hass.states[this.config.entity_daily_summary].state}</span></br>` : ``;
var separator = this.config.show_separator ? html`<hr class=line>` : ``;
// Build HTML
return html`
<style>
${this.style()}
</style>
<ha-card class = "card">
<span class="icon bigger" id="icon-bigger" style="background: none, url(/local/icons/weather_icons/${this.config.static_icons ? "static" : "animated"}/${this.weatherIcons[this.current.conditions]}.svg) no-repeat; background-size: contain;">${this.current.conditions}</span>
<span class="temp" id="temperature-text">${this.current.temperature}</span><span class="tempc">${this.getUOM('temperature')}</span>
${currentText}
${apparentTemp}
${separator}
<span>
<ul class="variations">
<li>
${this.getSlot().l1}
${this.getSlot().l2}
${this.getSlot().l3}
${this.getSlot().l4}
</li>
<li>
${this.getSlot().r1}
${this.getSlot().r2}
${this.getSlot().r3}
${this.getSlot().r4}
</li>
</ul>
</span>
<div class="forecast clear">
${this.forecast.map(daily => html`
<div class="day fcasttooltip">
<span class="dayname" id="fcast-dayName-${daily.dayIndex}">${(daily.date).toLocaleDateString(this.config.locale,{weekday: 'short'})}</span>
<br><i class="icon" id="fcast-icon-${daily.dayIndex}" style="background: none, url(/local/icons/weather_icons/${this.config.static_icons ? "static" : "animated"}/${this.weatherIcons[this._hass.states[daily.condition].state]}.svg) no-repeat; background-size: contain;"></i>
${this.config.old_daily_format ? html`<br><span class="highTemp" id="fcast-high-${daily.dayIndex}">${Math.round(this._hass.states[daily.temphigh].state)}${this.getUOM("temperature")}</span>
<br><span class="lowTemp" id="fcast-low-${daily.dayIndex}">${Math.round(this._hass.states[daily.templow].state)}${this.getUOM("temperature")}</span>` :
html`<br><span class="lowTemp" id="fcast-low-${daily.dayIndex}">${Math.round(this._hass.states[daily.templow].state)}</span> / <span class="highTemp" id="fcast-high-${daily.dayIndex}">${Math.round(this._hass.states[daily.temphigh].state)}${this.getUOM("temperature")}</span>`}
${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`<br><span class="pop" id="fcast-pop-${daily.dayIndex}">${Math.round(this._hass.states[daily.pop].state)} %</span>` : ``}
<div class="fcasttooltiptext" id="fcast-summary-${daily.dayIndex}">${ this.config.tooltips ? this._hass.states[daily.summary].state : ""}</div>
</div>`)}
</div>
${summary}
</ha-card>
`;
}
Jeff
