Images

Display of one or more graphics in a control element.

A graphic can be displayed in a control element in addition to the text or labelling.

Some controls can display one or more graphics.

The following types of graphics are possible:

Checkmark symbol

Graphic that is displayed in the checkbox of the Checkbox control element. The properties for configuring the graphic can be found in the "Checkmark" category.

Concerns control element: Checkbox

DefaultSymbol

Graphic that is displayed in the control if no graphics have been defined in the AlarmIndicatorItems or if all alarms of the classes to be displayed are in the inactive state (cleared).

Concerns control element: AlarmIndicator

ErrorSymbol

Graphic that is displayed behind the input field of the control in the event of an error, e.g. if the input is outside the specified limits. The properties for configuring the graphic can be found in the "ErrorSymbol" category.

Affects controls: DateTimeVarIn, NumericVarIn, TextVarIn

ExpandingSymbol

Graphic that is displayed when the selection list is collapsed ("CollapsedSymbol") or opened (ExpandingSymbol). The properties for configuring these graphics can be found in the "ExpandingSymbol" category.

Concerns control element: TabMenuButton

LabelSymbol

Graphic that can be displayed in addition to the label ofthe SelectBox. The properties for configuring the graphic can be found in the "LabelSymbol" category.

Subject control: SelectBox

LeadingSymbol

Graphic that is displayed in front of the output/input field of the control element. The properties for configuring the graphic can be found in the "LeadingSymbol" category.

Affects controls: DateTimeVarIn, DateTimeVarOut, DropDownBox, NumericVarIn, TextVarIn

Symbol

Graphic that can be displayed in addition to the labellingor text of the control element. The properties for configuring the graphic can be found in the "Symbol" category.

In the SelectBox, this is the graphic that is displayed in front of the text field containing the main and secondary text. At runtime, the graphic that has been configured for the active SelectBox item is displayed.

Concerns controls: Button, DateTimeVarIn, DropDownBox, DropDownBoxItem, Key, Label, ListItem, NumericVarIn, NumericVarOut, SelectBox, SelectBoxItem, StateIndicator, StateIndicatorItem, TabButton, TabMenuButton, TextVarIn, TextVarOut, ToggleButton

SymbolActive, SymbolInactive

Graphic that is displayed when an alarm of the alarm class specified in the "AlarmClassName" property has changed to the "Incoming" ("SymbolActive") or "Outgoing" (SymbolInactive) state. The properties can be found in the "Symbol" category.

Concerns control element: AlarmIndicatorItem

StateSymbol

Graphic that is displayed when the selection list is collapsed ("ClosedStateSymbol") or open (OpenedStateSymbol). The properties for configuring these graphics can be found in the "StateSymbol" category.

Subject control: SelectBox

Trailing symbol

Graphic that is displayed behind the input field of the control element. The properties for configuring the graphic can be found in the "Trailing symbol" category.

Subject: "DropDownBox, NumericVarIn, TextVarIn

Properties for configuring the graphic

For a control element that supports the display of a graphic (a symbol), the graphic can be configured using the following properties.

• There are similar properties for graphics of type LeadingSymbol, TrailingSymbol, ErrorSymbol etc. as for graphics of type Symbol.

Example: The "ShowSymbol" property specifies whether the graphic of type Symbol should be displayed in the control, just as the "ShowErrorSymbol" property specifies whether the graphic of type ErrorSymbol should be displayed.

SymbolType

Defines the graphic type and the source of the graphic.

• Icon

  The graphic should be an icon and obtained from the imagesWiconfonts folder in the project directory.

• Svg

  The graphic should be a vector graphic in SVG format from the imagesWsvgs folder.

• Bitmap

  The graphic should be a pixel graphic (BMP, PNG, GIF, JPG) from the imagesWbitmapsfolder.

• SvgIcon

  The image is a scalable vector image (*.svg) located in the images\svgicons folder within the project directory. In contrast to the images in the svgs folder, these images can be displayed in the color indicated in the ForegroundColor, CheckedForegroundColor, etc. properties. They look like icons from an icon font but have the *.svg format.

  You can draw your own SVGs using a tool of your choice or use third-party SVGs as SvgIcons. When doing that, consider the following:

  • In the <svg> element, the xmlns attribute with the namespace URI is obligatory.

    Copy

    <svg xmlns="http://www.w3.org/2000/svg" ...>

  • In the <svg> element, set the viewBox attribute to ensure that the image is scaled to the size of the image container.

    Copy

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">

  • Elements that you want to fill with the color indicated in the ForegroundColor, CheckedForegroundColor, etc. properties must be direct children of the <svg> element, i.e. they must not be grouped.

    Copy

    Don’t do this: The two <path> elements are not direct children of <svg> since they are encapsulated within a <g> element.

    <svg
      viewBox="0 0 100 100"
      xmlns="http://www.w3.org/2000/svg">
      <g>
        <path
          d="M 50,0 C 22.415401,0 0,22.415396 0,50 0,77.584604 22.415401,100 50,100 77.584599,100 100,77.584604 100,50 100,22.415396 77.584599,0 50,0 Z 
           m 0,5 C 74.8824,5 95,25.117593 95,50 95,74.882407 74.8824,95 50,95 25.1176,95 5,74.882407 5,50 5,25.117593 25.1176,5 50,5 Z"/>
        <path
          d="M 49.8995,0 6.25,74.38 H 93.75 Z M 49.8995,9.8819 85,70.1181 H 15 Z"/>
      </g>
    </svg>

    Copy

    Do this: The two <path> elements are direct children of <svg>.

    <svg
      viewBox="0 0 100 100"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M 50,0 C 22.415401,0 0,22.415396 0,50 0,77.584604 22.415401,100 50,100 77.584599,100 100,77.584604 100,50 100,22.415396 77.584599,0 50,0 Z 
           m 0,5 C 74.8824,5 95,25.117593 95,50 95,74.882407 74.8824,95 50,95 25.1176,95 5,74.882407 5,50 5,25.117593 25.1176,5 50,5 Z"/>
      <path
        d="M 49.8995,0 6.25,74.38 H 93.75 Z M 49.8995,9.8819 85,70.1181 H 15 Z"/>
    </svg>

  • The fill attribute must not be set for elements that you want to fill with the colors indicated in the ForegroundColor, CheckedForegroundColor, etc. properties.

    Copy

    Don’t do this: The fill attribute is set in the <path> elements.

    <svg
      viewBox="0 0 100 100"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M 50,0 C 22.415401,0 0,22.415396 0,50 0,77.584604 22.415401,100 50,100 77.584599,100 100,77.584604 100,50 100,22.415396 77.584599,0 50,0 Z 
           m 0,5 C 74.8824,5 95,25.117593 95,50 95,74.882407 74.8824,95 50,95 25.1176,95 5,74.882407 5,50 5,25.117593 25.1176,5 50,5 Z"
        fill="lightblue"/>
      <path
        d="M 49.8995,0 6.25,74.38 H 93.75 Z M 49.8995,9.8819 85,70.1181 H 15 Z"
        fill="lightcoral"/>
    </svg>

    Copy

    Do this: There is no fill attribute in the <path> elements.

    <svg
      viewBox="0 0 100 100"
      xmlns="http://www.w3.org/2000/svg">
      <path
        d="M 50,0 C 22.415401,0 0,22.415396 0,50 0,77.584604 22.415401,100 50,100 77.584599,100 100,77.584604 100,50 100,22.415396 77.584599,0 50,0 Z 
           m 0,5 C 74.8824,5 95,25.117593 95,50 95,74.882407 74.8824,95 50,95 25.1176,95 5,74.882407 5,50 5,25.117593 25.1176,5 50,5 Z"/>
      <path
        d="M 49.8995,0 6.25,74.38 H 93.75 Z M 49.8995,9.8819 85,70.1181 H 15 Z"/>
    </svg>

IconFont

Defines the graphic collection for the "Icon" graphic type.

• material-icons

  Specifies that Google's material icons are offered for selection in the graphic selection dialogue (button behind the property "Symbol", "LeadingSymbol", "TrailingSymbol" etc.).

• winjs-icons

  Specifies that the WinJS icons from Microsoft are offered for selection in the graphic selection dialogue (button behind the "Symbol" property "LeadingSymbol", "TrailingSymbol" etc.).

ShowSymbol

Determines whether the graphic is to be displayed. The graphic to be displayed is defined in the "Symbol" property.

Symbol (SymbolOff/SymbolOn)

Defines the graphic to be displayed. The button opens a dialogue in which you can select one of the available graphics.

• The graphics available depend on the settings in the "SymbolType" and "IconFont" properties.

SymbolMargin

Defines the outer spacing of the graphic, i.e. between the edge of the graphic and its parent or neighbouring element.

SymbolPosition

Defines the position of the graphic in the containing (internal) container within the control element.

• Only two settings are available for some control elements, e.g. "Left" and "Right" for the label.

• Left

• The graphic is positioned on the left.

• Top

• The graphic is positioned at the top.

• Right

• The graphic is positioned on the right.

• Bottom

• The graphic is positioned at the bottom.

• Centre

  The graphic is positioned in the centre.

  • If the display of the label or text in the control element is activated (ShowLabel = þ/ShowText= þ), this setting is equivalent to "Left".

SymbolPressed

Defines the graphic that is displayed in the control element as long as it is held down ("Pressed"status ).

SymbolSize

Determines the display size of the graphic. The graphic is always displayed in a square (SymbolSize = width = height) and scaled to the set display size. As the CSS properties "width" and "height" are used internally for the graphic, all specifications that are permitted for these CSS properties are permitted in "SymbolSize", e.g. px, cm, % etc. If a number without a unit is entered as a value, this is interpreted as a specification in pixels.