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
- PAGE
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 |
POPUP
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:
The default values are filled in.
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:
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>