Airvisual Card #2
Visualization
This card uses the Material 3 theme D06, TealBlue
This card is (again) based on the Sensor Card #2. But instead of an icon it shows an external SVG
| Description | Aspect Ratio | Target Size |
A card that displays data from AirVisual.
Both the current data, as a 24 hour history is shown | 3/1 | Grid with 2 columns |
| SAK Tool | Used for |
| Circle | The half circle, as the left part of the circle is cutoff by the card. Animated, state dependent using the AirVisual colorstop |
| UserSvg | External SVG showing the AQI faces. Animated, state dependent |
| SegArc | Segmented Arc showing the current AQI state using the AirVisual colorstop |
| State | Value of entity |
| Name | Name of Entity |
| Bar | Shows the 24 hour history in the background |
Integrations
You need the AirVisual integration: 
Interaction
| Part | Description |
| Card | All tools connected to an entity do show by default the "more-info" dialog once clicked |
Usage
1.0.0-rc.3
The entities should be the same for every installation, so you can re-use the example below!
| - type: 'custom:swiss-army-knife-card'
entities:
- entity: sensor.u_s_air_quality_index
name: 'AirVisual #2'
layout:
template:
name: sak_layout_fce_airvisual2
|
| Data | Default | Required | Description |
| entities | | | The air quality index entity |
YAML Template Definition
1.0.0-rc.3
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163 | sak_layout_fce_airvisual2:
template:
type: layout
defaults:
- var_entity_index: 0
layout:
aspectratio: 3/1 # Card is 300x100 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: 50
entity_index: 0
show:
style: 'colorstops'
colorstops:
template:
name: colorstops_airvisual
variables:
- thegap: 2
styles:
circle:
stroke: none
fill: var(--theme-sys-elevation-surface-neutral4)
- type: 'usersvg'
id: 2
entity_index: 0
position:
cx: 50
cy: 50
height: 100
width: 100
style: 'images'
images:
- face1: /local/images/airvisual/ic-face-1.svg
- face2: /local/images/airvisual/ic-face-2.svg
- face3: /local/images/airvisual/ic-face-3.svg
- face4: /local/images/airvisual/ic-face-4.svg
- face5: /local/images/airvisual/ic-face-5.svg
- face6: /local/images/airvisual/ic-face-6.svg
animations:
- state: '50'
operator: <=
image: face1
- state: '100'
operator: <=
image: face2
- state: '150'
operator: <=
image: face3
- state: '200'
operator: <=
image: face4
- state: '300'
operator: <=
image: face5
- state: '9999'
operator: <=
image: face6
# ------------------------------------------------------------
- type: 'segarc'
id: 0
position:
cx: 50
cy: 50
start_angle: 25
end_angle: 155
width: 6
radius: 59
entity_index: 0
scale:
min: 0
max: 300
width: 6
offset: 12
show:
scale: false
style: 'colorstops'
lastcolor: true
segments:
colorstops:
template:
name: colorstops_airvisual
variables:
- thegap: 2
styles:
foreground:
fill: darkgrey
background:
fill: var(--theme-sys-elevation-surface-neutral4)
# ================================================================
- toolset: column-bar
position:
cx: 185 # 300-70/2 + 70=185
cy: 50
tools:
# ------------------------------------------------------------
- type: bar
id: 1
entity_index: 0
position:
orientation: vertical
cx: 50
cy: 50
width: 230 # 300-70=230
height: 100
margin: 1
hours: 24
barhours: 1
show:
style: 'colorstops'
colorstops:
template:
name: colorstops_airvisual
variables:
- thefill: true
styles:
bar:
stroke-linecap: square
opacity: 0.25
# ================================================================
- toolset: column-name
position:
cx: 70
cy: 50
tools:
# ------------------------------------------------------------
- type: name
position:
cx: 50
cy: 70
entity_index: 0
styles:
name:
text-anchor: start
font-size: 26em
font-weight: 500
opacity: 0.7
# ------------------------------------------------------------
- type: state
position:
cx: 50
cy: 37
entity_index: 0
styles:
state:
text-anchor: start
font-size: 30em
font-weight: 700
|