Custom Dark Sky Animated Weather Card

Dave - looks to me it’s that you haven’t configured the sensor properly. The lovelace is fine (probably) but where are your sensors?

One thought… the custom tracker reads the ui-lovelace.yaml file for the version… if you are using storage that won’t be getting updated. I maintain the yaml file but use storage and I cut/paste from yaml to storage file if I do major changes.

Line 294 is

    var apparent = this.config.entity_apparent_temp ? Math.round(this._hass.states[this.config.entity_apparent_temp].state) : 0;

Which points to the entity_apparent_temp configuration. Basically the card thinks that whatever you are passing in to entity_apparent_temp is undefined.

Thanks, I didn’t realise. I’ve updated my old localace.yaml so that should work after my next restart.

Thanks! I had missed swapping the darksky entity for one from my local provider, swapped it out and finally have the card working! Thanks so much for your awesome work on this

Updated Version available here

# 0.9.2
  - Corrected issue with forecast day name not updating with hass state changes.

YAY!!! :tada: Welcome to the club finally. Had a few hurdles to get past, but you finally made it!!

great! thank you very much indeed.

skipping the previous update, Ive now got it working with the new Lit …cool.
though I am having a little trouble with the positioning, would you please see why I can’t get the space between the separator and the block below to be smaller? Ive tried all numbers, but is remains the same…

also, I need the positioning of the condition to go below the Icon, and no matter what I do it won’t go…

while I want it to be like:


this is my config:

show_beaufort: true
show_separator: true
tooltips: true
old_daily_format: false
static_icons: false
locale: nl
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

temp_top_margin: 12px
temp_font_weight: 300
temp_font_size: 5em
temp_right_pos: 1em

temp_uom_top_margin: 0px
temp_uom_right_margin: 7px

apparent_top_margin: 75px
apparent_right_pos: 1em
apparent_right_margin: 1em

current_text_top_margin: 75px #1em
current_text_left_pos: 1.3em
current_text_font_size: 1.7em

current_data_top_margin: 6em
 
large_icon_top_margin: -3.5em
large_icon_left_position: 0em

separator_top_margin: 2em

in which I have taken all the exact values I previously had in my classes in the older card.

thanks for any hint you can give me.

silly thing is there’s progress… but now the icons only show up while the card loads, and then they disappear:

using:

temp_top_margin: 12px
temp_font_weight: 300
temp_font_size: 4em
temp_right_pos: 1em

temp_uom_top_margin: 0px
temp_uom_right_margin: 7px

apparent_top_margin: 80px
apparent_right_pos: 1em
apparent_right_margin: 1em

current_text_top_margin: 80px #1em
current_text_left_pos: 1.3em
current_text_font_size: 1.7em

current_data_top_margin: 1em
 
large_icon_top_margin: 12px #-3.5em
large_icon_left_position: 0em

separator_top_margin: 7.4em

UPDATE

well what do you know…
I decided to have the card configured in a dedicated .yaml file, and call that in my view by using this include:

  - type: weather-forecast
    entity: weather.woensdrecht

  - type: weather-forecast
    entity: weather.home_darksky

  - !include /config/lovelace/card_configs/dark_sky_custom_card.yaml

  - type: 'custom:weather-card-chart'
    title: Weather chart
    weather: weather.woensdrecht
    locale: nl

result:

that’s more like it. (although reloading the page now they’re gone again…?!?)

Could it be that having several of these cards in the same view bugs one another? I’ve had similar experience using the mini-graph-card and power-wheel card, that even halted the system and caused spontaneous restarts… see: Lovelace: mini graph card for reference

On browser refresh my card looks perfect, but on subsequent dynamic updates the min temperature in the day forecasts gains a C for Celsius. This breaks the neatness of the card’s appearance making the readings too wide for each of the 5 columns.

I have another issue with the latest card (besides the icons not showing):

I can’t switch to another view from the view with this card on it. Ive tested extensively now, and each and every time I take out the card, I can navigate just fine. Put the card back, and clicking another view (tab) won’t navigate away from the view (though it does show the correct path in the browser path).

Forcing a reload then shows the correct view. Can navigate to all other views, but not away from the view with the Dark_sky card on it…

Corrected in latest version 0.9.3

Yes, This will cause odd things to happen. The updating routine searches the shadow dom for IDs associated with the specific items in the card. the IDs need to be unique to work correctly. If you have more than one instance of the card then the IDs won’t be unique and it will be indeterminate as to what happens during the update.

EDIT… In thinking about this more, I don’t think this should be an issue. Each instance of the card should have its own Shadow DOM so it really shouldn’t be an issue. I will do some further testing.

Not sure what to say for this. I don’t have this issue. I am able to navigate to and from the card without issue. Possibly something is wrong in HA. Does it continue to be an issue after restarting HA?

New version 0.9.3 here

# 0.9.3
 - Corrected issue where an extra UOM would show on the forecast daily temps
1 Like

You rock! Thanks Mark!

yes is does, many reboots tried…
changing to my previous card immediately solves all issues… navigating is back, and swift. And all my icons show on loading the card. No wait what so ever, and rock solid.

Seems this LIT thing is rather a nuisance for the new soon to be default Lovelace interface…

id be happy to send you my adapted code to have you test it and see if anything pops up on your side. I don’t get any errors what so ever. Simply doesn’t work as expected.

Are you saying here that we can’t have 2 cards on 1 view using the new Lit technique? That would be most impractical…(understatement of the severest kind).

–Feature request–

please consider adding an icon arrow for wind bearing.

I am also using the card with a chart which uses that, and I think it is kind of neat and simple:

28

@Yevgeniy does it like this:

    this.cardinalDirectionsIcon = [
      'mdi:arrow-down', 'mdi:arrow-bottom-left', 'mdi:arrow-left',
      'mdi:arrow-top-left', 'mdi:arrow-up', 'mdi:arrow-top-right',
      'mdi:arrow-right', 'mdi:arrow-bottom-right', 'mdi:arrow-down'
    ];

and:

              <ha-icon icon="hass:[[getWindDirIcon(windBearing)]]"></ha-icon> [[getWindDir(windBearing)]]<br>

using:

  set hass(hass) {
    this._hass = hass;
    this.lang = this._hass.selectedLanguage || this._hass.language;
    this.weatherObj = this.config.weather in hass.states ? hass.states[this.config.weather] : null;
    this.sunObj = 'sun.sun' in hass.states ? hass.states['sun.sun'] : null;
    this.tempObj = this.config.temp in hass.states ? hass.states[this.config.temp] : null;
    this.forecast = this.weatherObj.attributes.forecast.slice(0,9);
    this.windBearing = this.weatherObj.attributes.wind_bearing;
  }

and

  getWindDir(deg) {
    if (locale[this.lang] === undefined)
      return locale.en.cardinalDirections[parseInt((deg + 11.25) / 22.5)];
    return locale[this.lang]['cardinalDirections'][parseInt((deg + 11.25) / 22.5)];
  }

might be cool to have this added to the wind display in your card, or maybe even split up the current wind setting into 2?

51

would be a nice addition to the slots :wink:

like this maybe?:

separate reply, with a solution…

turns out I had this in the Update values optional entities, which is incorrect…

if (this.config.entity_today) { root.getElementById("today-text").textContent = `${this._hass.states[this.config.entity_today].state}` }`

I had added that because I use this too:

    var today = this.config.entity_today ? html`<span class="today" id="today-txt">${this._hass.states[this.config.entity_today].state}</span>` : ``;

not sure why, or why it is incorrect, but taking it out gives me back my navigation.

also, I had not seen the extra 2 entries for the icon path in the Update Values section…

which makes me want to repeat my earlier suggestion to have the icon_path as a config option. Having to edit the main js.file is getting more an more complex, so making a mistake is rather easy…

Has nothing to do with LIT. Has to do with card being able to update dynamically. The getElementById function requires the id you are looking up to be unique. If there is more than one with the same element it will return the 1st one it finds.

To have more than one instance of a card you would need to find a way to make the IDs unique across the card instances. That can easily be done for cards that are single element specific like a guage card or a individual sensor card. Because those cards are only for one entity, you can use the entitiy name as part of the id. That obviously won’t work for this card.

EDIT… (Edited original post as well)… In thinking about this further, I don’t think multiple copies of the card should cause an issue. Each instance should have it’s own Shadow DOM so as long as the IDs are unique within the card there shouldn’t be an issue I will test further…

Spelling mistake. Your getElementByID is looking for “today-text” but you have defined id as “today-txt”

1 Like

Not sure how practical this would be, If you don’t want to use the directory that the card requires, It would be much easier for you to just create a symlink for the directory that this card expects.

I use the icons, as do many other people, for other purposes too, cards, template sensors, etc. Would simply be easiest if we could set

icon_path: /config/weather/ (or whatever path one has set)

in the card config, and have the card take care it…and not have to adjust the path for each and every other card.

If that’s what you call a sym-link that would be fine. I don’t think 1 extra entry would be ‘impractical’ given the plethora of options that are already there?

duh…
thanks for spotting that.
a mistake with severe consequences though, not being able to navigate because of it…