Creation Interface: The Canvas

The canvas is the visual interface that allows you to create and modify your scenarios by assembling logic blocks. This intuitive approach makes creating complex automations accessible to everyone.

Accessing the Canvas

The canvas opens automatically when you:

1. Create a new scenario from the Scenario tab
2. Edit an existing scenario by clicking the edit button

Interface Overview

The canvas interface consists of several areas:

1. Top Toolbar

At the top of the screen, you'll find:

• Scenario name: Click on it to rename
• Save button: Saves your changes to the database
• Import button: Imports a scenario from a file
• Export button: Exports the current scenario to a file
• Close button: Exits the canvas (with confirmation if unsaved)

2. Block Palette

On the left side, the palette contains all available blocks, organized in two tabs:

"Logic" Tab

Contains the 7 fundamental logic blocks:

• IF: Logic condition
• AND: AND logic operator
• OR: OR logic operator
• ACTION: Action to execute
• TIMER: Time delay
• PARAMETER: Variable parameter
• ALERT: Notification alert

"Sensors" Tab

Dynamically displays all sensors from your equipment:

• Digital inputs: ON/OFF states
• Analog inputs: Measured values
• PT1000 inputs: Temperature probes
• Digital outputs: ON/OFF commands
• Analog outputs: Output values

3. Work Area (Canvas)

In the center, the work area where you assemble your blocks to create the scenario logic.

4. Properties Panel

On the right side, the panel displays the properties of the selected block, allowing you to configure its parameters.

Renaming a Scenario

To rename your scenario:

1. Click on the scenario name at the top of the interface
2. The field becomes editable
3. Enter the new name
4. Press Enter or click outside the field to validate
5. The name is updated immediately

Tip

You can rename a scenario at any time, even without saving other changes. The name is saved separately.

Available Blocks

Your scenario uses two categories of blocks: logic blocks and sensor blocks.

🔷 Logic Blocks

Logic blocks constitute the structure of your scenario. They define conditions, actions, and execution flow.

"IF" Block (Condition)

• Function: Defines a condition that must be met to execute actions
• Configuration:
  • Select a sensor (input or output)
  • Choose a comparison operator (=, ≠, >, <, ≥, ≤, between, contains, etc.)
  • Define the value(s) to compare
  • Option to use a variable parameter instead of a fixed value
• Example: If temperature > 25°C

Available operators:

• Equal / Not equal to
• Greater than / Less than
• Greater than or equal / Less than or equal
• Between / Not between (requires two values)
• Contains / Does not contain
• Starts with / Ends with
• Is empty / Is not empty

"AND" Block (Logic operator)

• Function: Combines multiple conditions - all must be true
• Configuration: Dynamic number of inputs (2 to 5 possible conditions)
• Example: Temperature > 25°C AND Light < 50 lux

"OR" Block (Logic operator)

• Function: Combines multiple conditions - at least one must be true
• Configuration: Dynamic number of inputs (2 to 5 possible conditions)
• Example: Motion detected OR Door open

"ACTION" Block

• Function: Executes an action on an output
• Configuration:
  • Select an output (digital or analog)
  • Action type: Activate (ON), Deactivate (OFF), or Set a value
  • For analog outputs: define the value to apply
  • Option to set a duration for timed actions
• Example: Activate output 1, Set analog output 2 to 50%

Action types:

• SET_ON: Activate a digital output
• SET_OFF: Deactivate a digital output
• SET_VALUE: Set a value for an analog output

"TIMER" Block (Time delay)

• Function: Adds a delay before executing the next action
• Configuration:
  • Delay duration
  • Time unit: seconds, minutes, or hours
• Example: Wait 5 minutes before executing the action

"PARAMETER" Block (Variable)

• Function: Defines a reusable parameter throughout the scenario
• Configuration:
  • Parameter name
  • Default value
  • Description (optional)
• Usage: Parameters can be used in conditions and actions instead of fixed values
• Example: Create a parameter "Set temperature" = 21°C

Parameter Advantage

Parameters allow easy modification of scenario values without having to edit each block individually. Perfect for thresholds or values that change regularly.

"ALERT" Block (Notification)

• Function: Sends an alert/notification
• Configuration:
  • Alert type: Email or SMS
  • List of recipients
  • Custom message
• Example: Send an email to admin@example.com with "Critical temperature reached"

🔌 Sensor Blocks

Sensor blocks represent the physical inputs and outputs of your equipment. They are automatically generated based on your hardware configuration.

Digital Inputs

• Function: Represent on/off sensors (ON/OFF)
• State: Boolean (Active/Inactive)
• Examples: Presence detector, switch, door contact
• Icon: 🔘 Toggle

Analog Inputs

• Function: Measure continuous values
• State: Numeric value with unit of measure
• Examples: Light sensor (lux), humidity sensor (%), pressure sensor (bar)
• Icon: ⚡ Speedometer
• Configuration: Min/Max configurable according to sensor type

PT1000 Inputs (Temperature probes)

• Function: Measure temperature with high precision
• State: Value in °C
• Examples: Ambient temperature probe, heating probe
• Icon: 🌡️ Thermometer
• Precision: Display with 1 decimal place

Digital Outputs

• Function: Control on/off equipment
• State: Boolean (ON/OFF)
• Examples: Relay, solenoid valve, contactor
• Icon: ⚡ Power
• Possible actions: Activate, Deactivate

Analog Outputs

• Function: Control continuously variable equipment
• State: Numeric value with unit
• Examples: Speed drive, proportional valve, dimmer
• Icon: 🎚️ Sliders
• Possible actions: Set a precise value (0-100%, 0-10V, 4-20mA depending on configuration)

Real-Time Data

Sensor blocks display real-time values when your equipment is connected. A WiFi indicator appears in the "Sensors" tab when real-time data is active.

Using Blocks

Switch Tabs in the Palette

The palette offers two tabs that you can alternate between:

1. "Logic" tab: Access the 7 fundamental logic blocks
2. "Sensors" tab: View all your equipment sensors in real-time

Real-time indicator: When the equipment is connected, a WiFi badge 📶 appears on the "Sensors" tab to confirm that displayed values are in real-time.

Add a Logic Block to the Canvas

1. Click on the "Logic" tab in the palette
2. Find the desired block (IF, AND, OR, ACTION, TIMER, PARAMETER, ALERT)
3. Drag and drop the block onto the work area
4. The block appears and can be positioned freely

Add a Sensor Block to the Canvas

1. Click on the "Sensors" tab in the palette
2. The list displays all your sensors with their current values
3. Find the desired sensor (e.g., "Living Room Temperature - 22.5°C")
4. Drag and drop the sensor onto the work area
5. The sensor block appears with its information

Real-Time Values

Sensor blocks in the palette display their real-time values when the equipment is connected. This helps you choose the right sensors and define relevant thresholds.

Connect Blocks

1. Click on the connection point of a block (small circle)
2. Hold and drag to the connection point of another block
3. A connection line appears
4. Release to create the connection

Connection Types

• Input/Output: Defines the scenario execution flow
• Data: Transmits values between blocks
• Connections are colored according to their type

Configure a Block

Configuration depends on the selected block type:

Configure an "IF" Block (Condition)

1. Select the block by clicking on it
2. The properties panel displays on the right
3. Choose the input/output type (digital input, analog input, PT1000, etc.)
4. Select the sensor index
5. Choose the operator (=, ≠, >, <, ≥, ≤, between, etc.)
6. Define the comparison value (fixed or parameter)
7. For the "between" operator, also define the second value

Configure an "ACTION" Block

1. Select the output type (digital or analog output)
2. Choose the output index
3. Select the action type:
   • SET_ON: Activate (for digital outputs)
   • SET_OFF: Deactivate (for digital outputs)
   • SET_VALUE: Set a value (for analog outputs)
4. For SET_VALUE, define the value to apply
5. Optional: Define a duration for a timed action

Configure a "PARAMETER" Block

1. Enter the parameter name (e.g., "Set temperature")
2. Define the default value
3. Add a description (optional but recommended)

Configure a "TIMER" Block

1. Enter the delay duration
2. Select the unit: seconds, minutes, or hours

Configure an "ALERT" Block

1. Choose the type: Email or SMS
2. Add the list of recipients (email addresses or phone numbers)
3. Write the alert message

Configure an "AND" or "OR" Block

1. Define the number of inputs (from 2 to 5)
2. Connect the conditions to the different inputs

Delete a Block

1. Select the block to delete
2. Press the Delete or Del key
3. Or click on the block's trash icon
4. The block and its connections are deleted

Duplicate a Block

1. Select the block to duplicate
2. Use Ctrl+D (or Cmd+D on Mac)
3. Or click on the block's duplicate icon
4. An identical new block appears next to it

Canvas Navigation

Zoom

• Mouse wheel: Zoom in/out
• Ctrl + Wheel: More precise zoom
• +/- buttons: Top right of canvas
• Ctrl+0: Reset zoom to 100%

Movement

• Right-click + drag: Moves the canvas view
• Spacebar + drag: Alternative to move the view
• Minimap: Bottom right for an overview

Import a Scenario

Importing allows you to load a scenario from a file (shared by someone or previously saved).

1. Click on the "Import" button
2. Select the scenario file (.json or .scenario)
3. The scenario is loaded into the canvas
4. Review and modify if necessary
5. Save to store in the database

Import Warning

Importing replaces the current scenario in the canvas. If you have unsaved changes, they will be lost (after confirmation).

Export a Scenario

Exporting allows you to save a scenario to a file, useful for:

• Sharing a scenario with other users
• Backing up a scenario before modifying it
• Reusing a scenario on another equipment
• Archiving configurations

To export:

1. Click on the "Export" button
2. Choose the save location
3. Give a name to the file
4. The file is created in .json or .scenario format

Scenario Sharing

You can create a library of template scenarios and share them with your team or the community!

Save a Scenario

Saving stores your scenario in the database.

Simple Save

1. Click on the "Save" button
2. The scenario is saved to the DB
3. A confirmation message appears
4. The scenario is not yet on the equipment (requires synchronization)

Save with Validation

Before saving, the system checks:

✅ Logic consistency: Blocks are correctly connected ✅ Complete configuration: All required parameters are filled ✅ No infinite loops: Logic doesn't create cycles ✅ Equipment compatibility: Equipment supports all actions ✅ Sensor validity: Referenced inputs/outputs exist on equipment ✅ Consistent I/O types: Actions match output types (e.g., no SET_VALUE on digital output)

In Case of Validation Error

If errors are detected:

1. An error panel displays
2. Problematic blocks are highlighted in red
3. Click on an error to navigate to the concerned block
4. Correct the errors
5. Try to save again

Auto-save

The canvas automatically saves a local draft every minute. In case of accidental closure, you can recover your work.

Complex Conditions

You can create very sophisticated scenarios by combining multiple blocks:

Example 1: Smart Lighting

Scenario: Automatically turn on light when it's dark and there's movement

Composition:

• IF block: Light sensor < 50 lux
• AND block: Logic operator
• IF block: Motion detector = ON
• ACTION block: Activate Light output (ON)
• TIMER block: Wait 5 minutes
• IF block: Motion detector = OFF
• ACTION block: Deactivate Light output (OFF)

Example 2: Heating Management with Parameter

Scenario: Regulate heating according to temperature with a variable setpoint

Composition:

• PARAMETER block: "Set temperature" = 21°C
• IF block: PT1000 probe < Parameter "Set temperature"
• ACTION block: Activate heating (ON)
• (ELSE branch)
• IF block: PT1000 probe > (Parameter + 1°C)
• ACTION block: Deactivate heating (OFF)

Example 3: Temperature Alert with Notification

Scenario: Send an alert if temperature exceeds a critical threshold

Composition:

• IF block: PT1000 probe > 30°C
• ALERT block: Email to admin@example.com - "Critical temperature: exceeded 30°C"
• ACTION block: Activate ventilation (ON)
• TIMER block: Wait 10 seconds
• IF block: PT1000 probe > 35°C
• ALERT block: SMS to supervisor - "URGENT: Temperature > 35°C"

Example 4: OR Logic with Multiple Sensors

Scenario: Activate alarm if a door or window opens

Composition:

• IF block: Door sensor = ON
• OR block: Logic operator
• IF block: Window sensor = ON
• OR block: Logic operator (to add more sensors)
• IF block: Window sensor 2 = ON
• ACTION block: Activate alarm (ON)
• ALERT block: SMS - "Intrusion detected"

Progressive Building

Start with a simple scenario with 2-3 blocks, test it, then gradually add additional conditions and actions. It's easier to debug!

Keyboard Shortcuts

To save time:

Shortcut	Action
Ctrl+S	Save scenario
Ctrl+Z	Undo
Ctrl+Y	Redo
Ctrl+C	Copy selected block
Ctrl+V	Paste block
Ctrl+D	Duplicate block
Delete	Delete selected block
Ctrl+0	Reset zoom
Ctrl+F	Search for a block
Esc	Deselect

Best Practices

To create efficient scenarios:

✅ Test progressively: Start simple then add complexity ✅ Use parameters: For values that may change (thresholds, setpoints) ✅ Organize visually: Align blocks for better readability ✅ Name clearly: Give explicit names to parameters and scenarios ✅ Monitor real-time values: Use the Sensors tab to see current states ✅ Validate regularly: Save often to check consistency ✅ Export important scenarios: Keep a backup copy ✅ Limit AND/OR operators: Maximum 5 inputs to keep logic readable ✅ Use TIMERS judiciously: Avoid excessively long delays that block execution

---

Next Step

Now that you've mastered scenario creation, learn how to synchronize them with your equipment: Equipment Synchronization