Difference between revisions of "Selector"
Jump to navigation
Jump to search
(8 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
{{UI Object Header}} | {{UI Object Header}} | ||
− | The selector allows you to create a graphical behavior that is similar to having multiple panels with tab navigation, only more flexible than that. The graphical appearance of a selector is the same as an | + | The selector allows you to create a graphical behavior that is similar to having multiple panels with tab navigation, only more flexible than that. The graphical appearance of a selector is the same as an [[Image]] or [[ImageLink]] object, an image and a text label. |
− | You should create two or more overlapped containers in a page, each with a unique id. Then create a | + | You should create two or more overlapped containers in a page, each with a unique id. Then create a selector object for each container, with all selectors having the same group name. When a selector object is touched, the corresponding container's visibility will be set to visible, while all other containers associated to selectors with the same group name will become invisible. |
− | Parameters: | + | == Parameters == |
− | + | *'''id''': the object's ID, used by UISets | |
− | + | {{UI Object Parameter (image)}} | |
− | + | {{UI Object Parameter (position)}} | |
− | + | *'''size''': the image's width and height | |
− | + | *'''container ID''': the container's id associated to this selector | |
− | with no group name defined are part of the same group | + | *'''group''': optional group name, identifying a set of selectors. All selectors with no group name defined are part of the same group |
− | <css> - | + | *'''label''': optional text label next to the button. Can contain HTML tags |
+ | *'''css''': optional CSS style. | ||
+ | |||
+ | {{Note: IMG Filename}} | ||
+ | |||
+ | == Syntax == | ||
+ | (selector!<id> <image>; <position>; <width>; <height>; <container ID>; <group>; <label>; <css>) | ||
+ | E.g. | ||
+ | (selector!<id> apple.png; r3c5; 100; 100; mycontainer;; One) | ||
+ | |||
+ | == UI Attributes == | ||
+ | {{UI Object Attributes (Common)}} | ||
+ | |||
+ | === Label attributes === | ||
+ | {| class="wikitable" | ||
+ | !Name | ||
+ | !Value | ||
+ | !Description | ||
+ | |- | ||
+ | |label | ||
+ | |<string> | ||
+ | |Label's text. Can contain HTML tags | ||
+ | |} |
Latest revision as of 16:01, 29 April 2015
The selector allows you to create a graphical behavior that is similar to having multiple panels with tab navigation, only more flexible than that. The graphical appearance of a selector is the same as an Image or ImageLink object, an image and a text label. You should create two or more overlapped containers in a page, each with a unique id. Then create a selector object for each container, with all selectors having the same group name. When a selector object is touched, the corresponding container's visibility will be set to visible, while all other containers associated to selectors with the same group name will become invisible.
Parameters
- id: the object's ID, used by UISets
- image: image filename
- position: the object's position. Use the pixels or rows and columns coordinates format
- size: the image's width and height
- container ID: the container's id associated to this selector
- group: optional group name, identifying a set of selectors. All selectors with no group name defined are part of the same group
- label: optional text label next to the button. Can contain HTML tags
- css: optional CSS style.
Image files are searched inside the www/<project's name>/img directory first, then inside the www/img directory.
If the filename is set with a UISet, it's possible to load an image from the web by entering the URL, or a path relative to www/<skin's name>/pic by specifying /pic/ followed by the filename
If the filename is set with a UISet, it's possible to load an image from the web by entering the URL, or a path relative to www/<skin's name>/pic by specifying /pic/ followed by the filename
Syntax
(selector!<id> <image>; <position>; <width>; <height>; <container ID>; <group>; <label>; <css>)
E.g.
(selector!<id> apple.png; r3c5; 100; 100; mycontainer;; One)
UI Attributes
Common attributes
Name | Value | Description |
---|---|---|
pos | x<x>y<y> | Position specified as x/y coordinates. E.g. x-5y10 |
visible | true | Default. Show the object |
false | Hide the object | |
blink | true | slow | Blink the object at a slow speed |
fast | Blink the object at a fast speed | |
false | Stop the blinking | |
opacity | 0.0 ... 1.0 | Object opacity from 0 (not visible) to 1 (fully visible) |
rotation | 0 ... 360 | Object rotation in degrees. Images are rotated around the center point, all other objects are rotated around the top left corner |
Label attributes
Name | Value | Description |
---|---|---|
label | <string> | Label's text. Can contain HTML tags |