Still no dice. I had been working on some other stuff this morning and had been restarting HA from inside the Configuration => General page, and was seeing no change on this card while I was doing that. I just restarted the HA docker container on my server and still no change either. So definitely something funky happening on my install. I’m running 0.86.2 right now. I see 0.86.3 is available. Not sure if that will fix it or not. Might update it here in a bit when I’m done working on this other card.
I’m still on 85.1 so there might be something with the new HA version.
Other than that I’m out of ideas now. Hopefully the owner will pop in here soon and give some advice.
Good luck.
Hi Thomas,
Thanks for the suggestions. I am not a javascript developer either. In fact this card is my first attempt at a javascript program. That said I do have a fair amount of experience with .Net languages specifically C#. I tend to approach things with that a .Net mindset (which is probably where I am going wrong here).
I am curious about your statement
Why is it better to define this as a function / method than a property. When I was building the card I looked at the style of the card as a property of the class. I read about the ‘get’ capability and thought that was a good way to accomplish what I was trying to do. Other than being accessible by code outside of the class, are there other reasons (performance, memory, etc) that would make switching these to functions better? Is it just standard convention to only use ‘get’ when you want a property in the public interface of the class ?
In C# I could use access modifiers to limit accessibility (public/private/internal/protected/etc) but I didn’t see anything i my brief read about getters and setters in javascript that would control accessibility of the property.
As I mentioned I quite new to javascript and am very open to learning more about best practices for coding.
For testing purposes can you put the card on its own page in lovelace and then (I assume you are using Chrome) use the chrome debugger to see if there are any errors in the console.
SHIFT-CTRL-C opens the debugger. Hit F5 to refresh once the debugger is open. Console window is at the bottom of the debugger panel.
It doesn’t appear to be using the css values.
- What browser are you using?
- What version of HA are you on?
- Did you download the raw version of the card?
- Post your configuration
@m.p.frankland
after dozens of reboots to force my Hassio to view correctly the weather card… Hassio do not start more!
…hassio is not visible from my windows pc via samba
it seem sd card is corrupted 
some suggestion to restore sdcard or to recover snapshots saved in the backup partition?
ive checked rechecked and restarted many times with cleared caches etc etc. I simply can’t get the card to show up with the new var Litelement.
Ive changed all necessary items (in my own card, since I don’t use all slots etc yet) but must me missing a detail …
can I post my card for you to check please? I am still on 84.3 so if that’s it I need not post it 
go ahead and post it… I will take a look at it.
Hi.
In short, you’re replacing a built-in property with a very simple approximation.
Your class (or the element it connects to) actually has two representations. One as a javascript object, but the other as a HTML element and tag. The style property is normally bound to the css style property of the tag, i.e. If someone would want to include your card in a webpage, but change the text color to red, they might add
<dark-sky-weather card style="color: red">
</dark-sky-weather-card>
and the style="" part should be updated by the javascript engine when someone sets a property of the style.
With your implementation, I have no idea what would happen.
It also, as we’ve seen, makes it impossible to change the style of the card (which might be a good ability to have once themes are a bit more fleshed out).
Hi @m.p.frankland. I have not been successful at getting this card to appear. My lovelace page has the “Home Assistant” panel at the top, then a “weather” tab but nothing shows under that. I’ve tried using complete copies of other people’s ui-lovelace.yaml, dark-sky-weather-card.[js]&[css] files and still no luck. I’m using Hass.io 0.85.1. I get no errors in the logfile. I look for other changes like removing “core” from hass.config.unit_system.length and hass.config.unit_system[measure] lines. I’ve checked file permissions and the js and css files have ‘755’ read and execute access to other than root owner. I would expect this to generate an error if it was the problem but I haven’t seen any.
Once on the blank lovelace tab, I do a ‘view source’ and there is not much html code there:
<!doctype html>
<title>Home Assistant</title>
<link rel='apple-touch-icon' sizes='180x180'
href='/static/icons/favicon-apple-180x180.png'>
<link rel="mask-icon" href="/static/icons/mask-icon.svg" color="#3fbbf4">
<meta name='apple-mobile-web-app-capable' content='yes'>
<meta name="msapplication-square70x70logo" content="/static/icons/tile-win-70x70.png"/>
<meta name="msapplication-square150x150logo" content="/static/icons/tile-win-150x150.png"/>
<meta name="msapplication-wide310x150logo" content="/static/icons/tile-win-310x150.png"/>
<meta name="msapplication-square310x310logo" content="/static/icons/tile-win-310x310.png"/>
<meta name="msapplication-TileColor" content="#3fbbf4ff"/>
<meta name='mobile-web-app-capable' content='yes'>
<meta name='referrer' content='same-origin'>
<meta name='theme-color' content='#03A9F4'>
<style>
#ha-init-skeleton::before {
display: block;
content: "";
height: 112px;
background-color: #03A9F4;
}
</style>
<script>
window.customPanelJS = '/frontend_latest/custom-panel-541e681f.js';
window.noAuth = '0';
window.useOAuth = '1'
window.Polymer = {
lazyRegister: true,
useNativeCSSProperties: true,
dom: 'shadow',
suppressTemplateNotifications: true,
suppressBindingNotifications: true,
};
</script>
<script>
var webComponentsSupported = (
'customElements' in window &&
'content' in document.createElement('template'));
if (!webComponentsSupported) {
(function() {
var e = document.createElement('script');
e.src = '/static/webcomponents-bundle.js';
document.write(e.outerHTML);
}());
}
</script>
<script src='/frontend_latest/core-6edc6f64.js'></script>
<script src='/frontend_latest/app-19bfb9ea.js'></script>
<script src='/frontend_latest/hass-icons-9b38629e.js' async></script>
</body>
I am not sure where I find the "/frontend_latest/’ folder but that code is pretty dense and not formatted at all. So I am not sure why it isn’t rendering.
Is there a github repository that has all the files needed that will run on Hass.io 0.85.1?
Thanks for any help.
-Bart
View source won’t show very much. It will not show what is rendered on your screen. To see that, you will need to use something like Google Chrome and Inspect the page. From there you can see the html for what is shown on your screen.
Do you have any errors related to this in Home Assistant in dev-info? (Little i in circle at bottom right of side menu)
Thanks, much appreciated.
this is my card for now, ive been meticulous, but must have missed something…hope you can spot the error:
//import { LitElement, html, } from 'https://unpkg.com/@polymer/lit-element@^0.5.2/lit-element.js?module';
/// import { LitElement, html, } from 'https://unpkg-gcp.firebaseapp.com/@polymer/[email protected]/lit-element.js?module';
var LitElement = LitElement || Object.getPrototypeOf(customElements.get("hui-error-entity-row"));
var html = LitElement.prototype.html;
// const LitElement = Object.getPrototypeOf(customElements.get("ha-panel-lovelace"));
// const html = LitElement.prototype.html;
// Create your custom component
class DarkSkyWeatherCard extends LitElement {
// Declare properties
/// static get properties() {
/// return { hass: Object, config: Object, };
// #####
// ##### Assign the external hass object to an internal class var
// #####
set Hass(hass) { this._hass = hass }
// #####
// ##### Define Render Template
// #####
/// _render( {hass, config }) {
render() {
// Handle Configuration Flags
var icons = this.config.static_icons ? "static" : "animated";
var sunLeft = this.config.entity_sun ? this.sunSet.left : "";
var sunRight = this.config.entity_sun ? this.sunSet.right : "";
var currentText = this.config.entity_current_text ? html`<span class="currentText">${hass.states[this.config.entity_current_text].state}</span>` : ``;
var apparentTemp = this.config.entity_apparent_temp ? html`<span class="apparent">${this.localeText.feelsLike} ${this.current.apparent} ${this.getUOM("temperature")}</span>` : ``;
var daytimeHigh = this.config.entity_daytime_high ? html`<li><span class="ha-icon"><ha-icon icon="mdi:thermometer"></ha-icon></span>${this.localeText.maxToday} ${Math.round(this.hass.states[this.config.entity_daytime_high].state)}<span class="unit"> ${this.getUOM('temperature')}</span></li>` : ``;
// var pop = this.config.entity_pop ? html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-rainy"></ha-icon></span>${Math.round(this.hass.states[this.config.entity_pop].state)} %</li>` : ``;
var precip = this.config.entity_pop && this.config.entity_precip_intensity ? html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-rainy"></ha-icon></span>${Math.round(this.hass.states[this.config.entity_pop].state)}<span class="unit"> %</span> - ${this.hass.states[this.config.entity_precip_intensity].state}<span class="unit"> mm/h</span></li>` : ``;
var visibility = this.config.entity_visibility ? html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-fog"></ha-icon></span>${this.current.visibility}<span class="unit"> ${this.getUOM('length')}</span></li>` : ``;
var wind = this.config.entity_wind_bearing && this.config.entity_wind_speed ? html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-windy"></ha-icon></span>${this.current.beaufort}${this.current.windBearing} ${(this.current.windSpeed)*3.6}<span class="unit"> ${this.getUOM('length')}/h</span></li>` : ``;
var humidity = this.config.entity_humidity ? html`<li><span class="ha-icon"><ha-icon icon="mdi:water-percent"></ha-icon></span>${this.current.humidity}<span class="unit"> %</span></li>` : ``;
var pressure = this.config.entity_pressure ? html`<li><span class="ha-icon"><ha-icon icon="mdi:gauge"></ha-icon></span>${this.current.pressure}<span class="unit"> ${this.getUOM('air_pressure')}</span></li>` : ``;
var summaryToday = this.config.entity_summary_today? html`<br><span class="today"> ${hass.states[this.config.entity_summary_today].state}<br> ` : ``;
var summary = this.config.entity_daily_summary ? html`<br><span class="summary"> ${hass.states[this.config.entity_daily_summary].state}</span></br>` : ``;
var today = this.config.entity_today ? html`<span class="today">${hass.states[this.config.entity_today].state}</span>` : ``;
// Build HTML
return html`
<style>
${this.style}
</style>
<ha-card class = "card">
<span class="icon bigger" style="background: none, url(/local/weather/${icons}/${this.weatherIcons[this.current.conditions]}.svg) no-repeat; background-size: contain;">${this.current.conditions}</span>
<span class="temp">${this.current.temperature}</span><span class="tempc">${this.getUOM('temperature')}</span>
${currentText}
${apparentTemp}
<hr class="hr">
<span>
<ul class="variations right">
${daytimeHigh}
${visibility}
${pressure}
${sunRight}
</ul>
<ul class="variations">
${precip}
${wind}
${humidity}
${sunLeft}
</ul>
</span>
<div class="forecast clear">
${this.forecast.map(daily => html`
<div class="day fcasttooltip">
<span class="dayname">${(daily.date).toLocaleDateString(this.config.locale,{weekday: 'short'})}</span>
<br><i class="icon" style="background: none, url(/local/weather/${icons}/${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">${Math.round(this.hass.states[daily.temphigh].state)}${this.getUOM("temperature")}</span>
<br><span class="lowTemp">${Math.round(this.hass.states[daily.templow].state)}${this.getUOM("temperature")}</span>` :
html`<br><span class="lowTemp">${Math.round(this.hass.states[daily.templow].state)}</span> / <span class="highTemp">${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">${Math.round(this.hass.states[daily.pop].state)} %</span>` : ``}
<div class="fcasttooltiptext">${ this.config.tooltips ? this.hass.states[daily.summary].state : ""}</div>
</div>`)}
</div>
<hr>
<span class="summary">Summary for: </span>${today}
${summaryToday}
<span class="summary">Rest of the week: </span>
${summary}
</ha-card>
`;
}
// #####
// ##### 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'];
switch (this.config.locale) {
case "it" :
case "fr" :
return windDirections_fr;
case "de" :
return windDirections_de;
case "nl" :
return windDirections_nl;
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:",
}
default :
return {
feelsLike: "Feels like",
maxToday: "Today's High",
}
}
}
// #####
// ##### dayOrNight : returns day or night depending opn the position of the sun.
// #####
get dayOrNight() {
const transformDayNight = { "below_horizon": "night", "above_horizon": "day", }
return transformDayNight[this.hass.states[this.config.entity_sun].state];
}
// #####
// ##### 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,
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,
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,
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,
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,
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 ? 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) : 2;
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} - ` : ``;
var date = this.config.entity_date ? this.hass.states[this.config.entity_date].state : 0;
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 test = false;
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 sunLeft;
var sunRight;
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 {
'left': html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-sunset-down"></ha-icon></span>${nextSunSet}</li>`,
'right': html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-sunset-up"></ha-icon></span>${nextSunRise}</li>`,
};
} 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 {
'left': html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-sunset-up"></ha-icon></span>${nextSunRise}</li>`,
'right': html`<li><span class="ha-icon"><ha-icon icon="mdi:weather-sunset-down"></ha-icon></span>${nextSunSet}</li>`,
};
}
}
// #####
// ##### 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:
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
// ####
get 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"
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);
}
.temp {
font-weight: 300;
font-size: 4em;
color: var(--secondary-text-color);
position: absolute;
right: 1em;
margin-top: 12px
}
.tempc {
font-weight: 300;
font-size: 1.5em;
vertical-align: super;
color: var(--secondary-text-color);
position: absolute;
right: 1em;
margin-top: 0px;
margin-right: 7px;
}
.apparent {
color: var(--secondary-text-color);
position: absolute;
right: 1em;
margin-top: 70px;
margin-right: 1em;
}
.currentText {
font-size: 1.7em;
color: var(--secondary-text-color);
position: absolute;
left: 1.3em;
margin-top: 70px;
}
.pop {
font-weight: 400;
color: var(--primary-text-color);
}
.variations {
display: inline-block;
font-weight: 300;
color: var(--primary-text-color);
list-style: none;
margin-left: -2em;
// margin-top: 6.4em;
}
.variations.right {
position: absolute;
right: 1em;
margin-left: 0;
margin-right: 1em;
}
.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: capitalize;
color: var(--secondary-text-color);
}
.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: -3.5em;
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%;
}
.summary {
font-weight: bold;
font-size: 0.9em;
color: var(--secondary-text-color);
}
.today {
font-weight: bold;
font-size: 0.9em;
color: var(--primary-text-color);
}
.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};
}
.hr {
margin-top: 7em;
color:var(--secondary-text-color);
// height: 1px;
}
`
}
// #####
// ##### 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';
default:
return this.hass.config.unit_system[measure] || '';
}
}
// #####
// ##### Assign the external hass object to an internal class var.
// ##### This is called everytime a state value chnages
// #####
set hass(hass) { this._hass = hass }
setConfig(config) { this.config = config; }
// The height of your card. Home Assistant uses this to automatically
// distribute all cards over the available columns.
getCardSize() { return 3 }
}
customElements.define('dark-sky-weather-card', DarkSkyWeatherCard);
I’m guessing when you mean debugger you mean the console inside developer tools? This is what I see when I refresh the page with the console open:
Thanks for the response cj.
No errors under the dev-info page (except for my device errors that take too long to answer up.) I use that page to preview the lovelace ui as I haven’t made it permanent yet. You made a great suggestion about ‘inspect’ vs ‘view-source’
I am using chrome and did the ‘inspect’ and the html “console” tab has errors that may be coming from polymer code (the chunk.js code below) but also from the dark-sky-weather-card.js file. I believe this code is working for a lot of folks but I can’t make sense of it but maybe someone else can?
Inspect console:
dark-sky-weather-card.js?v=5:103 Uncaught (in promise) TypeError: Cannot read property ‘state’ of undefined
at HTMLElement.set hass [as hass] (dark-sky-weather-card.js?v=5:103)
at config.cards.forEach (f472ba3….chunk.js:5516)
at Array.forEach ()
at HTMLElement._createCards (f472ba3….chunk.js:5516)
at HTMLElement.updated (f472ba3….chunk.js:5516)
at HTMLElement._validate (app-19bfb9ea.js:1167)
at HTMLElement._invalidate (app-19bfb9ea.js:1167)
It’s a little too dense (or maybe it’s me) for me to make sense of except that line 103 in dark-sky-weather-card.js is:
const feelstemperature = Math.round(hass.states[this.config.entity_feelstemp].state);
So bottom line, I don’t know why this code works for others but not me. It seems most folks are on 0.84 or below so maybe that has something to do with it?
Thanks for the help.
Bart
I’m running on 0.86.3 with no problems.
Do you have the latest version installed? To me, it looks like you have version 5 (I’ve bolded it above), but if you look at line 103 of the js file, it’ll tell you what is having issues. Maybe @m.p.frankland might be able to help.
which card is that? not this dark-sky-weater-card.js home-assistant-config/ui/darksky/dark-sky-weather-card.js at master · iammexx/home-assistant-config · GitHub …?
if your feeding it that line, it shouldn’t work… there’s no such const in the card at all, and all feels like entities are called apparenttemp? Along these lines:
var apparentTemp = this.config.entity_apparent_temp ? html`<span class="apparent">${this.localeText.feelsLike} ${this.current.apparent} ${this.getUOM("temperature")}</span>` : ``;
Please post your dark-sky config
Based on this information it sounds like you started from the first post in this thread… You mention the .css file and the issues with ‘core’. That code is very old and does not work any more. (the .css file isn’t even used anymore) Unfortunately, the folks who run the forum lock the 1st posting in threads that see a lot of activity. Because it’s locked I cant edit it to indicate that the code is no longer valid.
There is a post here: Custom Dark Sky Animated Weather Card - #272 by m.p.frankland That explains it more and provides links to the files on github. I typically post at the end of this thread whenever there is a new version. There is also a version.json file if you use the card tracker.
Start with removing the card you have and .css file if you still have it. Get the raw version of the card from guthub and follow the readme to set it up.
Let me know if you have issues.