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.
The child elements and their properties can be defined in Designer mode for preview, as well as for dynamic queries from real-time tags, database queries, and other sources.
On this page:
Requirements
This component is Portable. It runs both on Windows and on Web Pages hosted in any platform.
Configuration
To configure a Carousel:
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. 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. Options include Text for static text input, StringTag for tagged text elements, Array for data lists, and Object for structured data types. Text: Allows manual configuration of items using static text. Items and their properties are defined with case-sensitive element and property names. Suitable for defining symbols or controls, with properties linked to static or dynamic values. StringTag: Similar to the Text source but links item properties to dynamic SCADA tags. This allows the configuration of items that respond to real-time data changes. Used for dynamically updating symbols based on tag values. Array: Uses a string array where each entry defines an item and its properties. This enables dynamic generation of multiple items at once, useful for scenarios with several items. Each item follows the same format as Text or StringTag. Object: Uses a DataTable or DataTemplate for advanced configurations. Each row in the table represents an item, and each column defines the item's properties. Ideal for configurations that source data from databases or templates. |
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. |
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: