Themes

Themes feature

The Themes function allows you to customize the look of your screen to better suit your design. It is available to customers .Net and HTML5.

In Run-Dictionaries-Themes, you will find predefined theme palettes that are incorporated into the project templates except for the blank project.

You can also create your own theme by selecting colors for each column.

The colors and themes displayed in the image below are integrated into new projects. The DashBoard, HighPerformance, and Standard display elements are grouped in the ItemName column.

Enabling/Disabling Theme

To turn the themes function on or off on a screen, navigate to the Draw Editor and click the check box located at the bottom of the panel on the left.

When a theme is disabled for an entire page, the theme for each object on the screen is also disabled. The color will be incorporated into the colors shown in the image above.When you change the theme at run time, pages and objects keep their default colors set.

Individual components also always have an Enable/Off check box in the left pane settings. This action is for activation control for this item only.

.

How to define a theme

There are a few different ways in which a theme can be applied to an object or project.

• Start a theme in a project

• Change a theme at run time

• Set up a palette for an element on a page (rectangle, button, block of text, etc.)

• Predefined theme and colors

• Element-specific properties (advanced settings)

Start a theme in a project

In Edit-Displays-Displays and .Net Client Settings, you'll find a text box Initial Theme. In this field, you can enter the name of any theme that you want to activate for project startup. See in Creating ScreensDisplays.

Change a theme at run time

Run-time theme selection can be done by using the syntax below in script codes, expression fields, or object configuration.

To set the project to the default setting, without a custom theme, you need to set the Client.Theme to an empty string (Client.Theme = "") or create an empty theme table and assign it to the theme property.

@Client.Theme = "Blue";
@Client.Theme = "Dark";
@Client.Theme = "Yellow";
@Client.Theme = "";

Set up a palette for an element on a page

To set a theme for an element on the display, (rectangle, button, text block, etc.), you need to open the appearance configuration window located in the left pane toolbar, under Run-Dictionaries-Themes.

At the top of the color configuration window, you will find a field called Theme color. To select the desired color, you can enter the item name or click the button and navigate the available ones.

Most of the time, this theme color setting window will be available for all elements that may have their colors changed.

Predefined themes and colors

When a new project is created, it already contains several inline themes and colors. You can create a new theme with new colors, or you can change the color of the preconfigured theme.

Some important elements or functions that have predefined colors:

• DefaultColor

• DisplayBackground

• HeaderBackground

• TextForeGround

• All HighPerformance State (all of them start with HP, e.g. HPOnStroke, HPOffStroke, HPDisableStroke)

• Pages of Dashboard (all of them start with Dashboard, e.g. DashboardTitleBackground, DashboardItem ...)

You can use all the colors in Run-Dictionaries-Themes to create the color palette you want. see also in Themes feature above on this page.

Advanced Properties

In Run-Dictionaries-Themes and in advanced settings, you can customize component properties. When you click the advanced button on the theme tab, the advanced dialog box opens based on the theme you selected in the combo box. It is important to note that these properties will only be valid for the specific theme displayed in the Configuration Window (1).

By opening advanced settings, you can easily access components such as text source, radio box marker, combo box marker, or components that are not color or are not exposed in the drawing tool configuration.

In the example above, customization is valid for TRadioButtons and all Ellipse. You can overwrite the basic color setting by opening Advanced Settings and typing the property name and value you want. To filter by specific elements, you must use the Uid property to select a specific element.

To make sure that the configuration you enter is valid, always click the Check (2). A pop-up message will appear with a success/error message.

The button Export Properties (3) will export all properties that are available, to the selected object, to the clipboard. The user can see properties by pasting them into a text editor application (for example: Notepad). Below you can find some of the properties exported to the Ellipse object.

Code Block * Type: System.Windows.Shapes.Ellipse - Properties: . Effect, System.Windows.Media.Effects.Effect . Fill, System.Windows.Media.Brush . Focusable, System.Boolean . Height, System.Double . UseLayoutRounding, System.Boolean . VerticalAlignment, System.Windows.VerticalAlignment . Visibility, System.Windows.Visibility . Width, System.Double