1. Driver UI XML

Driver UI XML

Driver Settings / Dynamic UI

Goal and usage

Each driver and workflow component contains a XML script. This describes the user interface in the Dashboard or RIP application (Front-end).

The front-end uses this XML to build a user interface (UI), so that users can change settings. This UI has various elements, such as checkboxes, popups, group boxes etc.

Of course, we have to make sure we:

  • Show the current settings in the UI
  • Change the current settings according to changes in the UI

But in addition, we have to:

  • instruct the front-end which default values should be used in the UI
  • disable specific settings if they’re predetermined by the PrinterProfile
  • mark invalid combinations off settings with a warning symbol
  • generate a user-readable string, showing all the settings ( for fly by texts )

The XML generates UI elements for the user, which make it possible to change settings. When the user closes a dialog, the settings then get put into a result XML.

Possible UI elements are:

  • POPUP
    • ITEM
  • CHECK
  • RADIO
  • EDIT
  • LABEL
  • IMAGE
  • BUTTON
  • GROUP
  • TABGROUP
    • TAB

All UI elements have some possible attributes, along with a value.

Possible attributes:

  • ID( if they need to be referenced )
  • label ( their name in the UI )
  • selected ( the ID of the ITEM which is currently selected )

Sections

The XML has typically the following structure:

  • UI
    • PAGE
      • Objects
    • IMAGES
UI

This node can contain 1 or more PAGE nodes and the global IMAGES list.

PAGE

A PAGE node holds all user interface elements of 1 component. A driver will represent only 1 page. The PAGE nodes are used to build a settings dialog with a header strip (see Preferences in Editor or QueueManual? in RIP).

Attribute Description
*ID Page ID
LABEL Page title
IMAGE Image ID
IMAGES

The images list contains the list of globally available images that can be referred to by its ID. See for more info IMAGE in the OBJECTS sections.

Each IMAGE tag has the following mandatory attributes:

Attribute Description
*ID Page ID

The value of the tag contains the hex-encoded data of the image in PSD format.

Objects

All user interface objects tags do not have XML values. This means that any object can have children, like UI actions.

All user interface IDs must not have empty spaces in their names.

General attributes (optional):

Attribute Description
WIDTH The fixed width of the object in pixels
HEIGHT The fixed height of the object in pixels
TAB The tab order for the object
IMAGE Image ID, place an image in front of the LABEL

This UI element denominates a list of items from which one is selected. Its items are of the type “ITEM” and they have two attributes ( ID and label ) and a value. The ID is used to reference them, the label is the text shown in the UI, the value is what is put into the result XML.

Attribute Description
*ID Item ID
LABEL Popup menu title
value ID of the default selected item
ITEM

ITEM Attributes (menu items of the popup):

Attribute Description
*ID Item ID
*LABEL Item title
*value Direct value for the item
CHECK

This UI element presents a checkbox to the user.

Its items are of the type “CHECK” and they have two attributes ( ID and label ) and a value.

The ID is used to reference them, the LABEL is the text shown in the settings summary text which is shown when pointing to a Queue (FlyBy/Tooltip), the value is what is put into the result XML.

Attribute Description
*ID Item ID
LABEL Checkbox control title
value ‘ON’ or ‘OFF’, specifies that the checkbox/checkgroup is enabled or disabled at creation. When a checkbox node contains children it will become a group with a check label.
RADIO

This UI element denominates a list of items, (these could be radio buttons, or a popup could be used as well), from which one is selected. Its items are of the type “ITEM” and they have two attributes ( ID and label ), plus a value. The ID is used to reference them, the label is the text shown in the UI, the value is what is put into the result XML.

Attribute Description
*ID Item ID
LABEL Radio control title
value ‘ON’ or ‘OFF’, specifies that the radio button/radio group is enabled or disabled at creation. When a radio button contains children it will become a group that will be enabled or disabled by a radio button in front of it.
SLIDER

The user is presented with a UI element ( this can be a slider, but it could be a text field), which has a minimum and maximum value from which the user can choose.

The attribute “ID” is used to reference them, the attribute “label” is the text shown in the UI, the value is what is put into the result XML.

Attribute Description
*ID Item ID
LABEL Slider control title
MIN Minimum value for the slider. When not specified 0 is used.
MAX Maximum value for the slider. When not specified 100 is used.
ARROWS ‘ON’ or ‘OFF’, show or hide up/down arrows. When not specified ‘ON’ is used.
SLIDER ‘ON’ or ‘OFF’, show or hide the actual slider control. Default is OFF
TYPE ‘INTEGER’, ‘UNITS’, ‘PERCENTAGE’ or ‘ANGLE’. This represents the slider unit of value. When not specified ‘INTEGER’ is used.
value Initial slider value. When not specified half of MIN + MAX is used.
INPUT

The user is presented with a UI element ( can be an edit box, or a slider ), which has a minimum and maximum value . When the user enters a value out of the range, the OK button of the dialog should be disabled.

The attribute “ID” is used to reference them, the attribute “label” is the text shown in the UI, the value is what is put into the result XML.

Attribute Description
*ID Item ID
LABEL Edit box title
MIN Minimum value for the edit box.
MAX Maximum value for the edit box.
TYPE ‘TEXT’, ‘INTEGER’, ‘UNITS’, ‘PERCENTAGE’ or ‘ANGLE’. This represents the edit unit of value. When not specified ‘TEXT’ is used.
READONLY ‘ON’ or ‘OFF’, default value if not present is ‘OFF’, the control is editable
value Initial edit box value or content.
TEXTAREA

Free area to enter text or to show text (read-only). This can be a multiline edit field.

Attribute Description
*ID Item ID
LABEL Edit box title
READONLY ‘ON’ or ‘OFF’, specifies if the text area will be set as read only or editable. When not set editable is assumed.
value Initial edit box value or content.
BUTTON

The button UI element creates a push button.

Attribute Description
*ID Item ID
LABEL Button title
FOLDERBTN

Represents a folder or file selector button. This button will present a folder or file selector that will remotely browse the computer the node specified. This type can therefore only be used with computer bound nodes.

Attribute Description
*ID Item ID
LABEL Button title
TYPE ‘FILE’ or ‘FOLDER’, specifies if the browser selects files or folders.
FILTER Optional filter for the browser
value Default path
IMAGE

This UI element is used to put an image into the UI.

Its attribute “LABEL” determines which image to use. When the value is empty the image is searched in the IMAGES list.

Attribute Description
*ID Item ID
*LABEL Image name, the ID from the global image list
GROUP

This UI element represents the elements in the GROUP in a frame, showing that they belong together.

Attribute Description
*ID Item ID
LABEL Title of the group frame
TABGROUP

This UI element is a tabbed group that comprises multiple tabs, which can contain multiple UI elements. The TABGROUP is required to encapsulate a minimal 1 TAB element.

Attribute Description
*ID Item ID
value The ID of the default selected tab.
TAB

The tab element represents the tab in a TABGROUP and holds multiple other UI elements.

Attribute Description
*ID Item ID
LABEL Title of the tab

LAYOUT

Layouts define how their child elements are placed in the user interface. Three types of layouts are defined: horizontal, vertical and grid layouts. Layouts do not have an ID, so they are transparent in terms of user interface properties. They can be inserted at any point in the XML file and can contain other layouts as children. When no layout is used, the system is using vertical layouts by default. The most common way to define complex layouts is to use vertical and horizontal layouts like in the following sample which places two checkboxes on the first line, one on one single line and other three on another line:

<UI>
   <PAGE ID="page1" LABEL="Page One">
      <VERTICAL>
            <HORIZONTAL>
               <CHECK ID="check1" LABEL="Check1"></CHECK>
               <CHECK ID="check2" LABEL="Check2"></CHECK>
            </HORIZONTAL>
            <CHECK ID="check3" LABEL="Check1"></CHECK>
            <HORIZONTAL>
               <CHECK ID="check4" LABEL="Check4"></CHECK>
               <CHECK ID="check5" LABEL="Check5"></CHECK>
               <CHECK ID="check6" LABEL="Check6"></CHECK>
            </HORIZONTAL>
      </VERTICAL>
   </PAGE>
</UI>
HORIZONTAL
Attribute Description
ALIGN (Optional) Defines how child elements are aligned. Possible values are JUSTIFY, CENTER, LEFT, RIGHT

A horizontal layout will place all its child elements on the same line in the UI.

Justify ( default ): the interface elements will take the entire width. Center: an empty space will be added to both the left and right of the child elements (which will sit in the middle and grow as needed). Left: empty space added to the right. Right: empty space added to the left. Seems obvious, but worth mentioning!

VERTICAL
Attribute Description
ALIGN (Optional) Defines how child elements are aligned. Possible values are JUSTIFY, CENTER, LEFT, RIGHT

A vertical layout will place all its child elements one beneath the other.

GRID

A grid layout uses a table that’s similar to an HTML table, to place elements. The GRID tag informs the system that a grid layout start. The actual structure is determined by two other tags: ROW and CELL. The ROW tag instructs a new line of elements is starting. The CELL tag defines the contents of a cell in the table.

Attribute Description
colspan (Optional) Defines how many columns will the current cell span
rowspan (Optional) Defines how many rows will the current cell span

Actions

In the XML we can also define actions involving the UI elements. An action is defined at the level of an object that’s controlled by this action, by adding a CONDITION child node to it. A condition directive is composed of three items which define the action and the condition in which that action is performed.

Tag CONDITION

Attribute Description
*state Specifies the action that will be performed on the object
*property The name of the property that will be evaluated
*value The value of the property

The UI has a property system. This gives users the possibility to address the value of any UI control defined in the same XML (on different pages too, if the component has more than one page). A property name is a dotted separated string containing the names of all the elements from the page element to the intended element. The last string is the actual property of that control.

There are several control properties:

value The actual value of the control as specified above in the definitions
visible ON if the control is visible, OFF otherwise
invisible ON if the control is invisible, OFF otherwise
enabled ON if the control is enabled, OFF otherwise
disabled ON if the control is disabled, OFF otherwise
selection Will return the ID of the selected ITEM of a POPUP instead of the actual value ( will return the value for other types of controls )

The state tells what action should be performed when the property value returned during runtime is equal to the value specified in the condition. Possible actions:

visible the control will be shown only when the condition is fulfilled
invisible the control will be hidden when the condition is fulfilled
enabled the control will be enabled only when the condition is fulfilled
disabled the control will be disabled when the condition is fulfilled
value the value of the control will get the value of the property. Useful to display something in an edit control. The CONDITION value is ignored.
selection used for POPUP: the POPUP will select the item which is equal to the runtime value of the property. The CONDITION value is ignored.

In the following sample, the text edit control named “Edit1” will be enabled only when the checkbox “check1” is checked, while the edit control “Edit1” from “Group2” ( notice how we can use the same ID as long as they have different parents ) will display the value of the folder button “Folder1” ( the selected path ).

<PAGE ID="Page">
<GROUP ID="Group" LABEL="Group">
     <CHECK ID="check1" LABEL="Check"></CHECK>
     <INPUT ID="Edit1">
          <CONDITION state="enabled" property="Page.Group.check1.value" value="ON">
     </INPUT>
     <FOLDERBTN ID="Folder1" value="C:\"></FOLDERBTN>
</GROUP>
<GROUP ID="Group2" LABEL="Group">
     <INPUT ID="Edit1">
          <CONDITION state="value" property="Page.Group2.Folder1.value" value="">
     </INPUT>
</GROUP>

</PAGE>
Settings system

The UI Host system offers the possibility to load and save settings for the interface. If the UI objects are already displayed (when loading settings), then they’ll automatically show the new loaded settings.

The settings are saved in an XML file. The goal is to keep these setting files clean, small and easy to read by humans, so the following rules are applied:

  • Objects that don’t keep values, like a STATIC, won’t save anything in the settings file.
  • An object saves its value as the value of a tag named with that object’s ID.
<PAGE> 
<GROUP ID="Group1"> 
    <INPUT ID="TextEdit1" value="test text"></INPUT>
</GROUP>
<GROUP ID="Group2">
     <STATIC ID="static1" LABEL="Text"></STATIC>
</GROUP>
<CHECK ID="check" value="OFF">

    <INPUT ID="TextEdit2" value="test text"></INPUT>
</CHECK>
<CHECK ID="check2" value="OFF">
<RADIO ID="r1" value="OFF">
<RADIO ID="r2" value="ON">
</PAGE>

generates the settings:

<Group1> 
    <TextEdit>test text</TextEdit>
</Group1>
<check2>OFF</check2>
<r2>ON</r2>
  • The tree structure of the UI is maintained.
  • Groups that don’t have objects capable of generating settings aren’t saved at all. ( Group2 above )
  • Check groups will be saved only if they are checked. If in the sample above the check group “check” would have the value ON, the settings would contain:
<check>
   <TextEdit2>test text</TextEdit2>
</check>
  • Radio buttons save only the active object, r2 in our case.
Example

An example xml: MARKER 1

This XML results in this UI:

ui_example_1

The default values are filled in.

ui_example_2

When the Media popup is clicked, its ITEMS become visible. In the example, the implementation of the UI puts ” (!)” behind all choices, which results in invalid driver settings. If the user selects “Plain Paper” in this popup, the settings will become invalid ( and the OK button will be ghosted )

In this implementation, the conflicting settings are identified with the symbols in front of them:

ui_example_3

The user can correct this faulty setting by either changing the DPI or Media setting.

To know what settings are in conflict, the XML contains CONSTRAINS.

CONSTRAINS

The items in a CONSTRAINS table are called “CONSTRAIN” and have attributes that come in pairs:

IDx and SEL_ID_x, where the x is a number.

When the current selection matches a CONSTRAIN ( all elements have the values of a CONSTRAIN ) than the combination is invalid. In the example the line with:

ID1=”DPI” SEL_ID_1=”DPI_720″ ID2=”Media” SEL_ID_2=”Media_Plain”

means that when the element “DPI” is set to =”DPI_720″ and the element =”Media” is set to =”Media_Plain” the settings are invalid. ( this combination of DPI and MEDIA )

containerString

When a UI Element has the attribute containerString, the entry in the result XML for this element should not be the ITEM value directly. Instead, the “$#” sequences of the containerString should be replaced by the value of the chosen ITEM, and the resulting string should be entered in the result XML.

example:

containerString=”HEATERS=$# $#”

ITEM value = “123” than the result XML should contain “HEATERS=123 123”.

Result XML

The result XML ( the abbreviated version of the current settings ) is composed of the elements ID and the value of the selected ITEM. If the attribute containerString is present, this string with the $#’s replaced by the value of the selected ITEM is used. Instead of “DynamicUI” the label “DS” is used. MARKER 2

XML Schema

The XML Schema to which the XML can be matched is located at http://www.aurelon.com/XML/Driver_Settings.xsd

The XDS can also be downloaded from here: Driver_Settings.xsd.

Example

Driver Settings (from driver)
<?xml version="1.0" encoding="UTF-8" ?>
<DriverSettings>
   <POPUP ID="DPI" label="DPI:" selected="DPI_720">
      <ITEM ID="DPI_360" label="360x360">360</ITEM>
      <ITEM ID="DPI_360_720" label="360x720">slightly better</ITEM>
      <ITEM ID="DPI_720" label="Higest possible">720</ITEM>
   </POPUP>
   <POPUP ID="Media" label="Media:" selected="Media_Canvas">
      <ITEM ID="Media_Plain" label="Plain paper">1010</ITEM>
      <ITEM ID="Media_Canvas" label="Canvas">4000</ITEM>
      <ITEM ID="Media_Coated" label="Coated Paper">1100</ITEM>
   </POPUP>
   <CHECKBOX ID="Cutter" label="Cutter" selected="Cutter_On" changable="true">
      <CHECK ID="Cutter_Off" label="Off">NOCUT</CHECK>
      <CHECK ID="Cutter_On" label="On">CUT</CHECK>
   </CHECKBOX>
   <CONSTRAINS>
      <CONSTRAIN ID1="DPI" SEL_ID_1="DPI_720" ID2="Media" SEL_ID_2="Media_Plain"/>
      <CONSTRAIN ID1="DPI" SEL_ID_1="DPI_360_720" ID2="Media" SEL_ID_2="Media_Plain" ID3="Cutter" SEL_ID_3="Cutter_On"/>
   </CONSTRAINS>
</DriverSettings>
Driver Settings result (to driver)
<?xml version="1.0" encoding="UTF-8" ?>
<DS>
    <DPI>slightly better</DPI>
    <Media>4000</Media>
    <Cutter>CUT</Cutter>
</DS>