That’s odd … Even with a new view with only the weather card, it won’t update automatically… I waited more than 40 minutes but no refresh (Meanwhile, I used another laptop and refreshed manually to check if the values were actually changing).
Regarding custom components, I am using “custom compact header”, but I didn’t add it to the new view. I am also using a custom media player card, but I don’t think it would interfere.
I would be grateful if you can walk me through the Chrome debugging tools to find out what’s wrong with my config.
Thanks for your help and patience 
Really nice card, really enjoying it.
Now first of all, I have ZERO coding experience at all. But when I set this card up, I saw some things that was not working as, I believe, is intended. Sorry for the formatting in this post too, I cannot figure out how to do it right.
First of all, I noticed that “Feels like” and “Today’s high” did not translate to Danish. I asked on the discord server, and got help figuring it out, including the next things I found.
I changed the fr case to:
case “da” :
return {
feelsLike: “Føles som”,
maxToday: “Højeste i dag”,
And it worked. Then I found that wind directions also did not translate, and were only written as letters. So I changed it to:
const windDirections_da = [‘Nord’,‘Nord-Nordøst’,‘Nordøst’,‘Øst-Nordøst’,‘Øst’,‘Øst-Sydøst’,‘Sydøst’,‘Syd-Sydøst’,‘Syd’,‘Syd-Sydvest’,‘Sydvest’,‘Vest-Sydvest’,‘Vest’,‘Vest-Nordvest’,‘Nordvest’,‘Nord-Nordvest’,‘Nord’];
Then I noticed my wind speed was reporting km/h, where it should report km/t (hours = timer in danish). But adding it this, it was also giving me the m/s value and putting km/h unit on it. Lastly, I think the way of reporting the wind speed and direction was unnatural, so I changed it to report like “speed” from “direction”. I found out that changing the wind variable could do it:
var wind = this.config.entity_wind_speed && this.config.entity_wind_bearing ? html<li><span class="ha-icon"><ha-icon icon="mdi:weather-windy"></ha-icon></span><span id="beaufort-text">${this.current.beaufort}</span><span id="wind-speed-text">${this.current.windSpeed}</span><span class="unit"> m/s</span><span id="wind-bearing-text"> fra ${this.current.windBearing}</span></li> : ``;
The result looks great, but I would obviously like to get updates for the card as well. I have no idea how pull requests, or anything works at all, I am very new to all of this.
Can you guys maybe give me feedback on if this is something that could be implemented?
The result:
New version available here
0.10.1
- Added da locale translations
- Added alt_* config entries. These allow complete remapping of slot data to what ever format desired by using a template sensor.
The main change is the addition of the following config entries:
alt_daytime_high
alt_visibility
alt_pop
alt_humidity
alt_pressure
alt_wind
The purpose of these entries is to allow for the text in a slot to be completely replaced with custom data defined by a template sensor. This will allow for people who would like to format the data in different ways including the order of words etc. to do so without impacting other users or adding complexity to the card.
For example. The stock card displays wind by stating the wind bearing followed by the wind speed. If instead you wanted to display the wind speed first, you can now do that by creating a template sensor that produces the text the way you want and the card will display that text instead of trying to build the text from individual sensors.
Wind without using alt_wind entry:
Wind using template sensor to provide the text for alt_wind
I have added da language translations based off your input above to the latest version. Making the format change you described to the way wind is displayed is more problematic as it would change the way the wind is displayed for everyone. To that end I have added the ability to provide alternative text for each of the slot values. This will allow you to format the values in any way you want so long as you can create a template sensor for the data.
For example:
Here is the card using just the da locale setting:
but by setting up a template sensor and passing it to the alt_wind entry, The card can look like this:
The template sensor for the wind text looks like this:
dark_sky_alt_wind_da:
value_template: >-
{% set winddir = ['Nord','Nord-Nordøst','Nordøst','Øst-Nordøst','Øst','Øst-Sydøst','Sydøst','Syd-Sydøst','Syd','Syd-Sydvest','Sydvest','Vest-Sydvest','Vest','Vest-Nordvest','Nordvest','Nord-Nordvest','Nord'] %}
{{ states('sensor.dark_sky_wind_speed')}} m/s fra {{ winddir[((states('sensor.dark_sky_wind_bearing') | float / 360)*16) | round]}}
Then in the card config just add
alt_wind: sensor.dark_sky_alt_wind_da
Anyway,
Try out the latest card and let me know if you have issues.
HI
I use your card module 0.10.1 and i have in config sensors this:
dark_sky_current_text:
value_template: >-
{% if is_state(“sensor.dark_sky_icon”,“clear-day”) %}
Clear
{% elif is_state(“sensor.dark_sky_icon”,“clear-night”) %}
Clear
{% elif is_state(“sensor.dark_sky_icon”,“rain”) %}
Rain
{% elif is_state(“sensor.dark_sky_icon”,“snow”) %}
Snowy
{% elif is_state(“sensor.dark_sky_icon”,“fog”) %}
Foggy
{% elif is_state(“sensor.dark_sky_icon”,“sleet”) %}
Sleet
{% elif is_state(“sensor.dark_sky_icon”,“wind”) %}
Windy
{% elif is_state(“sensor.dark_sky_icon”,“cloudy”) %}
Cloudy
{% elif is_state(“sensor.dark_sky_icon”,“partly-cloudy-day”) %}
Partly Cloudy
{% elif is_state(“sensor.dark_sky_icon”,“partly-cloudy-night”) %}
Partly Cloudy
{% elif is_state(“sensor.dark_sky_icon”,“hail”) %}
Hailing
{% elif is_state(“sensor.dark_sky_icon”,“lightning”) %}
Lightning
{% elif is_state(“sensor.dark_sky_icon”,“thunderstorm”) %}
Thunderstorm
{% endif %}
dark_sky_alt_wind:
value_template: >-
{% set winddir = ['North','North-Northeast','Northeast','East-Northeast','East','East-Southeast','Southeast','South-Southeast','South','South-Southwest','Southwest','West-Southwest','West','West-Northwest','Northwest','North-Northwest','North'] %}
{{ states('sensor.dark_sky_wind_speed') | round }} mi/h from the {{ winddir[((states('sensor.dark_sky_wind_bearing') | float / 360)*16) | round]}}
- platform: darksky
api_key: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
forecast:- 0
- 1
- 2
- 3
- 4
- 5
monitored_conditions: - icon
- summary
- nearest_storm_distance
- nearest_storm_bearing
- humidity
- temperature
- temperature_high
- temperature_low
- apparent_temperature
- apparent_temperature_high
- apparent_temperature_low
- wind_speed
- wind_bearing
- precip_type
- precip_probability
- precip_accumulation
- precip_intensity
- precip_intensity_max
- uv_index
- daily_summary
- pressure
- visibility
update_interval:
minutes: 5
Then add in my lovelace storage add card and then add custom card:
type: ‘custom:dark-sky-weather-card’
entity_current_conditions: sensor.dark_sky_icon
entity_temperature: sensor.dark_sky_temperature
entity_forecast_high_temp_1: sensor.dark_sky_daytime_high_temperature_1
entity_forecast_high_temp_2: sensor.dark_sky_daytime_high_temperature_2
entity_forecast_high_temp_3: sensor.dark_sky_daytime_high_temperature_3
entity_forecast_high_temp_4: sensor.dark_sky_daytime_high_temperature_4
entity_forecast_high_temp_5: sensor.dark_sky_daytime_high_temperature_5
entity_forecast_icon_1: sensor.dark_sky_icon_1
entity_forecast_icon_2: sensor.dark_sky_icon_2
entity_forecast_icon_3: sensor.dark_sky_icon_3
entity_forecast_icon_4: sensor.dark_sky_icon_4
entity_forecast_icon_5: sensor.dark_sky_icon_5
entity_forecast_low_temp_1: sensor.dark_sky_overnight_low_temperature_0
entity_forecast_low_temp_2: sensor.dark_sky_overnight_low_temperature_1
entity_forecast_low_temp_3: sensor.dark_sky_overnight_low_temperature_2
entity_forecast_low_temp_4: sensor.dark_sky_overnight_low_temperature_3
entity_forecast_low_temp_5: sensor.dark_sky_overnight_low_temperature_4
entity_summary_1: sensor.dark_sky_summary_1
entity_summary_2: sensor.dark_sky_summary_2
entity_summary_3: sensor.dark_sky_summary_3
entity_summary_4: sensor.dark_sky_summary_4
entity_summary_5: sensor.dark_sky_summary_5
entity_sun: sun.sun
entity_visibility: sensor.dark_sky_visibility
entity_daytime_high: sensor.dark_sky_daytime_high_temperature_0
entity_wind_bearing: sensor.dark_sky_wind_bearing
entity_wind_speed: sensor.dark_sky_wind_speed
entity_humidity: sensor.dark_sky_humidity
entity_pressure: sensor.dark_sky_pressure
entity_apparent_temp: sensor.dark_sky_apparent_temperature
entity_daily_summary: sensor.dark_sky_daily_summary
entity_pop: sensor.dark_sky_precip_probability
entity_pop_intensity: sensor.dark_sky_precip_intensity
entity_pop_1: sensor.dark_sky_precip_probability_1
entity_pop_2: sensor.dark_sky_precip_probability_2
entity_pop_3: sensor.dark_sky_precip_probability_3
entity_pop_4: sensor.dark_sky_precip_probability_4
entity_pop_5: sensor.dark_sky_precip_probability_5
entity_current_text: sensor.dark_sky_current_text
alt_wind: sensor.dark_sky_alt_wind
locale: pl
static_icons: false
tooltip_bg_color: ‘rgb( 75,155,239)’
tooltip_border_color: orange
tooltip_border_width: 3
tooltip_caret_size: 10
tooltip_fg_color: ‘#fff’
tooltip_left_offset: -12
tooltip_width: 100
tooltips: true
old_daily_format: false
time_format: 24
show_beaufort: true
And my view dark sky is:
Not show in POLISH language, not show text from template current text, not show template
dark_sky_alt_wind and also not show sun.sun.
why ? what i done wrong ? Please help me how do it step by step.
In RAW editor ofcourse add:
- url: /local/custom_ui/dark-sky-weather-card.js?v=7.1
type: module
After clear cookies works ok.
But how add divider as you have under CLEAR… ? And how change color temperature and color CLEAR as you have RED color ?
To add he divider add
show_separator: true
to the config. The readme file contains a list of all the flags and what they do.
The colors come for the theme applied to the card. It will depend on what themes you have added to your HA instance.
HI, did you ever consider adjusting the colors of the main Temp based on the value? Would be cool if we could show a blue number when cold, orange when getting warmer, and red when really warm…
For now I am relying on using the themes… I am reluctant to change it as that will break using themes for the card which would be bad. It might be possible to control the theme the card uses based on temp. I am not sure how much control there is over themes yet but hopefully as lovelace matures it will gain more theme functionality. As it is now each lovelace card can use a different theme.
a yes I understand. But using a theme wont allow for an adjustable Temp color wouldn’t it? Seems I just need a form of template in the css settings of the card. I’ve been puzzling with that, but it hasn’t come out correctly yet.
if you ever think of a way, don’t hesitate to throw it in the group 
I think it might eventually… As each card is separately themed, If we can change the theme for a card automatically based on a entity state then you could have specific themes tied to the temp state for example that changed the colors based on the temperature.
Ok… If you have never used them before, you access the Chrome dev tools by press Shift-Ctl-C at the same time. A panel should open on the right side of the window. It would be best if you had the view up that only has the card and nothing else. It should look something like this
At the top of he panel are tabs for Elements, Console, Sources, Network, etc. You want to make sure you are on the Sources tab like shown above and that the lovelace view that you are using is highlighted. Your view number may be different than mine.
At the bottom of the panel make sure the console tab is selected as well. Once that is setup. Hit F5 to refresh the lovelace view. If there are any errors they should be thrown in the console. The line the error is on (if any) should also be highlighted in the source view.
hmm, some how this feels like doing things difficult while it can be easy. Why have the card use a different theme if only the color for the current temp would need to change…
Lovelace ui really lacks in template support, compared to regular HA, and many custom cards are used to liven it up. This though ought to be easy. I fully appreciate if you wont change the card, but maybe you could help me adjust the css for this?
My regular sensors use this:
sensor.dark_sky_*temperature*:
templates:
icon_color: >
if (state < -5) return 'rgb(30, 255, 255)';
if (state < 0) return 'rgb(30, 144, 255)';
if (state < 10) return 'rgb(255, 255, 0)';
if (state < 15) return 'rgb(255, 211, 30)';
if (state < 20) return 'rgb(0, 128, 0)';
return 'rgb(255, 165, 0)';
now how could I get that to use in the class temp:
.temp {
font-weight: ${tempFontWeight};
font-size: ${tempFontSize};
color: var(--primary-text-color);
position: absolute;
right: ${tempRightPos};
margin-top: ${tempTopMargin};
}
I’d need to declare a var(temp_color) and use that in the class?
I’m not sure how you pull that out of the icon_color template. I haven’t used those before so it would take some experimentation. Without using that I would create a template sensor (call it dark_sky_temp_color) with a value_template that returns the color your are after based on the temp and then pass it in as a config flag.
temp_color: sensor.dark_sky_temp_color
then in the code of the card I would add something like
var temp_color = this.config.temp_color ? this._hass.states[this.config.temp_color].state : 'rgb(255, 165, 0)';
In the css class replace
color: var(--primary-text-color);
with
color: ${temp_color};
1 Like
testing with this template:
dark_sky_temp_color:
value_template: >
{% set temp = states('sensor.dark_sky_temperature')|float %}
{% if temp < -5 %} rgb(30, 255, 255)
{% elif temp < 0 %} rgb(30, 144, 255)
{% elif temp < 10 %} rgb(255, 255, 0)
{% elif temp < 15 %} rgb(255, 211, 30)
{% elif temp < 20 %} rgb(0, 128, 0)
{% else %} rgb(255, 165, 0)
{% endif %}
thank you very much for helping me!
would the state need to be with or with our quotes?
Awesome, thank you so much for meeting my suggestions, I highly appreciate the way you implemented it as well, as I can now do anything I want with the values.
Now there’s just two things I want to ask you about.
First of all, I wonder about the unit system still. Before I add any template sensors, it still shows me the m/s value and puts a km/h unit on it. Those also do not translate to my language, as km/h should be km/t - and same for mm/h that should be mm/t in rain.
Secondly, I added:
- platform: template
sensors:
dark_sky_alt_wind_da:
value_template: >-
{% set winddir = ['Nord','Nord-Nordøst','Nordøst','Øst-Nordøst','Øst','Øst-Sydøst','Sydøst','Syd-Sydøst','Syd','Syd-Sydvest','Sydvest','Vest-Sydvest','Vest','Vest-Nordvest','Nordvest','Nord-Nordvest','Nord'] %}
{{ states('sensor.dark_sky_wind_speed')}} m/s fra {{ winddir[((states('sensor.dark_sky_wind_bearing') | float / 360)*16) | round]}}
To my configuration, and it shows correctly. However, it does not round the value. Is this something I need to change in the template sensor? I see on your screenshot, it is not rounded either, but I thought the last part of the value_template was rounding.
-
Unit System. The card does a basic UOM lookup internally based on whether you have metric or imperial chosen as your unit system in HA. for Speed measuremnets it assumes km/h for metric and mi/h for imperial. It’s not ideal but it covers the vast majority of use cases without adding extreme complexity to the card.
-
The | round you see in the template is filtering the wind bearing calculation not the wind speed. If you want to round the wind speed change the template to say
{{ states('sensor.dark_sky_wind_speed') | round(<number of places>)}} m/s fra ...
set to the number of decimal places to round to.
Without quotes…
-
Ok. My unit system is set to metric, but my sensor.dark_sky_wind_speed reports m/s. Is that due to my locale then? I truly understand why you do not want to add complexity if this is a unique problem to my locale or something. I did not specifically set up sensor.dark_sky_wind_speed to report m/s anywhere, it just does, and that is fine by me, as that is the most used unit for wind here.
If this is a rare problem, then maybe just note it in your readme, that people should check what unit their sensor reports and correct with alt entries. -
Awesome, that works great.
New question
3. Now just one more thing. When I do alt entries, is there any way to set unit class to part of the text? When I just modified your js, I found that setting would make sure the unit was lowered to look nice. Can I do that in my template sensor?
See how the units vary from non altered entries:
time to make a github page for this custom card, more people are using this card each day