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. Options include Designer for static input, StringTag for tagged text elements, ArrayTag for data lists, and DataTable for structured data types. Designer: Enables manual configuration of items through the Carousel Dialog interface. This method is ideal for straightforward setups involving fixed items that do not require frequent dynamic updates. StringTag: 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. StringTag Example @Tag.tagText = "#Element=T.Portable.Controls.TCenterValueCircularGauge #LinkedValue=Tag.tag2; #Element=T.Wpf.RunControls.TAssetsTree #LinkedValue=Tag.tag2;"; ArrayTag: 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 StringTag. ArrayTag Example @Tag.textArray[0] = "#Element=T.Portable.Controls.TSemiCircleCircularGauge #LinkedValue=Tag.tag2;"; @Tag.textArray[1] = "#Element=T.Wpf.RunControls.TDataGrid #LinkedValue=Tag.textArray;"; DataTable: 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.
Alternatively, you can also use a Tag DataTable with a DataTemplate as Parameter, in which case your DataTable should have the following format:
| ||||||||||||||||||
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. | ||||||||||||||||||
Element | Represents an individual item in the carousel. The element can have specific configurations like font size, margins, and linked values. | ||||||||||||||||||
Title | Sets the title shown in Runtime above the component. | ||||||||||||||||||
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: