Design Functional Card Server Statistics Card Server Card Visualization
This card uses the Material 3 theme D06, TealBlue
Description Aspect Ratio Target Size A card that displays the main server statistics. 6/1 Grid with 1 column
SAK Tool Used for Circle The half circle, as the left part of the circle is cutoff by the card. Circle is animated, state dependent Icon Entity Icon. Name Name of Entity State Secondary Info of Entity Template x4 Uses the toolset_tutorial_02_part1 template created in the Swiss Army Knife Tutorial 02 .
IntegrationsYou need one of the integrations setup that give you system information. An example is the System Monitor integration .
Interaction Part Description Card All tools connected to an entity do show by default the "more-info" dialog once clicked
Usage
Replace example entities with your entities!
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 - type : 'custom:swiss-army-knife-card'
entities :
# CPU
- entity : sensor.processor_use
decimals : 0
name : 'Server Stats'
# Memory
- entity : sensor.memory_use_percent
icon : mdi:memory
decimals : 0
# Disk
- entity : sensor.disk_use_percent
decimals : 0
icon : mdi:harddisk
# System Load
- entity : sensor.load_1m
decimals : 2
unit : '1m'
# Last changed
- entity : sensor.processor_use
secondary_info : last_changed
format : relative
layout :
template :
name : sak_layout_fce_server_statistics
YAML Template Definition
Full definition of layout template 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129 sak_layout_fce_server_statistics :
template :
type : layout
defaults :
- var_entity_index : 0
layout :
aspectratio : 6/1 # Card is 600x100 grid
styles :
card :
toolsets :
# ================================================================
- toolset : half-circle
position :
cx : 0 # Center on cards border
cy : 50
tools :
# ------------------------------------------------------------
- type : circle
position :
cx : 50
cy : 50
radius : 48
styles :
circle :
fill : none
stroke : var(--theme-sys-color-secondary)
stroke-width : 3em
opacity : 0.5
# ================================================================
- toolset : column-icon
position :
cx : 25
cy : 50
tools :
# ------------------------------------------------------------
- type : icon
position :
cx : 50
cy : 50
align : center
icon_size : 30
icon : mdi:server-network
styles :
icon :
fill : var(--theme-sys-color-secondary)
# ================================================================
- toolset : column-name
position :
cx : 120
cy : 50
tools :
# ------------------------------------------------------------
- type : name
position :
cx : 50
cy : 50
entity_index : 0
styles :
name :
text-anchor : middle
font-size : 25em
font-weight : 700
opacity : 1
# ------------------------------------------------------------
- type : state
position :
cx : 50
cy : 80
entity_index : 4
show :
uom : none
styles :
state :
text-anchor : middle
font-size : 14em
font-weight : 500
opacity : 0.7
# ================================================================
- toolset : line1
position :
cx : 200 # On 1/3 of card width
cy : 50
tools :
# ------------------------------------------------------------
- type : line
position :
cx : 50
cy : 50
orientation : vertical
length : 50
styles :
line :
fill : var(--primary-text-color)
opacity : 0.5
# ================================================================
- toolset : column-cpu
template :
name : toolset_tutorial_02_part1
variables :
- var_toolset_position_cx : 260
# ================================================================
- toolset : column-memory
template :
name : toolset_tutorial_02_part1
variables :
- var_entity_index : 1
- var_toolset_position_cx : 355
# ================================================================
- toolset : column-disk
template :
name : toolset_tutorial_02_part1
variables :
- var_entity_index : 2
- var_toolset_position_cx : 450
# ================================================================
- toolset : column-load
template :
name : toolset_tutorial_02_part1
variables :
- var_entity_index : 3
- var_toolset_position_cx : 545
- var_segarc_scale_max : 2
