---
title: "How to use Synoptic Editor?"
canonical: "https://onesaitplatform.refined.site/space/DOCT/2220850635/How%20to%20use%20Synoptic%20Editor%3F"
format: markdown
---
> Macro (toc)
EN | [ES](https://onesaitplatform.atlassian.net/wiki/spaces/DOCT/pages/2220851124)
## **INTRODUCTION**
This entry aims to expose the different elements that make up the synoptic editor from the control panel.
### **General view**
### **Menu**
This icon allows us to drag the menu sideways in case it gets in the way during editing.
In this position the synoptic editor is shown and activating it shows us the gadgets along with the synoptic and hides the editor.
with the hidden synoptic editor it allows us to add new gadgets
Datalink, this icon gives us the possibility of establishing relationships between the different gadgets and the synoptic
URLparameters, allows defining which parameters will be passed through the url to be able to use them as filters in gadgets.
Configuration of pages and styles
Save
Delete
Close
### **Work space**
In this space we will draw our synoptic adding the different components
## **MENU EDITOR**
On the right of the workspace we find the editor menu, it has a button to show or hide it on the right
## **COMPONENTS MENU EDITOR**
## **DRAW:**
They are the drawing tools that allow us to add new elements such as pre-designed images, squares, rectangles, circles, lines ...
### **Components:**
pressing it opens a window with the svg code, being able to manually modify this code
wireframe mode, activating it hides the filling of the elements and only shows us the lines of the polygons, for example:
undo and redo.
Selection tool when active allows selecting elements from the workspace, dragging them, etc.
Corner tool, adjusts the workspace towards the upper left corner.
shape library, is a set of clipart that we can use for our creations, to activate it click on it and a menu will appear with the images grouped by categories, when the menu disappears you just have to make a longer click on the icon to display the menu again.
Pencil, tool to make strokes freely.
Lines, tool to make straight lines.
Paths, Paths are curves (known as Bézier curves), The Paths tool is very powerful and allows you to design sophisticated shapes.
Lets draw rectangles.
Lets draw squares.
Lets you draw freehand rectangles.
Ellipses, allows you to draw ellipses
Circles, lets you draw circles
Lets you draw freehand ellipses.
text tool, pressing it creates a text label where we can write
url image, allows adding an image to the synoptic from a url.
zoom, allows to zoom on the rectangle that we select
Grid, show or hide the grid in the work area.
zoom, permite definir el zoom al que estamos trabajando.
color palette and opacity, if we have a selected element or we are going to add a new one here we define its colors and its opacity, by left clicking we assign the fill color and with right click the color of the contour lines.
## **ELEMENTS:**
It shows the drawing properties that we can modify for the elements that we have selected, for example, of a rectangle.
If we only have a rectangle selected, the menu would appear like this:
If we select several in this way:
If we select a segment of a path:
If we select a circle:
**Common elements:**
duplicate selected items
delete selected items
bring to the front
send to the bottom
convert to path
assign hyperlink, when you press it this window appears where we can put the url, clicking on the object when leaving the editor will open a tab in the browser with that url.
if the object has a hyperlink assigned, an input appears to be able to modify the url, if we remove the content, the hyperlink is removed.
change angle of rotation
gaussian blur value
align element with respect to the page.
these are the different options
x and y position of the object in the work area.
width, height and radius of the corners (the latter for squares and rectangles)
### **Path selected:**
reorient path, if it has been given an inclination, it takes that position as the original and the inclination is reset to 0.
### **selected path segment:**
checked indicates that manipulating the line that appears above the node is done together altering the angle of the two segments equally, unmarked they are manipulated individually.
clone nodes
remove nodes
allows to open and close the path.
allows us to choose if the segment is a curve or a line
### **Several selected elements:**
We can align the elements according to these options:
We can also group and ungroup the elements.
## **PROPERTIES**:
In this section we give functionality to the different elements by selecting them. Initially there are three types of components:
### **Indicator**
It is an element of the synoptic that changes color depending on a cutoff value that we assign.
### **Progress bar**
It can be assigned to elements of the square or rectangle type. Like the indicator, it can change color based on a cutoff value. In addition, it grows percentage based on the value assigned and the upper and lower limits that we indicate.
With visible synoptic editor
with closed synoptic editor
### **Label**
If we create a text element and assign this class to it, we can do as with the previous two components and change its color depending on the cutoff value, and we can define a datasource parameter to show its value.
With visible synoptic editor
with closed synoptic editor
To these components we can assign any of the data sources that we have available and any of their attributes.
To any element we can associate javascript code associated with mouse events:
To each of these events we can add javascript, jquery code, ... use the functions of sending values or filters, for example, we can launch an alert by clicking on a circle.
Press apply changes
## **TOOLS**
Properties workspace, files, image library and drawing layers.
new image, completely clean current job, will ask for confirmation
allows importing an svg image
save the synoptic as an svg image
allows you to save the synoptic as a png or bmp image
synoptic properties where we can assign the dimensions
image library allows us to select images to assign to our synoptic.
### **Use of layers**
allows us to create, delete, name and assign the order of layers.
if we have several layers we can select an element and select the layer to which we want to move the element.
Map of the visible area of the workspace.