Flow line

About 3 min read

TwFlowLine · Category: Svg

Settings

These settings are in the properties panel on the right while the widget is selected, mostly in the Flow Line Settings section. The default value is the value the widget has when it is first added to a page.

Flow

Setting	Type	Default	Description
Flow Enabled flowEnabled	Checkbox	On	Shows dashes moving along the line. When off, Dash pattern is used instead.
Flow Direction flowDirection	Selection	forward	Forward moves the dashes from the first point to the last, Reverse the other way. Options: forward Forward, reverse Reverse
Flow Speed flowSpeed	Number	40	Movement speed in px per second (default 40).
Flow Gap flowGap	Number	8	Gap between dashes or dots in px (default 8).
Use Spline useSpline	Checkbox	Off	Draws a smooth curve through the points instead of straight segments.
Flow Pattern flowPattern	Selection	dash	Dash draws line segments, Dot draws dots. Options: dash Dash, dot Dot
Flow Segment flowSegment	Number	12	Length of each dash in px (default 12). Not used by the Dot pattern.

Line

Setting	Type	Default	Description
Line Style lineStyle	Selection	normal	Pipe draws the line as a pipe with a darker outer edge and a lighter core; Normal draws a single stroke. Options: normal Normal, pipe Pipe
Stroke Line Cap strokeLineCap	Selection	round	Shape of open line ends: butt, round or square. Options: butt, round, square
Stroke Color strokeColor	Color	#0d9488	Outline color of the shape.
Stroke Width strokeWidth	Number	4	Outline thickness in pixels.
Stroke Dash Array strokeDashArray	Text	—	Dash pattern for outline, for example: 5,3
Stroke Line Join strokeLineJoin	Selection	round	Shape of the corners where two segments meet, for example miter, round or bevel. Options: arcs, bevel, miter, miter-clip, round
Hover Color hoverColor	Color	—	Color used when pointer hovers over the shape.
Stroke Opacity strokeOpacity	Number	1	Outline transparency. 0 is fully transparent, 1 is fully opaque.

Other settings

Setting	Type	Default	Description
Enable Flashing enableFlashing	Checkbox	Off	Makes the widget blink (an opacity pulse every second). Usually bound to an alarm condition.
Log Button logButton	Checkbox	Off	At runtime shows a chart icon when hovering the widget; clicking it adds the Tags bound to the widget to the log Tag list.
Fill color fillColor	Color	#333333	Fill color of the shape.
Fill opacity fillOpacity	Number	100	Fill transparency. 0 is fully transparent, 1 is fully opaque.

Bindings

In the Bindings (Rules) section of the properties panel, a Tag can be bound to the following properties of this widget with a Direct binding. The binding types (Direct, IntRange, FloatRange, Boolean, Bit) are the same for all widgets; they are described on the Widget Reference page.

title, visible, authorization, x, y, width, height, rotation, class, foregroundColor, backgroundColor, borderColor, borderStyle, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, enableFlashing, logButton, markerArrowColor, markerDotColor, markerSquareColor, markerStart, markerMid, markerEnd, markerSegment, fillColor, fillOpacity, strokeColor, strokeOpacity, strokeWidth, strokeDashArray, hoverColor, to.type, points, useSpline, lineStyle, strokeLineJoin, strokeLineCap, flowEnabled, flowDirection, flowPattern, flowSpeed, flowSegment, flowGap

Common sections

While this widget is selected, the properties panel also shows these common sections: General, Layout, Appearance, Drawing, Navigation (To), Markers, Points, Bindings (Rules). These sections are described on the Page Editor page.