<< 点击显示目录 >> 主页  mappView帮助助手 > mapp View帮助信息 > Widgets  > Drawing  > Paper  > Concept

This section includes detailed information for the concept of widget "Paper".

Widget "Paper" is used to display SVG contents and manipulate certain elements. This makes it possible to display animations based on process logic. This page describes the different possibilities for manipulation, or "transformation".

For more information about the structure of SVG elements, see SVG tutorial.

For more information about coordinate systems in an SVG element, see SVG coordinate systems.

Widget properties "svgFilePath" and "svgContent" define which SVG content should be displayed. Since size specification and coordinate systems can be defined in SVG files, it is important that the size of the widget corresponds to the size of the content if the content should be fully displayed on the widget in its initial state (without zooming). It is recommended to set attributes "width" and "height" to value "100%" in the root node of the SVG files to be used.

Behavior during page change

If a transformation is currently executing on widget "Paper" and the user switches to another page in the mapp View HMI application, the transformation will continue to execute.

If the transformation string happens to change during the page change, however, the transformation is only continued after the user is back on the page containing widget "Paper".

If the transformation string changes several times during a page change, the last specified transformation is executed as soon as the user navigates to the page containing widget "Paper".

Adding SVG objects temporarily

Any SVG objects (e.g. a status text) can be displayed on widget "Paper" using property "svgContent". These objects are entered directly using SVG syntax. Binding this property to a process variable makes it possible to add or remove objects dynamically. The element is removed from widget "Paper" as soon as it is deleted from the string.

•Example

•The following string is appended to property "svgContent":

<text class="cText" font-family="Helvetica, Arial, sans-serif" font-size="25" y="380" x="200">mappView</text>

This places the text "mapp View" at coordinates X=200 and Y=380. In addition, transformations can be defined for this text. For more information about possible objects and transformations, see SVG tutorial.

Performing transformations

In order to perform a transformation, a process variable must be connected to property "transform".

Structure of the transformation string:

[{"select":argument,"parameter":argument,"parameter":[argument,argument]}]

If transformations should be triggered at the same time for multiple selected elements, the transformation string can be specified as a comma-separated list:

[{"select":argument,"parameter":argument},{"select":argument,"parameter":argument,"parameter":[argument,argument]}]

•Examples:

•[{"select":"#box","duration":10000,"display":true,"tPath":["#conveyor",false]}]

This selects object "box", makes it visible and moves it along the path with ID "conveyor". All transformations take 10 seconds.

•[{"select":"#box","duration":1000,"display":true,"fill":1,"translate":[100,-70]},{"select":"#lift","translate":[200,-20]}]

This selects object "box", makes it visible and moves it to coordinates X=100 and Y=-70. In addition, object "lift" is selected and moved to coordinates X=200 and Y=-20. All transformations applied to object "box" take 1 second. All transformations applied to object "lift" take the amount of time specified with property "transitionTime".

Parameter "select" is required for each transformation. This parameter is used to select an element in an SVG file.

The following explains all possible parameters and their arguments.

duration

This parameter overwrites the duration defined in the properties for this one operation. This duration is specified in milliseconds.

If a duration is not specified, then the duration specified with widget property "transitionTime" is used.

•Examples:

•"duration":6000

The transformation will take 6 seconds.

spin

This parameter spins the selected SVG object. This parameters requires three arguments to be specified:

•angle: Angle

•cx: Midpoint of the rotation on the x-coordinate

•cy: Midpoint of the rotation on the y-coordinate

With its arguments, the parameter looks like this: "spin":[angle,cx,cy].

•Examples:

•"spin":[45,0,0]

The object is rotated 45° around the coordinates X=0 and Y=0.

•"spin":[720,100,0]

The object completes 2 full rotations around the X=100 and Y=0.

translate

This parameter shifts the selected SVG object. This parameters requires the following arguments:

•tx: Target position on the x-axis

•ty: Target position on the y-axis

With its arguments, the parameter looks like this: "translate":[tx,ty].

The zero point of the object is shifted to the specified coordinates.

•Examples:

•"translate":[-100,0]

The zero point of the object is shifted to the coordinates X=-100 and Y=0.

•"translate":[-70,70]

The zero point of the object is shifted to the coordinates X=-70 and Y=70.

scale

This parameter modifies the size of the selected SVG object. This parameters requires the following arguments:

•sx: Scaling of the object in the x-direction.

•sy: Scaling of the object in the y-direction.

With its arguments, the parameter looks like this: "scale":[sx,sy].

•Examples:

•"scale":[0.5,1]

The size of the object in the x-direction is halved.

•"scale":[1,2]

The size of the object in the y-direction is doubled.

tPath

This parameter moves the selected SVG object along a predefined path. This parameters requires the following arguments:

•pathId: ID of the path in the SVG structure that the object should follow.

•autoRotate: Defines whether the object should rotate automatically, for example in curves. Values "true" or "false" are possible.

The following arguments can also be specified. These arguments are optional.

•startPercentage: Defines the starting point on the path. Default value: 0%

•endPercentage: Defines the endpoint on the path. Default value: 100%

With its arguments, the parameter looks like this: "tPath":["#pathId",autoRotate,startPercentage,endPercentage].

•Examples:

•"tPath":["#conveyor",false]

The object follows the entire path with ID "conveyor" and is not rotated automatically.

•"tPath":["#robot",true,20,60]

The object follows the path "robot". If the path does not travel in a straight line, then the object will be rotated automatically. The object only follows 40% of the path; the movement begins at the 20% mark.

fill

This parameter modifies the background color of the selected object. This parameters requires the following argument:

•colorIndex: Index of the background color to be used. The list of available colors is defined in property "colorList".

With its arguments, the parameter looks like this: "fill":colorIndex.

•Examples:

•"fill":3

The selected object is filled with the background color at index "3".

style (defining complex styles of an object)

This parameter modifies the style of the selected object. Depending on the object, the style could be the background color, line color, line width or line opacity. This parameter needs a string from one or more key value pairs separated by a semicolon.

The parameter and its arguments looks like this: "style":"string".

•Examples:

•"style":"fill:1;stroke:2;stroke-width:15px;stroke-opacity:0.5"

The selected object is filled with the background color at index "1"; the line color is set to the color at index "2". In addition, the line width is increased to 15 pixels and the line opacity set to 50%.

Parameter "style" can include argument "fill". If this is the case (as in the example) and the previously described "fill" parameter is used in the same transformation, then parameter "fill" has no effect and argument "fill" of parameter "style" is applied.

display

This parameter modifies the visibility of an object. This parameters requires the following argument:

•visibility: Defines whether the object should be displayed on widget "Paper" or not. Values "true" or "false" are possible.

With its arguments, the parameter looks like this: "display":visibility.

•Examples:

•"display":true

The selected object is displayed.

•"display":false

The selected object is not displayed.

Adding non-SVG elements

Tag "foreignObject" tag must be used to add other image content to an SVG image, such as a PNG or JPG image.

The width and length must also be added.

•Example

•The following string is appended to property "svgContent" with <img>:

'<foreignObject x="0" y="0" width="32" height="32"><img src="Media/Star.png" height="32" width="32"/></foreignObject>'

This places <img src="Media/Star.png"/> with the height and width of 32 at coordinates x=0 and y=0.