You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 17 Next »

Overview

Quick video tutorial


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

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

You can also create your own theme by following the same logic applied to the predefined themes. 


The colors and themes displayed in the image above are built-in when creating a new Project. The categories are separated in DashBoard, HighPerformance and Standard.

Enabling/Disabling Theme

To Enable or Disable themes in elements, navigate to the Draw Editor and you should see a CheckBox located at the panel on the left.

When the 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 individual components, the Enable/Disable CheckBox can also be found at the left-panel settings.


How to Set a Theme

There are a couple different ways in which a Theme can be configured into an object or Project.

  • Startup Theme in Project.
  • Change Theme in
  • Configuring a palette for Element in Page (Rectangle, Button, TextBlock, etc).
  • Specific element properties (advanced settings).

Startup Theme

At Edit-Displays-Displays under the .Net Client Settings you will find an insert TextBox. On this field you can enter a Theme name that will be active at the Project Startup.

Change Theme in Runtime

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

To set the project to default configuration (without themes) 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 = "";


Object Properties Theme

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

At the top of the Configuration Window there is a field called Theme Color. You can insert the Item Name, or click on the Button and browse through the available ones (at Run-Dictionaries-Themes).

 

For the most part, the Themes will be available in all color settings Configuration Window.


Pre-defined Theme and Colors

After creating a new project, it already contains several pre-configured theme and pre-configured colors. The user can create new theme, new colors or change the theme and color of the pre-configured themes.

Some importante pre-defined colors:

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


All these colors are ready to be used freely in the project to follow a color standard:


Advanced Properties

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

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

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

 

Some components like text font, radio box marker, combo box marker or any other control where some control piece is not color or 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 can overwrite the basic color configuration too here). To filter for specific elements, you should use the Uid property to select a specific element.

To make sure the configuration 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 selected object type. The user can see them by pasting it to a text editor aplication (e.g.: Notepad). Below you can find some of the exported properties for the Ellipse object.

* 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



  • No labels