Horseshoe path shapes¶

A horseshoe can follow more than a circular arc. Use another path when a gauge should follow the edge of a panel, form a roof over a value, or become a triangle, hexagon, wave, spiral, or infinity symbol.

The scale, state, colors, tick marks, labels, and animation continue to work along the selected shape.

Choose a path¶

Add path to a horseshoe and select its type. This example draws a complete hexagonal gauge:

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

layout:
  horseshoes:
    - entity_index: 0
      xpos: 50
      ypos: 50
      path:
        type: polygon
        sides: 6
        width: 76
        height: 66
        radius: 4

      horseshoe_scale:
        min: 0
        max: 100

      horseshoe_state:
        width: 8

Without path, the horseshoe uses its normal circular arc.

Follow part of a rectangle or polygon¶

Rectangle and polygon positions use clockwise corner numbers. A decimal selects a point along the following side:

Rectangle             Triangle              Hexagon

0 ------- 1               0                   0 --- 1
|         |              / \                 /       \
|         |             /   \               5         2
3 ------- 2            2 --- 1               \       /
                                               4 --- 3

For example, 0.5 is halfway from corner 0 to corner 1. On a rectangle, 4 is the end of the final side and returns to corner 0.

Use start and end to choose the visible route. This rectangle follows the left half of the top-left corner, the complete top side, and the right half of the top-right corner. It forms a roof that keeps the same proportions at every size:

1
2
3
4
5
6
7
8

path:
  type: rectangle
  width: 80
  height: 50
  radius: 3
  start: 3.5
  end: 1.5
  direction: clockwise

Use the complete range when the gauge should follow the entire shape:

These are also the defaults, so a complete shape does not need start or end.

Choose the direction¶

direction: clockwise follows the increasing corner numbers. direction: counterclockwise travels around the same shape in the other direction.

1
2
3
4
5
6
7
8
9

path:
  type: polygon
  sides: 6
  width: 76
  height: 66
  radius: 4
  start: 0
  end: 4
  direction: counterclockwise

The direction determines how the state grows from the configured start. It does not change the corner numbers.

Choose what faces upward¶

Use top to place a corner or a point along a side at the top of the shape:

Odd-sided polygons use top: 0 by default, which places a corner at the top. Even-sided polygons and rectangles use top: 0.5, which makes the upper side horizontal.

Because top belongs to the shape itself, tick marks and labels stay correctly positioned and readable.

Size and round a polygon¶

Set the polygon's outside dimensions with width and height:

1
2
3
4
5

path:
  type: polygon
  sides: 5
  width: 76
  height: 76

Add radius when the corners should be rounded. It has the same meaning as the radius of a rectangle corner:

1
2
3
4
5
6

path:
  type: polygon
  sides: 6
  width: 80
  height: 55
  radius: 4

Keep nested paths aligned¶

Use the same start, end, top, and direction for nested rectangles or polygons. Change only their size. Each path then starts and ends at the same relative place on its own shape:

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

layout:
  horseshoes:
    - id: outer-roof
      entity_index: 0
      xpos: 50
      ypos: 50
      path:
        type: rectangle
        width: 82
        height: 54
        radius: 3
        start: 3.5
        end: 1.5

    - id: inner-roof
      same_as: outer-roof
      path:
        type: rectangle
        width: 68
        height: 42
        radius: 3
        start: 3.5
        end: 1.5

See Reuse™ when several gauges share more configuration.

Rectangle and polygon options¶

The Horseshoe overview, Scale and state, and Tick marks and labels describe the settings shared by all path shapes.

See the path-shape showcase for complete arc, line, rectangle, polygon, wave, spiral, and infinity examples.

Related¶

• Horseshoe overview
• Polygon
• Scale and state
• Tick marks and labels
• Color stops