¶ YML
YML (Yaskawa Markup Language) is a cross-platform declarative language for easily describing user-interface components and their layout.
¶ Types
Each YML type represents a geometric element on the screen. Many types are items that are visually rendered - such as Rectangles, Buttons, Text labels and so on. Some types have no visual rendering but influence the layout of other items, such as Row and Column.
Each type has a set of properties used to control the look and behavior. Most types also emit events in response to changes - such as manipulation by the user. For example, the Button item emits a Clicked event when it is clicked by the user.
Types exist in a static inheritance tree, whereby each type inherits all the properties of its immediate super-type (ancestor). For example, an Item is the ancestor of many visual types and has properties width and height. Hence, all descendants of Item also have associated width and height properties.
By declaring an instance of a YML type in your interface, it creates a concrete instance of the type with concrete values for each of its properties (many of which may be default values if none are explicitly provided).
For example:
Rectangle {
id: myrect
width: 60
height: 30
color: "orange"
}
creates a concrete instance of a Rectangle to be rendered on the screen with the given values of the width and height properties.
Instances can be nested, creating dynamic parent-child relationships that dictate the order in which items are rendered on the screen.
For example:
Row {
id: myrow
Rectangle { width: 40; height: 40; color: "red" }
Rectangle { width: 40; height: 40; color: "green" }
Rectangle { width: 40; height: 40; color: "blue" }
}
creates three Rectangles where the Row myrow is the parent of all three. The behavior of Row is to position its children horizontally.
¶ Properties
¶ Expressions
The value supplied for a property, in addition to simple literal values, like 10 or "red", can consist of expressions in a syntax very similar to Javascript.
Properties have a specific type - one of bool, int, real or string. Each has a corresponding way to write a literal for that type:
bool-trueorfalseint- integers (32bit), including scientific notation:10,-100,-3.4e8real- floating point values (IEEE754 double precision 64bits):10.1,-0.001string- character strings enclosed in single or double quotes (Unicode UTF-8 encoding). C-escape sequences are supported :"red",'今日は!',"\n"
Hence, a valid expression for a property value of type int (e.g. width) is (20*3+(100-10))-1.
As we saw above, each instance of a YML type can be given an id. You can access the property of a specific instance by prefixing the property names with the id and a period: myrow.width. Note that the property value need not have been explicitly supplied, as is the case above.
Properties can be referenced in expressions: myrow.width*3 + 10 - myrect.width, for example.
Boolean properties can be conditionally setup using logical expressions. For instance, myBox.visible && myText.text=="" will return true if both properties are true.
Conditioal expressions can be used to dynamically set properties. This can allow properties to be quickly changed without using the API. For example, color = myText.text == "" ? "white" : "red" will set a color property to white if myText has an empty text field. Otherwise the color will be red.
¶ Declarations
It is also possible to declare new YML types, including new properties. For example, suppose our UI used a lot of red squares and we wanted to avoid repeatedly using Rectangle and the color property for every instance:
RedSquare : Rectangle
{
width: 50
height: width
color: "red"
property int area: width*height
}
...
Row {
id: rowofsquares
RedSquare { id: s1; width: 60 } // override width
RedSquare { id: s2; width: 70}
RedSquare { id: s3 }
Text {
text: "Total Area = "+(s1.area + s2.area + s3.area)
}
}
Notice:
- Our new
RedSquaretype inherits fromRectangleand hence inherits its properties and behavior as defaults - It declares a new property named
area - Use of
//C++-style single-line comments./* ... */C-style are also allowed. - Even though we override the
width, the shape will still be square as theheightofRedSquareis defined to be thewidth. This makes use of a binding (described below). - Liberal automatic type conversion - the
intexpression for the areas was automatically converted tostringto satisfy the+string concatenation operator
¶ Alias Properties
Note: Alias Properties are only available from SDK API 2.2 onward.
Sometimes it is useful when declaring new Item types, to be able to expose properties on child Items in the enclosing Item being declared.
Suppose we wish to create a new Circle Item:
Circle : Item
{
property int r: 5 // radius of circle
// instead of having to declate a property and reference it in the
// rectangle below, just declare it as an alias for the existing property
// (since Rectangle has a color property, even if we didn't specify a value
// for it in the Rectangle instance)
property alias color: circrect.color
// we implement the circle using a Rectangle with corner radii set to
// half their width/height
Rectangle {
id: circrect
width: r*2
height: r*2
borderWidth: r
}
}
...
Row {
// orange circle with radius 40
Circle {
r: 40
color: "orange"
}
}
Since we'd like to allow uses of the Circle to specify a color, we could have declared a regular property for it, then referenced it in the Rectangle's color. However, this repetition can become tedious if there are many properties you wish to expose in the top level Item (Circle). Hence, instead, we can declare a property alias in which we reference an existing properties in a child.
¶ Bindings
When we reference properties in an expression for the value of a property, the property is bound to the expression. This means that changes in the values of referenced properties will be reflected in the property value.
For example, in RedSquare, any change, at run-time, of the width property will also change the height property because it is bound to width. Bindings can be complex expressions, not just simple property references.
For example:
Rectangle {
id: myrect
width: 20
height: 10
}
Text {
id: mytext
text: "Area of myrect with margin of 10 is "+( (myrect.width+10) * (myrect.height+10))
}
will result in text being displayed that initially reads "Area of myrect with margin of 10 is 600", but will automatically update appropriately if the value of myrect width or height is assigned at run-time, because the expression for the property text is a binding that includes references to the myrect properties.
Note, however, if a property with a binding expression is explicitly assigned by extension code at run-time, the binding is lost and the last assigned value persists. Hence, if your extension code assigned the value "Hello, World" to mytext.text, it will retain that value until explicitly reassigned regardless of myrect.
¶ Events
Events are how the UI signals to your extension the occurrence of various actions and activities happening on the UI during run-time. The types of events emitted is specific to the YML type. For example, Button emits Pressed, Released and Clicked events corresponding to when the button is touched, when the touch is released and if the touch-release sequence signified a 'click' (e.g. touch & release both over the button touch area and Button wasn't disabled etc.).
¶ YML Markup Reference
This section lists each of the supported YML types, along with its properties and events. Inherited properties are not duplicated.
¶ YML Integration Types
¶ Utility
The type of all pendant Utility Window items. Utility have a title-bar and border and may be fixed size; have two sizes (collapsed & expanded, toggled via title-bar icon); or continuously resizeable using a size-handle in the lower-right. Utility windows can be opened by the user from a menu item and closed using the close icon in the top-right of the title-bar.
Utility Windows may be controlled via the API functions openUtilityWindow, closeUtilityWindow, and (API version 2.1+) collapseUtilityWindow and expandUtilityWindow
Inherits: Item
¶ Properties
int margin- the margin between the window border and content (optional; omit for default)bool expandCollapseResize- if true, window as two sizes: expanded and collapsed, which can be toggled between via an icon in the title bar (default false)array collapsedSize- [width,height] of the collapsed window size (default[Const.HalfWidth, Const.QuarterHeight])array expandedSize- [width,height] of the expanded window size (default[Const.FullWidth,Const.HalfHeight])string expandBy- when expanded, expand onlyConst.Width,Const.HeightorConst.Both(default)string collapseBy- when collapsed, collapse onlyConst.Width,Const.HeightorConst.Both(default)bool continuousResize- if true, a resize handle will be shows in the bottom-right of the window allowing users to resize the window arbitrarilyarray minSize- [width,height] minimum window dimensionsarray maxSize- [width,height] maximum window dimensionsint navigationAction- one or more (|separated - bitwise or) ofConst.Expand,Const.CollapseorConst.Close. Causes the Utility window to be expanded, collapsed or closed when the user navigates to a screen (e.g. from the Main Menu, {back} button etc.) (API version 4.0+)string theme-lightordark(defaults to light)bool resolveTransparencies- if true, makes on-screen images appear like textures embedded onto the screen
¶ Events
UtilityOpened- window was openedUtilityClosed- window was closed
¶ Panel
The type of all lower-screen detail panel items.
Inherits: Item
¶ Properties
int margin- the margin between the panel edges and content (optional; omit for default)string theme-lightordark(defaults to dark; light theme only available from SDK API 3.1 onward)
¶ Events
PanelOpened- panel became visiblePanelClosed- panel became hidden
¶ YML Items
- Item
- Rectangle
- Text
- Label
- TextField
- Button
- HelpButton
- CheckBox
- RadioButton
- ComboBox
- Image
- Column
- Row
- Stack
- TabBar
- TabButton
- TabPanel
- Table
- DelegateSelector
- DelegateSelection
- MouseArea
- Grid
- Charts
- GoToPositionButton
- ScrollView
- List
¶ Item
The ancestor of all geometric types (visual or not).
¶ Properties
int width- the on-screen widthint height- the on-screen heightint x- the x coordinate (from left) relative to parent itemint y- the y coordinate (from top) relative to parent itembool visible- is the item visible or hidden?
¶ Events
VisibleChanged- change in thevisibleproperty
¶ Rectangle
A rectangle shape with the given dimensions and color.
Inherits: Item
¶ Properties
string color- fills area with given color. Accepts hex color descriptions, such as"#ff0000"or standard SVG color names, such as"red","blue"etc. Transparency can also be set by setting opacity in front of the hex color, such as"#ff000000"for 100% opacity and"#00000000"for 0% opacity, or the predefined color: "transparent"int radius- radius of rounded corner (defaults to 0)string borderColor- optional color of borderint borderWidth- thickness of the border
¶ Example
Rectangle {
width: 100
height: 50
radius: 5
color: "orange"
borderColor: "purple"
borderWidth: 2
}
¶ Text
Text as specified in selectable font and size.
Inherits: Item
¶ Properties
string text- the text to displaystring color- text colorstring fontName- name of fontint fontSize- text font sizeint fontWeight- One ofConst.Normal,Const.MediumorConst.Boldint valign- vertical alignment within Item. One ofConst.Top,Const.Center(default),Const.Bottom(no effect unless height overridden as height defaults to height of text)int halign- horizontal alignment within Item. One ofConst.Left(default),Const.Center,Const.Right(no effect unless width overridden as width defaults to width of text)int wrapMode-Const.NoWrap(default) orConst.Wrap. Note: if NoWrap, text may extend beyond the right edge of the Item (it is not clipped to the Item width). If Wrap is used, an explicit width should be given, or the Text Item will expand to the width required (and hence not wrap the text).
¶ Text Property
In addition to plain text, the text property also supports a limited subset of HTML for rich text. Specifically, it allows use of the elements h1 through h6, p, pre, table (and tbody,td,th,thead, tr), ul, li, hr, i, b, u, sup, sub and a. The html, body and head elements are also supported for completeness, but not necessary.
For example:
<h1>Heading</h1>
<p>A paragraph with <i>italic</i> and <b>bold</b> text and a link
to the <a href='screen:home'>home screen</a>.
Notice that <a> hyper-links are supported and are primarily used to allow navigation to pendant screens. See the URI Links for details.
¶ Example
Text {
id: textLinktoScreen
text: "<a href=\"screen:toolSettings?toolnum=0&name=Default\">Go to Tools Screen</a>"
}
¶ Label
Text used as the label for a UI control. Defaults to larger font size.
Inherits: Text
¶ TextField
An field of text editable by the user. When clicked/focused will cause the on-screen virtual keyboard or keypad to show.
¶ Properties
string text- current value of the text field (defaults empty)string placeholderText- placeholder text shown (lighter) prior to editing - hint to user what to enterstring color- color of the text (only available from SDK API 3.1 onward)int fontSize- text font sizestring placeholderTextColor- color of the placeholder text (only available from SDK API 3.1 onward)string label- text label for the field (e.g. may be shown above the entry area)string units- text for units (right-aligned in field)bool allowEmpty- is empty entry acceptable?int minimumLength- minimum acceptable entry lengthbool numericInput- numeric entry?int decimalPlaces- maximum number of decimal places (digits after.)real lowerBound- minimum acceptable numeric value (if numericInput)real upperBound- maximum acceptable numeric value (if numericInput)bool uppercaseInput- only allow upper-case lettersbool alphaInputOnly- only allow alphabetic charactersstring allowedChars- explicit list of allowed entry charactersstring keepControlVisible- id of the YML object to keep visible while the keyboard is openint requiredMode- one ofConst.Manual,Const.AutoorConst.Any(default) - enabled if controller operation mode as specifiedint requiredServo- one ofConst.On,Const.OfforConst.Any(default) - enabled if controller servo power as specifiedstring requiredAccess- enabled if current pendant security access level is as specified.Const.[Monitoring|Operating|Editing|Managing|ManagingSafety]
¶ Events
- TextEdited - the text was edited by the user
- EditingFinished - editing was finished by pressing Enter/Save or navigating away from the field (unfocus)
- Accepted - Enter/Save was clicked after editing
¶ Button
Inherits: Item
¶ Properties
string text- the button label (inside the button)string shape- one ofConst.CircleorConst.Rectangle(default)string iconSource- icon inside the button (optional)int iconWidth- width of the icon, if specifiedint iconHeight- height of the icon, if specifiedstring color- button text colorstring bgcolor- button background colorfontSize- pixel font size for labelbool checkable- is this a toggle button? (toggles between checked and unchecked on each click) defaults to false.bool checked- is the button initially checked (if checkable)string navlink- when supplied, clicking the button will take the link action. See URI Links for details.int requiredMode- one ofConst.Manual,Const.AutoorConst.Any(default) - enabled if controller operation mode as specifiedint requiredServo- one ofConst.On,Const.OfforConst.Any(default) - enabled if controller servo power as specifiedstring requiredAccess- enabled if current pendant security access level is as specified.Const.[Monitoring|Operating|Editing|Managing|ManagingSafety]
¶ Events
Clicked- emitted after appropriate press & release (when touch remains inside the button area)Pressed- the button was touched ('pushed down')Released- the touch was released ('up') (only if touch point is inside the button area)Canceled- the touch was moved outside the button (available from SDK API 2.2 onward)
¶ HelpButton
On-screen help information (appears via pop-up). The file or file data must be registered though API registerHTMLFile() or registerHTMLData() functions prior to instantiation.
Inherits: Item
¶ Properties
string title- the title of the pop-up with help informationstring htmlSource- the source file for help content in HTML format. This is only a limited subset of HTML (see Text text property). Links can use pendant-specific protocol schemes (see URI Links) below.
¶ Example
HelpButton {
id: myhelpbutton
title: "Help for My App"
htmlSource: "help/MyRegisteredHelpFile.html"
}
and in Java, register the HTML file using code similar to below (assuming the help tile is in a help subdirectory relative to your archive extension root):
pendant.registerHTMLFile("help/MyRegisteredHelpFile.html");
If the html source is to be updated with arbitrary new data periodically at run-time, consider using a data: URI, which will only store the html in memory and not write it to disk. In this case, since the html data will be passed over the API connection, html files should not be updated at high frequency.
Note: On the pendant, the UI can access html source files directly; however, if running the extension remotely during development, the Java client registerHTMLFile() function will read the file and pass the data to registerHTMLData() instead - so it will be sent over the API network connection and saved in a temporary file on the pendant.
¶ CheckBox
A selectable option (binary checked/unchecked) with optional label text.
| Checked | Unchecked |
|---|---|
 |
 |
¶ Properties
string text- label textbool checked- is the box checked?bool transparent- makes the unchecked box background transparent (only available from SDK API 3.0 onward)int requiredMode- one ofConst.Manual,Const.AutoorConst.Any(default) - enabled if controller operation mode as specifiedint requiredServo- one ofConst.On,Const.OfforConst.Any(default) - enabled if controller servo power as specifiedstring requiredAccess- enabled if current pendant security access level is as specified.Const.[Monitoring|Operating|Editing|Managing|ManagingSafety]
¶ Events
- CheckedChanged - the check box was checked or unchecked
¶ Example
CheckBox {
id: mycheckbox
text: "Enable function"
checked: false
}
¶ RadioButton
A selectable option (binary checked/unchecked) with optional label text. Typically used to select one option from a set of options. When multiple radio buttons are under the same parent, only one of them can be checked at any given time.
¶ Properties
string text- label textbool checked- is the radio button checked?int requiredMode- one ofConst.Manual,Const.AutoorConst.Any(default) - enabled if controller operation mode as specifiedint requiredServo- one ofConst.On,Const.OfforConst.Any(default) - enabled if controller servo power as specifiedstring requiredAccess- enabled if current pendant security access level is as specified.Const.[Monitoring|Operating|Editing|Managing|ManagingSafety]
¶ Events
- CheckedChanged - the check box was checked or unchecked
¶ Example
Column {
RadioButton {
id: onRadio
text: "On"
checked: true
}
RadioButton {
id: offRadio
text: "Off"
}
}
¶ ComboBox
A set of options, one of which is selected. Presented as a drop-down menu of options, showing the currently selected option.
| Standard | Underlined |
|---|---|
 |
 |
¶ Properties
array options- array/vector of strings - one for each option (defaults to the empty array[])int currentIndex- index of currently selected item from the ComboBox optionsbool underlined- changes the combobox style to display as underlined text with a dropdown arrow on transparent background (only available from SDK API 3.0 onward)int requiredMode- one ofConst.Manual,Const.AutoorConst.Any(default) - enabled if controller operation mode as specifiedint requiredServo- one ofConst.On,Const.OfforConst.Any(default) - enabled if controller servo power as specifiedstring requiredAccess- enabled if current pendant security access level is as specified.Const.[Monitoring|Operating|Editing|Managing|ManagingSafety]
¶ Events
- Activated - the user selected one of the options
¶ Example
ComboBox {
id: myselector
width: 200
options: ["AAA", "BBB", "CCC"]
}
¶ Image
On-screen image. The file or file data must be registered though API registerImageFile() or registerImageData() functions prior to instantiation.
Inherits: Item
¶ Properties
string source- reference to previously registered image name (preferred), or data: URI of PNG or JPEG binary dataint fillMode- one of:Const.Stretch- the image is scaled to fit (the default)Const.PreserveAspectFit- the image is scaled uniformly to fit without croppingConst.PreserveAspectCrop- the image is scaled uniformly to fill, cropping if necessaryConst.Tile- the image is duplicated horizontally and verticallyConst.TileVertically- the image is stretched horizontally and tiled verticallyConst.TileHorizontally- the image is stretched vertically and tiled horizontallyConst.Pad- the image is not transformed
¶ Example
Image {
id: myimage
width: 200
source: "MyRegisteredImage.png"
fillMode: Const.PreserveAspectFit // maintain aspect (while fitting width)
}
If the image source is to be updated with arbitrary new data periodically at run-time, consider using a data: URI, which will only store the image in memory and not write it to disk. In this case, since the image data will be passed over the API connection, images should be kept small and not updated at high frequency.
Note: On the pendant, the UI can access image source files directly; however, if running the extension remotely during development, the Java client registerImageFile() function will read the file and pass the data to registerImageData() instead - so it will be sent over the API network connection and saved in a temporary file on the pendant.
¶ Column
Arranges child items vertically.
Inherits: Item
¶ Properties
int spacing- vertical space between children (default 0)align- alignment of child elements. One ofConst.Left,Const.CenterorConst.Right
¶ Row
Arranges child items horizontally.
Inherits: Item
¶ Properties
int spacing- horizontal space between children (default 0)align- alignment of child elements. One ofConst.Top,Const.CenterorConst.Bottom
¶ Stack
Arranges child items on top of each other, such that only the top one is visible, according to the currentIndex.
Inherits: Item
¶ Properties
int count- the number of child Items (read only)int currentIndex- the currently selected content item
¶ TabBar
Container for TabButton Items for each clickable tab of a TabPanel navigation stack. See TabPanel for an example.
Inherits: Item
¶ Properties
int currentIndex- index of currently selected tab (associated TabPanelcurrentIndextypically bound to this property)
¶ TabButton
The clickable tab button that causes its associated tab panel to be shown. See TabPanel for an example.
Inherits: Item
¶ Properties
string text- the text to display as the tab labelstring color- tab button label text colorbool transparent- makes the tab background transparent (only available from SDK API 3.0 onward)
¶ Events
Clicked- emitted when clicked (pressed & released). Will set the parent TabBarcurrentIndexappropriately.
¶ TabPanel
Set of Items, one per tab content. These are arranged as a stack so that only one content item is visible at a time.
Note: The default tab panel background is light colored, so contained items will use the 'light' theme (even if the TabPanel
itself is on a 'dark' themed Item such as Panel).
Inherits: Item
¶ Properties
item bar- the id of the TabBar item used to select the visible tab contentint count- the number of child tab content Items (read only)int currentIndex- the currently selected content item (set automatically from the TabBar)
¶ Example
Column {
spacing: 0 // ensure TabBar directly above TabPanel
TabBar {
id: mytabbar
// useful to have TabButton ids to hook Clicked events to know when
// tabs are selected
TabButton { id: tab1; text: "One" }
TabButton { id: tab2; text: "Two" }
TabButton { id: tab3; text: "Three" }
}
TabPanel {
bar: mytabbar // content selected by this referenced TabBar
width: 400
height: 300
Column {
Label { text: "Tab Content One" }
Button { text: "button1" }
}
Column {
Label { text: "Tab Content Two" }
Button { text: "button2" }
}
Column {
Label { text: "Tab Content Three" }
Button { text: "button3" }
}
}
}
¶ Table
The Table Item is used to present a table of text, optionally with column headings. The number of cells may exceed the visible area, in which case vertical and/or horizontal scrolling with scrollbars may be enabled. Rows or cells may also be selectable, which will generate Click events.
Note: Table is only available from SDK API 2.2 onward.
Inherits: Item
¶ Properties
int rowSpacing- space between rows (default 16)int colSpacing- space between columns (default 16)int margin- space around table content (default 16)int fontSize- default font size for content text (default 16)bool showBorder- show a border around the table (default false)bool showHeadings- show heading labels above columns (default false). The label text is taken from thelabelcolumn key (see below).int cellMargin- margin around content of each cell (default 12)bool rowSelectable- if true, rows can be clicked, highlighting them. This generates aClickevent containing the selected row index.bool cellSelectable- if true, individual cells can be clicked, highlighting the cell. This generates aClickevent containing the selected row and column index.rowSelectableis ignored when cellSelectable is enabled.int selectedRow- the currently selected row (or -1) - readonly for SDK API before 3.0bool verticalScroll- if true and the table content exceeds the available Table Item height, then a vertical scrollbar is shown and content can be scrolled up and down (using touch swipes or by dragging the scrollbar).bool horizontalScroll- if true and the table content exceeds the available Table Item width, then a horizontal scrollbar is shown and content can be scrolled left and right (using swipes or by dragging the scrollbar).array columns- an array of column information map/objects for each column (see example). The following properties for each column map are supported:string key- the key name used to reference this column in the row map (required)int width- the width of the column (optional; implicit width of widest cell if omitted)string label- the display text for the column label, shown ifshowHeadingsis true (optional).string color- the color of cell text in the column (optional; default list text color if omitted)int halign- alignment of the cell text with respect to the column. One ofConst.Left(default),Const.CenterorConst.Right.
array rows- an array of rows where each row is a map using the column keys specified incolumnsand the value to be shown (see example).DelegateSelector delegate- a container holdingDelegateSelectionswhich each hold custom controls that can be mapped to one or more columns of the table.int rowHeights- the height of every row (optional; default -1 corresponds to auto-select).
¶ Events
Clicked- generated ifrowSelectableorcellSelectableare true. Event properties includerowandcolumnindex of selection.
¶ Example
Table {
id: controlstable
height: 290
width: 320
rowSpacing: 0
colSpacing: 10
verticalScroll: true // scrollable
rowSelectable: true // allow selection of rows wih click
fontSize: 18 // make font a little larger
showBorder: true // border around the table
showHeadings: true // display column headings (using label column info)
// The column information
columns: [
{ key: 'model', width: 100, label: "Robot" },
{ key: 'payload', label: "Payload", color: 'green', halign: Const.Right },
{ key: 'reach', width: 116, label: "Horiz Reach", halign: Const.Right }
]
// array of rows, where each row is a map with key corresponding
// to the column info 'key' above
// (could just set this to [] and set it programmatically via serProperty() by
// passing an Any array of Any maps)
rows: [
{model:"MotoMini",payload:".5Kg",reach:"350mm"},
{model:"GP4", payload:"4Kg", reach:"550mm"},
{model:"SG650", payload:"6Kg", reach:"650mm"},
{model:"GP7", payload:"7Kg", reach:"927mm"},
{model:"GP8", payload:"7Kg", reach:"727mm"},
{model:"HC10", payload:"10Kg",reach:"1200mm"},
{model:"GP12", payload:"12Kg",reach:"1440mm"},
{model:"GP12-12", payload:"12Kg",reach:"2010mm"},
{model:"MH24", payload:"24Kg",reach:"1730mm"},
{model:"GP25", payload:"25Kg",reach:"1730mm"},
{model:"GP20HL", payload:"20Kg",reach:"3124mm"},
{model:"GP88", payload:"88Kg",reach:"2236mm"}
]
} // Table
¶ DelegateSelector
Container for holding a collection of DelegateSelections. Set as the delegate for a table control. The last DelegateSelection held will be the default for, any column not specifically selected by the DelegateSelection column property.
Inherits: Item
Note: DelegateSelector is only available from SDK API 2.2 onward.
¶ DelegateSelection
Container for holding Items used to create a custom delegate for the table control. The keyword modelData can be used to access the value of the row and column the DelegateSelection is actively representing.
Inherits: Item
¶ Properties
int column- specify the column of the table which will use the custom delegate. If left unspecified, and theDelegateSelectionis the last declared in theDelegateSelector, then it will become the default delegate.
¶ Events
Events triggered by Items within the DelegateSelection scope also provide row and column data for specifying the cell's location within the table.
Note: DelegateSelection is only available from SDK API 2.2 onward.
¶ Example
//delegate selector for table, each delegate selection corresponds to one or more columns
DelegateSelector {
id:delegateselector
DelegateSelection {
column: 0
Text {
id: statetext
halign: Const.Center
text: modelData
fontSize: 18
}
}
DelegateSelection {
column: 2
Button {
id: trashcanbutton
bgcolor: modelData
height: 50
width: 50
iconSource: "images/trash_can@4x.png"
iconHeight: 30
iconWidth: 30
}
}
//if no column is specified, the final DelegateSelection becomes the default for any
//columns not specifically handled (column 1 for this example)
DelegateSelection {
ComboBox {
id: colorcombobox
width: 100
options: ['red', 'yellow', 'blue','green']
}
}
}
Table {
id: ctableanddelegate
height: 290
width: 280
rowSpacing: 0
colSpacing: 10
verticalScroll: true // scrollable
horizontalScroll: false
rowSelectable: true // allow selection of rows wih click
fontSize: 18 // make font a little larger
showBorder: true // border around the table
showHeadings: true // display column headings (using label column info)
// The column information
columns: [
{ key: 'names', width: 80, label: "State" , halign: Const.Right},
{ key: 'colr', width: 90, label: "Color", halign: Const.Center },
{ key: 'del', width: 80, label: "Delete", halign: Const.Right }
]
// list/array of rows, where each row is a map with key corresponding
// to the column info 'key' above
// (could just set this to [] and set it programmatically via serProperty() by
// passing an Any array of Any maps)
rows: [
{names:"TX", colr:"", del:"red"},
{names:"OH", colr:"", del:"blue"},
{names:"CA", colr:"", del:"green"},
{names:"MI", colr:"", del:"red"},
{names:"NY", colr:"", del:"blue"},
{names:"NM", colr:"", del:"green"},
{names:"AK", colr:"", del:"red"},
{names:"AR", colr:"", del:"blue"},
{names:"DC", colr:"", del:"green"},
{names:"MI", colr:"", del:"red"},
{names:"VA", colr:"", del:"blue"},
{names:"IL", colr:"", del:"green"}
]
delegate: delegateselector
} // Table
}
¶ MouseArea
An invisible rectangular area that can respond to mouse clicks. For example, this may be used to position over sections on an image to capture clicks on specified areas of an image. Place it deeper in the item heirarchy to position it over earlier/shallower items. Mouse events are not passed through when enabled, so other items, like Buttons, below it will not receive clicks.
Inherits: Item
¶ Properties
bool enabled- if true, mouse(touch) events will be captured and events generated; if false, mouse(touch) events will pass through as if no item was present
¶ Events
Clicked- emitted when clicked (pressed & released)Pressed- the button was touched ('pushed down')Released- the touch was released ('up')
Note: Events occur only when MouseArea is enabled.
Note: The touched X,Y coordinates are included in the event properties as the 'mouseX' and 'mouseY' properties. (only available from SDK API 2.2 onward)
¶ Grid
Note: Grid is only available from SDK API 2.2 onward.
Arranges child items in a matrix based grid layout.
Inherits: Item
¶ Properties
int spacing- vertical and horizontal space between children (default 0)int rows- the number of rows in the grid layout (default 0)int columns- the number of columns in the grid layout (default 0)valign- vertical alignment of child element items within their allocated space. One ofConst.Left,Const.CenterorConst.Righthalign- horizontal alignment of child element items within their allocated space. One ofConst.Left,Const.CenterorConst.Right
¶ GoToPositionButton
Note: GoToPositionButton is only available from SDK API 3.0 onward.
A button control for jogging the robot to a specified target in teach mode.
Important: The target must be set after the targetCoordType (or jogMode), the userFrame (if applicable), and the toolNumber has changed to prevent setting an inappropriate target.
In SDK API 3.1 onward, the targetCoordType (or jogMode) is independent from the current jogging mode. (In SDK API 3.0, it is possible to change the jogMode from other sources on the Smart Pendant, so it is advised to monitor and handle the controller event JoggingModeChanged when using this component.)
Inherits: Button
¶ Properties
-
array target- a six element array of doubles, specifying the end position. -
int targetCoordType- specify the target coordinate reference type, PredefinedCoordFrameType enumerator: 1 indicates joint angle, 2 indicates cartesian world, 3 indicates cartesian robot, and 6 indicates cartesian user frame. Only the above values are supported at this time. (Only available for SDK API 3.1 and onward). -
int userFrameNumber- the target user frame number. Relevant when the targetRefType is user frame (6) (or jogMode = 3). (For SDK API 3.0, current user frame number (readonly)) -
int motionType- the motion interpolation type when moving to the target, MotionType enumerator: -1 indicates default, 0 indicates joint, and 1 indicates linear. Motion type "default" corresponds to the SDK API 3.0 behavior, where joint motion is used when targetCoordType is in joint, and linear motion for all other coordinate types. (from SDK API 3.1 onward) -
int toolNumber- the target tool number. Relevant when the targetRefType is not Joint (1) (or jogMode is not 0). When the target tool number is set to -1 (default), the pendant active jogging tool number is used. (For SDK API 3.0, readonly and returns the active jogging tool number) -
int jogSpeed- the current jogging speed, JobSpeed enumerator: 1 indicates low, 2 indicates medium, and 3 indicates high, 4 indicates top. It is possible to change the jog speed from other sources on the Smart Pendant. (For SDK API 3.0, readonly) -
int jogMode (obsolete use targetCoordType)- specify the coordinate space for jogging, JogMode enumerator: 0 indicates joint, 1 indicates cartesian world, and 3 indicates cartesian user frame. (Kept for backward compatibility for SDK API 3.0)
¶ Example
GoToPositionButton {
id: gotoPosButton
requiredServo: Const.On
width: 100
text: "Jog"
}
¶ ScrollView
Note: ScrollView is only available from SDK API 3.1 onward.
A container to hold content which is larger than the container. Swiping your finger will scroll the container to bring the additional content into view.
Inherits: Item
¶ Properties
bool clip- If clipping is enabled, an item will clip its own painting, as well as the painting of its children, to its bounding rectangle. (Default:true)int contentHeightandint contentWidth- This is the size of internal content being scrolled over; not the size of the ScrollView itself. If only a single item is used within a ScrollView, the content size is automatically calculated based on the implicit size of its contained item. However, if more than one item is used (or an implicit size is not provided), thecontentWidthandcontentHeightproperties must be set to the combined size of its contained items.
If thecontentHeightandcontentWidthare not provided, the ScrollView will not be scrollable.
If the content size is less than or equal to the size of the ScrollView, it will not be scrollable.horizontalScrollPolicy- Determines whether the horizontal scroll bars are visible. EitherConst.AlwaysOnorConst.AlwaysOff. (Default:Const.AlwaysOff)bool horizontalScrollInteractive- Whenfalse, you can flick the contents of the ScrollView to scroll. Whentrue, you must touch the scroll bar itself to scroll. (Default:false)verticalScrollPolicy- Determines whether the vertical scroll bars are visible. EitherConst.AlwaysOnorConst.AlwaysOff. (Default:Const.AlwaysOn)bool verticalScrollInteractive- Whenfalse, you can flick the contents of the ScrollView to scroll. Whentrue, you must touch the scroll bar itself to scroll. (Default:false)
¶ Example
ScrollView {
width: 100
height: 50
contentHeight: 200
contentWidth: width
clip: true
}
¶ List
Note: List is only available from SDK API 3.5 onward.
A container to hold elements which can contain multiple key value pairs and can be displayed (using these key values pairs) with a custom delegate. (Supports: appending, deleting, clearing and inserting rows).
Inherits: Item
¶ Properties
bool horizontalScroll- Provide a horizontal scroll bar. (Default:false)bool verticalScroll- Provide a horizontal scroll bar. (Default:true)bool horizontalScrollPosition- Nomalized (0-1) position of horizontal scroll barbool verticalScrollPosition- Nomalized (0-1) position of vertical scroll barint currentIndex- The currently active indexint count- The number of elements in the listdelegate- The user defined custom delegate used for displaying the list. Note there is no default delegate so the user must provide one before attempting to use the list. The key-value pairs used in the list elements must be known a-prior and then can be accessed from the delegate using the model (see the example below).
¶ Example
ListDel {
id: listdel
}
List {
id: list
height: 290
width: 250
delegate: listdel
} //List
¶ Example Custom Delegate (in a separate yml file)
ListDel : Component
{
Rectangle {
id: listdelrect
width: 200
height: 50
borderWidth: 2
borderColor: model["color"]
MouseArea {
id: listdelMouseArea
width: listdelrect.width
height: listdelrect.height
}
Text {
valign:Const.Center
halign: Const.Center
fontSize: 30
text: model["text"] + "_" + index
color: model["color"]
}
}
}
¶ URI Links
In places where URI links can be specified, such as the Button navlink property, Text HTML text <a href> and within Help HTML files, the following pendant-specific URI schemes may be used.
The custom URI protocol screen: will create a hyper link that, when clicked, navigates to the specified pendant screen. The supported screens are: home, jobList, programmingView, toolSettings, userFrameSetting, zoneSettings, homePosition, backup, shockDetectionSetting, alarmHistory, IO, ioAllocation, variables, safetyLogicCircuit, settings, controllerSettings, support, blockIO, packageManagement, log
Some screens may also support the setting of some fields.
- Tools:
screen:toolSettings- toolnum - tool number to be set (also selects it in the list)
- name - tool name to be set
- blockio - name of Block I/O setting to select
- xf, yf, zf - Tool Center Point (TCP) (mm)
- rx, ry, rz - Tool Orientation (degrees)
- weight - Tool Weight (kg)
- xg, yg, zg - Center of Gravity (mm)
- ix, iy, iz - Moment of Inertia
- Package Management:
screen:packageManagement- tab - select tab; one of
packages,extensionsorpresets
- tab - select tab; one of
- Current Job:
screen:programmingView- panel - select navigation panel (one of
IO,variables,jogging,commands, ortestjob) - jobname - open the specified job (if it exists)
- jogmode - set the jogging mode (required Manual/Teach operation) one of
smartframe,joint,xyzworld,xyztool,xyzuserorhandguiding- framenum - (
xyzuseronly) user-frame number to select for jogging coordinate frame - toolnum - (
xyztoolonly) tool number to be active for TCP/tool-tip jogging coordinate frame
- framenum - (
- goto - open Goto Position Popup (only if panel is
jogging) one ofjoint,trans,orientorpos.- joint - is implied if and only if jogmode is
joint- j0,j1, ... j5 - specify joint angles in degrees (fills in fields, no motion is activated)
- s, l, u, r, b and t - aliases for joint angles (as labeled on Jogging screen)
- trans - X, Y and Z fields shown for setting TCP/tool-tip position
- x, y, z - TCP/tool-tip (X,Y,Z) coordinates in mm.
- orient - Rx, Ry and Rz fields shown for setting TCP/tool-tip orientation
- rx, ry, rz - TCP/tool-tip orientation in degrees.
- pos - X, Y, Z, Rx, Ry and Rz fields shown for setting TCP/tool-tip position & orientation
- x, y, z, rx, ry, rz - as above
- joint - is implied if and only if jogmode is
- Example:
screen:programmingView?panel=jogging&jogmode=xyzuser&framenum=5&goto=pos&x=10&y=20&z=30.5&rx=70&ry=90.1&rz=-30.5
will navigate to the programming view, select the Jogging panel, switch to User Frame 5 as the jogging coordinate frame of reference, open the Goto Position popup with X,Y,Z,Rz,Ry and Rz fields visible and pre-filled with the supplied values.
Note: The Goto Position Popup uses the itemName "pendant:movetoPosition" and generates PopupOpended and PopupClosed events.
- panel - select navigation panel (one of
- User Frame Settings
screen:userFrameSetting- framenum - the user frame number to select in the list