Custom Dark Sky Animated Weather Card


#629

Unfortunately, the current conditions wont necessarily match the POP conditions. Ideally I would use dark_sky_precip to get the current precipitation but it appears to be unknown. If this was passed in from the API it could be used to set the icon.


#630

Ok thanks, was a typo problem.

Can i ask you if you try this code to show the installed version? Thanks.
I get unknown.
I don’t want to use custom updater card script.

I’ve also whitelisted /home/homeassistant/.homeassistant/www/custom_ui/ dir.

  - platform: file
    file_path: /home/homeassistant/.homeassistant/www/custom_ui/version.json
    name: customdarksky_current_version
    value_template: "{{ value_json['dark-sky-weather-card'].version }}"

#631

No, i’m using the custom_updater, was simply a test.
Format your code when posting (blue box at the top), then we will see.


#632

Cool, you’ve been busy :wink: Please note that the % and F aren’t yet in the <span class="unit">. The way I did that was:

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>` : ``;

Maybe, for esthetics, we could change the AM/PM too so all units are displayed alike.

btw, my date is working now.
btw2, my icon is off, it is night overhere, should show a cloudy night?

00

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 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>` : ``;

#633

I know, but we could create a mapper for that, to filter the relevant conditions? And set these against the available precipitation icons. In fact just like we do with the condition icons, that aren’t all available either.

like this maybe?:

  get precipIcons() {
    return {
      'clear-day': 'weather-sunny',
      'clear-night': 'weather-night',
      'rain': 'weather-rainy',
      'snow': 'weather-snowy',
      'sleet': 'weather-pouring',
      'wind': 'weather-cloudy',
      'fog': 'weather-fog',
      'cloudy': 'weather-cloudy',
      'partly-cloudy-day': 'weather-cloudy',
      'partly-cloudy-night': 'weather-cloudy',
      'hail': 'weather-hail',
      'lightning': 'weather-lightning',
      'thunderstorm': 'weather-lightning-rainy',
      'windy-variant': `weather-windy-variant`,
      'exceptional': '!!',
    }
  }

Those main icons are off a bit too as Ive posted in the other post, during the night. I think that even when condition is cloudy, we maybe should check if its past 8pm to change to night icons?


#634

Sorry. Formatted now


#635

Why this?
Should be a rest sensor!


#636

I’m getting an extra ‘/h’ in precipitation intensity

image


#637

Why not a file? I’m going to read a file inside my microSD… Not?
I was thinking rest was only for url. I’m going to try…


#638

How would you update that file?

Use the code from my reply, and you have a sensor that shows the latest version.
If you want to use a local file sensor and it doesn’t work, please create a new topic.

This one is for the Weather Card


#639

thought to be a quirk in my settings, but now I review your latest version, dont you too notice the summary to be way ahead of itself ? Somehow its about a week a head, while one would hope the summary be for this day? (that’s why I added the date…)

Am I mistaken on that, or, can we change that somehow? At least add the sensor.dark_sky_forecast_summary_0 to it in front of the sensor.dark_sky_daily_summary, would that be an option to make it a bit more useful?

like:

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 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>` : ``;

bottom part of the card:

    <hr>
    <span class="summary">Summary for: </span>${today}
    ${summaryToday}
    <span class="summary">Rest of the week: </span>
    ${summary}
  </ha-card>
`;

}

styles:

  .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);
  }

and relevant bit of config:

  - type: custom:dark-sky-weather-card
    entity_sun: sun.sun
    entity_daily_summary: sensor.dark_sky_daily_summary
    entity_summary_today: sensor.dark_sky_forecast_summary_0
    entity_current_conditions: sensor.dark_sky_forecast_icon
    entity_humidity: sensor.dark_sky_humidity
    entity_pressure: sensor.dark_sky_pressure
    entity_apparent_temp: sensor.dark_sky_apparent_temperature
    entity_temperature: sensor.dark_sky_temperature
    entity_visibility: sensor.dark_sky_visibility
    entity_daytime_high: sensor.dark_sky_forecast_daytime_high_temperature_0
    entity_wind_bearing: sensor.dark_sky_wind_bearing
    entity_wind_speed: sensor.br_wind_speed
    entity_wind_force: sensor.br_wind_force
    entity_current_text: sensor.weather_rsd_icon
    entity_precip_intensity: sensor.dark_sky_precip_intensity
    entity_today: sensor.vandaag

Gnight!


#640

Updated to HA 0.86 and just used the card updater to update to the latest of this card 0.8.1, but I still get the “Custom element doesn’t exist: dark-sky-weather-card.”

Any ideas? What’s the best way to completely remove this card and any trace and start again?


#641

It’s a cache issue… delete data and clear cookies… I had same error last week with ‘cardgate’ till I did that. Also refresh a few times, maybe even F12 in chrome and right click on refresh and hard reload and clear cache… Still will need to delete cookies…


#642

I’ve done all that multiple times before, but I think I’ve worked it out. Turns out that the custom updater was unable to overwrite the file, so everything updated except the file so I was still running an old version of the card. I just deleted the card and saved a new one from github and things are now working that I couldn’t get to work. YAY!!!


#643

I’ve got this as well…


#644

Yah, I was trying to use the UOM stored in the attribute of the sensor but for standard it just has in instead of in/h so I added an extra /h … It turns out that the sensor has the /h for metric as in mm/h. Anyway I updated the card to do a lookup like all the other UOM’s. It should work correctly now.


#645

That’s the way its supposed to work. If you don’t want the full week summary then just pass in the _0 summary and it will give you today’s summary. If you want to have both I would suggest setting up a template sensor that concatenates the two along with wahtever other tesxt you want. The card just expects a bunch of text there… it can be anything you want.


#646

I don’t have any issues with them like you are showing… they just respond to whatever darksky is sending. When they are wrong like that is the value in the darksky sensor correct? If you want to force a specific set based on time of day, I would suggest using a template sensor to adjust the value passed in.


#647

The issue isn’t the mapping, thats realtively straight forward. the issue is have a state that can be used to do the mapping. the state that makes sense to use isn’t being populated correctly by the darksky api component. It really isn’t safe to use the current conditions as they may be quite different that what the POP is representing.


#648

Not sure what this means …