Skip to content

The Line tool

1.0.0 · Output

The Line tool is based on the SVG basic <line> element shape

Basic usage

The Line tool needs a center position and a length, or start and endpoints.

Horizontal / Vertical config
1
2
3
4
5
6
7
8
9
- type: 'line'              # tooltype is 'line'
  position:                 # Position on (100x100) canvas
    orientation: 'vertical' # Vertical, horizontal
    cx: 50                  # cx=50 is center position
    cy: 50                  # cy=50 is center position
    length: 25              # length of line.
  style:
    line:
      stroke-width: 2       # Set stroke width using CSS attribute
FromTo config
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
- type: 'line'              # tooltype is 'line'
  position:                 # Position on (100x100) canvas
    orientation: 'fromto'   # fromto (x1,y1,x2,y2)
    x1: 0                   # from: upperleft corner
    y1: 0
    x2: 100                 # to: lowerright corner
    y2: 100
  style:
    line:
      stroke-width: 2       # Set stroke width using CSS attribute

Horizontal / Vertical config
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
- type: 'line'              # tooltype is 'line'
  position:                 # Position on (100x100) canvas
    orientation: 'vertical' # Vertical, horizontal or fromto
    cx: 50                  # cx=50 is center position
    cy: 50                  # cy=50 is center position
    length: 25              # length of line.
  entity_index: 0           # connect to state of entity 0
  style:
    line:
      stroke-width: 2       # Set stroke width using CSS attribute
FromTo config
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
- type: 'line'              # tooltype is 'line'
  position:                 # Position on (100x100) canvas
    orientation: 'fromto'   # fromto (x1,y1,x2,y2)
    x1: 0                   # from: upperleft corner
    y1: 0
    x2: 100                 # to: lowerright corner
    y2: 100
  entity_index: 0           # connect to state of entity 0
  style:
    line:
      stroke-width: 2       # Set stroke width using CSS attribute

Styling

The Line tool has support for the following forms of styling:

Method Support Description
classes Using SAK or User defined class definitions
styles Using inline SVG and CSS styles

The Line tool is composed of a single object: "line" and this is the selector for styling: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
- type: 'line'
  position:
    orientation: 'vertical'
    cx: 50
    cy: 50
    length: 25
  classes:
    line:                   # Line selector
      <...>
  styles:
    line:                   # Line selector
      <...>

Populair properties:

Property Does what? Example
stroke-width Line width stroke-width: 2em sets width to relative width of 2em
stroke Line color stroke: red
opacity Line opacity opacity: 0.7 sets the opacity of the stroke to 70%

Reference: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line

Haptics

See: https://companion.home-assistant.io/docs/integrations/haptics/ for devices that support haptics

The tool supports haptic feedback through user_actions/ tap_action definition

Action Haptic Description
Click haptic Uses the haptic property defined in the user_actions definition of the tool. If not specified, a default of medium is used 
 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:

Haptic Description
success Indicates that a task or action has completed.
warning Indicates that a task or action has produced a warning of some kind.
failure Indicates that a task or action has failed.
light Provides a physical metaphor that complements the visual experience.
medium Provides a physical metaphor that complements the visual experience.
heavy Provides a physical metaphor that complements the visual experience.
selection Indicates that the selection is actively changing.

Animations

The Line tool has support for the following forms of animations:

Method Support Description
colorstops List of state values to set the color
colorlists Using a colorlist definition
animations Operator state based animations with class/style styling

The use of animations require the tool to be connected to an entity