# SVG Booster

## SVG Booster

SVG pivoting is a tool for editing and parameterizing synthetics or schematics inserted in the thingable platform. It is very useful in applications where the user wants to view a dynamic representation of one or more processes of their business. For example, it is possible to monitor the plant of an immovable in an animated manner, that is, to identify by colors and values the monitored variables related to its property. To do this, simply configure the monitored points in the mentioned tool.

To access the tool, go to the home page of the environment and left click on the SVG Dynamizer icon, as shown below.

![Figure 1 - representative icon of SVG Dynamizer](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2Fvo2FL86ML0GPByEX2LrK%2Fimage1.png?alt=media\&token=9a6a6cee-1045-4184-997d-cecb3d0db73b)

## Resources

After accessing the tool, the screen of figure 2 will be presented. In this screen, the user has a free area with some options for parameterization of the manager. The tool features four access options: file, edit, preview, and help.

![Figure 2 - Visualization of the SVG editor tool](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2FQmquZuwc6z91eIaEXrwc%2Fimage2.png?alt=media\&token=f791b56d-a492-4b39-9fa1-f4e263b11016)

### File

In the *file tab,* the options are available:

![Figure 3 - Options available for the File tab](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2Fi1G53FW4RgdS1nq4kB93%2Fimage3.png?alt=media\&token=d8e8e4e8-541c-4b5d-b8e0-25042f55c5fe)

**Open:** The user can access a file that is already available in the tool.

**Save:** after performing the parameterization of the trustee, this option allows you to save the changes in SVG format.

**Save as:** having in the same function as the previous option, differs for cases where the user wants to save with another name. Quite used for controlling file versions.

**Import:** allows the user to import files in SVG and DWG formats, for configuration of these models in the tool (Figure 4).

![Figure 4 - Options available for the import sub tab](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2FnEhfZ6NLulCwS4nrxdIE%2Fimage4.png?alt=media\&token=d591eded-7c3a-4651-b59a-66e90f4b700f)

**Print:** Allows the user to print the configured synoptic.

### Edit

In the *edit tab,* the tool provides the options shown in figure 5:

![Figure 5 - Options available for the edit tab](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2FmRPzscXDNuh4SlIClWlt%2Fimage5.png?alt=media\&token=3cf19d82-48e4-436e-a69c-8d53c12f7920)

#### Background color

The tool allows the user to change the background color of the selected element in the synoptic (figure 6).

![Figure 6 - Options available to edit the background color](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2FB4LDvzXOYjzNHejDliiV%2Fimage6.png?alt=media\&token=5a3bf9ea-6f08-4fc6-99a4-ec5ef410c1d0)

#### Dynamics

This editing tab is one of the most important for schematic configuration. Itconsists of configuring an element of the drawing, adding a dynamic and parameterizing which actions must occur to satisfy the configured conditions. By clicking on the element with the right button we have the following ooc6es (figure 7):

![Figure 7 - Options available when clicking on the element](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2Fnx8vWMuVsWdoik0QEZAL%2F7.png?alt=media\&token=46ef5177-d75a-432f-9532-5dcf029cad58)

**Dynamics:** Opens the dynamics configuration options for the selected element.

**Remove:** Removes the selected element.

**Bring forward, move up, move down and send back:** options for overlay of the selected element.

#### **Dynamics Configuration**

To configure the dynamics of the element, the user can:

* Right-click on the element and select the "Dynamics" option.
* Click on the element, go to the edit tab and access the "Dynamics" sub tab.

The window in figure 8 will be displayed:

![Figure 8 - Options available when selecting the "dynamic" option of an element](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2FSLpjwQoYWPlb3US2jp86%2F8.png?alt=media\&token=9ccb0720-9c62-4cb5-8cb3-a2ac98097c68)

**Element name:** name referring to the parameterized element.

**Dynamics:** the dynamics configured for that element appear with the options to add more dynamics by clicking on the "+" icon in figure 8, or delete the selected dynamics by clicking on the **check box**.

**Fields type and tag:** dynamic information. The type and configuration of which animation will be performed for that element. The tag is the element reference and is linked to the point configured in the database for that variable.

Click the **"+"** icon (Figure 8) to add a new dynamic. The options below will be presented:

![Figure 9 - Options available when selecting the option to add a "dynamic" for an element](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2FgVU3vXEFGDcoPOCYoSWS%2F9.png?alt=media\&token=5ad5f722-8525-4f53-912c-3ebf17a36025)

**Element name:** name referring to the parameterized element.

**Type:** animation definition for the element. The Flash, Car, Navigation, Operation*, Protocol, Value and Visibility options are available.*

**a)Blink**

![Figure 10 - Options available when selecting the "Blink" type](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2FT9Je8fRLmBwIgEstE1wL%2F10.png?alt=media\&token=86997bf3-5428-48a7-a9d5-fef22a5a708e)

**Tag:** for the configuration of the TAG field in figure 10, you can use a reference to the TAG registered in SCADA, or a parameter configured in the Menu filter of the created application (highlighted in figure 11). In the example, we have the volume parameter configured in the menu filter, referring to the tag "1089\_AI\_0013".

To configure the volume parameter in the TAG field of figure 10, fill in the TAG field with the @volume information.

![Figure 11 - Volume parameter configured in the Menu filter](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2Fe4cUEoIh67W6lGSCOjGh%2F11.png?alt=media\&token=6e6980c5-30d9-4c41-acd7-9de4eb1a6760)

**Value Type:** definition of the *analog* or *digital coma variable.* For *analogical variable it is* possible to enable the ranges that will be pivoted to. The fields are: *upper limit, very high, high, normal, low, very low and lower* *limit.* For the digital variable, the tool provides the *on* and *off* fields to activate the dynamics.

**b) Color**

![Figure 12 - Options available when selecting the "Color" type](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2FTn9PWBreDh6Kge11ip37%2F12.1.png?alt=media\&token=d5d4d170-b0a1-44be-a8cb-bd623b9dfd91)

For the *Color* type, the TAG field that is linked to the color protocol configuration registered in the SCADA for the configured variable will be displayed (figure 12).

**c) Navigation**

The navigation dynamics allows the user to access other screens by selecting the element configured in the synthetic. In the figure below we have the parameterization options of the dynamics type:

![Figure 13 - Options available when selecting the "Navigation" type](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2Fl5TKsqtmjW8L0BMTdQ3W%2F13.png?alt=media\&token=cf65994e-66f4-45b2-832a-981c584e46d4)

For the navigation type, you can select the elements of the source column *(file, url or app menu)* and the mode from the source choice.

The origin and where the chosen dynamics will navigate, according to the selection made. The way and how the landlord will be displayed.

**File:** The user chooses a file of type SVG or DWG and chooses one of three available modes to pivot this file. In Mode, there are the  *pop-up* options (a screen with title, height and width defined by the user in the selected element is displayed), *replace or append* the *file,* as follows:

![Figure 14 - Options available when selecting the "Navigation" type in the file source](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2F5NVKzrTRqvqJ3ckil5nU%2F14.png?alt=media\&token=4dc55198-5166-4f5f-8ab2-1e19b1deacd0)

**Url:** The user selects a source url and a mode for its action. In mode, there are *pop-up* and *override options as* below:

![Figure 15 - Options available when selecting the "Navigation" type in the URL source](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2FLCYV1xAp0wpmJa67vQuE%2F15.png?alt=media\&token=f25eb742-0554-4ab7-9ec3-5f42a6113f79)

**App menu:** Selects *an app's Menu Name for* *navigation.*

![Figure 16 - Options available when selecting the "Navigation" type in the App Menu source](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2F5UaVy9ruh1Yph6OsNTK8%2F16.png?alt=media\&token=51c5543f-4d4e-47cd-868e-32df81431dbf)

**d) Operation**

![Figure 17 - Options available when selecting the "Operation" type](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2FyCEjFxuBAWmnBfTpxnd7%2Fimage13.png?alt=media\&token=ea29ea31-59c4-460c-a199-9f877d110b67)

Similar to the "color" type, in the "operation" type the integrator configures the TAG referring to the element and its information is inherited from the point configured in the SCADA database.

**e) Protocol**

![Figure 18 - Options available when selecting the "Protocol" type](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2FczceV7BBObTrWjdntAfC%2Fimage14.png?alt=media\&token=0a974411-68cc-4ae6-9224-9c5afa6bcfe1)

Similar to the "color" and "operation" types, the "protocol" type allows the integrator to configure the TAG for the element and its information is inherited from the point, which is configured in the SCADA database.

**f) Value**

![Figure 19 - Options available when selecting the "Value" type](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2FFIneVmIXT9lVZ4wl2Fju%2Fimage15.png?alt=media\&token=b25087b3-039f-420b-8439-51aa4d875248)

In the "Value" type, the user configures the TAG referring to the element and its information is inherited from the point configured in the SCADA database.

The return in the synthetic and the value in numerical format, defined in the *format field.* To set up with two decimal places, for example, just add %.2f. The *Sub Values* field determines which value for the TAG will be returned. If it is the measured value itself, select the *Value.* To return values other than the measured value, select the fields Max*, Min, Prop Max* (maximum property or *High Limit Value configured in* *the SCADA database), Prop Min* (minimum property or *Low Limit Value configured in* *the SCADA database)* and *Timestamp* (example format ***dd/MM/yy HH:mm:ss**),* for all Sub *Values* previously configured at the point of the SCADA database.

**g) Visibility**

![Figure 20 - Options available when selecting the "Visibility" type](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2FvFma2XK7WNqzJun34jm7%2Fimage16.png?alt=media\&token=937909c1-517e-4a15-aa67-ab0916d402c1)

The "Visibility" type has the following configuration fields and these fields determine whether or not the element will be displayed in the synoptic:

**Tag:** to configure the TAG field, you can use as a reference the TAG registered in SCADA, or a parameter referring to the tag configured in the menu filter of the application, just enable the field "Use ID as TAG".

**Value type:** definition of the variable as *analog* or *digital.* For *analog variable it is* possible to enable the tracks that will have pivoting. The fields are: *upper limit, very high, high, normal, low, very low and lower* *limit.* For the digital variable, the tool provides the fields *on and off* to enable dynamics.

#### Source Code

![Figure 21 - Option to view the synoptic source code](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2FZezraIthOBwuoCFfkTJ3%2Fimage17.png?alt=media\&token=2f8fe801-106d-4a6a-8413-63849c6f164d)

In the sub tab "source code" appear settings and parameterizations performed in the editing of the synthetic via HTML code. It is possible to edit the synoptic in a textual way, through programming codes.

### View

![Figure 22 - Tab view "view"](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2FHx4HeuvhV5EtLo4ePPET%2Fimage18.png?alt=media\&token=95a3ede3-5dd9-432b-81b8-ec9554b41b07)

In the view tab you have the options:

* Hide the grid, as shown in figure 23.

![Figure 23 - View in the "Hide the grid" option](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2FukHvinO8I0ERbppfqZiE%2Fimage19.png?alt=media\&token=d021c31d-23a4-47b1-895f-d6ab9dda7300)

* Default view: View defined when the SVG Dynamizer tool is accessed.
* ViewPort: allows the user to configure the positioning of the sinus (coordinates, height, width and zoom).

![Figure 24 - "ViewPort" configuration screen](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2FZr3umcsEf6DcLEOgP03l%2Fimage20.png?alt=media\&token=1b3d04ae-5a4f-48d8-97ae-8b067dae442e)

### Help

![Figure 25 - View of the "help" tab](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2FHeC3dB6VmMkIb1Fsqh4R%2Fimage21.png?alt=media\&token=b82b22f0-14df-42c9-a365-02ef039eacd4)

In this tab, you can access the "Keyboard shortcuts" option to view the tool's default shortcuts. The following are the commands:

![Figure 26 - Keyboard shortcuts for SVG Dynamizer tool](https://1170984329-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6QG5OtWklpiaYy9VwXbZ%2Fuploads%2FFbb3O7V1G0Eld6yyxOYc%2Fimage22.png?alt=media\&token=f21e50e8-c709-4535-9e23-3d56a06abf12)