Graphics definition

The graphics definition is an XML file which is defined in the properties file with the properties "graphics".


It specifies the graphics parameters of the Server:

• global configuration properties
• colors
• fonts
• clippings
• blinking frequencies
• line Styles
• halos
• and various global properties such as the Locale, the forced screen density, etc...

Grammar

See the Graphics configuration Schema

Global configuration properties

There are two global configuration properties:

• "locale": the Locale used for the numeric separators
• "screenDensity": to force the screen density

Locale

By default the Locale used to print the separators in numeric values is the current Locale of the Operating System (for example: "fr" on a French-configured PC). However, it is possible to set a different Locale, for example:

• "en" for English Locale. The separator sign will be a dot (".")
• "fr" for French Locale. The separator sign will be a comma (",")

Screen Density

By default the Server uses the screen density (in pixels per inch) given by the Operating System to make the conversion between 100th of mm and pixels. However, in some cases this values might be erroneuous. In that case it is possible to force the screen density in pixels per inch.

Example

   <globals>
      <locale language="fr" />
      <screenDensity value="200" />
   </globals>

Colors

The "colors" element regroup definition of colors. They will be used for all widgets which uses a color index. Each color has the following attributes:

• "index": the index of the color, which is the value which will represent the color in Definition files
• "name" the name of the color, which can also represent the color in DFs

A color has also a "colorPath" child element which will represent the RGBA characteristics of the color:

• "r": red value of the color (from 0 to 255)
• "g": green value of the color (from 0 to 255)
• "b": blue value of the color (from 0 to 255)
• "alpha": optional opacity value of the color (from 0 to 255, 0 meaning completely transparent, and 255 completely opaque)

Example

   <colors default="254">
      <color index="254" name="DEFAULT" >
         <colorPath r="255" g="175" b="175"/>
      </color>
      <color index="2" name="alphaGray">
         <colorPath r="128" g="128" b="128" alpha="100" />
      </color>
      <color index="4" name="red">
         <colorPath r="255" g="0" b="0"/>
      </color>
   </colors>

Relationship with Look and Feel colors

There can be more colors in the Look and Feel configuration than those defined in the graphics configuration file. Colors defined in the graphics configuration file specifies the index / color pairs used in widgets such as A661_LABEL, A661_GP_RECTANGLE, etc...

Fonts

The "fonts" element regroup definition of fonts. They will be used for all widgets which uses a font index. Each font has the following attributes:

• "index": the index of the font which is the value which will represent the font in Definition files
• "name" the name of the font which can also represent the font in DFs

There are several ways to define a Font:

• without a font family
• pointing to a system font family
• pointing to a physical font file

In all of these cases, the font may have the following attributes:

• "size": the font size (in points, ARINC units - 100th of mm - or pixels)
• "italic": true if the font is in italic
• "bold": true if the font is in bold
• "fontPosition" to define on which line the characters baseline should be aligned

See the article about fonts.

Resolving fonts used in the Look and Feel

Fonts used in the JavaFX JavaFX CSS Look and Feel configuration are defined by their font family. Therefore if you want to use a font which is not installed on the platform in the CSS configuation file, you will have to define it in the Graphics configuration to perform the binding.

If you don't want this font to be available in the FontIndex in the Definition Files, you should use a "fontReference" rather than a "font" element^[1]

However, if you don't mind to have this font available in the Definition Files as a FontIndex, using the "font" element will do the job

. For example:

      <fontReference path="FontRegular.ttf" />

Clippings

The "clippings" element regroup definition of clippings. They will be used for all widgets which uses a mask (clip) index (the A661_MASK_CONTAINER widget). Each clip has the following attributes:

• "index": the index of the clip which is the value which will represent the clip in Definition files
• "name" the name of the clip which can also represent the clip in DFs

There are several ways to define a (clip):

• by specifying one shape
• by specifying a list of Shape (in that case the clip is constituted by a constructive geometry of all the specified clip shapes

See the article about clippings.

Example

<graphicConfig version="1">
   <colors default="254">
      <color index="254" name="DEFAULT" >
         <colorPath r="255" g="175" b="175"/>
      </color>
      <color index="0" name="green">
         <colorPath r="0" g="255" b="0"/>
      </color>
      <color index="2" name="alphaGray">
         <colorPath r="128" g="128" b="128" alpha="100" />
      </color>
      <color index="3" name="white">
         <colorPath r="255" g="255" b="255"/>
      </color>
      <color index="4" name="red">
         <colorPath r="255" g="0" b="0"/>
      </color>
   </colors>
   <fonts>
      <font index="30" name="default" />
      <font name="t1" index="1" size="12" />
      <font name="t2" index="2" size="14" />
      <font name="t3" index="3" size="10" >
         <fontPath physicalName="Courier New"/>
      </font>
      <font name="F1" index="4" size="10" >
         <fontPath path="myFont.ttf"/>
      </font>
      <fontReference path="FontRegular.ttf" />
   </fonts>
   <lineStyles>
      <style width="2" cap="round" join="round" />
      <style name="line1" index="1" width="2" cap="round" join="round" />
      <style name="plain" index="3" width="2" cap="round" join="round" />
      <style name="dotted" index="2" width="3" cap="round" join="round" >
         <dash dash="5,5" />
      </style>
   </lineStyles>
   <clippings>
      <clip name="Rectangle" index="1" path="r1000,1000,2000,2000" />
      <clip name="Rectangle2" index="2" >
         <clipPath path="r4000,4000,4000,3000" />
         <clipPath path="r1000,1000,2000,1000" />
      </clip>
      <clip name="Circle" index="3" path="a5000,3000,3000,45,135" />
      <clip name="RoundRectangle" index="4" path="round2000,3000,3000,4000,500,200" />
      <clip name="Triangle" index="5" path="1000,0 4000,1000 3000,2000" />
   </clippings>
   <blinkings>
      <blink name="default" index="1" scheme="500 500" />
      <blink name="second" index="2" scheme="1000 500" />
      <blink name="third" index="3" scheme="1000 1000" startAsVisible="false" />
   </blinkings>
   <frequencies>
      <freq name="animated" index="0" delay="1000" />
   </frequencies>
</graphicConfig>