Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Info
iconfalse

Quick video tutorial (no audio)


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 palettes that are built into all most of the project templates except for the . The Blank Project You can also 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 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 Projectinto new projects. The DashBoard, HighPerformance and Standard display elements are grouped together in the ItemName column. 

...

Enabling/Disabling Theme

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

When a theme is disabled for a an entire page, all the objects inside the theme for every object in the display will have their themes disabled as wellalso be disabled. The color colors will be the configured color (from color theme selection or not) and when changing the predefined colors shown in the image above.

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

  

Individual components will have an Enable/Disable checkbox in the left panel settings.

...

There are a couple different ways in which a 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

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

Change a Theme in Runtime

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

...

Code Block
@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 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 this theme color configuration window will be available in all color settings Configuration Window.for all elements that can have their colors changed. 


Pre-defined Theme and 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 of You can use all the colors in the image below can be used to create whatever color palette you desire. 

...

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 Ellipse (we . 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.

...