Anyone have the iOS 16 beta and noticed how awesome the new weather app is?
Anyone interested to help create similar experience with the weather card and graph cards? We already have the data from openweather and dark sky apis.
Would be interesting to see if anyone got similar ideas or tried taking on something like this?
5 Likes
diplix
(felix schwenzel)
September 14, 2022, 7:14pm
2
not as elegant and interactive as the weather app, but i assembled an apex chart card with data mostly from the deutscher wetterdienst custom component . on top it shows cloud cover (past and next 48 hours), sun intensity and duration, line charts for predicted and actual temperature, dew point, wind speed and gusts and on the bottom rain probabbility and amount.
type: custom:apexcharts-card
experimental:
color_threshold: true
graph_span: 3d
update_interval: 1h
span:
start: day
offset: '-6h'
now:
show: true
color_list:
- red
- orange
- blue
- lightblue
yaxis:
- id: first
apex_config:
tickAmount: 4
decimalsInFloat: 0
min: '|-3|'
max: '|+3|'
- id: second
opposite: true
apex_config:
tickAmount: 4
min: 0
max: 600
show: false
- id: clouds
opposite: true
apex_config:
tickAmount: 4
reversed: true
min: 0
max: 400
show: false
- id: menge
opposite: true
apex_config:
tickAmount: 4
reversed: false
min: 0
max: 20
show: false
- id: wind
opposite: true
apex_config:
tickAmount: 4
reversed: false
min: 0
max: 130
show: false
- id: sonne
opposite: true
apex_config:
tickAmount: 4
reversed: true
min: 0
max: 3600
show: false
apex_config:
grid:
show: false
chart:
height: 500px
animations:
enabled: false
yaxis:
- tickAmount: 6
annotations:
position: back
yaxis:
- 'y': 0
strokeDashArray: 5
borderColor: '#fff'
borderWidth: 1
tooltip:
enabled: true
x:
show: false
format: dddd HH:MM
marker:
show: true
fixed:
enabled: true
position: topright
onDatasetHover:
highlightDataSeries: true
header:
title: 3 Tage-Vorhersage
show: true
show_states: true
colorize_states: true
series:
- entity: sensor.temperature_berlin_tegel
yaxis_id: first
name: DWD
curve: smooth
stroke_width: 2
type: line
color: red
extend_to: false
unit: °C
show:
in_header: false
legend_value: true
offset_in_name: false
color_threshold:
- value: 0
color: white
- value: 0
color: red
group_by:
func: last
duration: 1h
- entity: sensor.dewpoint_berlin_tegel
yaxis_id: first
name: Taupunkt
curve: smooth
stroke_width: 2
type: line
color: blue
extend_to: false
unit: °C
show:
in_header: false
legend_value: true
offset_in_name: false
group_by:
func: last
duration: 1h
- entity: sensor.temperatur_hof
curve: smooth
yaxis_id: first
stroke_width: 2
extend_to: false
name: Hof
color: magenta
show:
in_header: false
legend_value: true
group_by:
func: last
duration: 1h
- entity: sensor.sun_duration_berlin_tegel
yaxis_id: sonne
name: Sonne
curve: smooth
stroke_width: 0.1
type: area
color: '#ffff99'
extend_to: false
unit: ''
show:
in_header: false
legend_value: true
group_by:
func: last
duration: 1h
- entity: sensor.sun_irradiance_berlin_tegel
yaxis_id: sonne
name: Sonnenstrahlung
curve: smooth
stroke_width: 0.5
type: line
color: '#ffff99'
extend_to: false
unit: ''
show:
in_header: false
legend_value: true
group_by:
func: last
duration: 1h
- entity: sensor.cloud_coverage_berlin_tegel
yaxis_id: clouds
name: Wolken
curve: smooth
stroke_width: 0
type: area
color: '#333'
extend_to: false
unit: ''
show:
in_header: false
legend_value: true
offset_in_name: false
group_by:
func: last
duration: 1h
- entity: sensor.fog_probability_berlin_tegel
yaxis_id: second
name: Nebel
curve: smooth
stroke_width: 0
type: area
color: '#778899'
extend_to: false
unit: ''
show:
in_header: false
legend_value: true
offset_in_name: false
group_by:
func: last
duration: 1h
- entity: sensor.precipitation_probability_berlin_tegel
yaxis_id: second
name: Regen
curve: smooth
stroke_width: 0
type: area
color: blue
extend_to: false
unit: ''
show:
in_header: false
legend_value: true
offset_in_name: false
group_by:
func: last
duration: 1h
- entity: sensor.precipitation_berlin_tegel
yaxis_id: menge
name: Regenmenge
curve: smooth
stroke_width: 0
type: area
color: aqua
extend_to: false
unit: ''
show:
in_header: false
legend_value: true
offset_in_name: false
group_by:
func: last
duration: 1h
- entity: sensor.regenmenge_1h_2
yaxis_id: menge
name: Regenmenge Radar
curve: smooth
stroke_width: 0
type: area
color: white
extend_to: false
unit: ''
show:
in_header: false
legend_value: true
offset_in_name: false
group_by:
func: avg
duration: 1h
- entity: sensor.wind_speed_berlin_tegel
yaxis_id: wind
name: Wind
curve: smooth
stroke_width: 2
type: line
color: grey
extend_to: false
unit: ''
show:
in_header: false
legend_value: true
offset_in_name: false
group_by:
func: last
duration: 1h
- entity: sensor.wind_gusts_berlin_tegel
yaxis_id: wind
name: Böen
curve: smooth
stroke_width: 2
type: line
color: darkgrey
extend_to: false
unit: ''
show:
in_header: false
legend_value: true
offset_in_name: false
group_by:
func: last
duration: 1h
- entity: sensor.sun_duration_berlin_tegel
yaxis_id: sonne
stroke_width: 0
name: Sonne
type: area
color: '#ffff99'
data_generator: |
return entity.attributes.data.map(
(item) => {
return [new Date(item.datetime).getTime(), item.value];
});
show:
in_header: false
legend_value: false
group_by:
func: sum
duration: 1h
- entity: sensor.sun_irradiance_berlin_tegel
yaxis_id: sonne
stroke_width: 0.5
name: Sonnestrahlung
extend_to: false
type: line
color: '#ffff99'
data_generator: |
return entity.attributes.data.map(
(item) => {
return [new Date(item.datetime).getTime(), item.value];
});
show:
in_header: false
legend_value: false
group_by:
func: sum
duration: 1h
- entity: sensor.cloud_coverage_berlin_tegel
yaxis_id: clouds
stroke_width: 0
name: Wolken
type: area
color: '#333'
data_generator: |
return entity.attributes.data.map(
(item) => {
return [new Date(item.datetime).getTime(), item.value];
});
show:
in_header: false
legend_value: false
extremas: false
- entity: sensor.fog_probability_berlin_tegel
yaxis_id: second
stroke_width: 0
name: Nebel
type: area
color: '#778899'
data_generator: |
return entity.attributes.data.map(
(item) => {
return [new Date(item.datetime).getTime(), item.value];
});
show:
in_header: false
legend_value: false
extremas: false
- entity: sensor.temperature_berlin_tegel
yaxis_id: first
name: DWD
curve: smooth
stroke_width: 2
type: line
color: red
color_threshold:
- value: 0
color: white
- value: 0
color: red
extend_to: false
unit: °C
show:
in_header: false
legend_value: false
offset_in_name: false
group_by:
func: last
duration: 1h
data_generator: |
return entity.attributes.data.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.value];
});
- entity: sensor.dewpoint_berlin_tegel
yaxis_id: first
name: Taupunkt
curve: smooth
stroke_width: 2
type: line
color: blue
extend_to: false
unit: °C
show:
in_header: false
legend_value: false
offset_in_name: false
group_by:
func: last
duration: 1h
data_generator: |
return entity.attributes.data.map((entry) => {
return [new Date(entry.datetime).getTime(), entry.value];
});
- entity: sensor.precipitation_probability_berlin_tegel
yaxis_id: second
stroke_width: 0
name: Regen
type: area
color: blue
data_generator: |
return entity.attributes.data.map(
(item) => {
return [new Date(item.datetime).getTime(), item.value];
});
show:
in_header: false
legend_value: false
group_by:
func: last
duration: 1h
- entity: sensor.precipitation_berlin_tegel
yaxis_id: menge
stroke_width: 0
name: Regenmenge
type: area
color: aqua
data_generator: |
return entity.attributes.data.map(
(item) => {
return [new Date(item.datetime).getTime(), item.value];
});
show:
in_header: false
legend_value: false
group_by:
func: last
duration: 1h
- entity: sensor.wind_speed_berlin_tegel
yaxis_id: wind
stroke_width: 2
name: Wind
type: line
color: grey
data_generator: |
return entity.attributes.data.map(
(item) => {
return [new Date(item.datetime).getTime(), item.value];
});
show:
in_header: false
legend_value: false
group_by:
func: last
duration: 1h
- entity: sensor.wind_gusts_berlin_tegel
yaxis_id: wind
stroke_width: 2
name: Böen
type: line
color: darkgrey
data_generator: |
return entity.attributes.data.map(
(item) => {
return [new Date(item.datetime).getTime(), item.value];
});
show:
in_header: false
legend_value: false
group_by:
func: last
duration: 1h
- entity: sensor.regenradar_dbz_t
yaxis_id: menge
stroke_width: 0
name: Regenmenge Radar
unit: ''
type: area
color: white
extend_to: false
data_generator: |
return entity.attributes.data.map(
(item) => {
return [new Date(item.timestamp*1000-0).getTime(), item.mm];
});
show:
in_header: false
legend_value: false
extremas: false
1 Like