Es gibt eine vielzahl von Möglichkeiten seine Sensoren in Graphen anzeigen zu lassen…
Dieser Beitrag gibt einen kleinen Überblick über die verschiedensten Varianten
Empfohlene Produkte
Ausgewählte Empfehlungen für dein Smart Home Projekt
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-cardShopping-Empfehlungen
Weitere empfohlene Produkte für dein Smart Home
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: false1
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-card1
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-card1
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: white1
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