Tutorials 10 Steps or less Tutorial #1, Part 2 In this tutorial, you will learn to make the following tall 1 by 2 card:
By doing this, you learn something about toolset placement: We place tools on a different position on the card without changing the position of the tools itself, but just by moving the position of the overall toolset!
Prerequisites Step 1: Create the yml view file Create view-tutorial-basic-series01-part2.yml in the lovelace/views/sak-tutorial-views/ folder. Add it to the sak-tutorials-dashboard.yaml in your root folder.
Step 2: define the view basics title : TUT-01-P2
path : tut-01-p2
panel : false
cards :
- type : vertical-stack
cards :
- type : horizontal-stack
cards :
Step 3: Copy the previous tutorial result 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 title : TUT-01-P2
path : tut-01-p2
panel : false
cards :
- type : vertical-stack
cards :
- type : horizontal-stack
cards :
- type : 'custom:swiss-army-knife-card'
aspectratio : 1/1
entities :
- entity : sensor.humidity
name : Study
layout :
toolsets :
- toolset : just-a-name
position :
cx : 50
cy : 50
tools :
- type : circle
position :
cx : 50
cy : 50
radius : 45
styles :
circle :
stroke-width : 2em
stroke : red
stroke-opacity : 0.5
fill : bisque
fill-opacity : 0.5
- type : icon
position :
cx : 50
cy : 25
align : center
icon_size : 25
entity_index : 0
- type : state
position :
cx : 50
cy : 70
entity_index : 0
styles :
state :
font-size : 15em
- type : name
position :
cx : 50
cy : 50
entity_index : 0
styles :
name :
font-size : 15em
font-weight : 900
Step 4: Change card aspect ratio to ½ 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 title : TUT-01-P2
path : tut-01-p2
panel : false
cards :
- type : vertical-stack
cards :
- type : horizontal-stack
cards :
- type : 'custom:swiss-army-knife-card'
aspectratio : 1/2
entities :
- entity : sensor.humidity
name : Study
layout :
toolsets :
- toolset : just-a-name
position :
cx : 50
cy : 50
tools :
- type : circle
position :
cx : 50
cy : 50
radius : 45
styles :
circle :
stroke-width : 2em
stroke : red
stroke-opacity : 0.5
fill : bisque
fill-opacity : 0.5
- type : icon
position :
cx : 50
cy : 25
align : center
icon_size : 25
entity_index : 0
- type : state
position :
cx : 50
cy : 70
entity_index : 0
styles :
state :
font-size : 15em
- type : name
position :
cx : 50
cy : 50
entity_index : 0
styles :
name :
font-size : 15em
font-weight : 900
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 title : TUT-01-P2
path : tut-01-p2
panel : false
cards :
- type : vertical-stack
cards :
- type : horizontal-stack
cards :
- type : 'custom:swiss-army-knife-card'
aspectratio : 1/2
entities :
- entity : sensor.humidity
name : Study
layout :
toolsets :
- toolset : first
position :
cx : 50
cy : 50
tools :
- type : circle
position :
cx : 50
cy : 50
radius : 45
styles :
circle :
stroke-width : 2em
stroke : red
stroke-opacity : 0.5
fill : bisque
fill-opacity : 0.5
- type : icon
position :
cx : 50
cy : 25
align : center
icon_size : 25
entity_index : 0
- type : state
position :
cx : 50
cy : 70
entity_index : 0
styles :
state :
font-size : 15em
- type : name
position :
cx : 50
cy : 50
entity_index : 0
styles :
name :
font-size : 15em
font-weight : 900
Step 6: Add second entity definition 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 title : TUT-01-P2
path : tut-01-p2
panel : false
cards :
- type : vertical-stack
cards :
- type : horizontal-stack
cards :
- type : 'custom:swiss-army-knife-card'
aspectratio : 1/2
entities :
- entity : sensor.humidity
name : Study
- entity : sensor.temperature
name : Study
layout :
toolsets :
- toolset : first
position :
cx : 50
cy : 50
tools :
- type : circle
position :
cx : 50
cy : 50
radius : 45
styles :
circle :
stroke-width : 2em
stroke : red
stroke-opacity : 0.5
fill : bisque
fill-opacity : 0.5
- type : icon
position :
cx : 50
cy : 25
align : center
icon_size : 25
entity_index : 0
- type : state
position :
cx : 50
cy : 70
entity_index : 0
styles :
state :
font-size : 15em
- type : name
position :
cx : 50
cy : 50
entity_index : 0
styles :
name :
font-size : 15em
font-weight : 900
Duplicate first toolset to create the identical second one. You won't see any difference on the card, as the two toolsets are exactly positioned on top of each other and display the exact same entity data.
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 title : TUT-01-P2
path : tut-01-p2
panel : false
cards :
- type : vertical-stack
cards :
- type : horizontal-stack
cards :
- type : 'custom:swiss-army-knife-card'
aspectratio : 1/2
entities :
- entity : sensor.humidity
name : Study
- entity : sensor.temperature
name : Study
layout :
toolsets :
- toolset : first
position :
cx : 50
cy : 50
tools :
- type : circle
position :
cx : 50
cy : 50
radius : 45
styles :
circle :
stroke-width : 2em
stroke : red
stroke-opacity : 0.5
fill : bisque
fill-opacity : 0.5
- type : icon
position :
cx : 50
cy : 25
align : center
icon_size : 25
entity_index : 0
- type : state
position :
cx : 50
cy : 70
entity_index : 0
styles :
state :
font-size : 15em
- type : name
position :
cx : 50
cy : 50
entity_index : 0
styles :
name :
font-size : 15em
font-weight : 900
- toolset : second
position :
cx : 50
cy : 50
tools :
- type : circle
position :
cx : 50
cy : 50
radius : 45
styles :
circle :
stroke-width : 2em
stroke : red
stroke-opacity : 0.5
fill : bisque
fill-opacity : 0.5
- type : icon
position :
cx : 50
cy : 25
align : center
icon_size : 25
entity_index : 0
- type : state
position :
cx : 50
cy : 70
entity_index : 0
styles :
state :
font-size : 15em
- type : name
position :
cx : 50
cy : 50
entity_index : 0
styles :
name :
font-size : 15em
font-weight : 900
Connect second toolset to entity index 1. You will now see the two toolsets displayed over each other.
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 title : TUT-01-P2
path : tut-01-p2
panel : false
cards :
- type : vertical-stack
cards :
- type : horizontal-stack
cards :
- type : 'custom:swiss-army-knife-card'
aspectratio : 1/2
entities :
- entity : sensor.humidity
name : Study
- entity : sensor.temperature
name : Study
layout :
toolsets :
- toolset : first
position :
cx : 50
cy : 50
tools :
- type : circle
position :
cx : 50
cy : 50
radius : 45
styles :
circle :
stroke-width : 2em
stroke : red
stroke-opacity : 0.5
fill : bisque
fill-opacity : 0.5
- type : icon
position :
cx : 50
cy : 25
align : center
icon_size : 25
entity_index : 0
- type : state
position :
cx : 50
cy : 70
entity_index : 0
styles :
state :
font-size : 15em
- type : name
position :
cx : 50
cy : 50
entity_index : 0
- toolset : second
position :
cx : 50
cy : 50
tools :
- type : circle
position :
cx : 50
cy : 50
radius : 45
styles :
circle :
stroke-width : 2em
stroke : red
stroke-opacity : 0.5
fill : bisque
fill-opacity : 0.5
- type : icon
position :
cx : 50
cy : 25
align : center
icon_size : 25
entity_index : 1
- type : state
position :
cx : 50
cy : 70
entity_index : 1
styles :
state :
font-size : 15em
- type : name
position :
cx : 50
cy : 50
entity_index : 1
styles :
name :
font-size : 15em
font-weight : 900
Finally, position the second toolset below the first toolset. The center position is (50,150).
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 title : TUT-01-P2
path : tut-01-p2
panel : false
cards :
- type : vertical-stack
cards :
- type : horizontal-stack
cards :
- type : 'custom:swiss-army-knife-card'
aspectratio : 1/2
entities :
- entity : sensor.humidity
name : Study
- entity : sensor.temperature
name : Study
layout :
toolsets :
- toolset : first
position :
cx : 50
cy : 50
tools :
- type : circle
position :
cx : 50
cy : 50
radius : 45
styles :
circle :
stroke-width : 2em
stroke : red
stroke-opacity : 0.5
fill : bisque
fill-opacity : 0.5
- type : icon
position :
cx : 50
cy : 25
align : center
icon_size : 25
entity_index : 0
- type : state
position :
cx : 50
cy : 70
entity_index : 0
styles :
state :
font-size : 15em
- type : name
position :
cx : 50
cy : 50
entity_index : 0
styles :
name :
font-size : 15em
font-weight : 900
- toolset : second
position :
cx : 50
cy : 150
tools :
- type : circle
position :
cx : 50
cy : 50
radius : 45
styles :
circle :
stroke-width : 2em
stroke : red
stroke-opacity : 0.5
fill : bisque
fill-opacity : 0.5
- type : icon
position :
cx : 50
cy : 25
align : center
icon_size : 25
entity_index : 1
- type : state
position :
cx : 50
cy : 70
entity_index : 1
styles :
state :
font-size : 15em
- type : name
position :
cx : 50
cy : 50
entity_index : 1
styles :
name :
font-size : 15em
font-weight : 900
Done! 
