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

Next to the icon mentioned above are the following:

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:

Features available in Side Menu:

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:

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

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

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

  • 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:

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".

Last updated