Is it possible to combine Themes with Derived Widgets in MappView?

Ask Questions HMI & Visualization
1

Hi all,

I would like the standardize my widgets of my widgets with Themes and Styles and standardize properties such as

In order to facilitate consistency in my MappView project, I want to standardize my widgets (appearance, size, etc.). I am planning on using Styles and Themes for this, however this does not incorporate properties such as Size or Unit. The Help page suggests Derived Widgets for this, but this introduces a problem: The Derived Widget seems to overwrite the properties defined in the style. Removing these properties from the derivedwidget XML also does not seem to help, as it just defaults to the Base properties of the widget, instead of the properties defined in the “default” style.

In the Screenshots below I show this effect by switching Themes

BuRThemeFlatLight

image
image703×152 3.06 KB

BuRThemeFlatDark

image
image740×191 3.08 KB

Is there a way to combine Themes and Derived Widgets or are these methods completely incompatible? And in the case of the latter, what do you suggest for standardizing the Size of buttons and other (non-styleable) properties?

I am using AS 6.5.3.11 with MappView 6.7.0. A minimal project showing this issue is attached (did not have the time to make it work in simulation, but the editor view should be enough)

ExampleProjectDerivedWidget.zip (78.4 KB)

.

3

pending question, can anyone help there?

4

Hi,
to make the simulation for mappView work you have to enable the OPC UA server.

mappView requires styles for the fully qualified custom-widget type. Removing styleable properties from the derived XML therefore exposes generated/base defaults instead of the theme values. See the help Styles for custom widgets

You have to add something like this to * BuRThemeFlatLightDefaultStyles.styles

	<Style id="default" xsi:type="widgets.widgetlibrary_0.DerivedButton" 
		fontSize="16px" 
		bold="false" 
		textColor="#ccc" 
		mouseDownTextColor="#FFFFFF" 
		borderWidth="1px 1px 1px 1px" 
		mouseDownBorderWidth="1px 1px 1px 1px" 
		borderColor="#808080" 
		mouseDownBorderColor="#ff9900" 
		backColor="#808080" 
		mouseDownBackColor="#ff9900" 
		disabledBackColor="#d1d1d1" />

	<Style id="default" xsi:type="widgets.widgetlibrary_0.DerivedButtonBlank" 
		fontSize="16px" 
		bold="false" 
		textColor="#ccc" 
		mouseDownTextColor="#FFFFFF" 
		borderWidth="1px 1px 1px 1px" 
		mouseDownBorderWidth="1px 1px 1px 1px" 
		borderColor="#808080" 
		mouseDownBorderColor="#ff9900" 
		backColor="#808080" 
		mouseDownBackColor="#ff9900" 
		disabledBackColor="#d1d1d1" />

Attached is the fixed project.

Stephan
ExampleProjectDerivedWidget.zip (101.0 KB)

6

Thank you Stephan, that solved this perfectly!