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

Compare with Current View Page History

« Previous Version 31 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 predefined theme palettes that are built into every project template, 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 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

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

Some important elements that have 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 of the colors in the image below can be used to create whatever color palette you desire. 



Advanced Properties

In 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 the specific theme displayed in 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 Ellipse (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 you inserted is valid, always click on the Check button (2). A popup message will appear with a Success/Error message.

The Export Properties button (3) will export all properties that are available, for the selected object, to the clipboard. The user can see the properties by pasting them to a text editor application (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