Selector

From HSYCO
Jump to navigation Jump to search
Note  For a description and a complete list of UI Objects, see UI Objects.

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


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