Page History

...

The Themes functionality gives function allows you the ability to customize the appearance of your display elements to better suit your Project. It is available for .Net NET and HTML5 Clients.

On When you go to Run-Dictionaries-Themes, you will find some predefined Theme theme palettes that are built into all most of the project templates except for the Blank Project. 

You can also create new Themes by following the same logic applied to the predefined ones.

Image Removed. The Blank Project is the only theme that does not have predefined theme palettes. Themes are completely customizable because you can select whatever color you want for each element in each columns. You can use this method to create your own theme.  

The colors and themes displayed in the image above below are built -in when creating a new Project. The categories are separated in into new projects. The DashBoard, HighPerformance and Standard. Standard display elements are grouped together in the ItemName column. 

Image Added

Enabling/Disabling Theme

To Enable enable or Disable disable the themes in elementsfunction, navigate to the Draw Editor and you should see a CheckBox click on the checkbox located at bottom of the panel on the left.

When the Theme a theme is disabled in a Page, all objects inside the display will have their themes disable as well. The color will be the configured color (from color theme selection or not) and when changing the theme on runtime it will keep the configured color only.for an entire page, the theme for every object in the display will also be disabled. The colors will be the predefined colors shown in the image above.

When you change the theme in runtime, the pages and objects will keep their default configured colors. 

For individual components, the Individual components will have an Enable/Disable CheckBox can also be found at checkbox in the left - panel settings.

...

How to Set a Theme

There are a couple different ways in which a Theme theme can be configured into applied to an object or Projectproject.

• Startup a Theme in a Project.
• Change a Theme in Runtime
• Configuring

  Configure a

  palette

  Palette for an Element in a Page (Rectangle, Button,

  TextBlock

  Textblock, etc)

  .

• Pre-defined Theme and Colors

• Specific element properties (advanced settings).Element Properties (Advanced Settings)

Startup a Theme In a Project

At In Edit-Displays-Displays and under the .Net Client Settings NET Client settings, you will find an insert TextBox Initial Theme textbox. On In this field, you can enter a Theme name that will be active at the Project Startup.the name of whichever theme you want active for the project startup. 

Change a Theme in Runtime

The Theme selection in Runtime runtime can be done by using the syntax below in Script codes, Expression fields, or objects configuration.

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

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

...

Configure a Palette for an Element in a Page (Rectangle, Button, Textblock, etc)

To set a Theme theme for an element in the display, you need to open the Appearance Configuration Window, located at configuration window located in the left - panel toolbar, in Run-Dictionaries-Themes. 

At the top of the Configuration Window there is Appearance configuration window, you will find a field called Theme Color. You To select the color you want, you can insert the Item Name, item name or click on the Button button and browse through the available ones (at Run-Dictionaries-Themes).

Image Removed

For the most part, the Themes this theme color configuration window will be available in all color settings Configuration Window.for all elements that can have their colors changed. 

Image Added

Pre-defined Theme and Colors

After creating When a new project is created, it already contains several pre-configured theme and pre-configured built in themes and colors. The user You can create a new theme , with new colors, or you can change the theme and color of the pre-configured themestheme. 

Some importante important elements that have pre-defined colors:

• DefaultColor
• DisplayBackground
• HeaderBackground
• TextForeGround
• All HighPerformance State (Starting all of them start with HP, ex: HPOnStroke, HPOffStroke, HPDisableStroke)
• Dashboard pages (starting all of them start with Dashboard, ex: DashboardTitleBackground, DashboardItem…)

All these colors are ready to be used freely in the project to follow a color standard:You can use all the colors in the image below to create whatever color palette you desire. 

Advanced Properties

At In Run-Dictionaries-Themes , under and under the Advanced settings, you can customize the component properties. 

When clicking on the advanced button from the theme tab, the advanced dialog box will be opened open based on the selected theme of combo box selection.which theme you selected with the combobox. 

It is important to notice that these properties will only be valid for that the specific Theme as theme displayed on in the Configuration Window (1).

Some components like By opening the advanced settings, you can easily access components such as text font, radio box marker, combo box marker or any other control where some control piece is not color or , or components that are not colors or are not exposed in the drawing tool configuration, you can access these control piece directly to the property.

In the example above, the customization is valid to TRadioButtons and all elipse (we Ellipse. You can overwrite the basic color configuration too here)by opening the Advanced Settings and typing the name of the property and value you desire. To filter for specific elements, you should use the Uid property to select a specific element.

To make sure the configuration you inserted is valid, always click on the Check button (2). A popup message will appear with a Success or /Error message.

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

...