The SimpliScada Design Studio is a fully web-based editor that requires no installation. Simply log into the web application to begin designing your HMI screens.

The Design Studio editor is divided into three main areas:

• Main Canvas (Center): Workspace where HMI screens are built

• Toolbar (Left): Contains all objects, graphics, and alignment tools

• Properties Panel (Right): Displays configurable options for the selected object
  

Object & Image Toolbar

The left-hand toolbar provides the following components:

• Table Object (Round Table)
  Create tables ranging from 1×1 to 7×7. Rows and columns can be adjusted later in the Properties Panel.
• Text Object
  Add text elements with adjustable size, font, and alignment.
• Switches
  
  Includes:
  • Toggle Switches
  • Push Buttons
  • Momentary Switches
  • Multi-State Switches
  • Incremental Switches
• Pumps & Valves
  
  Includes:
  • Well Pumps
  • Dual-State Pumps (with animation)
  • Circular and Triangular Valves
• Images
  • Static images
  • Dynamic tank visuals (with levels and thresholds)
  • SVG upload tool
• Bars, Levels, & Gauges
  Dynamic gauge components for visualizing values
• Shapes
  Basic geometric shapes
• Embedded Graph
  Displays live tag trends directly on the canvas
• Pop-Up Overview Creator
  Used to build reusable pop-up screens (e.g., alarms, controls)
• Icons
  Action-linked icons
• Lines
  Used for layout separation or tag-linked visuals

To align multiple objects:

1. Hold Shift and select objects

2. Choose an alignment option:

• Left / Right Justify

• Top / Bottom Align

• Horizontal / Vertical Center

Additional tools:

• Trash Icon: Delete selected object

• Undo Icon: Revert recent changes
  

Editing Object Properties  

Select any object on the canvas to configure it using the Properties Panel.

Linking Sensor Data (Core Step)  

To make your HMI data-driven:

1. Select an object on the canvas

2. Click "Select Object" in the Properties Panel

3. Choose a sensor/tag from the searchable list

Options:

• Raw Value → Direct data

• Formatted Value → Uses formatting defined on the communication page

Once linked, additional configuration options will appear based on object type.

Properties Panel Breakdown  

1. Data Source

• Linked Tag: Connect to sensor data

• System Values: Use system metadata (e.g., controller status, IP, site name)
  

2. States

• Configure thresholds (HH, H, L, LL)

• Enables dynamic color/state changes
  

3. Details

• Text Objects: Font, color, alignment

• Pumps/Valves:

• On/Off states

• Confirmation prompts

• Remote control
  

• Fill color

• Dynamic Tanks:

• Level label display settings (Font Size, Min/Max Level, Interval, Label text, Label Color, Alert Color)

• Threshold colors

• Width/Height with Constrain Proportions
  

4. Formats & Formulas

• Number Formatting: Decimal precision

• Formulas: Data transformations (e.g. divide integer by 1000 to gain 3 decimal places)

• Dictionaries: Value-to-text mapping (e.g. 0=OFF, 1=ON)

• Labels: Units (e.g. PSI, GPM, pH)

• Scaling: Convert raw values to engineering units (e.g. 4–20mA)

Includes a Preview Window for validation.

5. Actions

• Remote Control - Toggles the state of a connected device (on/off)

• Open Reports - Opens a linked report

• Open URL - Navigates to a specified web address

• Set Value - Opens a text or dictionary pop-up for manual value entry (e.g. change set point)

• Graph - Opens a dynamic trend graph for the linked tag

• Pop-Up - Opens a custom pop-up window (e.g., pump control or setpoint screen)

• Overview - Navigates to a specified HMI page
  

Summary  

By combining the full range of visual objects with SimpliScada's extensive configuration options, you can build a powerful, interactive HMI that displays live data, responds to threshold conditions, and gives operators direct control!