SVG Editor

Thingable platform tool! intended to create and edit vector images in SVG format. These images can be pivoted based on the device tags previously created on the platform. These tags can be consulted in the SCADA Database tool.

The Synoptic Editor tool resembles inkscape, a very popular application that also has the functions of creating and editing images .svg* formats.

.svg* - Created by W3C the SVG (Scalable Vectorial Graphics) is nothing more than an XML file containing specific tags to generate a vectorized image in your application. With very simple tags you can generate vectorized high quality images that, even more

that you change the proportions on the screen, have not lost quality.The SVG can still be worked with Javascript to manipulate image events. The SVG format allows for three types of graphic objects: images, texts, or vector geometric shapes. Source: Understanding and using SVG

In the Synoptic Editor icon you find the settings of the tool, see image below:

Figure 1- "Synopitc Editor" commands

Next to the icon mentioned above are the following:

- Save instant actions;

- Enable/Disable Lines Mode;

- Show/Hide Grid view mode;

- Undo/Redo Action Mode.

Side Menu (Features for creation/editing)

The part that brings together all the editing, imaging, shapes and vector features is on the side of the main screen of the tool. The menus presented allow edits to be made from a new design, or another already existing one:

Figure 2 - Drawing creation and editing commands

Features available in Side Menu:

- Image selection;

- Pencil for free drawing;

- Draw line/connection;

- Rectangle/Square freehand;

- Circle/Ellipse freehand;

- Bypass;

- Shape library;

- Enter text;

- Insert Image;

- Zoom Out;

- Polygons.

Bottom menu

Menu where you can find the color settings, image opacity, tra 90 color and zoom:

Pivoting SVG images

When building, or opening saved SVG images in the application, you can assign dynamics to them. Through the TAG'S (monitored points) already registered we can define how each dynamic will work, they are: flashing, colors, navigation, operation, protocol, value and visibility.

More details on the dynamics:

• Blink: when assigning this dynamic to the drawing, after saving the changes, the drawing will gist according to the conditions of the TAG used;

• Colors: in this dynamic, also associated with a TAG, the image will change

  as /settings, or alerts, assigned to it. Example: low level (green car), no value (white/no color) and etc...

• Navigation: for the Navigation type it is possible to select the elements of the source column (file, url or app menu) and the mode, from the choice of the source;

• Operation: similar to the "car" 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;

• Protocol: resource used to inherit protocol information from the TAG (monitored point) registered in the SCADA database;

• Value: used for changing conditions of values shown related to TAG;

• Visibility: used for state change conditions, according to visual alerts (colors) related to the TAG in question.

Step by step to pivot an image

• Open an existing schematic via the "Open Schematic" icon:

Figure 3 - Opening a Schematic/Ready Drawing

Note: To pivot a drawing that is being created, right-click on the desired figure and select "Dynamics", see:

Figure 4 - Using Dynamics feature

• When opening the dynamics resource box, the types of dynamics available in the application for use will be displayed:

Figure 5 - Dynamics Features

• Select the type of dynamics desired, in the "Dynamic" field:

Figure 6 - Choice of type of dynamics to use

• Choose the type of dynamics, in the field below, choose the TAG referring to the element that will be pivoted;

• Field ("Format") choose the format that corresponds to how many decimal places after the comma should be shown in the dynamics;

• In the selectable field below, choose the assignments to the dynamics used, for example: if you are pivoting a value, select "Value", if you are pivoting a figure that will be alarmed select the minimum to maximum alarm ranges (depending on the alarm in question);

• If it is necessary to point out the date/time that the mentioned TAG occurs, select the "Timestamp" field;

• Finally, select and edit the "Timezone", if the dynamics are related to any time zone.

After performing all the settings of the dynamics, save in the "Save" button:

Figure 7 - Configuring the dynamics

To end changes to the schematic, or image, in question, go to "Synopitc Editor", "Save Esquematic" or "Save Image".

Tips for the proper use of the tool

• For the operation of the tool in question, when using it to create and/or edit drawings, have a machine with more free memory. This is because the tool uses features similar to the inkscape application (editor and SVG file creator);

• Another suggestion is to use the resources of the inkscape application itself, create, edit and soon after exporting the drawing to our application.

In case of other questions regarding the image pivoting feature, please refer to our dedicated material on the theme: "SVG pivoting".