Skip to content

Tutorial #3, Part 1

In this tutorial, we are going to make the following basic card: 10-step-tutorial-03-part1-step10

Such a card is part of Example 4, second row of cards.

Prerequisites

This tutorial requires:

  • The "NM - Gonsboro" theme to be downloaded in the theme folder. It uses some color definitions from that theme.

Step 1: Create the yml view file

  • Create view-tutorial-03-part1.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, card, entities and layout

We are going to use a lux sensor. But you can use any other sensor, as long as it has history. So a temperature or humidity sensor is also ok.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
title: TUT-03-P1
path: tut-03-p1
theme: 'NM - Gonsboro'
panel: false
cards:
- type: vertical-stack
  cards:
    - type: horizontal-stack
      cards:
        - type: 'custom:swiss-army-knife-card'
          entities:
            # Lux
            - entity: sensor.illuminance
              decimals: 0
              icon: mdi:alarm-light-outline
              name: 'Study'
          aspectratio: 1/1
          layout:

Step 3a: Define card background

Actions:

  • Add a rectangle covering the card completely as a kind of card background.
 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
title: TUT-03-P1
path: tut-03-p1
theme: 'NM - Gonsboro'
panel: false
cards:
- type: vertical-stack
  cards:
    - type: horizontal-stack
      cards:
        - type: 'custom:swiss-army-knife-card'
          entities:
            # Lux
            - entity: sensor.illuminance
              decimals: 0
              icon: mdi:alarm-light-outline
              name: 'Study'
          aspectratio: 1/1
          layout:
            toolsets:
              - toolset: lux
                position:
                  cx: 50
                  cy: 50
                  scale: 1
                tools:
                  # Card Background
                  # ---------------------------------------------
                  - type: rectex
                    position:
                      cx: 50
                      cy: 50
                      width: 100
                      height: 100
                    styles:
                      rectex:
                        fill: var(--theme-gradient-color-01)

10-step-tutorial-03-part1-step3a

Step 3b: Define darker top part

Actions:

  • Add a second rectangle covering the top part of the card background.
 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
title: TUT-03-P1
path: tut-03-p1
theme: 'NM - Gonsboro'
panel: false
cards:
- type: vertical-stack
  cards:
    - type: horizontal-stack
      cards:
        - type: 'custom:swiss-army-knife-card'
          entities:
            # Lux
            - entity: sensor.illuminance
              decimals: 0
              icon: mdi:alarm-light-outline
              name: 'Study'
          aspectratio: 1/1
          layout:
            toolsets:
              - toolset: lux
                position:
                  cx: 50
                  cy: 50
                  scale: 1
                tools:
                  # Card Background
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # Top part
                  # ---------------------------------------------
                  - type: rectex
                    position:
                      cx: 50
                      cy: 20
                      width: 100
                      height: 40
                    styles:
                      rectex:
                        fill: var(--theme-gradient-color-03)

10-step-tutorial-03-part1-step3b

Step 4: Add extra 'neck' background

Actions:

  • Add a third rectangle as a kind of neck
 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
title: TUT-03-P1
path: tut-03-p1
theme: 'NM - Gonsboro'
panel: false
cards:
- type: vertical-stack
  cards:
    - type: horizontal-stack
      cards:
        - type: 'custom:swiss-army-knife-card'
          entities:
            # Lux
            - entity: sensor.illuminance
              decimals: 0
              icon: mdi:alarm-light-outline
              name: 'Study'
          aspectratio: 1/1
          layout:
            toolsets:
              - toolset: lux
                position:
                  cx: 50
                  cy: 50
                  scale: 1
                tools:
                  # Card Background
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # Top part
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # Neck to connect two parts
                  # ---------------------------------------------
                  - type: rectex
                    position:
                      cx: 50
                      cy: 33
                      width: 80
                      height: 15
                    styles:
                      rectex:
                        fill: var(--theme-gradient-color-01)

10-step-tutorial-03-part1-step4

Step 5: Add background for State and Icon

Actions:

  • Add another rectex tool. This time with top_radius: 5 to get round corners at the topside of the rectangle.
 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
title: TUT-03-P1
path: tut-03-p1
theme: 'NM - Gonsboro'
panel: false
cards:
- type: vertical-stack
  cards:
    - type: horizontal-stack
      cards:
        - type: 'custom:swiss-army-knife-card'
          entities:
            # Lux
            - entity: sensor.illuminance
              decimals: 0
              icon: mdi:alarm-light-outline
              name: 'Study'
          aspectratio: 1/1
          layout:
            toolsets:
              - toolset: lux
                position:
                  cx: 50
                  cy: 50
                  scale: 1
                tools:
                  # Card Background
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # Top part
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # Background for Name and Bar
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # State and Icon background
                  # ---------------------------------------------
                  - type: rectex
                    position:
                      cx: 50
                      cy: 18
                      width: 80
                      height: 16
                      radius:
                        top: 5
                    styles:
                      rectex:
                        fill: var(--theme-gradient-color-02)

10-step-tutorial-03-part1-step5

Step 6: Add state

 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
title: TUT-03-P1
path: tut-03-p1
theme: 'NM - Gonsboro'
panel: false
cards:
- type: vertical-stack
  cards:
    - type: horizontal-stack
      cards:
        - type: 'custom:swiss-army-knife-card'
          entities:
            # Lux
            - entity: sensor.illuminance
              decimals: 0
              icon: mdi:alarm-light-outline
              name: 'Study'
          aspectratio: 1/1
          layout:
            toolsets:
              - toolset: lux
                position:
                  cx: 50
                  cy: 50
                  scale: 1
                tools:
                  # Card Background
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # Top part
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # Background for Name and Bar
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # State and Icon background
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # ---------------------------------------------
                  - type: state
                    position:
                      cx: 35
                      cy: 18
                    entity_index: 0
                    styles:
                      state:
                        font-size: 12em
                        font-weight: 700
                        fill: black
                      uom:
                        fill: black
                        font-weight: 700

10-step-tutorial-03-part1-step6

Step 7: Add vertical line as separator

 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
title: TUT-03-P1
path: tut-03-p1
theme: 'NM - Gonsboro'
panel: false
cards:
- type: vertical-stack
  cards:
    - type: horizontal-stack
      cards:
        - type: 'custom:swiss-army-knife-card'
          entities:
            # Lux
            - entity: sensor.illuminance
              decimals: 0
              icon: mdi:alarm-light-outline
              name: 'Study'
          aspectratio: 1/1
          layout:
            toolsets:
              - toolset: lux
                position:
                  cx: 50
                  cy: 50
                  scale: 1
                tools:
                  # Card Background
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # Top part
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # Background for Name and Bar
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # State and Icon background
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # ---------------------------------------------
                  - type: state
                    # Removed for brevity
                  # ---------------------------------------------
                  - type: state
                    # Removed for brevity
                  # ---------------------------------------------
                  - type: line
                    position:
                      cx: 60
                      cy: 18
                      length: 10
                      orientation: vertical
                    styles:
                      line:
                        stroke: black
                        stroke-opacity: 0.5
                        stroke-width: 3

10-step-tutorial-03-part1-step7

Step 8: Add Icon tool

 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-03-P1
path: tut-03-p1
theme: 'NM - Gonsboro'
panel: false
cards:
- type: vertical-stack
  cards:
    - type: horizontal-stack
      cards:
        - type: 'custom:swiss-army-knife-card'
          entities:
            # Lux
            - entity: sensor.illuminance
              decimals: 0
              icon: mdi:alarm-light-outline
              name: 'Study'
          aspectratio: 1/1
          layout:
            toolsets:
              - toolset: lux
                position:
                  cx: 50
                  cy: 50
                  scale: 1
                tools:
                  # Card Background
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # Top part
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # Background for Name and Bar
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # State and Icon background
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # ---------------------------------------------
                  - type: state
                    # Removed for brevity
                  # ---------------------------------------------
                  - type: line
                    # Removed for brevity
                  # ---------------------------------------------
                  - type: icon
                    position:
                      cx: 75
                      cy: 18
                      align: center
                      icon_size: 12
                    entity_index: 0
                    styles:
                      icon:
                        fill: black

10-step-tutorial-03-part1-step8

Step 9: Add entity name tool

Actions:

  • Add an entity name tool
 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
title: TUT-03-P1
path: tut-03-p1
theme: 'NM - Gonsboro'
panel: false
cards:
- type: vertical-stack
  cards:
    - type: horizontal-stack
      cards:
        - type: 'custom:swiss-army-knife-card'
          entities:
            # Lux
            - entity: sensor.illuminance
              decimals: 0
              icon: mdi:alarm-light-outline
              name: 'Study'
          aspectratio: 1/1
          layout:
            toolsets:
              - toolset: lux
                position:
                  cx: 50
                  cy: 50
                  scale: 1
                tools:
                  # Card Background
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # Top part
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # Background for Name and Bar
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # State and Icon background
                  # ---------------------------------------------
                  - type: rectex
                    # Removed for brevity
                  # ---------------------------------------------
                  - type: state
                    # Removed for brevity
                  # ---------------------------------------------
                  - type: line
                    # Removed for brevity
                  # ---------------------------------------------
                  - type: icon
                    # Removed for brevity
                  # ---------------------------------------------
                  - type: name
                    position:
                      cx: 50
                      cy: 50
                    entity_index: 0
                    styles:
                      name:
                        font-size: 10em
                        font-weight: 700
                        fill: black

10-step-tutorial-03-part1-step9

Step 10: Finalize card by adding the history bar

Actions:

  • Add the bar tool to show 24 hour history (hours: 24) with 12 bars (barhours: 2, ie hours/barhours=12)
view-tutorial-03-part1.yml
  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
title: TUT-03-P1
path: tut-03-p1
theme: 'NM - Gonsboro'
panel: false
cards:
- type: vertical-stack
  cards:
    - type: horizontal-stack
      cards:
        - type: 'custom:swiss-army-knife-card'
          entities:
            # Lux
            - entity: sensor.illuminance
              decimals: 0
              icon: mdi:alarm-light-outline
              name: 'Study'
          aspectratio: 1/1
          layout:
            toolsets:
              - toolset: lux
                position:
                  cx: 50
                  cy: 50
                  scale: 1
                tools:
                  # Card Background
                  # ---------------------------------------------
                  - type: rectex
                    position:
                      cx: 50
                      cy: 50
                      width: 100
                      height: 100
                    styles:
                      rectex:
                        fill: var(--theme-gradient-color-01)
                  # Top part
                  # ---------------------------------------------
                  - type: rectex
                    position:
                      cx: 50
                      cy: 20
                      width: 100
                      height: 40
                    styles:
                      rectex:
                        fill: var(--theme-gradient-color-03)
                  # Background for Name and Bar
                  # ---------------------------------------------
                  - type: rectex
                    position:
                      cx: 50
                      cy: 33
                      width: 80
                      height: 15
                    styles:
                      rectex:
                        fill: var(--theme-gradient-color-01)
                  # State and Icon background
                  # ---------------------------------------------
                  - type: rectex
                    position:
                      cx: 50
                      cy: 18
                      width: 80
                      height: 16
                      radius:
                        top: 5
                    styles:
                      rectex:
                        fill: var(--theme-gradient-color-02)
                  # ---------------------------------------------
                  - type: state
                    position:
                      cx: 35
                      cy: 18
                    entity_index: 0
                    styles:
                      state:
                        font-size: 12em
                        font-weight: 700
                        fill: black
                      uom:
                        fill: black
                        font-weight: 700
                  # ---------------------------------------------
                  - type: line
                    position:
                      cx: 60
                      cy: 18
                      length: 10
                      orientation: vertical
                    styles:
                      line:
                        stroke: black
                        stroke-opacity: 0.5
                        stroke-width: 3
                  # ---------------------------------------------
                  - type: icon
                    position:
                      cx: 75
                      cy: 18
                      align: center
                      icon_size: 12
                    entity_index: 0
                    styles:
                      icon:
                        fill: black
                  # ---------------------------------------------
                  - type: name
                    position:
                      cx: 50
                      cy: 50
                    entity_index: 0
                    styles:
                      name:
                        font-size: 10em
                        font-weight: 700
                        fill: black
                  # ---------------------------------------------
                  - type: bar
                    id: 2
                    entity_index: 0
                    position:
                      orientation: vertical
                      cx: 50
                      cy: 80
                      width: 70
                      height: 25
                      margin: 1.5
                    hours: 24
                    barhours: 2
                    styles:
                      bar:
                        stroke: grey
                        stroke-linecap: butt

The final result: 10-step-tutorial-03-part1-step10

Done!