Yah… The wind direction letters are hard coded. If someone can provide a translation list for a specific language I can add it and use the locale flag to show them
Can’t find one at google, so maybe everyone can add his language?
de:
N
W O
S
en:
N
W E
S
For me the ‘O’ is enough. 
Wondering how it’s done in the darksky weather component.
EDIT: Or maybe a simple flag?
directions: NOSW
its loaded fine! also the new sunset and sunrise Ive asked for… thanks for that a bunch.
couldn’t that be done with a mapper, just like the weather icons?
btw, Ive simply done it manually in my other cards:
const windDirections = ['N','NNO','NO','ONO',
'O','OZO','ZO','ZZO',
'Z','ZZW','ZW','WZW',
'W','WNW','NW','NNW',
'N'];for italian:
N (north) S (South) O (West) Est (Est)
Thanks for the update! Another minor thing: on iOS/webkit the tooltip info gets printed rather ugly below the temps.
That looks like a .css file issue. I dont have a iPhone so I cant test…
HI!
trying to get the Tooltips more in style with the icons I made it this far:
would the tooltip box have a border we can change?
this is what I did to change the color of the box and text, and the little arrow below the tooltip:
.fcasttooltip .fcasttooltiptext {
visibility: hidden;
width: 110px;
background-color: rgb( 75,155,239);
color: #fff ;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
bottom: 50%;
left: 0%;
margin-left: -5px;
}
.fcasttooltip .fcasttooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: rgb(255,161,0) transparent transparent transparent;
}
would love to have the border around the blue box in the same orange color
/* color orange = rgb(255,161,0)
If you take out the ::after part in the css it works fine in ios/webkit as the usual “tap to tooltip” behaviour.
edit: what i meant is: if you remove the section shown below
No problems on iOS here.
Actually it’s the double colon that’s causing the trouble. If you just delete one of them so it reads ".fcasttooltip .fcasttooltiptext:after { "
@VDRainer: what browser/app? do you get the tooltips when clicking on them?
The HA iOS app.
Yes on clicking i get the tooltips.
Hello
I’m starting configuring ui-lovelance and I wanted to configure the dark sky card. I copied the files and proceeded as stated on this page:
but I get this error:
ERROR (MainThread) [frontend.js.latest.201812110] http://xxxxxx/local/custom_ui/dark-sky-weather-card.js?v=7.2:34:79 Uncaught TypeError: Cannot read property ‘state’ of undefined
Please post your dark sky sensor config and ui-lovelace.yaml file.
The line thar error is referencing is looking for the sun entity. Make sure you have sun configured as a platform and referenced in your ui-lovelace.yaml
Updated dark-sky-animated.weather.css file is available in this link: Custom Dark Sky Animated Weather Card.
The tooltips now use the same color scheme as the icons. Thanks @Mariusthvdb for the suggestion.
Updated card … Added localization for wind direction. Currently en, fr, it, and de localisations work. It will default to en for all others. If you want a localization added, let me know and send me the translation for N E S W …
using de localization
2 Likes
thanks! Magic. so cool it is.
is there anything we can do about the cutoff of the tooltip if it exceeds the card size?
These are my settings ui-lovelance:
resources:
- url: /local/custom_ui/dark-sky-weather-card.js?v=7.2
type: js
title: LuKaS
views:
- icon: mdi:home
title: Home
cards:- type: custom:dark-sky-weather-card
entity_sun: sun.sun
entity_daily_summary: sensor.dark_sky_daily_summary
entity_current_conditions: sensor.dark_sky_icon
entity_humidity: sensor.dark_sky_humidity
entity_pressure: sensor.dark_sky_pressure
entity_temperature: sensor.dark_sky_temperature
entity_visibility: sensor.dark_sky_visibility
entity_wind_bearing: sensor.dark_sky_wind_bearing
entity_wind_speed: sensor.dark_sky_wind_speed
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_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_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_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
tooltips: true
static_icons: true
sunset: true
locale: en
- type: custom:dark-sky-weather-card
and : sensors:
- platform: darksky
api_key: xxxxxxxxxx
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
Thank you in advance for your help.
