Skip to main content

Scenario Management

The "Scenario" tab allows you to manage all scenarios associated with equipment. You can create, modify, delete, and enable/disable your scenarios from this visual card interface.

Accessing the Scenario Tab​

To access equipment scenario management:

  1. Click on "Configure equipment" in your equipment listing
  2. Then click on the "Scenario" tab
  3. Scenarios are displayed as cards organized in a grid.

Interface Overview​

The interface consists of two main areas:

Header (top bar)​

On the left: "Configured Scenarios"

On the right: Two action buttons

  • 🔄 "Synchronize with equipment": Opens the synchronization modal
    • Disabled if equipment is not reachable via MQTT
  • ➕ "New scenario": Creates a new scenario

Card Area​

When you have configured scenarios, they are displayed as a card grid.

Premium Feature​

Subscription Required

Scenarios are a feature available only with a Premium or Demo subscription.

If you don't have permissions, you will see:

  • A lock message with icon 🔒
  • A "Upgrade my subscription" button
  • Existing scenario cards will be displayed with reduced opacity (read-only)

Scenario Cards​

Each scenario is represented by a visual card containing all information and actions.

Card Structure​

1. Card Header​

Scenario name (clickable for editing):

  • Click on the name to quickly edit the scenario name

Badges on the right:

  • 🟡 "To sync" badge (orange): Displayed if the scenario needs to be synchronized
    • Appears if never synchronized
    • Appears if modified since last sync
    • On hover: tooltip explaining the reason
  • 🟢 "Active" badge (green) or 🔘 "Inactive" badge (gray)

2. Scenario Information​

Three lines of information:

Line 1: Composition

  • Diagram icon
  • "[X] blocks • [Y] parameters"
  • Example: "5 blocks • 2 parameters"

Line 2: Last modification

  • Clock icon
  • "Modified [relative date]"
  • Example: "Modified 2 hours ago"
  • On hover: exact date in format "DD/MM/YYYY at HH:mm:ss"

Line 3: Synchronization status

  • 🟢 If synchronized:
    • Circular arrow icon
    • "Synchronized [relative date]" in green
    • Example: "Synchronized 10 minutes ago"
  • 🟡 If never synchronized:
    • Warning triangle icon
    • "Never synchronized" in orange

On the left: Enable/disable switch

  • Label "Enabled" (if active) or "Disabled" (if inactive)
  • Disabled during operation (spinner)

On the right: Action buttons

  • 🖊️ Edit button (pencil icon, green on hover)
    • Opens the canvas with the scenario loaded
  • 🗑️ Delete button (trash icon, red on hover)
    • Opens a confirmation modal

Creating a New Scenario​

Method 1: "New scenario" Button​

  1. Click on the "New scenario" button on the right
  2. The canvas opens directly in creation mode

Method 2: First Scenario​

If you have no scenarios, an empty screen displays with:

  • "No configured scenarios" message
  • "Create my first scenario" button
Naming Advice

Choose clear and descriptive names for your scenarios. This will make management easier when you have several.

Editing a Scenario​

Three ways to edit a scenario:

1. Via the pencil button on the card​

  1. Locate the scenario card
  2. Click on the button with pencil icon (green)
  3. The canvas opens with the scenario loaded
  4. Modify blocks, parameters, connections
  5. Save changes (Ctrl+S or button)

2. Via the scenario name (quick edit)​

To modify only the name:

  1. Click on the scenario name in the card
  2. A modal opens with a text field
  3. Modify the name
  4. Validate with Enter or the save button
  5. Cancel with Escape or the cancel button
Automatic Save

The name edit is saved immediately, independent of the scenario content.

3. Double-click on the card​

You can also double-click anywhere on the card to open the canvas.

Warning

After modifying a scenario, don't forget to synchronize it with the equipment for changes to be applied! An orange "To sync" badge will appear automatically.

Deleting a Scenario​

Deletion Process​

  1. Locate the scenario card to delete
  2. Click on the trash button (red)
  3. A confirmation modal opens

Confirmation Modal​

The modal displays:

  • Trash icon in a transparent red circle
  • Title: "Delete scenario"
  • Message: "Are you sure you want to delete this scenario? This action is irreversible."
  • Box with the name of the scenario to delete
  • Two buttons:
    • "Cancel" (gray) - Closes the modal without deleting
    • "Delete" (red) - Confirms deletion

During Deletion​

  • The button displays "Deleting..." with a spinner
  • Buttons are disabled
  • Deletion is executed on the server side
Permanent Deletion

⚠️ Deleting a scenario from the DB is irreversible!

If you simply want to temporarily stop execution:

  • ✅ Disable the scenario (switch)
  • ❌ Do not delete it

What Happens After Deletion?​

  1. ✅ The scenario is deleted from the database
  2. ❌ The scenario remains present in the equipment
  3. 🔄 It will appear as "orphan" during the next synchronization
  4. 🗑️ You can delete it from equipment via the synchronization modal

Enable/Disable a Scenario​

Enabling and disabling allows controlling scenario execution without deleting them.

Activation Switch​

Each card has a toggle switch at the bottom left:

Enabled state:

  • Switch in right position (blue/green)
  • "Enabled" label
  • Green "Active" badge at top
  • Green left border

Disabled state:

  • Switch in left position (gray)
  • "Disabled" label
  • Gray "Inactive" badge at top
  • Gray left border

Toggle State​

  1. Click on the switch or its label
  2. State toggles instantly in the DB
  3. The switch is disabled during operation (prevents double-clicks)
  4. An orange "To sync" badge appears automatically
  5. The scenario must be synchronized for the change to apply to equipment
Synchronization Required

The active/inactive state change is saved immediately in DB, but only takes effect on equipment after synchronization.

The "To sync" badge reminds you that synchronization is needed.

Usefulness of Enable/Disable​

This feature is very useful for:

  • ✅ Testing a scenario before enabling it permanently
  • ✅ Temporarily disabling a seasonal scenario
    • Example: Heating in summer, air conditioning in winter
  • ✅ Debugging by isolating problematic scenarios
  • ✅ Managing exceptional situations without losing configuration
    • Example: Disabling during maintenance
  • ✅ Saving memory on equipment without losing the scenario

"To sync" Badge (To Synchronize)​

When Does It Appear?​

The orange "To sync" badge with warning triangle icon appears automatically in two cases:

  1. Never synchronized: lastSyncAt is null

    • Tooltip: "This scenario has never been synchronized with the controller"

  2. Modified since last sync: updatedAt > lastSyncAt

    • Tooltip: "This scenario has been modified and needs to be synchronized with the controller"

What to Do When You See This Badge?​

  1. Note scenarios with this badge
  2. Click on "Synchronize with equipment"
  3. In the modal, these scenarios will appear as "To update" or "Not synchronized"
  4. Perform synchronization
  5. The badge disappears once synchronized
Best Practice

Synchronize your scenarios regularly to avoid accumulating too many unsynchronized changes. This makes debugging easier in case of problems.

Date Information​

Display Format​

Dates use moment.js for user-friendly relative display:

  • "a few seconds ago"
  • "2 minutes ago"
  • "1 hour ago"
  • "3 days ago"
  • "2 months ago"

On Hover (Tooltip)​

Hover over the date to see the exact format:

  • Format: "DD/MM/YYYY at HH:mm:ss"
  • Example: "20/10/2025 at 14:32:45"

Color Codes​

  • 🔵 Gray: Modification date (neutral)
  • 🟢 Green: Synchronization date (success)
  • 🟡 Orange: "Never synchronized" (warning)

Design and User Experience​

Visual Style​

Cards use a modern design with:

  • Dark background with glass effect (backdrop-filter)
  • Subtle gradients for depth
  • Translucent borders that become more visible on hover
  • Smooth transition effects on all interactions

Responsive Design​

The grid adapts automatically:

  • Mobile (< 768px): 1 column
  • Tablet (768-992px): 2 columns
  • Desktop (992-1200px): 3 columns
  • Large desktop (> 1200px): 4 columns

Animations​

  • Card hover: Slight elevation (-2px) and brightening
  • Button hover: Enlargement (scale 1.05) and color change
  • Transitions: 0.2s ease for all animations

Accessibility​

  • ✅ Informative tooltips on all interactive elements
  • ✅ Pointer cursor on clickable elements
  • ✅ Immediate visual feedback on actions
  • ✅ Clearly identifiable disabled states
  • ✅ Sufficient contrast for readability

Empty State (No Scenarios)​

When no scenarios exist, the interface displays:

  • Large icon diagram (bi-diagram-3) in gray
  • Title: "No configured scenarios"
  • Message: "Create your first scenario to automate your equipment."
  • CTA Button: "Create my first scenario" with + icon
First Scenario

This is the perfect time to start! Click the button and create your first automation scenario. You can start simple and gradually increase complexity.

Shortcuts and Tips​

Keyboard Shortcuts​

When a name edit modal is open:

  • Enter: Validate and save
  • Escape: Cancel and close

Quick Interactions​

  • Click on name: Quickly edit the name
  • Click on pencil: Open the full canvas
  • Click on switch: Toggle active/inactive
  • Double-click on card: Open the canvas

Quick Visual Indicators​

  • Green border = Active
  • Gray border = Inactive
  • Orange badge = Needs synchronization
  • Orange text = Never synchronized
  • Green text = Last sync

Best Practices​

For effective scenario management:

✅ Name clearly: Use descriptive and explicit names ✅ Add descriptions: Document complex scenarios ✅ Synchronize regularly: Don't let "To sync" badges accumulate ✅ Disable rather than delete: For temporary scenarios ✅ Organize by function: Mentally group scenarios by zone or function ✅ Test after modification: Verify behavior after each change ✅ Monitor badges: Visual indicators guide you ✅ Clean up regularly: Delete truly obsolete scenarios

Limitations and Considerations​

Permissions​

  • ❌ Without Premium/Demo subscription: Read-only (50% opacity)
  • ✅ With subscription: All features available

Performance​

  • The grid loads all scenarios at once (no pagination currently)
  • Recommended: Keep a reasonable number of scenarios (< 50) for optimal performance

Synchronization​

  • Changes are saved to DB immediately
  • But only take effect on equipment after synchronization
  • Always remember to synchronize after your changes

Next Step​

Now that you know how to manage your scenarios, discover how to create and modify them in the creation interface: Creation Interface (Canvas)