yeah, I am sorry, I think I didnt check correctly.
Guess I am still used to seeing the days/dates at the top of the graph instead of below the graph. I do think it would give it the graph that bit more ‘structure’. Currently, the middle section
is a bit large. moving the days to the top would bring more balance imho.
could you solve this offset issue? It happens during the day, when its like 12 o clock.
Hi, i’ve noticed this as well, most annoying for the “day-view”, and i think the “answer” is somewhere in the “weather” integration ( the way/time it changes ), i’ve tried several “options” in apexchart
I get back to you if i figure it out … thou im afraid it somehow will get uggly, as the graph doesn’t seems to “update/rotate” chart/day at midnight
xaxis:
position: 'top'
Regarding the “middel-section” , it is a (hack) nothing i would share in a “Project Solution” ( it is weather-chart-card, and easy to reduce size ) … i could use native “type: weather” as i’ve “modded” this as well to only show " conditions" for days
When i find a way to use native “type: weather” , with external url to optional icons, i let you know
I use weather-chart-card as i can refer to icons in /local … don’t know how to do this in native-card … i bet you do 
PS: i don’t like the date at top, as it looks now, but maybe i should move the “Conditions” (middel-section) to the top as-well
EDIT: new pic
uhm, well, all weather cards I use/have hacked use local icons.
more over, I have adapted all my cards to change to from very complex weather icon templates, to simply use a night/day boolean, and append some icons relevant to night.
other than that, I don’t really know what you want to do with the icons?
I’ve monitored below setting, seems like it’s “steady”
- type: custom:apexcharts-card
graph_span: 5d
span:
start: day
offset: +1d
header:
show: false
show_states: false
all_series_config:
stroke_width: 2
group_by:
func: last
duration: 1d
start_with_last: true
I’ve played around with “condition” for the hourly graph ( in between 24-hours-header-line and graph ) but i’t only possible to get a view of 7-8 hours ahead, WITH smaller condition-icons above hour-graph … unless you have your weather-graphs in a full-panel view 
Compared-timeshift-now
Hi folks,
I’ve been having pretty good luck with some ideas I got from this thread, using a combination of platinum weather card, weather card, bar card some glance cards, a bunch of custom sensors, and vertical-stack-in card.
The advantage of this approach is that it’s extremely customizable. But you will have to manage some custom sensors and a few cards to make it happen. You’ll probably have to tweak it a bit to get the exact results you want on various sized devices.
There is a little graph for rain that pops up when it’s rainy that I didn’t manage to pciture here:
Here are the sensors:
- platform: template
sensors:
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('%-H:00') | replace('M','') | lower }}
# unit_of_measurement: °
value_template: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').0.temperature|int}}"
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 }}
weatherflow_forecast_precip_0:
friendly_name: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').0.precipitation_probability }}%"
value_template: >-
{% set amt = state_attr('weather.weatherflow_hourly_based_forecast','forecast').0.precipitation | float(0) + state_attr('weather.weatherflow_hourly_based_forecast','forecast').1.precipitation | float(0) %}
{% set amt = (amt * 100) | int(0) %}
{% if amt > 0 %}
{% if amt < 100 %}.{{amt}}
{% else %}{{ amt / 100 }}
{% endif %}
{% else %}0
{% endif %}
weatherflow_forecast_1:
friendly_name: >-
{% set time = state_attr('weather.weatherflow_hourly_based_forecast','forecast').2.datetime | as_datetime | as_local | default(0,true) %}
{{ time | as_timestamp | timestamp_custom('%-H:00') | replace('M','') | lower }}
# unit_of_measurement: °
value_template: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').2.temperature|int}}"
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').2.condition] %}
mdi:weather-{{ icon }}
weatherflow_forecast_precip_1:
friendly_name: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').2.precipitation_probability }}%"
value_template: >-
{% set amt = state_attr('weather.weatherflow_hourly_based_forecast','forecast').2.precipitation | float(0) + state_attr('weather.weatherflow_hourly_based_forecast','forecast').3.precipitation | float(0) %}
{% set amt = (amt * 100) | int(0) %}
{% if amt > 0 %}
{% if amt < 100 %}.{{amt}}
{% else %}{{ amt / 100 }}
{% endif %}
{% else %}0
{% endif %}
weatherflow_forecast_2:
friendly_name: >-
{% set time = state_attr('weather.weatherflow_hourly_based_forecast','forecast').4.datetime | as_datetime | as_local | default(0,true) %}
{{ time | as_timestamp | timestamp_custom('%-H:00') | replace('M','') | lower }}
# unit_of_measurement: °
value_template: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').4.temperature|int}}"
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').4.condition] %}
mdi:weather-{{ icon }}
weatherflow_forecast_precip_2:
friendly_name: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').4.precipitation_probability }}%"
value_template: >-
{% set amt = state_attr('weather.weatherflow_hourly_based_forecast','forecast').4.precipitation | float(0) + state_attr('weather.weatherflow_hourly_based_forecast','forecast').5.precipitation | float(0) %}
{% set amt = (amt * 100) | int(0) %}
{% if amt > 0 %}
{% if amt < 100 %}.{{amt}}
{% else %}{{ amt / 100 }}
{% endif %}
{% else %}0
{% endif %}
weatherflow_forecast_3:
friendly_name: >-
{% set time = state_attr('weather.weatherflow_hourly_based_forecast','forecast').6.datetime | as_datetime | as_local | default(0,true) %}
{{ time | as_timestamp | timestamp_custom('%-H:00') | replace('M','') | lower }}
# unit_of_measurement: °
value_template: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').6.temperature|int}}"
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').6.condition] %}
mdi:weather-{{ icon }}
weatherflow_forecast_precip_3:
friendly_name: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').6.precipitation_probability }}%"
value_template: >-
{% set amt = state_attr('weather.weatherflow_hourly_based_forecast','forecast').6.precipitation | float(0) + state_attr('weather.weatherflow_hourly_based_forecast','forecast').7.precipitation | float(0) %}
{% set amt = (amt * 100) | int(0) %}
{% if amt > 0 %}
{% if amt < 100 %}.{{amt}}
{% else %}{{ amt / 100 }}
{% endif %}
{% else %}0
{% endif %}
weatherflow_forecast_4:
friendly_name: >-
{% set time = state_attr('weather.weatherflow_hourly_based_forecast','forecast').8.datetime | as_datetime | as_local | default(0,true) %}
{{ time | as_timestamp | timestamp_custom('%-H:00') | replace('M','') | lower }}
# unit_of_measurement: °
value_template: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').8.temperature|int}}"
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').8.condition] %}
mdi:weather-{{ icon }}
weatherflow_forecast_precip_4:
friendly_name: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').8.precipitation_probability }}%"
value_template: >-
{% set amt = state_attr('weather.weatherflow_hourly_based_forecast','forecast').8.precipitation | float(0) + state_attr('weather.weatherflow_hourly_based_forecast','forecast').9.precipitation | float(0) %}
{% set amt = (amt * 100) | int(0) %}
{% if amt > 0 %}
{% if amt < 100 %}.{{amt}}
{% else %}{{ amt / 100 }}
{% endif %}
{% else %}0
{% endif %}
weatherflow_forecast_5:
friendly_name: >-
{% set time = state_attr('weather.weatherflow_hourly_based_forecast','forecast').10.datetime | as_datetime | as_local | default(0,true) %}
{{ time | as_timestamp | timestamp_custom('%-H:00') | replace('M','') | lower }}
# unit_of_measurement: °
value_template: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').10.temperature|int}}"
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').10.condition] %}
mdi:weather-{{ icon }}
weatherflow_forecast_precip_5:
friendly_name: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').10.precipitation_probability }}%"
value_template: >-
{% set amt = state_attr('weather.weatherflow_hourly_based_forecast','forecast').10.precipitation | float(0) + state_attr('weather.weatherflow_hourly_based_forecast','forecast').11.precipitation | float(0) %}
{% set amt = (amt * 100) | int(0) %}
{% if amt > 0 %}
{% if amt < 100 %}.{{amt}}
{% else %}{{ amt / 100 }}
{% endif %}
{% else %}0
{% endif %}
weatherflow_forecast_6:
friendly_name: >-
{% set time = state_attr('weather.weatherflow_hourly_based_forecast','forecast').12.datetime | as_datetime | as_local | default(0,true) %}
{{ time | as_timestamp | timestamp_custom('%-H:00') | replace('M','') | lower }}
# unit_of_measurement: °
value_template: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').12.temperature |int}}"
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').12.condition] %}
mdi:weather-{{ icon }}
weatherflow_forecast_precip_6:
friendly_name: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').12.precipitation_probability }}%"
value_template: >-
{% set amt = state_attr('weather.weatherflow_hourly_based_forecast','forecast').12.precipitation | float(0) + state_attr('weather.weatherflow_hourly_based_forecast','forecast').13.precipitation | float(0) %}
{% set amt = (amt * 100) | int(0) %}
{% if amt > 0 %}
{% if amt < 100 %}.{{amt}}
{% else %}{{ amt / 100 }}
{% endif %}
{% else %}0
{% endif %}
weatherflow_forecast_7:
friendly_name: >-
{% set time = state_attr('weather.weatherflow_hourly_based_forecast','forecast').14.datetime | as_datetime | as_local | default(0,true) %}
{{ time | as_timestamp | timestamp_custom('%-H:00') | replace('M','') | lower }}
# unit_of_measurement: °
value_template: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').14.temperature|int}}"
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').14.condition] %}
mdi:weather-{{ icon }}
weatherflow_forecast_precip_7:
friendly_name: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').14.precipitation_probability }}%"
value_template: >-
{% set amt = state_attr('weather.weatherflow_hourly_based_forecast','forecast').14.precipitation | float(0) + state_attr('weather.weatherflow_hourly_based_forecast','forecast').15.precipitation | float(0) %}
{% set amt = (amt * 100) | int(0) %}
{% if amt > 0 %}
{% if amt < 100 %}.{{amt}}
{% else %}{{ amt / 100 }}
{% endif %}
{% else %}0
{% endif %}
weatherflow_forecast_8:
friendly_name: >-
{% set time = state_attr('weather.weatherflow_hourly_based_forecast','forecast').16.datetime | as_datetime | as_local | default(0,true) %}
{{ time | as_timestamp | timestamp_custom('%-H:00') | replace('M','') | lower }}
# unit_of_measurement: °
value_template: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').16.temperature|int}}"
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').8.condition] %}
mdi:weather-{{ icon }}
weatherflow_forecast_precip_8:
friendly_name: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').16.precipitation_probability }}%"
value_template: >-
{% set amt = state_attr('weather.weatherflow_hourly_based_forecast','forecast').16.precipitation | float(0) + state_attr('weather.weatherflow_hourly_based_forecast','forecast').17.precipitation | float(0) %}
{% set amt = (amt * 100) | int(0) %}
{% if amt > 0 %}
{% if amt < 100 %}.{{amt}}
{% else %}{{ amt / 100 }}
{% endif %}
{% else %}0
{% endif %}
weatherflow_forecast_9:
friendly_name: >-
{% set time = state_attr('weather.weatherflow_hourly_based_forecast','forecast').18.datetime | as_datetime | as_local | default(0,true) %}
{{ time | as_timestamp | timestamp_custom('%-H:00') | replace('M','') | lower }}
# unit_of_measurement: °
value_template: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').18.temperature|int}}"
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').18.condition] %}
mdi:weather-{{ icon }}
weatherflow_forecast_precip_9:
friendly_name: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').18.precipitation_probability }}%"
value_template: >-
{% set amt = state_attr('weather.weatherflow_hourly_based_forecast','forecast').18.precipitation | float(0) + state_attr('weather.weatherflow_hourly_based_forecast','forecast').19.precipitation | float(0) %}
{% set amt = (amt * 100) | int(0) %}
{% if amt > 0 %}
{% if amt < 100 %}.{{amt}}
{% else %}{{ amt / 100 }}
{% endif %}
{% else %}0
{% endif %}
weatherflow_forecast_10:
friendly_name: >-
{% set time = state_attr('weather.weatherflow_hourly_based_forecast','forecast').20.datetime | as_datetime | as_local | default(0,true) %}
{{ time | as_timestamp | timestamp_custom('%-H:00') | replace('M','') | lower }}
# unit_of_measurement: °
value_template: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').20.temperature|int}}"
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').20.condition] %}
mdi:weather-{{ icon }}
weatherflow_forecast_precip_10:
friendly_name: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').20.precipitation_probability }}%"
value_template: >-
{% set amt = state_attr('weather.weatherflow_hourly_based_forecast','forecast').20.precipitation | float(0) + state_attr('weather.weatherflow_hourly_based_forecast','forecast').21.precipitation | float(0) %}
{% set amt = (amt * 100) | int(0) %}
{% if amt > 0 %}
{% if amt < 100 %}.{{amt}}
{% else %}{{ amt / 100 }}
{% endif %}
{% else %}0
{% endif %}
weatherflow_forecast_11:
friendly_name: >-
{% set time = state_attr('weather.weatherflow_hourly_based_forecast','forecast').22.datetime | as_datetime | as_local | default(0,true) %}
{{ time | as_timestamp | timestamp_custom('%-H:00') | replace('M','') | lower }}
# unit_of_measurement: °
value_template: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').22.temperature|int}}"
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').22.condition] %}
mdi:weather-{{ icon }}
weatherflow_forecast_precip_11:
friendly_name: "{{ state_attr('weather.weatherflow_hourly_based_forecast','forecast').22.precipitation_probability }}%"
value_template: >-
{% set amt = state_attr('weather.weatherflow_hourly_based_forecast','forecast').22.precipitation | float(0) + state_attr('weather.weatherflow_hourly_based_forecast','forecast').23.precipitation | float(0) %}
{% set amt = (amt * 100) | int(0) %}
{% if amt > 0 %}
{% if amt < 100 %}.{{amt}}
{% else %}{{ amt / 100 }}
{% endif %}
{% else %}0
{% endif %}
And here is the yaml for the cards:
- type: 'custom:vertical-stack-in-card'
cards:
- type: custom:platinum-weather-card
card_config_version: 8
daily_forecast_days: 5
daily_forecast_layout: horizontal
entity_extended: sensor.dark_sky_hourly_summary
entity_forecast_icon: sensor.dark_sky_icon
entity_forecast_icon_1: weather.weatherflow_day_based_forecast
entity_forecast_max: weather.weatherflow_hourly_based_forecast
entity_forecast_max_1: weather.weatherflow_day_based_forecast
entity_forecast_min: weather.weatherflow_hourly_based_forecast
entity_forecast_min_1: weather.weatherflow_day_based_forecast
entity_pop_1: weather.weatherflow_day_based_forecast
entity_pos_1: weather.weather_forecast
entity_summary_1: weather.weatherflow_day_based_forecast
entity_sun: sun.sun
entity_temperature: sensor.weatherflow_air_temperature
entity_todays_uv_forecast: sensor.dark_sky_daily_summary
entity_wind_bearing: weather.weatherflow_hourly_based_forecast
entity_wind_gust: sensor.dark_sky_wind_gust
entity_wind_speed: weather.weatherflow_hourly_based_forecast
option_time_format: 24hour
option_tooltips: false
section_order:
- overview
- extended
- slots
- daily_forecast
show_section_daily_forecast: false
show_section_extended: false
show_section_overview: true
show_section_slots: false
slot_l1: forecast_max
slot_l2: forecast_min
slot_l3: wind
slot_l4: pressure
slot_l5: sun_next
slot_l6: remove
slot_l7: remove
slot_l8: remove
slot_r1: popforecast
slot_r2: humidity
slot_r3: uv_summary
slot_r4: fire_danger
slot_r5: sun_following
slot_r6: remove
slot_r7: remove
slot_r8: remove
style: |
ha-card {
margin-bottom: -50px !important;
padding-bottom: -50px !important;
font-size: 18px !important;}
- type: glance
columns: 1
show_icon: false
show_name: false
style: |
ha-card {
margin-top: -55px !important;
margin-bottom: -10px !important;
padding-top: -55px;
padding-bottom: -10px;
font-size: 20px;
entities:
- entity: weather.weatherflow_day_based_forecast
- type: glance
columns: 1
show_icon: false
show_name: false
style: |
ha-card {
margin-top: 0px !important;
margin-bottom: -20px !important;
padding-top: 0px;
padding-bottom: -20px;
font-size: 14px;
entities:
- entity: sensor.dark_sky_summary_0d
## Today Weather Details - Names
- type: glance
columns: 4
show_icon: false
show_state: false
style: |
ha-card {
margin-bottom: -10px !important;
font-size: 10px;
color: #9da5b4;
}
entities:
- entity: sensor.tempest_st_00023475_humidity
name: Humiditiy
- entity: sensor.weatherflow_wind_speed
name: Wind
- entity: sensor.weatherflow_wind_cardinal
name: Direction
- entity: sensor.dark_sky_precip_probability_0d
name: Precip.
## Today Weather Details - Values
- type: glance
columns: 4
show_icon: false
show_name: false
style: |
ha-card {
font-size: 12px;
}
style: |
ha-card {
margin-top: -20px !important;
margin-bottom: -20px !important;
}
entities:
- entity: sensor.weatherflow_relative_humidity
- entity: sensor.weatherflow_wind_speed
- entity: sensor.weatherflow_wind_cardinal
- entity: sensor.dark_sky_precip_probability_0d
- 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: 8
stack: horizontal
min: -5
max: 35
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
severity:
- color: rgb(242,249,255)
from: -30
to: -17
- color: rgb(228,242,254)
from: -17
to: -15.5
- color: rgb(215,236,254)
from: -15.5
to: -14.5
- color: rgb(201,229,253)
from: -14.5
to: -13.5
- color: rgb(187,223,253)
from: -13.5
to: -12
- color: rgb(173,216,252)
from: -12
to: -11
- color: rgb(159,210,252)
from: -11
to: -10
- color: rgb(145,203,251)
from: -10
to: -9
- color: rgb(131,197,250)
from: -9
to: -8
- color: rgb(117,190,249)
from: -8
to: -6.5
- color: rgb(103,184,248)
from: -6.5
to: -5.5
- color: rgb(89,177,247)
from: -5.5
to: -4.5
- color: rgb(75,171,246)
from: -4.5
to: -3.5
- color: rgb(61,164,245)
from: -3.5
to: -2
- color: rgb(47,157,244)
from: -2
to: -1
- color: rgb(33150243)
from: -1
to: 0
- color: rgb(44,153,234)
from: 0
to: 1
- color: rgb(55,157,224)
from: 1
to: 2
- color: rgb(66,160,215)
from: 2
to: 3.5
- color: rgb(77,164,205)
from: 3.5
to: 4.5
- color: rgb(88,167,196)
from: 4.5
to: 5.5
- color: rgb(99,171,186)
from: 5.5
to: 6.5
- color: rgb(110,174,177)
from: 6.5
to: 8
- color: rgb(121,178,168)
from: 8
to: 9
- color: rgb(132,181,159)
from: 9
to: 10
- color: rgb(143,185,150)
from: 10
to: 11
- color: rgb(154,188,141)
from: 11
to: 12
- color: rgb(165,192,132)
from: 12
to: 13
- color: rgb(176,195,123)
from: 13
to: 14.5
- color: rgb(187,199,114)
from: 14.5
to: 15.5
- color: rgb(198,202,105)
from: 15.5
to: 16.5
- color: rgb(209,205,96)
from: 16.5
to: 18
- color: rgb(220,208,87)
from: 18
to: 19
- color: rgb(231,211,78)
from: 19
to: 20
- color: rgb(242,214,69)
from: 20
to: 21
- color: rgb(253,217,60)
from: 21
to: 22
- color: rgb(247,206,58)
from: 22
to: 23.5
- color: rgb(240,194,55)
from: 23.5
to: 24.5
- color: rgb(234,183,53)
from: 24.5
to: 25.5
- color: rgb(227,171,50)
from: 25.5
to: 26.5
- color: rgb(221,160,48)
from: 26.5
to: 28
- color: rgb(214,148,45)
from: 28
to: 29
- color: rgb(208,137,43)
from: 29
to: 30
- color: rgb(201,125,40)
from: 30
to: 31
- color: rgb(195,114,38)
from: 31
to: 32
- color: rgb(188,102,35)
from: 32
to: 33.5
- color: rgb(182,91,33)
from: 33.5
to: 34.5
- color: rgb(175,79,30)
from: 34.5
to: 35.5
- color: rgb(169,68,28)
from: 35.5
to: 36.5
- color: rgb(162,56,25)
from: 36.5
to: 38
- color: rgb(155,45,23)
from: 38
to: 39
- color: rgb(148,33,20)
from: 39
to: 40
- color: rgb(141,22,18)
from: 40
to: 41
- color: rgb(134,11,15)
from: 41
to: 42
- color: rgb(127,0,12)
from: 42
to: 49
# 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: off
animation:
state: on
direction: up
height: 25px
width: 22px
columns: 8
stack: horizontal
min: 0
max: 5
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
- type: custom:platinum-weather-card
style: |
ha-card {
margin-top: -15px;
margin-bottom: 15px;
padding-top: -10px;
padding-bottom: 10px
}
card_config_version: 8
daily_forecast_days: 4
daily_forecast_layout: horizontal
entity_extended: sensor.dark_sky_hourly_summary
entity_forecast_icon: sensor.dark_sky_icon
entity_forecast_icon_1: weather.weatherflow_day_based_forecast
entity_forecast_max: weather.weatherflow_hourly_based_forecast
entity_forecast_max_1: weather.weatherflow_day_based_forecast
entity_forecast_min: weather.weatherflow_hourly_based_forecast
entity_forecast_min_1: weather.weatherflow_day_based_forecast
entity_pop_1: weather.weatherflow_day_based_forecast
entity_pos_1: weather.weather_forecast
entity_summary: sensor.dark_sky_summary
entity_summary_1: weather.weatherflow_day_based_forecast
entity_sun: sun.sun
entity_temperature: sensor.weatherflow_air_temperature
entity_todays_uv_forecast: sensor.dark_sky_daily_summary
entity_wind_bearing: weather.weatherflow_hourly_based_forecast
entity_wind_gust: sensor.dark_sky_wind_gust
entity_wind_speed: weather.weatherflow_hourly_based_forecast
option_time_format: 24hour
option_tooltips: false
section_order:
- overview
- extended
- slots
- daily_forecast
show_section_extended: false
show_section_overview: false
show_section_slots: false
slot_l1: forecast_max
slot_l2: forecast_min
slot_l3: wind
slot_l4: pressure
slot_l5: sun_next
slot_l6: remove
slot_l7: remove
slot_l8: remove
slot_r1: popforecast
slot_r2: humidity
slot_r3: uv_summary
slot_r4: fire_danger
slot_r5: sun_following
slot_r6: remove
slot_r7: remove
slot_r8: remove
text_card_title: Weather In Prague
For a more US centric version that looks a bit different for bigger screens, check on this thread,
This looks very nice, I may have to grab your code and play around with it for my install. Quick question (because I’m being really lazy today), what do the numbers on top of the columns/bar code represent?
ie: 10 9 8 7 7 7 9 11?
All around great job!
Those numbers look like the valie of the column’s attribute, in this case that would be the amount of precipitation in mm if I’m not mistaken.
it’s temperature
Yes it’s temperature. You can turn on and off the units. I decided to put the degree symbol back to make it a bit clearer. The nice thing is that you can have it however you like. The precipitation graph shows up only when there’s rain expected and shows both amount and percent chance. You can see it here in Marcus99’s picture (who I stole this from), however he had the graph showing precipitation probability and the amount below, whereas in mine I do the opposite- the graph shows amount and the probability is shown below as a percentage. Again, the flexibility is great, you can see his and mine look quite different.
I might take some time to give this one a try, it look Neat and Soft … And spring is on the way there see 
PS: you can remove the degree symbols again, they are “disturbing” … My Golden Rule is, as long as i know what it means, and which entity is what , then im ok
Yeah I like the look a lot more than anything else I’ve tried. The degree symbol is indeed a conundrum… I don’t like the way it looks either, but it is also rather ambiguous what the number is if it’s not there (this thread just confirmed my own suspicion around this). I think I’ll leave it for a while until the family gets used to the new format, then take it away again…
Atleast it’s only the sign, and not also a capital C , but stil it’s sort of “rubbing” the balance, pushing the number to the left
Yep. Definite OCD trigger for me too.
How do you get the little weather icons to show?
it was a combination" vertical-stack with modded weather.forecast_home and apexcharts"
I’ve done apex chart, could you please share your code for the the weather icons. Please
