ok, thx, i though it was your, as i twice have copied something related to this card, from you 
PS: The weather is not “modded”, it’s just that " the sun always shines my screen " , at-least for a accidental split moment
thats not mine, I was still using the former layout, but I certainly will check why this now started working again.
if I compare the js resource though, it is exactly copied from mine indeed, so I dont understand how your chart looks the way it does here 
more over I cant understand why it doesnt in my config while on the essential spots is exactly the same…
what is your card config like, and also, dd you check to set it in another language, because I seem to remember that was what made it faulty in mine. English ok, Dutch stopped working, so an issue with the selected HA language vs the locale, or the browser language
That was my first thought, month ago, when i copied it, It was for the nice lines ( So i thought ) but there were absolutely no changes to the graphs or colors, so i wonder how this "rendering of the HACS-files works, i never bother to ask you then, but yes i was dissapointed, because i didn’t get the same result as you shoved in picture, and i have also tried to “edit” this file, with no luck, so somewhere something is Stored
My cardconfig varies , these 2 i just made default in a hurry
type: custom:weather-chart-card
entity: weather.forecast_home
show_main: false
show_attributes: false
icons: /local/weather-icons/shadows/
thx, ill test.
languages? system and profile are set to English?
o well nevermind, Ive tried to rebuild my chart hack card with these settings, but it wont show at all, just an empty card…
not worth the trouble I guess, we got other ways of charting the next few days…
Still if your using firefox, you need the fork above from greendog, and yes my setting is english all through
no not using FF.
tbh, when a card has that many considerations, it should be considered obsolete, and imho, taken out of the config to not create issues inside.
FWIW, tried a different route. Created a bunch of custom sensors and then used the custom:bar-card (GitHub - custom-cards/bar-card: Customizable Animated Bar card for Home Assistant Lovelace [available via HACS as well]) and now using this for my weather card - specifically the next 12 hours using the bar-card at the bottom of this image:
The rain chance / amt bar-card below the temp is conditional upon the amt in next 12 > 0, so hides itself when no rain forecast.
The top portion is based on this: Weather Card | Old + New = Better? - #4 by Markus99
2 Likes
Ooh, daddy like! Care to share the YAML? It could use some stack-in card for good measure. Are there any that work these days? My canary card stopped working.
Sure thing. I haven’t put in a package, but this is the jist of it.
Sensors. Created two sensors for each period (mine are hours). Sensor 1 is the temperature (I cheat a bit and manipulated the time to shorten the time to 11a, 12p, 1p, etc… and set this as the friendly_name, value is the temp and icon uses default mdi icons and an array):
weatherflow_forecast_0:
friendly_name: >-
{% set time = state_attr('weather.weatherflow_hourly_based_forecast','forecast').0.datetime | as_datetime | as_local | default(0,true) %}
{{ time | as_timestamp | timestamp_custom('%-I%p') | replace('M','') | lower }}
# unit_of_measurement: °
value_template: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').0.temperature }}"
icon_template: >
{% set array = { 'clear-night':'night',
'cloudy':'cloudy',
'exceptional':'sunny',
'fog':'fog',
'hail':'hail',
'lightning':'lightning',
'lightning-rainy':'lightning-rainy',
'partlycloudy':'partly-cloudy',
'rainy':'rainy',
'snowy':'snowy',
'snowy-rainy':'snowy-rainy',
'sunny':'sunny',
'windy':'windy' } %}
{% set icon = array[state_attr('weather.weatherflow_hourly_based_forecast','forecast').0.condition] %}
mdi:weather-{{ icon }}
The second sensor is for the same period, but covers precipitation. Same thing, cheat the name as the precipt amt expected and the value as the probability of rain). FWIW, still playing around to try to get it to display w/out the leading 0 in name/amt [best guess is bar-card doing something funky {could be user error though…}]:
weatherflow_forecast_precip_0:
friendly_name: >-
{% set amt = state_attr('weather.weatherflow_hourly_based_forecast','forecast').0.precipitation | float(0) %}
{% set amt = (amt * 100) | int(0) %}
{% if amt > 0 %}
{% if amt < 100 %}.{{amt}}
{% else %}{{ amt / 100 }}
{% endif %}
{% else %}.
{% endif %}
value_template: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').0.precipitation_probability }}"
I have 12 of each of the above, incrementing the trailing _# for each period (clearly updating the .#. in the template to get the right forecast period).
Last sensor is a binary_sensor to check if it’s going to rain in the next 12 hours (my # of periods [used to hide the rain sectino):
weatherflow_forecast_precip_total:
friendly_name: Weather Forecast Precip Next 12
value_template: >
{{ (state_attr('weather.weatherflow_hourly_based_forecast','forecast').0.precipitation | float(0) +
state_attr('weather.weatherflow_hourly_based_forecast','forecast').1.precipitation | float(0) +
state_attr('weather.weatherflow_hourly_based_forecast','forecast').2.precipitation | float(0) +
state_attr('weather.weatherflow_hourly_based_forecast','forecast').3.precipitation | float(0) +
state_attr('weather.weatherflow_hourly_based_forecast','forecast').4.precipitation | float(0) +
state_attr('weather.weatherflow_hourly_based_forecast','forecast').5.precipitation | float(0) +
state_attr('weather.weatherflow_hourly_based_forecast','forecast').6.precipitation | float(0) +
state_attr('weather.weatherflow_hourly_based_forecast','forecast').7.precipitation | float(0) +
state_attr('weather.weatherflow_hourly_based_forecast','forecast').8.precipitation | float(0) +
state_attr('weather.weatherflow_hourly_based_forecast','forecast').9.precipitation | float(0) +
state_attr('weather.weatherflow_hourly_based_forecast','forecast').10.precipitation | float(0) +
state_attr('weather.weatherflow_hourly_based_forecast','forecast').11.precipitation | float(0) +
state_attr('weather.weatherflow_hourly_based_forecast','forecast').12.precipitation | float(0) ) > 0 }}
Current .YAML for the UI-LOVELACE:
## BAR CARD FUTURE WEATHER ##
- type: custom:bar-card
style: |
ha-card {
margin-top: 10px;
margin-bottom: -10px;
padding-top: 10px;
border-top: 5px solid #222222;
}
bar-card-card {
margin-right: 0px;
font-size: 11px;
}
bar-card-value {
color: #222222;
color: #9da5b4;
}
bar-card-iconbar {
width: 20px;
color: #333;
margin-top: 65px;
}
bar-card-name {
margin: 4px 0;
color: #9da5b4;
color: #dadadb;
}
.value-direction-up {
#color: #dadadb;
margin-top: -125px;
}
bar-card-backgroundbar {
filter: brightness(.45);
}
positions:
indicator: off
value: inside
title: off
name: outside
icon: inside
animation:
state: on
direction: up
height: 100px
width: 22px
columns: 12
stack: horizontal
min: 20
max: 110
entities:
- sensor.weatherflow_forecast_0
- sensor.weatherflow_forecast_1
- sensor.weatherflow_forecast_2
- sensor.weatherflow_forecast_3
- sensor.weatherflow_forecast_4
- sensor.weatherflow_forecast_5
- sensor.weatherflow_forecast_6
- sensor.weatherflow_forecast_7
- sensor.weatherflow_forecast_8
- sensor.weatherflow_forecast_9
- sensor.weatherflow_forecast_10
- sensor.weatherflow_forecast_11
severity:
- color: rgb(242,249,255)
from: -20
to: 2
- color: rgb(228,242,254)
from: 2
to: 4
- color: rgb(215,236,254)
from: 4
to: 6
- color: rgb(201,229,253)
from: 6
to: 8
- color: rgb(187,223,253)
from: 8
to: 10
- color: rgb(173,216,252)
from: 10
to: 12
- color: rgb(159,210,252)
from: 12
to: 14
- color: rgb(145,203,251)
from: 14
to: 16
- color: rgb(131,197,250)
from: 16
to: 18
- color: rgb(117,190,249)
from: 18
to: 20
- color: rgb(103,184,248)
from: 20
to: 22
- color: rgb(89,177,247)
from: 22
to: 24
- color: rgb(75,171,246)
from: 24
to: 26
- color: rgb(61,164,245)
from: 26
to: 28
- color: rgb(47,157,244)
from: 28
to: 30
- color: rgb(33150243)
from: 30
to: 32
- color: rgb(44,153,234)
from: 32
to: 34
- color: rgb(55,157,224)
from: 34
to: 36
- color: rgb(66,160,215)
from: 36
to: 38
- color: rgb(77,164,205)
from: 38
to: 40
- color: rgb(88,167,196)
from: 40
to: 42
- color: rgb(99,171,186)
from: 42
to: 44
- color: rgb(110,174,177)
from: 44
to: 46
- color: rgb(121,178,168)
from: 46
to: 48
- color: rgb(132,181,159)
from: 48
to: 50
- color: rgb(143,185,150)
from: 50
to: 52
- color: rgb(154,188,141)
from: 52
to: 54
- color: rgb(165,192,132)
from: 54
to: 56
- color: rgb(176,195,123)
from: 56
to: 58
- color: rgb(187,199,114)
from: 58
to: 60
- color: rgb(198,202,105)
from: 60
to: 62
- color: rgb(209,205,96)
from: 62
to: 64
- color: rgb(220,208,87)
from: 64
to: 66
- color: rgb(231,211,78)
from: 66
to: 68
- color: rgb(242,214,69)
from: 68
to: 70
- color: rgb(253,217,60)
from: 70
to: 72
- color: rgb(247,206,58)
from: 72
to: 74
- color: rgb(240,194,55)
from: 74
to: 76
- color: rgb(234,183,53)
from: 76
to: 78
- color: rgb(227,171,50)
from: 78
to: 80
- color: rgb(221,160,48)
from: 80
to: 82
- color: rgb(214,148,45)
from: 82
to: 84
- color: rgb(208,137,43)
from: 84
to: 86
- color: rgb(201,125,40)
from: 86
to: 88
- color: rgb(195,114,38)
from: 88
to: 90
- color: rgb(188,102,35)
from: 90
to: 92
- color: rgb(182,91,33)
from: 92
to: 94
- color: rgb(175,79,30)
from: 94
to: 96
- color: rgb(169,68,28)
from: 96
to: 98
- color: rgb(162,56,25)
from: 98
to: 100
- color: rgb(155,45,23)
from: 100
to: 102
- color: rgb(148,33,20)
from: 102
to: 104
- color: rgb(141,22,18)
from: 104
to: 106
- color: rgb(134,11,15)
from: 106
to: 108
- color: rgb(127,0,12)
from: 108
to: 120
# BAR CARD FUTURE HOURLY PRECIPITATION
- type: conditional
conditions:
- entity: binary_sensor.weatherflow_forecast_precip_total
state: 'on'
card:
type: custom:bar-card
style: |
ha-card {
margin-top: -15px;
margin-bottom: -15px;
padding-top: 0px;
}
bar-card-card {
margin-right: 0px;
font-size: 11px;
}
bar-card-value {
color: #222222;
}
bar-card-iconbar {
width: 20px;
color: #333;
margin-top: 85px;
}
bar-card-name {
margin: 4px 0;
color: #9da5b4;
}
.value-direction-up {
color: #dadadb;
margin-top: -120px;
}
bar-card-backgroundbar {
filter: brightness(.65);
}
positions:
indicator: off
value: off
title: off
name: outside
icon: inside
animation:
state: on
direction: up
height: 25px
width: 22px
columns: 12
stack: horizontal
min: 20
max: 110
entities:
- sensor.weatherflow_forecast_precip_0
- sensor.weatherflow_forecast_precip_1
- sensor.weatherflow_forecast_precip_2
- sensor.weatherflow_forecast_precip_3
- sensor.weatherflow_forecast_precip_4
- sensor.weatherflow_forecast_precip_5
- sensor.weatherflow_forecast_precip_6
- sensor.weatherflow_forecast_precip_7
- sensor.weatherflow_forecast_precip_8
- sensor.weatherflow_forecast_precip_9
- sensor.weatherflow_forecast_precip_10
- sensor.weatherflow_forecast_precip_11
The severity is how I’m current color coding the bars - but can be updated fairly simply. Also using card-mod quite heavily to move around the text / icons and such.
Hope this helps, still a work in progress (of course!)
1 Like
Love you man. I like this better than weather card chart and will definitely rip it off top to bottom. Looks like it was a lot of work, well done! Nice that you are also a weatherflow user, I may be able to just copy paste the whole thing
1 Like
I get this:
Any idea why I’m not getting the temperature graphs and what those little missing eye icons on the bottom might be?
Hmmm… Maybe I should have icon: off for the precipitation section - guessing that’s what those eyeballs are? I have a card below, so only guessing that one hides these shouldn’t-be-there icons.
1 Like
Thanks, it’s starting to look pretty good!I switched around a few things in small ways, but same general idea.
Is there any chance I could get your config for the 2 top cards too? I’m going to do exactly like you, it looks great and shows everything I want to see.
Actually having pretty good luck replacing that section with platinum weather card, and will be much easier to transition with dark sky goes kaput. Loving the results! Thanks for the inspiration
Curious if you’ve updated your cards with the new method of receiving weather forecasts? I love the look of this but HA now uses weather.get_forecast instead of having a forecast entity
Yes, good times…
Mind sharing the code? Love the use of the bar card for the hourly forecast
Threw this together, so could be missing something, but should be what you’re after: GitHub - markus99/ms_weather: Home Assistant Weatherflow Tempest Forecast, Sensors, Template(s)
I think it’s missing something.
These groups of sensors are not being created so I assume there’s another group of template sensors somewhere.
binary_sensor.weatherflow_forecast_precip_total
sensor.weatherflow_forecast_0
sensor.weatherflow_forecast_precip_0
EDIT: never mind, those are just above with a slight modification
I updated the package file on GitHub to include the binary_sensor - guess when I created I put put in my sensors_binary.yaml file vs. the package.