Es gibt eine vielzahl von Möglichkeiten seine Sensoren in Graphen anzeigen zu lassen…
Dieser Beitrag gibt einen kleinen Überblick über die verschiedensten Varianten
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
entities:
- entity: sensor.ku_temp
name: Temperatur (24h)
color: var(--dwains-theme-accent)
show_fill: true
- entity: sensor.ausee_temperature_test
color: green
show_fill: false
font_size: 80
hours_to_show: 24
line_width: 2
hour24: true
points_per_hour: 2
decimals: 0
show:
animate: true
icon: false
labels: false
legend: false
name: false
graph: line
extrema: true
average: true
theme: ios-dark-mode-blue-red
type: custom:mini-graph-card
1
2
3
4
5
6
7
8
9
10
11
type: grid
cards:
- type: grid
cards:
- type: sensor
entity: sensor.wz_temp
graph: line
columns: 1
square: false
columns: 1
square: false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
cards:
- aggregate_func: max
align_state: center
animate: true
decimals: 0
entities:
- entity: sensor.wz_temp
index: 0
name: Download
- entity: sensor.speedtest_upload
index: 1
name: Upload
font_size: 100
font_size_header: 14
group_by: interval
height: 150
hour24: true
hours_to_show: 6
lower_bound: 0
points_per_hour: 2
show:
graph: line
icon: false
labels: true
legend: false
name: false
points: true
state: true
smoothing: false
type: custom:mini-graph-card
title: false
type: custom:vertical-stack-in-card
1
2
3
4
5
6
7
8
9
10
11
12
entities:
- sensor.ausee_temperature_test
- sensor.wz_temp
graph: line
hour24: false
hours_to_show: 72
name: Temperatur-Verlauf
show:
extrema: true
icon: true
name: true
type: custom:mini-graph-card
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
cards:
- cards:
- color_thresholds_transition: smooth
entities:
- entity: sensor.speedtest_ping
index: 0
name: Ping
font_size: 70
group: false
hour24: true
line_width: 6
lower_bound: 0
points_per_hour: 1
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
style: |
ha-card {
box-shadow: none;
--ha-card-background: 'rgba(0, 0, 0, 0)';
}
type: custom:mini-graph-card
- color_thresholds_transition: smooth
entities:
- entity: sensor.speedtest_download
index: 0
name: Download
font_size: 70
group: false
hour24: true
line_width: 6
lower_bound: 0
points_per_hour: 1
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
style: |
ha-card {
box-shadow: none;
--ha-card-background: 'rgba(0, 0, 0, 0)';
}
type: custom:mini-graph-card
- color_thresholds_transition: smooth
entities:
- entity: sensor.speedtest_upload
index: 0
name: Upload
font_size: 70
group: false
hour24: true
line_width: 6
lower_bound: 0
points_per_hour: 1
show:
extrema: true
fill: fade
icon: true
labels: false
name: true
state: true
style: |
ha-card {
box-shadow: none;
--ha-card-background: 'rgba(0, 0, 0, 0)';
}
type: custom:mini-graph-card
horizontal: true
name: Speedtest
style: |
ha-card {
box-shadow: none;
--ha-card-background: 'rgba(0, 0, 0, 0)';
}
type: custom:vertical-stack-in-card
style: |
ha-card {
box-shadow: none;
--ha-card-background: var(--ha-card-background);
}
title: Network
type: custom:vertical-stack-in-card
1
2
3
4
5
6
7
8
9
10
11
entities:
- sensor.wz_temp
graph: line
hour24: false
hours_to_show: 240
name: Wohnzimmer-Verlauf
show:
extrema: true
icon: true
name: true
type: custom:mini-graph-card
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
type: custom:stack-in-card
cards:
- type: custom:apexcharts-card
header:
show: true
title: Außen
floating: true
show_states: true
series:
- entity: sensor.wz_temp
name: Temperatur
- entity: sensor.humiditiy_sensor
name: rel. Luftfeuchtigkeit
show:
in_chart: false
all_series_config:
type: area
show:
extremas: true
apex_config:
legend:
show: false
stroke:
width: 2
yaxis:
- decimalsInFloat: 0
style: |
ha-card {
font-size: 15px;
}
- type: custom:apexcharts-card
header:
show: true
title: Außen
floating: true
show_states: true
series:
- entity: sensor.ausee_temperature_test
name: Temperatur
- entity: sensor.humiditiy_sensor
name: rel. Luftfeuchtigkeit
show:
in_chart: false
all_series_config:
type: area
show:
extremas: true
apex_config:
legend:
show: false
stroke:
width: 2
yaxis:
- decimalsInFloat: 0
style: |
.wrapper div#header div#states__state:nth-child(2) div#state__value {
justify-content: end;
}
.wrapper div#header div#states__state div#state__value {
display: flex;
}
.wrapper div#header div#states__state:nth-child(1),
.wrapper div#header div#header__title {
margin-left: 30px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
type: custom:apexcharts-card
layout: minimal
locale: de
graph_span: 8h
show:
loading: false
apex_config:
plotOptions:
area:
fillTo: end
grid:
padding:
top: -15
fill:
type: gradient
gradient:
type: vertical
opacityFrom: 0.8
opacityTo: 0
stops:
- 0
- 99
- 100
stroke:
width: 4
tooltip:
style:
fontSize: 14px
x:
format: dddd HH:mm
chart:
height: 140px
offsetY: '-20px'
xaxis:
crosshairs:
show: false
series:
- entity: sensor.wz_temp
name: Temp
color: '#385581'
type: area
fill_raw: last
group_by:
func: avg
duration: 1h
1
2
3
4
5
6
7
8
9
10
11
12
13
14
entities:
- sensor.wz_temp
icon: hass:broom
hour24: false
hours_to_show: 36
name: Temp History Wohnzimmer
show:
extrema: true
graph: bar
icon: true
name: true
name_adaptive_color: true
icon_adaptive_color: true
type: custom:mini-graph-card
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
type: custom:mini-graph-card
height: 30
line_width: 4
font_size: 70
hours_to_show: 168
points_per_hour: 1
show:
extrema: true
fill: true
labels: false
icon: true
hour24: true
icon: mdi:thermometer
style: |
ha-card {
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--ha-card-box-shadow: 'none';
border-radius: 5px;
}
.info.flex {
font-size: 16px !important;
}
entities:
- sensor.ausee_temperature_test
name: Temperature
color_thresholds:
- value: 30
color: '#00ff00'
- value: 60
color: '#ffa500'
- value: 80
color: '#ff0000'
color_thresholds_transition: smooth
1
2
3
4
5
6
7
8
9
type: history-graph
title: Wohnzimmer
entities:
- entity: sensor.weather_temperature
name: Outside
- entity: climate.fritz_dect_301_1
name: ':'
hours_to_show: 24
refresh_interval: 0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
type: entities
title: BÜRO
show_header_toggle: false
style: |
ha-card {
border-radius: 15px;
background-color: rgba(220,220,220,0.5);
box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.50);
font-weight: bold
}
entities:
- type: custom:simple-thermostat
entity: climate.fritz_dect_301_2_wohnzimmer
name: false
icon: false
fallback: AUS
decimals: 1
step_size: 0.5
step_layout: column
label:
temperature: Temperatur
state: Status
hide:
temperature: false
state: true
control:
_headings: false
_names: true
_icons: true
hvac:
heat:
name: An
icon: mdi:fire
'off':
name: Aus
icon: mdi:power
sensors:
- entity: sensor.humiditiy_sensor
name: Luftfeuchtigkeit
icon: mdi:water-percent
style: |
ha-card {
border-radius: 15px;
background-color: rgba(000,000,000,0.0);
box-shadow: 1px 1px 2px 0px rgba(000,000,000,0.0);
font-weight: bold;
--st-spacing: 2px;
}
ha-card .mode-item {
background: rgba(000,000,000,0.0);
color: rgba(150,150,150, 1.0);
}
ha-card .mode-item.active {
background: rgba(002,136,209,1.0);
}
ha-card .mode-item:hover {
background: rgba(220,220,220,0.5);
}
- type: custom:mini-graph-card
hours_to_show: 168
points_per_hour: 10
animate: false
decimals: 1
lower_bound: 18
upper_bound: 26
height: 300
show:
icon: false
name: false
state: false
fill: true
labels: true
extrema: false
line_width: 1
hour24: true
entities:
- entity: sensor.wz_temp
name: Gemessen
color: green
- entity: sensor.ausee_temperature_test
name: IST
color: rgba(106,201,254,1.0)
style: |
ha-card {
border-radius: 15px;
background-color: rgba(000,000,000,0.0);
box-shadow: 1px 1px 2px 0px rgba(000,000,000,0.0);
font-weight: bold
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
type: custom:button-card
aspect_ratio: 1/1
icon: mdi:chair-rolling
entity: sensor.wz_temp
name: Büro
hold_action:
haptic: heavy
action: call-service
service: browser_mod.command
service_data:
command: popup
title: |
[[[ return entity.attributes.friendly_name ]]]
style:
position: fixed
z-index: 999
top: 0
left: 0
height: 100%
width: 100%
display: block
align-items: center
justify-content: center
background: rgba(0, 0, 0, 0.8)
color: var(--primary-color)
flex-direction: column
margin: 0
'--iron-icon-fill-color': '#FFF'
card:
type: custom:thermostat-popup-card
entity: climate.fritz_dect_301_2_wohnzimmer
brightnessWidth: 150px
brightnessHeight: 400px
switchWidth: 150px
switchHeight: 400px
fullscreen: false
custom_fields:
graph:
card:
type: custom:mini-graph-card
entities:
- sensor.wz_temp
show:
icon: false
name: false
state: false
line_width: 5
hu: |
[[[
return `<ha-icon
icon="mdi:water-percent:"
style="width:20px;color: skyblue;">
</ha-icon><span style="color: var(--text-color-sensor);">${states['sensor.wz_temp'].state}%</span>`
]]]
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer:"
style="width:20px;color:var(--accent-color);">
</ha-icon><span>${entity.state}°C</span>`
]]]
styles:
custom_fields:
graph:
- overflow: unset
card:
- overflow: unset
grid:
- grid-template-areas: '"n i" "temp hu" "graph graph"'
- grid-template-columns: 50% 50%
- grid-template-rows: 1fr 1fr 1fr
- overflow: unset
name:
- font-size: 16px
- color: white
state:
- font-size: 10px
- color: white
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
entity: input_select.home
states:
Home:
cards:
- entity: climate.fritz_dect_301_2_wohnzimmer
type: thermostat
- entities:
- entity: sensor.wz_temp
hours_to_show: 24
refresh_interval: 0
type: history-graph
type: vertical-stack
Away:
cards:
- entity: climate.fritz_dect_301_2_wohnzimmer
type: thermostat
- entities:
- entity: sensor.wz_temp
hours_to_show: 24
refresh_interval: 0
type: history-graph
type: vertical-stack
type: custom:state-switch