Allows to rotate, manually or automatically, across multiple symbols or graphics components.
The children elements, and its properties, can be defined in the Designer mode, for preview, and queries dynamics from real-time tags, database queries and other sources. The Carousel is a UI component designed to display a sequence of items, such as text or images, in a rotating format. It allows users to navigate manually or automatically through items with configurable options for item selection, cycling intervals, and visual elements like titles and progress indicators. It supports item linking from external sources, setting limits on item count, and can be customized for auto cycling, navigation controls, and hover-based pauses.
On this page:
| Table of Contents | ||||
|---|---|---|---|---|
|
Requirements
This component is Portable. It runs both on Windows and on Web Pages hosted in any platform.
Configuration
To configure a FlowPanelCarousel:
Go to Displays / Draw.
On the Components Panel, select Viewer, then Carousel.
Click or drag-and-drop it on the Drawing area to use it.
Double-click the component to open the configuration window.
Carousel Settings | |
|---|---|
Field | Description |
Selected Index |
Defines the |
index of the |
current active item in the |
carousel. |
Text: Allows the FlowPanel to display a list of simple text items. Useful for representing straightforward string values such as machine states or operational modes.
StringTag: Enables the FlowPanel to display a list of items generated from a pre-existing Tag of the Text type. This feature is particularly useful when multiple FlowPanels across different displays need to present the same information consistently.
Array: Allows the FlowPanel to display items from an array. Suitable for predefined sets of options, such as lists of sensor IDs or operational steps, enabling efficient management of uniform data.
Object: Allows the FlowPanel to display items from a collection of objects. Ideal for complex data representation where each item has multiple attributes, such as equipment lists with properties like name, ID, and status.
The object can be Databases Queries, or any realtime Tag, AssetPath, or property from the system namespaces
This value can be set manually or updated automatically when navigating through items. | |
Selected Title | Specifies the title of the currently active item in the carousel. It updates based on the selected index and can be set manually. |
Auto Cycle | Configures the automatic rotation of items in the carousel. A non-zero value enables cycling, and the interval defines the time between transitions. |
Interval (ms) | Sets the time, in milliseconds, between automatic transitions of items when Auto Cycle is enabled. |
Pause on Hover | When enabled, this option pauses the automatic item cycling when the user hovers the mouse over the carousel. |
Source | Determines the data source for the items in the carousel. The available option in the interface is "Text," specifying text-based content as input. |
Max Items | Limits the maximum number of items displayed in the carousel. This value can be set to restrict the number of items loaded from the source. |
Reload | Updates the carousel to reflect any changes made to the source or settings. Clicking this button refreshes the carousel content. |
Navigation Arrows | Toggles the visibility of navigation arrows in the carousel, allowing users to manually switch between items. |
Show Titles | Enables the display of item titles in the carousel, making it easier to identify each item in the carousel. |
Progress Indicator | Shows a visual indicator of the current position within the carousel, helping users see how many items there are and which one is active. |
TTextBlock Element | Represents an individual text item in the carousel. The element can have specific configurations like font size, margins, and linked values. |
Settings | Contains configuration details for individual items, such as linked values, font size, and margin settings, to define the visual layout of items |
Max Items
Specifies the maximum number of items that the FlowPanel can display or hold. Limits the number of items to prevent overload and improve performance.
Reload
Specifies a command or function that reloads the items in the FlowPanel. Ensures that the FlowPanel displays the most current data, useful for dynamic or real-time data sources.
Quantity
Defines how many items will be sourced from Text Source, and also displays such amount in the design preview.
Width
Defines the width of each panel, ensuring that each panel is properly sized according to the user's preferences and fits seamlessly within the FlowPanel.
Height
Defines the height of each panel, ensuring that each panel is properly sized according to the user's preferences and fits seamlessly within the FlowPanel.
Margin
. |
Runtime Execution
The TCarousel control will update the links to Selected Index, and Selected Title as the symbol that is show changing, either by the automated rotation or by user actions.
The SelectedIndex field is bi-directional, meaning if a tag is set to that property, changing the tag it will change the selected component. That allows to easily customize the look and feel and behavior of the control 
In this section:
| Page Tree | ||||
|---|---|---|---|---|
|