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

Compare with Current View Page History

« Previous Version 25 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 below are built-in when creating a new Project. The DashBoard, HighPerformance and Standard display elements are grouped together in the ItemName column. 

Enabling/Disabling Theme

To Enable or Disable themes for display elements, navigate to the Draw Editor and you should see a checkbox located at bottom of the panel on the left.

When a theme is disabled for a page, all the objects inside the display will have their themes disabled as well. The color will be the configured color (from color theme selection or not) and when changing the theme in runtime it will keep the configured color only.

  

Individual components will have an Enable/Disable checkbox in 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

In Edit-Displays-Displays under the .Net Client Settings, you will find an Initial Theme textbox. In this field, you can enter whatever theme name you want active for the Project startup. 

Change Theme in Runtime

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

To set the project to the default configuration, 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 = "";


Object Properties Theme

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

At the top of the Appearance configuration window, you will find a field called Theme Color. To select the color you want, you can insert the item name or click on the button and browse through the available ones.

For the most part, 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