Button: Overlay

Description

The Overlay Button opens a floating window (overlay) on top of the current page — without fullscreen takeover.

Unlike popups, overlays appear at a precise position on the screen, making them ideal for contextual or tool-like information panels.

Use Cases

This button is perfect for:

Viewing Alarm History next to a live dashboard
Opening Logger output next to active components
Displaying detailed info from another page in a sidebar
Adding dynamic side panels like “Machine Details” or “Sensor Logs”
Showing a small instruction panel next to an input control
Presenting comparison views without losing context

How it Works

The overlay behavior is defined by three key settings:

Select either:

A Page — any uploaded or created project page
A Component:
- Alarms
- Alarms History
- Alarms Overview
- Logger

The overlay will display the selected content inside a container, not as a fullscreen page.

2. Position (Required)

You must define where the overlay appears on screen using this syntax:

This format controls:

Horizontal anchor ([code_block_0], [code_block_1], [code_block_2])
Vertical anchor ([code_block_3], [code_block_1], [code_block_5])
Overlay alignment to screen corners or center

Examples:

[code_block_6] → Top-left corner
[code_block_7] → Bottom-right corner
[code_block_8] → Centered overlay

You can position the overlay relative to the button or screen edges.

3. Label

Defines the button text shown to users.
Can be combined with icons or styled text for better UI integration.

Summary

The Overlay Button is your tool for adding non-blocking, floating windows —
perfect for side-by-side views, dynamic interactions, or layered information.

No page switching
No fullscreen overlays
Just efficient, positioned content overlays

Pages