SCADA Editor

Overview

Tips

The FastBee SCADA editor consists of a top toolbar, a left component library, a central canvas, and a right configuration panel.

Main areas:

• Toolbar: common operations such as copy, delete, bring to front, send to back, rotate, align, group, lock, image library, import, export, undo, redo, zoom, save, and preview.
• PC page: supports Web page design with multiple resolutions.
• Mobile page: supports separate mobile design. If mobile design is not enabled, the mobile side displays the PC page by default.
• Component library: provides basic components, interaction components, statistical components, and chart components.
• Image library: provides uploaded materials and advanced visual controls.
• Canvas: the design area where components are placed and combined.
• Layout panel: configures position, size, color, and visual style.
• Data panel: binds component data through MQTT or HTTP and configures interaction.
• Layer panel: views component hierarchy, names, visibility, lock state, edit actions, and deletion.

Component Configuration

Page Configuration

Click a blank area on the canvas to show the page configuration panel.

Common settings:

• Background name.
• Resolution and custom canvas size.
• Background color.
• Background image.
• Drag and zoom in preview mode.

Style Settings

Select a component to configure its style in the right panel.

Common settings:

• Position and size: X/Y coordinates, width, and height.
• Component name: used to identify the component in the editor and layer panel.
• Rotation angle: rotate around the component center.
• Basic style: layer height, background color, opacity, border radius, shadow, visibility, and similar attributes.
• Component-specific properties: for example, text content, alignment, font, size, color, border, and border color.

Data Binding

Data binding configures component variables, events, animations, and interactions.

Parameter binding:

1. Bind devices from the top toolbar.
2. Select the variable used by the component.

Event binding supports click actions such as writing variables, jumping to external links, or opening completed SCADA pages.

Animation effects include visibility, rotation, blinking, sliding, and brightness.

Conditional fill color and status switches can be configured from the data panel.

Layer Management

Layer management supports renaming, changing hierarchy, locking, unlocking, hiding, showing, and deleting components.

Toolbar

The toolbar provides common canvas operations.

Toolbar functions:

• Copy and delete selected components.
• Bring to front or send to back.
• Rotate clockwise, counterclockwise, horizontally, vertically, or by custom angle.
• Align selected components by direction, center line, or equal spacing.
• Group and ungroup components.
• Lock and unlock components.
• Open image library.
• Bind devices.
• Import and export SCADA projects.
• Undo and redo.
• Zoom the canvas.
• Save the design manually.
• Preview the current page.
• Open help documentation.

Component Library

Components are the core of SCADA pages. Drag required components onto the canvas, configure style and data, and combine them into industrial monitoring scenes.

Component categories include:

• Basic components: common elements, status elements, and interaction elements.
• Statistical charts.
• Image-library components.
• Chart components.
• Model components.
• Custom components.

Common Components

Common components include panels, text, digital display boxes, variable calculation, digital panels, status switches, water flow, liquid level, Ezviz video, live video, generic video, video monitoring, time, map, weather, alarm records, maintenance records, VR scenes, and data tables.

Variable Calculation

Variable calculation uses bound variable data as dynamic input and displays the calculated result. It supports property variables, operators, and numeric constants.

Examples:

A + B + 10
A - B - 10
A * B * 10
A / B / 10
A % 10
(A + B) * 10

Binding notes:

• Template SCADA only needs variable selection; devices inherit from the product.
• Scene SCADA selects the data source and the property variable to calculate.
• Independent SCADA selects a device first, then selects the property variable.

Digital Panel

The digital panel combines multiple digital displays and avoids repeated manual assembly. It supports multiple parameters, custom title, and configurable columns.

Design Suggestions

1. Define page resolution before dragging components.
2. Use consistent naming for components and layers.
3. Bind devices and variables after the page structure is stable.
4. Use animation only where it helps users notice state changes.
5. Preview frequently to check scaling, layout, and data refresh.
6. Export important SCADA projects before major changes.