Vector Drawing

The vector drawing component allows for the inclusion of images in SVG format. Manipulate and animate SVG images based on events, functions, and variable values using Dynamic Vector Images. Custom parameters will appear in the SVG properties tab as component variables. The tutorial Manipulating SVG images shows how to leverage custom properties in user interface designs.

Public Variables (Properties)

[?]

The Vector Drawing component has the following basic properties and property groups that are common to all components:

Name, Advanced Properties, Container Properties, Styles, Preloader, Events, Bindings.

SVG Template

Indicates the SVG image to be displayed by the component.

Variable Name:

drawing

Records:

1

Record Format:

Field Name

Field Type

Field Description

imageType

teger

Type. Template source type. Defines whether the image is embedded into the dashboard as binary data block or loaded from a URL.

Supported values:

  • Data Block

  • URL

  • Template Reference.

imageData

Data Block

Template Data. SVG template content provided as a Data Block. Used when type = Data Block.

imageUrl

String

Template URL. URL to an SVG template. Used when Type = URL.

imageTemplateReference

String

Template Reference. Reference to an SVG template. Used when Type = Template Reference. The value must resolve to a String (template name) or a Data Block (SVG content).

Cloning and reference-resolution behavior is described in SVG Editor.

Custom Properties

Defines custom SVG image properties (template-level parameters). Each record declares a custom property available for a Vector Drawing instance. A custom property can be referenced in expressions as {Name} (for example {valveTagPrefix} in getVariable(dc(), {valveTagPrefix} + "_angle")). valveTagPrefix is an example of a custom parameter name used by a “Valve” SVG template. It is not a built-in Vector Drawing field.

Variable Name:

customProperties

Records:

0…Unlimited

Record Format:

Field Name

Field Type

Field Description

name

String

Name. Custom property name. Used in expressions as {name} (for example {valveTagPrefix}).

format

Data Table

Format. Custom property format definition.

description

String

Description. Human-readable description of the custom property shown in the editor.

help

String

Help. Detailed help text (tooltip) for the custom property shown in the editor.

SVG Properties

Defines SVG image properties. Each record specifies an SVG attribute or style property that is applied to matched SVG elements (by IDs or class name) and configured in the editor’s SVG Properties table. These properties are declared in the SVG markup itself; see Creating Dynamic Vector Images for the underlying agg:param syntax and end-to-end examples.

Variable Name:

svgProperties

Records:

1

Record Format:

Field Name

Field Type

Field Description

name

String

Name. SVG property name. It becomes the name of the resulting component property (variable).

description

String

Description. Human-readable description of the SVG property shown in the editor.

type

String

Type. SVG property type — a text code defining how the value is interpreted and applied. It is a field-type code (commonly I — Integer, F — Float, S — String, or C — Color), or one of the special types: state (a set of predefined named modifications — see the states field) and level (a value in the 0..100 range that is proportionally mapped to the [minimum, maximum] range).

cssAttributes

String

CSS Attributes. Comma-separated CSS (style) attributes overwritten with the property value (for example, fill).

className

String

Class Name. Comma-separated CSS class names selecting the target elements.

pattern

String

Pattern. Value template containing the {0} token. The property value is substituted for {0} to build the string written to the document (for example, rotate({0} 61.542 61.792)). It formats the value — it does not select elements.

attributes

String

Attributes. Comma-separated SVG element (XML) attributes overwritten with the property value (for example, visibility, y).

ids

String

IDs. Comma-separated element IDs selecting the target elements.

minimum

Number

Minimum. Lower bound of the value. For the numeric types I (Integer) and F (Float) it limits the value to the [minimum, maximum] range. For the level type it sets the lower end of the [minimum, maximum] range onto which the 0..100 input is mapped proportionally; for level, minimum may be greater than maximum (an inverted range).

maximum

Number

Maximum. Upper bound of the value. For the numeric types I and F it limits the value to the [minimum, maximum] range. For the level type it sets the upper end of the [minimum, maximum] range.

states

Data Table

States. Applies when Type is equal to state: defines named states (shown as a drop-down), each applying a preset set of attribute, CSS, or animation changes to the target elements.

binding

Data Table

Binding. Binding configuration for the SVG property. See SVG Editor for binding field descriptions and usage.

Scale

Increases or decreases the size of the image in the component window.

Variable Name:

scale

Records:

1

Record Format:

Field Name

Field Type

Field Description

scale

Float

Scale

Enable Interactions

Allows a user to zoom the image in/out and pan it, i.e. reposition it within its viewing frame.

Variable Name:

enableInteractions

Records:

1

Record Format:

Field Name

Field Type

Field Description

enableInteractions

Boolean

Enable Interactions

Animated

Allows animated elements of SVG images to be displayed.

Variable Name:

animated

Records:

1

Record Format:

Field Name

Field Type

Field Description

animated

Boolean

Animated

Canvas Width

Canvas width in pixels of the SVG image. Value is set when an SVG file is uploaded, and can be modified. Before a file is uploaded, the value of 0 indicates unlimited horizontal stretching and the canvas width will be equal to the viewport width.

Variable Name:

canvasWidth

Records:

1

Record Format:

Field Name

Field Type

Field Description

canvasWidth

Integer

Width

Canvas Height

Canvas height in pixels of the SVG image. Value is set when an SVG file is uploaded, and can be modified. Before a file is uploaded, the value of 0 indicates unlimited vertical stretching and the canvas height will be equal to the viewport height.

Variable Name:

canvasHeight

Records:

1

Record Format:

Field Name

Field Type

Field Description

canvasHeight

Integer

Height

Fit Mode

Defines how the image is scaled within the component's viewport. Available options are keeping original size (i.e. no scaling), scaling to fit by width, scaling to fit by height, scaling proportionally by both width and height to fit the whole image within the viewport, and stretching by both width and height independently to fill the whole viewport (the aspect ratio is not preserved).

Variable Name:

fitMode

Records:

1

Record Format:

Field Name

Field Type

Field Description

fitMode

String

Fit Mode. This property has the following selection values:

  • Original Size (default)

  • Fit Width

  • Fit Height

  • Fit Size

  • Stretch.

Default Context

The Default Context defines the context used when evaluating template bindings. This is particularly useful when referencing device variables. It behaves the same way as Default Context in Sub-dashboard components.

Variable Name:

defaultContext

Records:

1

Record Format:

Field Name

Field Type

Field Description

defaultContext

String

Default Сontext

Was this page helpful?