The Segmented Arc tool¶

1.0.0 · Output

The Segmented Arc tool is a complex, multi-part tool with a custom animation.
The tool consists of multiple separate segments that 'behave' like a single, segmented object.

The Arc can be between 0 and 360 degrees with configurable start and end angle. It can have an additional scale. The Arc supports colorstops and colorlists to display the state value.

It is by far the most complex tool. Was fun to make, and fairly unique.
The 360 degrees arc takes a prominent place in many examples.

Basic usage¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

- type: 'segarc'            # tooltype is 'segarc'
  position:                 # Position on (100x100) canvas
    cx: 50                  # cx=50 is center position
    cy: 50                  # cy=50 is center position
    start_angle: -130       # start angle...
    end_angle: 130          # .. --> Arc from left to right!
    width: 7                # Width of arc 'bar'
    radius: 45              # Size or arc radius
  entity_index: 0           # connect to state of entity 0
  scale:
    min: -20                # Temperatures from -20 to +40
    max: 40
    offset: -4.5            # Scale on inside of arc bar
  show:
    style: colorlist        # use single color colorlist
    scale: true             # show scale too
  segments:
    colorlist:
      gap: 1                # gap between segments
      colors:
        - 'black'
  styles:
    background:
      fill: grey

  start_angle: -90
  end_angle: 0

  start_angle: 90
  end_angle: 0

Extended usage¶

 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

- type: 'segarc'            # tooltype is 'segarc'
  position:                 # Position on (100x100) canvas
    cx: 50                  # cx=50 is center position
    cy: 50                  # cy=50 is center position
    start_angle: -130       # start angle...
    end_angle: 130          # .. --> Arc from left to right!
    width: 7
    radius: 45
  entity_index: 0           # connect to state of entity 0
  scale:
    min: 15                 # Inside temperature
    max: 25
    offset: -4.5            # Scale on inside of arc bar
  show:
    style: colorstops       # Use a colorstop
    lastcolor: true         # use last color to fill segments
  segments:
    colorstops:
      template:             # Use template colorstop (re-use!)
        name: colorstops_temperature_inside
        variables:
          - thegap: 1
  styles:
    background:
      fill: var(--primary-background-color)
      filter: url(#is-1)    # inset shadow for background

Styling¶

The Segmented Arc tool has support for the following forms of styling:

The Segmented Arc tool is composed of two objects: "foreground" and "background" are the selector for styling:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

- type: 'segarc'
  position:
    cx: 50
    cy: 50
    start_angle: -130       # start angle...
    end_angle: 130          # .. --> Arc from left to right!
    width: 7
  classes:
    background:             # Background selector
      <...>
    foreground:             # Foreground selector
      <...>
  styles:
    background:             # Background selector
      <...>
    foreground:             # Foreground selector
      <...>

Populair properties for both 'foreground' and 'background' selectors:

Haptics¶

The tool supports haptic feedback through user_actions/ tap_action definition

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

  tools:
    - type: icon
      position:
        cx: 10
        cy: 10
        align: center
        icon_size: 15
      entity_index: 0
      user_actions:
        tap_action:
          haptic: success
          actions:
            - action: more-info

Possible values for haptic feedback:

Animations¶

The Segmented Arc tool 'foreground' part has support for the following forms of animations:

Detailed usage¶

The segarc tool has some functionalities which haven't been explained yet in the above examples.

Scale placement¶

The scale, if enabled through show.scale: true can be placed inside, on or on the outside of the arc.

The scale.offset value is responsible for that functionality and works together with the position.width property.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

- type: 'segarc'            # tooltype is 'segarc'
  position:                 # Position on (100x100) canvas
    cx: 50                  # cx=50 is center position
    cy: 50                  # cy=50 is center position
    start_angle: -130       # start angle...
    end_angle: 130          # .. --> Arc from left to right!
    width: 7                # Width of arc 'bar'
    radius: 45              # Size or arc radius
  entity_index: 0           # connect to state of entity 0
  scale:
    min: -20                # Temperatures from -20 to +40
    max: 40
    offset: -4.5            # Scale on inside of arc bar
  show:
    style: colorlist        # use single color colorlist
    scale: true             # show scale too
  segments:
    colorlist:
      gap: 1                # gap between segments
      colors:
        - 'black'
  styles:
    background:
      fill: grey

The math is as follows:

• the arc bar width of the arc is 7. As the math is from the center, we take 7/2 = 3.5 as the value to do the math with
• the scale offset is -4.5. That is the offset from the center of the arc bar. A value of -4.5 means on the inside.
• As the width of the arc is 3.5 from the center, there is a 'gap' between the arc and the scale of 1.

If you want the scale to be on the outside of the arc bar, use a positive offset value.

Animation duration¶

The arc uses a custom animation to draw the arc. The animation duration is default 5 seconds and can be configured as follows:

1
2
3

- type: 'segarc'            # tooltype is 'segarc'
  animation:
    duration: 5             # Animation in seconds

Gap between segments¶

The colorlist or colorstop show.style determines the number of segments the arc has.

The gap between the drawn segments can be configured using the gap property. The default is 1.
Setting this to 0 removes the gap between the segments.

1
2
3
4
5

  segments:
    colorlist:
      gap: 1                # gap between segments
      colors:
        - 'black'