Inline SVG

About 2 min read

TwInlineSvg · Category: Media

Settings

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

Setting	Type	Default	Description
Vertical Tint Level verticalTintLevel	Number	100	Height of the tinted area in percent, filled from the bottom (0–100, default 100).
Horizontal Tint Level horizontalTintLevel	Number	100	Width of the tinted area in percent, filled from the left (0–100, default 100).
Source src	File	./uploads/scada/img/empty_image.svg	SVG file inserted inline into the page, so its parts can be colored and changed.
Transform Source transformSource	Code	—	JSON list of rules that change SVG parts: selector (#id or .class), attr (e.g. fill, stroke, opacity, display) and value, or whenTrue/whenFalse chosen by the process value.
Keep During Loading keepDuringLoading	Checkbox	On	Keeps showing the previous image while a new source is loading.
Tint Color tintColor	Color	—	Color applied over the image; empty turns tinting off.
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.

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, to.type, src, transformSource, keepDuringLoading, tintColor, verticalTintLevel, horizontalTintLevel

Common sections

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