Page Tree
Previous Releases
Overview
This functionality will allow users to customize the appearance of displays objects to better suit the project looks.
On Run > Dictionaries > Themes you will find all the required information to add different theme options to your components. On the top of the display, you will find some buttons:
Theme header
New: Create a new Themes template option.
Del: Delete an existing Themes template,
Rename: Renames an existing Themes template.
Check: Check all added elements to see if there is any invalid configuration.
Export Properties: Export to the clipboard all properties that are available for selected object type. The user can see them by pasting it to Notepad per example.
In the grid below these buttons you will find the following columns:
Type Name: The object type that will be customized (see supported elements in the next
Section).
Property Name: Object property that will be customized.
Value: Value that will be applied to the element property. It can be Colors, Font Type, Font Size, Stroke Thickness, etc. For colors you can use in Hex format (e.g.: 0000FF) or HTML Color name (e.g.: Blue).
Description: A briefly description about the component.
Uid: Custom name given to a display object in Draw Environment. Uid is optional and it should be used when you want to customize specific objects. The UID is how identify this objects. You can have many objects with the same Uid, so the themes will apply the same property value to all objects using the same UID. See the image below where you can find the Uid fied.
Uid field
In the image below you can find an example of 3 objects (in the left side) with the same Uid and another one (right side) with different Uid.
Example of objects using Uid field
Enabling or Disabling Theme
It is also possible to enable or disable the Theme feature per Display or per Objects. See the image below.
When the Theme is disabled in a Display, all objects inside of the display will have the Theme Feature disabled too.
Display and Object configuration
Selecting a Startup Theme
You can select a pre create Theme to startup your project.
To do so, go to Edit > Displays > Displays, and click on .NET Clients button at Client Settings. It will open a popup window where the Initial Theme field is on the bottom. See the image below.
If the field is left blank, the project starts up without any theme using the objects properties used at the moment the displays were created.
.Net Client Settings dialog
How to change Theme in Runtime
The Theme selection in Runtime can be done using the syntax below in Script codes, Expression fields or objects configuration.
Client.Theme = ”<ThemeName>”
Ex.: Client.Theme = “Dark”
To set the project to default configuration (without themes) you need to set the Client.Theme with an empty sctring (Client.Theme= “”) or create an empty Theme table and set to use this empty Theme table.
List of Supported Components
In the list below you can find the display objects that you are able to customize in the Theme tab and some of the most used properties:
Type Name | Type Property | Example | Description |
TButton | Background | #FF434343 | Background color |
Foreground | WhiteSmoke | Text Label color | |
Font Family | Courier New | Font Families | |
FontStyle | Italic | Font Styles | |
TLabelBox | Background | Transparent | Background color |
Foreground | Black | Text Label color | |
TDisplay | Background | LightGray | Background color |
TLayout | Background | #968B7D | Background color |
Rectangle | Fill | #C8BDAF | Fill color |
Stroke | #322719 | Border line color | |
Ellipse | Fill | WhiteSmoke | Fill color |
Stroke | #9D7C8D | Border Line color | |
Polygon | Fill | #C3C3AA | Fill color |
Stroke | #51504E | Border line color | |
Polyline | Stroke | #51504E | Border line color |
Path | Fill | #EBEBD2 | Fill color |
Stroke | Blue | Border line color | |
TTextBox | Background | #DD97A6 | Background color |
Foreground | Black | Text color | |
TComboBox | Background | #DD97A6 | Background color |
Foreground | Black | Text color | |
TListBox | Background | #DD97A6 | Background color |
Foreground | Black | Text color | |
TCheckBox | Background | #7AE3DB | Background color |
Foreground | Black | Text color | |
BorderBrush | Black | Border line color of CheckBox | |
OptionMark.Fill | #87353A | Color of check mark | |
TRadioButton | Background | #7AE3DB | Background color |
Foreground | Black | Text color | |
BorderBrush | Black | Border line color of RadioBox | |
OptionMark.Fill | #87353A | Color of check mark | |
TSlider | grip.Fill | Black | Fill color |
TrackBackground.Background | Black | Background color | |
TMenuItem | Background | LightGray | Background color |
Foreground | WhiteSmoke | Text color | |
TTitleBar | Background | LightGray | Background color |
Label DragBarTitle.Foreground | Black | Text color | |
TDrillingChart | CursorBrush | Blue | Vertical cursor color |
LabelsBrush | Black | Text Label color | |
GridLinesBrush | #B6B6B4 | Grid Lines color | |
WindowsBrush | WhiteSmoke | Background color | |
TTrendChart | LegendColorOption | 1 | Background Legend color (0 –White or 1 – Transparent) |
LabelsBrush | #51504E | Text Label color | |
GridLinesBrush | #51504E | Grid Lines color | |
CursorBrush | Blue | Vertical cursor color | |
WindowsBrush | #C3C3AA | Background color | |
TAlarmWindow | Theme | MetroDark | Custom Theme Style |
TDataGridWindow | Theme | MetroDark | Custom Theme Style |
TPageSelector | Theme | Zune | Custom Theme Style |
If you add the Rectangle and Ellipse Types to the Themes list, you need to remember that some Default Displays (Header, LogOn and About) contains this element. So you might need to disable the Theme for those displays or the specifics objects.
The Theme property for TAlarmWindow, TDataGridWindow and TPageSelector objects contains your own themes. See below the supported value for it:
MetroDark | MetroLight | ExpressionLight |
ExpressionBlack | ExpressionBlue | ExpressionLive |
Zune | Windows7 | Glass |
Windows8 | MediaPlayer | Classic |
Demonstration Project
There is a Theme demo project available to the customer tests this new feature (contact support team). It contains all supported elements and shows how to use this feature in a project.
There are several different themes available in this demo project that you can use as reference to build it in your own project. Copy from Theme tables (Run > Dictionaries > Themes) and paste in your own paste also work great. See below some images extracted from the project.
Overview
Content Tools
Tasks