Difference between revisions of "Selector"

From HSYCO
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 (image) or (imagelink) object, an image and a text label.
+
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.
+
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 ==
−
<file> - the name of the file to use as image
+
*'''id''': the object's ID, used by UISets
−
<pos> - position. Use the pixels or rows and columns coordinates format <width> - the width of the text box, in pixels
+
{{UI Object Parameter (image)}}
−
<height> - the height of the text box, in pixels
+
{{UI Object Parameter (position)}}
−
<container id> - the container’s id associated to this selector
+
*'''size''': the image's width and height
−
<group> - optional group name, identifying a set of selectors. All selectors
+
*'''container ID''': the container's id associated to this selector
−
with no group name defined are part of the same group <text> - optional text. Can contain HTML tags
+
*'''group''': optional group name, identifying a set of selectors. All selectors with no group name defined are part of the same group  
−
<css> - optional CSS style.
+
*'''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

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
r<r>c<c> Position specified as row/column. E.g. r1c2
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
Retrieved from "http://wiki.hsyco.com/3.5.0/index.php?title=Selector&oldid=5644"