Skip to main content

Synoptic Configuration and Design

In this section, we will explore how to configure the synoptic screen at a global level and how to manage its elements. Additionally, we will look at the concept of the synoptic as an object, allowing screens to be embedded within others.

Synoptic Properties​

By accessing the background properties (right-clicking on the empty canvas or from the synoptics list), the configuration panel will open, organized into the following tabs:

General​

In this tab, we will find the basic configuration parameters:

  • Name: Unique internal identifier for the synoptic. Used for referencing it in scripts or other parts of the application.
  • Description: The name that will be displayed in the browser tab when the synoptic is run in Runtime mode (web version).
  • Width: Width in pixels. In Runtime mode, if the screen has a different size, the synoptic will adapt and automatically center. If left blank, it will take the width of the execution screen (this may affect design tools like centering).
  • Height: Height in pixels. Like the width, it adapts to different screens but does not automatically center. If left blank, it will take the height of the execution screen.
  • Color: Defines the background color. This tone will not be visible when the synoptic is inserted as an object inside another synoptic.
  • Panelable: Allows the synoptic to be loaded within a Flexible Panel.
  • Launchable: Enables the synoptic to be sent to remote Runtime clients that are in listening mode (useful for controlling unattended screens).

Advanced​

code Script Types​

This section allows you to define the synoptic's programming logic. You can add a maximum of one script of each type:

  • Global: Designed for defining and initializing constants, global variables, and methods to be used in other scripts (both for the synoptic and its elements). It runs immediately when the synoptic starts, before the elements are loaded or rendered.
  • On Load: Executes logic once the synoptic is fully loaded and all its elements are already visible in the interface. It's ideal for initial data manipulation or component states when opening the screen, every time it is accessed.
  • Cyclic: Allows functions to run recurringly every specified time interval (milliseconds, ms). It is the perfect tool for periodic value updates, status refreshes, or continuous queries to external services.

Embedded Synoptics (Modularity)​

One of the editor's most powerful features is the ability to embed one synoptic inside another. This feature allows for modular work, treating entire screens as reusable components.

Reusability and Templates​

Instead of designing repetitive elements on every screen, you can create a standalone synoptic and then insert it into multiple views. This drastically simplifies development and ensures visual consistency across the entire project.

  • Centralized Maintenance: If you make a change to the original synoptic, the update will automatically propagate to all screens where it is embedded.
  • Complex Component Creation: You can design advanced components (such as a motor controller or a plant header) once and reuse them infinitely.

Per-Instance Customization​

What makes this tool truly flexible is that every time you insert one synoptic into another (an "instance"), the editor allows you to access the properties and styles of all its internal elements to redefine them individually.

  • Total Adaptability: You can link each element (buttons, texts, indicators) to different real variables or adjust their colors and texts specifically for that location. For example, the same control template can be used for multiple motors by linking each instance to its corresponding data, or a navigation menu can highlight the current page's button by modifying only its style on that screen.

This capability to reuse synoptics allows for building rich and complex user experiences with minimal maintenance effort, while always maintaining the link to the original design.