Canvas UI

Canvas UI http://www.mupe.net/documents/client_script_reference-html/canvas/ Tue, 06 Jan 2009 09:42:45 +0000 FeedCreator 1.7.6(BH) Canvas UI http://www.mupe.net/documents/client_script_reference-html/canvas/index/ Canvas implements a free-form graphical user-interface. Canvas UI is meant to be used in graphical application that require a user-interface that does not auto-format itself, such as many kinds of games. With canvas UI content creator can define absolute locations of the UI items and have features for advanced functionality, such as <ul> <li>image frame animations</li> <li>moving objects</li> <li>showing and hiding</li> <li>anchoring items together</li> <li>z-order</li> <li>windowing (item groups)</li> <li>graphics primitives for drawing lines, circles, arcs, rectangles, ellipses, etc</li> </ul> Canvas UI uses four UI items that have a lot of common functionality but also specialized features. The UI items are <ul> <li>Image</li> <li>String</li> <li>Graphics</li> <li>Button</li> <li>Tilemap</li> <li>Prompt</li> <li>Data</li> </ul> Unlike the form UI, the canvas UI does not use one-level item hierarchy, but there can be several “window”-like drawing spaces, called groups. Groups are used as containers for the UI items. They are rectangular, opaque, areas that can be placed anywhere on the screen. By default, if no groups are created, the UI still containts one group, which is the canvas UI itself. From implementation point-of-view the canvas UI creates a fullscreen group with the ID from the template method. <h1>Identifier</h1> In this UI type the the UI items are referenced using three parameters: ui, group and id. The ui parameter can be left unspecified when the referred UI item is in the same UI with the caller. The group parameter can be left unspecified when the referred UI item is in same UI group with the caller. In addition to the UI items the UI groups and UI itself can be referred with group parameter. Alternatively its possible to refer to ui items using item parameter as follows: item="ui:group/id". <h1>attributes</h1> <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>id</td> <td>string</td> <td>Canvas Id (and default group Id) </td> </tr> <tr> <td>width</td> <td>int</td> <td>Width of the UI. </td> </tr> <tr> <td>height</td> <td>int</td> <td>Height of the UI. </td> </tr> <tr> <td>smallfontheight</td> <td>int</td> <td>Height of the small font size. </td> </tr> <tr> <td>mediumfontheight</td> <td>int</td> <td>Height of the medium font size. </td> </tr> <tr> <td>largefontheight</td> <td>int</td> <td>Height of the large font size. </td> </tr> </table> <h1>creation</h1> <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>type</td> <td>string</td> <td>none</td> <td>must be ‘canvas" </td> </tr> <tr> <td>id</td> <td>string</td> <td>auto</td> <td>Canvas Id (also Id of the default item group) </td> </tr> <tr> <td>style</td> <td>string</td> <td>“color”</td> <td> color = flat color background image = image background tiled = tiled image background </td> </tr> <tr> <td>img</td> <td>string</td> <td>none</td> <td>URL to image that is used with “image” and “tiled” styles. </td> </tr> <tr> <td>resource</td> <td>string</td> <td>none</td> <td>Resource that is used with“image” and “tiled” styles. </td> </tr> <tr> <td>uigroup</td> <td>string</td> <td>none</td> <td>ui group Id </td> </tr> <tr> <td>active</td> <td>boolean</td> <td>true</td> <td> true = UI is displayed false = UI is just stored in ui group </td> </tr> <tr> <td>fullscreen</td> <td>bool</td> <td>true</td> <td>True for fullscreen UIs, false for normal UI size </td> </tr> <tr> <td>bgcolor</td> <td>3-byte hex / string</td> <td>current</td> <td>Canvas background color as hex decimal (RRGGBB) or a color preset. Works with style='color' parameter</td> </tr> <tr> <td>fgcolor</td> <td>3-byte hex / string</td> <td>current</td> <td>Canvas border color as hex decimal (RRGGBB) or a color preset. The canvas uses this color to fill the space around the canvas visible area if the device is using custom resolution.</td> </tr> <tr> <td>defaultsize</td> <td>boolean / string</td> <td>false</td> <td>Set this parameter to true, if the UI size should be one of the standard UI resolutions most suitable for the device or you can set a custom resolution using notation "widthxheight", i.e. "176x208".</td> </tr> </table> Example(s) <pre><code><template type="canvas" id="canvastest" style="tiled"> <parms> <img>tile.png</img> </parms> </template> </code></pre> <h1>Anchoring UI items</h1> Each UI item can be anchored to another UI tem. The programmer specified where this item is anchored to (anchor) and where this item is anchored at (reference). Offsets can also be specified. Default anchor is the top left of the group the object is added to and the default reference is this objects top left corner. If an object is moved and it has another object anchored to it, the anchored object it moved with it. This way the objects can be grouped and moved together. The location of the reference/anchor is defined by: "vertical location"_"horizontal location". The possible combinations are seen in the following table: <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef"></th> <th bgcolor="#efefef">left</th> <th bgcolor="#efefef">center</td> <th bgcolor="#efefef">right</td> </tr> <tr> <th bgcolor="#efefef">top</th> <td>Top_left</td> <td>top_center</td> <td>top_right </td> </tr> <tr> <th bgcolor="#efefef">center</th> <td>center_left</td> <td>center</td> <td>center_right </td> </tr> <tr> <th bgcolor="#efefef">bottom</th> <td>bottom_left</td> <td>bottom_center</td> <td>bottom_right </td> </tr> </table> The anchor and reference points are defined by three parameters reference, anchor and anchorid. the reference parameters tells the reference point of the item and the anchor parameter tells where the reference point is anchored. The anchorid parameter specifies to which item the anchored item is anchored to. In addition to previous, its possible to specify all three parameters within the anchor parameter. This is just implemented there, because defining the anchoring for every item can be cumbersome. To enable this feature, the reference and anchorid parameters are left unspecified and the anchor parameter is given with notation <pre><code>anchor='referencepoint/anchorpoint/anchorid' </code></pre> Example(s) <pre><code><string id='item1' text='test' x="2" y="-2"> <parms> <reference>top_left</reference> <anchor>center</anchor> <anchorid>another_item</anchorid> </parms> </string> <string id='item1' text='test' x="2" y="-2" anchor='top_left/center/another_item' /> </code></pre> <h1>Events defined by Canvas Items</h1> These event hooks are defined for all the canvas UI items. They extend the set of events defined in Common Script Language. on_show This event takes place when a UI item is shown with show method or the item was initialized using visible=true flag. The event only happens if the UI item was not visible and the visibility state has changed, so the content cannot create this event for a visible UI item by calling show. Example(s) <pre><code><hook name="on_show"> <debug text="UI item $(this.id) was just shown." /> </hook> </code></pre> on_hide This event takes place when a UI item is hidden with hide method. The event only happens if the UI item was visible and the visibility state has changed, so the content cannot create this event for a hidden UI item by calling hide. Example(s) <pre><code><hook name="on_delete"> <debug text="UI item $(this.id) was just deleted." /> </hook> </code></pre> on_selector_enter, on_selector_leave These events takes place when the user moves the item selector or the selected item is changed with select method. When the selection is changed on_selector_leave event is created on the previous selected item and on_selector_enter event is created on the newly selected item. In addition to previous item groups receive these events whenever the currently selected item"s item group changes. Content can utilize these events for instance to notify the user of changed selection by changing the looks of the item. Example(s) <pre><code><hook name="on_selector_enter"> <debug text="UI item $(this.id) is selected." /> </hook> <hook name="on_selector_leave"> <debug text="UI item $(this.id) is no more selected." /> </hook> </code></pre> on_select This event takes place when user activates a UI item by moving the selector to it and pressing the activation key on the device. If the selection is locked to a UI item using the select method with lock=true parameter the content no longer receives on_select events. In that kind of situation, the content should hook the on_fire_down and on_fire_up events if it need to catch user pressing the activation key on the device. Example(s) <pre><code><hook name="on_select"> <debug text="UI item $(this.id) was activated by user." /> </hook> </code></pre> on_fire_down, on_fire_up This event notifies the currently selected UI item that user has pressed down or released the activation key on the device. Note that, on_fire_down and on_fire_up events occur before possible on_select event. These events can be used to change the appearance of a UI item to something and back before the on_select event. In addition, if the selection is locked using lock=true parameter with the select method, the UI item does not receive the on_select events anymore, but these events still work. Example(s) <pre><code><hook name="on_fire_up"> <debug text="User released fire button." /> </hook> <hook name="on_fire_down"> <debug text="User pressed fire button." /> </hook> </code></pre> on_left_down, on_left_up These events are for detecting if the user has pressed the left arrow key on the client device. The events are created for the currently selected item if and only if it has been selected with select using the lock=true flag. In other cases the selected items wont receive the events of directional key presses. The on_left_down event occurs when user has pressed the key down and analogically the on_left_up occurs when the key is released. Example(s) <pre><code><hook name="on_left_up"> <debug text="User released left button." /> </hook> <hook name="on_left_down"> <debug text="User pressed left button." /> </hook> </code></pre> on_right_down, on_right_up These events are for detecting if the user has pressed the right arrow key on the client device. The events are created for the currently selected item if and only if it has been selected with select using the lock=true flag. In other cases the selected items wont receive the events of directional key presses. The on_right_down event occurs when user has pressed the key down and analogically the on_right_up occurs when the key is released. Example(s) <pre><code><hook name="on_right_up"> <debug text="User released right button." /> </hook> <hook name="on_right_down"> <debug text="User pressed right button." /> </hook> </code></pre> on_down_down, on_down_up These events are for detecting if the user has pressed the down arrow key on the client device. The events are created for the currently selected item if and only if it has been selected with select using the lock=true flag. In other cases the selected items wont receive the events of directional key presses. The on_down_down event occurs when user has pressed the key down and analogically the on_down_up occurs when the key is released. Example(s) <pre><code><hook name="on_down_up"> <debug text="User released down button." /> </hook> <hook name="on_down_down"> <debug text="User pressed down button." /> </hook> </code></pre> on_up_down, on_up_up These events are for detecting if the user has pressed the arrow up key on the client device. The events are created for the currently selected item and if only if it has been selected with select using the lock=true flag. In other cases the selected items wont receive the events of directional key presses. The on_up_down event occurs when user has pressed the key down and analogically the on_up_up occurs when the key is released. Example(s) <pre><code><hook name="on_up_up"> <debug text="User released up button." /> </hook> <hook name="on_up_down"> <debug text="User pressed up button." /> </hook> </code></pre> on_game_a_down, on_game_a_up These events are for detecting if the user has pressed the game_a key on the client device. The events are created for the currently selected item. There is no pre-requirement for using select. The on_game_a_down event occurs when user has pressed the key down and analogically the on_game_a_up occurs when the key is released. Which key this is, depends on the MIDP implementation. Example(s) <pre><code><hook name="on_game_b_up"> <debug text="User released game_b button." /> </hook> <hook name="on_game_b_down"> <debug text="User pressed game_b button." /> </hook> </code></pre> on_game_b_down, on_game_b_up These events are for detecting if the user has pressed the game_b key on the client device. The events are created for the currently selected item. There is no pre-requirement for using select. The on_game_b_down event occurs when user has pressed the key down and analogically the on_game_b_up occurs when the key is released. Which key this is, depends on the MIDP implementation. Example(s) <pre><code><hook name="on_game_a_up"> <debug text="User released game_a button." /> </hook> <hook name="on_game_a_down"> <debug text="User pressed game_a button." /> </hook> </code></pre> on_game_c_down, on_game_c_up These events are for detecting if the user has pressed the up game_c on the client device. The events are created for the currently selected item. There is no pre-requirement for using select. The on_game_c_down event occurs when user has pressed the key down and analogically the on_game_c_up occurs when the key is released. Which key this is, depends on the MIDP implementation. Example(s) <pre><code><hook name="on_game_c_up"> <debug text="User released game_c button." /> </hook> <hook name="on_game_c_down"> <debug text="User pressed game_c button." /> </hook> </code></pre> on_game_d_down, on_game_d_up These events are for detecting if the user has pressed the up game_d on the client device. The events are created for the currently selected item. There is no pre-requirement for using select. The on_game_d_down event occurs when user has pressed the key down and analogically the on_game_d_up occurs when the key is released. Which key this is, depends on the MIDP implementation. Example(s) <pre><code><hook name="on_game_d_up"> <debug text="User released game_d button." /> </hook> <hook name="on_game_d_down"> <debug text="User pressed game_d button." /> </hook> </code></pre> on_pointer_down, on_pointer_up, on_pointer_dragged These events are for catching events from a pointer device, such as mouse or touch screen. The event hooks must be placed at template level in the script. The pointer events update pointerx and pointery parameters for the canvas which tells the current location of the pointer. The on_pointer_down event occurs when the pointer is activated by pressing mouse button down or touching the screen on a touch screen device. The on_pointer_dragged events occur when the pointer is moved while being activated, and lastly the on_pointer_up event takes place when the pointer becomes inactive again. Example(s) <pre><code><hook name='on_pointer_down'> <debug text="pointer down at $(global.pointerx), $(global.pointery)' /> </hook> <hook name='on_pointer_dragged'> <debug text="pointer moved to $(global.pointerx), $(global.pointery)' /> </hook> <hook name='on_pointer_up'> <debug text="pointer up at $(global.pointerx), $(global.pointery)' /> </hook> </code></pre> on_focus_enter, on_focus_leave Item group receives on_focus_enter event when it becomes the currently locked group when calling <pre><code> <select lock="true" /> </code></pre> If the lock is removed from the item group or the currently selected item group changes, the item group receives on_focus_leave event. Example(s) <pre><code><hook name='on_focus_enter'> <debug text="item group $(this.id) was locked" /> </hook> <hook name='on_focus_leave'> <debug text="item group $(this.id) is no more locked ' /> </hook> </code></pre> <h2>Hooking the number key pad</h2> In addition to the game keys, it is also possible to hook any of the keys in the number pad. In some cases the game keys might actually be mapped to the keys in the number key pad. Keep this in mind when designing the user interaction. Unlike the game keys, these keys can be handled three different of the content. First, the client tries to handle the key for currently selected item. If the item does not have hook defined the key is sent to the selected item"s group. If the item group does not have a hook for the key the key is sent to the canvas template. So its possible to make these keys global by defining the hooks in template level. The event hooks for the key pad are mapped as follows: <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Key </th> <th bgcolor="#efefef">Events </th> </tr> <tr> <td>1</td> <td>on_num1_down, on_num1_up </td> </tr> <tr> <td>2</td> <td>on_num2_down, on_num2_up </td> </tr> <tr> <td>3</td> <td>on_num3_down, on_num3_up </td> </tr> <tr> <td>4</td> <td>on_num4_down, on_num4_up </td> </tr> <tr> <td>5</td> <td>on_num5_down, on_num5_up </td> </tr> <tr> <td>6</td> <td>on_num6_down, on_num6_up </td> </tr> <tr> <td>7</td> <td>on_num7_down, on_num7_up </td> </tr> <tr> <td>8</td> <td>on_num8_down, on_num8_up </td> </tr> <tr> <td>9</td> <td>on_num9_down, on_num9_up </td> </tr> <tr> <td>0</td> <td>on_num0_down, on_num0_up </td> </tr> <tr> <td>*</td> <td>on_star_down, on_star_up </td> </tr> <tr> <td>#</td> <td>on_pound_down, on_pound_up </td> </tr> <tr> <td>Soft key1</td> <td>on_soft1_down, on_soft1_up </td> </tr> <tr> <td>Soft key2</td> <td>on_soft2_down, on_soft1_up </td> </tr> <tr> <td>Clear</td> <td>on_clear_down, on_clear_up </td> </tr> <tr> <td>Hang up</td> <td>on_hangup_down, on_hangup_up </td> </tr> </table> Example(s) <pre><code><hook name="on_num1_down"> <debug text="User pressed number 1 down." /> </hook> </code></pre> <h1>Methods defined by Canvas UI</h1> <h2>outside</h2> This is a conditional statement, which checks if two items do not overlap. The two items must be in the same item group or the target item is not found. The script inside the outside tag is run if the condition is true. If either of the given items is not found the or the condition is false else section inside tag is run. If there is no else section the method does nothing. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>target</td> <td>string</td> <td>none</td> <td>target item </td> </tr> </table> Example(s) <pre><code><outside id="sprite1" target="area1"> <move id="sprite1" x="10" y="10 /> </outside> </code></pre> <h2>intersects</h2> This is a conditional statement, which checks if two items overlap. The two items must be in the same item group or the target item is not found. The script inside the outside tag is run if the condition is true. If either of the given items is not found the or the condition is false else section inside tag is run. If there is no else section the method does nothing. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>target</td> <td>string</td> <td>none</td> <td>target item </td> </tr> </table> Example(s) <pre><code><intersects id="sprite1" target="area1"> <move id="sprite1" x="10" y="10 /> </intersects> </code></pre> <h2>inside</h2> This is a conditional statement, which checks if the item defined by the group and id parameters is inside the item defined by the target parameter. The two items must be in the same item group or the target item is not found. The script inside the outside tag is run if the condition is true. If either of the given items is not found the or the condition is false else section inside tag is run. If there is no else section the method does nothing. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>target</td> <td>string</td> <td>none</td> <td>target item </td> </tr> </table> Example(s) <pre><code><inside id="sprite1" target="area1"> <move id="sprite1" x="10" y="10 /> </inside> </code></pre> <h2>move</h2> Moves a UI item to specified location. The given coordinates are relative to the current anchor point. If there is no anchor item specified the coordinates are relative to the top-left corner of the item group, with the exception that if the moved item is an item group itself then the coordinates are relative to the top-left corner of the screen. In addition to the previous logic there are three ways of moving items: using absolute value, using delta values or both. The absolute values moves the item to the new given (x,y) coordinates relative to the anchor point. The delta-values move the object relative to the current coordinates. If both methods are used, the object is first moved according to the absolute and then according to the delta values. Note: If there are items anchored to the moved item, anchored items automatically moves with the item. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>x</td> <td>int</td> <td>0</td> <td>Absolute x-coordinate </td> </tr> <tr> <td>y</td> <td>int</td> <td>0</td> <td>Absolute y-coordinate </td> </tr> <tr> <td>deltax</td> <td>int</td> <td>0</td> <td>Relative x-vector </td> </tr> <tr> <td>deltay</td> <td>int</td> <td>0</td> <td>Relative y-vector </td> </tr> </table> Example(s) <pre><code><move group="group1" id="item1" deltax="10" deltay="10" /> <move group="group1" x="20" y="20" /> </code></pre> <h2>setcolors</h2> This method is used for changing the foreground and background color values of a UI item. It is a generic method for all UI item types, including item groups. The UI items may only use one of the color values or not using either one of them. In the latter case the method does nothing. The fgcolor and bgcolor parameters may be either 3-byte hex decimal values or predefined color identifiers. In case of 3-byte hex decimal values the format is "rrggbb" where the "rr" means 8-bit red color component value, "gg" green component and "bb" the blue component. In case of using the predefined color identifiers the system recognizes the following color strings: black, white, green, yellow, pink, blue, gray, darkgray, brown and red. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>fgcolor</td> <td>3-byte hex / string</td> <td>current</td> <td>Item foreground color as hex decimal (RRGGBB) or a color preset. </td> </tr> <tr> <td>bgcolor</td> <td>3-byte hex / string</td> <td>current</td> <td>Item background color as hex decimal (RRGGBB) or a color preset. </td> </tr> </table> Example(s) <setcolors fgcolor="ff00ff" bgcolor="black" /> <h2>select</h2> Sets a given UI item as the selected item. The selected item is the one that has the “selector” rectangle drawn around its borders. Only items that have selectable attribute set to true can be set as the selected item. Usually user can browse through the selectable items using arrow keys. This method overrides the user input and jumps the selection to the given item. In addition to the previous feature this method also has functionality of locking the selection to a certain UI item. When the selection is locked to a UI item user cannot move the selection away from the item and the selector rectangle is not drawn around the item. This is especially useful feature in situations where the user should for instance move a UI item, say “starship” image, since the locking also lets the selected item to receive the arrow key presses as events. The events are: <ul> <li>on_left_down & on_left_up</li> <li>on_right_down & on_right_up</li> <li>on_up_down & on_up_up</li> <li>on_down_down & on_down_up</li> </ul> Locking an item group affects the content in such a way that only the items in the locked item group are selectable. When the lock is released with lock="false" parameter the items in all item groups are selectable again. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>lock</td> <td>bool</td> <td>false</td> <td>set to true if selection is locked to the specified item. If the item is an item group the selection is restricted to the items in the item group. </td> </tr> </table> Example(s) <pre><code><select group="group1" id="image1" /> <select id="sprite1" lock="true" /> </code></pre> <h2>show</h2> Shows an UI item or item group with given group and Id information. If the referred item is not found the method does nothing. If the referred object is an item group the group is shown and the items inside it that have visibility flag set to true. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> </table> Example(s) <pre><code><show id="sprite1" /> </code></pre> <h2>hide</h2> Hides an UI item or item group with given group and Id information. If the referred item is not found the method does nothing. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> </table> Example(s) <pre><code><hide id="sprite1" /> </code></pre> <h2>bringtofront</h2> Brings a ui item to top of the z-order in a item group. If the referred item is an item group itself then it is made as the front item group. If the item (or item group) is not a "topmost" (creation parameter) item the item is still stays behind the "topmost" items. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> </table> Example(s) <pre><code><bringtofront id="sprite1" /> </code></pre> <h2>sendtoback</h2> Sends a ui item to bottom of the z-order in a item group. If the referred item is an item group itself then it is made as the backmost item group. If the item (or item group) is a "topmost" (creation parameter) item the item is still stays top of the non-"topmost" items. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> </table> Example(s) <pre><code><sendtoback id="sprite1" /> </code></pre> <h2>allowuserinput</h2> Enables or disables the user input. This may become handy in certain situations where the application wants to prevent the user from making any changes to the UI before the UI has completed some task. The task could be for instance sending a message to the server and waiting for reply. In that case the application can disable the user input before sending the message and when the reply arrives or in case of network error the user input can be enabled again. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>ui</td> <td>string</td> <td>current</td> <td>UI Id. </td> </tr> <tr> <td>value</td> <td>bool</td> <td>true</td> <td>true=user input enabled, false=user input disabled </td> </tr> <tr> <td>type</td> <td>string</td> <td>“all”</td> <td>Optional parameter for only disabling certain types of user input. Possible values are: “menu”=disables/enables menu. “keypad”=disables/enables keypad events “gamekeys”=disables/enables arrow keys, game\_\* keys and fire button “all”=disables/enables all input and resets individual input flags (default) </td> </tr> </table> Example(s) <pre><code><allowuserinput value="false" /> </code></pre> <h2>setselectable</h2> Changes the selectable flag of a UI item. If the selectable flag is set to true user can select the item with browsing through the selectable UI items. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>value</td> <td>bool</td> <td>true</td> <td>The selectable state </td> </tr> </table> Example(s) <pre><code><setselectable id="sprite1" value="true" /> </code></pre> <h2>anchoritem</h2> (Re-)anchors item to another item using given anchor and reference points Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>anchor</td> <td>string</td> <td>“top\_left”</td> <td>Anchor point at the destination item </td> </tr> <tr> <td>reference</td> <td>string</td> <td>“top\_left”</td> <td>Anchor point at this item </td> </tr> <tr> <td>anchorid</td> <td>string</td> <td>none</td> <td>Anchor item </td> </tr> </table> Example(s) <pre><code><anchoritem id="sprite1" reference="bottom\_left" anchor="top\_right" anchor="sprite2" /> </code></pre> <h2>setselectorcolor</h2> Sets the current selector box color. _Parameters _ <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>value</td> <td>Color/string</td> <td>“auto”</td> <td> “auto” = automatic selector color (default). “transparent” = transparent selector. "previous" = previous selector color. <color> = changes the color to given value. </td> </tr> </table> Example(s) <pre><code><setselectorcolor value="transparent" /> <setselectorcolor value="red" /> </code></pre> <h2>beginchange</h2> The changes to the UI are not committed. The beginchange and endchange methods make it possible to greatly improve the performance of the graphical application. Instead of drawing and updating each group and item in each changed region on the screen, only the information of areas that need to be updated are combined together as a one large update area. When the endchange is called the client only updates the one large area instead of multiple smaller areas (as it would have been normally). Each update means that the client has to go through all the items to detect whether they intersect with the updated area or not. When there are a lot of UI items that constantly change the number of those checks can raise exponentially. In such cases its better just to update everything in the combined are once. Note: If the content updates two UI items in the opposite corners of the item group all the items are updated in that item group, since the combined update area covers everything inside the rectangle that includes the to items. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>ui</td> <td>string</td> <td>current</td> <td>UI Id. </td> </tr> <tr> <td>fullupdate</td> <td>bool</td> <td>false</td> <td>Set to true if the screen should be fully redrawn after call to endchange. </td> </tr> </table> Example(s) <pre><code><beginchange /> Lots of UI updates here <endchange /> </code></pre> <h2>endchange</h2> Changes to the UI are committed. The beginchange and endchange method makes it possible to greatly improve the performance of the graphical application. Instead of drawing and updating each group and item in each changed region on the screen, only the information of areas that need to be updated are combined together as a one large update area. When the endchange is called the client only updates the one large area instead of multiple smaller areas (as it would have been normally). Each update means that the client has to go through all the items to detect wether they intersect with the updated area or not. When there are a lot of UI items that constantly change the number of those checks can raise exponentially. In such cases its better just to update everything in the combined are once. Note: If the content updates two UI items in the opposite corners of the item group all the items are updated in that item group, since the combined update area covers everything inside the rectangle that includes the to items. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>ui</td> <td>string</td> <td>current</td> <td>UI Id. </td> </tr> </table> Example(s) <pre><code><beginchange /> Lots of UI updates here <endchange /> </code></pre> <h2>hideloadingicon</h2> Call this method if you want the UI to be responsible of notifying the user about network activity. Once this method is called the UI no longer shows the network activity icon at the top right corner of the UI. Example(s) <pre><code><hideloadingicon /> </code></pre> <h2>overrideselector</h2> Overrides default selector movement. Sometimes the default selector movement is not logical and its good to be able to override the default beviour for certain ui items. One can (re)define the overrides at creation or using <overrideselector /> method. In both cases the overrides are defined ny four parameters "selleft","selright","selup" and "seldown". These parameters define the ID of the item that is selected when the selector is moved to one of the four directions. If one or more of the parameters is given value "auto" that disabled the override and returns default action for those directions. In addition, if the parameter is empty string ("") the direction is always disabled for the ui item. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>selleft</td> <td>string</td> <td>none</td> <td>Id of the selected item when moving left or group and id in format "group/id". Or... "auto" for disabling the override. "" for disabling the direction. </td> </tr> <tr> <td>selright</td> <td>string</td> <td>none</td> <td>Id of the selected item when moving right or group and id in format "group/id". Or... "auto" for disabling the override. "" for disabling the direction. </td> </tr> <tr> <td>selup</td> <td>string</td> <td>none</td> <td>Id of the selected item when moving up or group and id in format "group/id". Or... "auto" for disabling the override. "" for disabling the direction. </td> </tr> <tr> <td>seldown</td> <td>string</td> <td>none</td> <td>Id of the selected item when moving down or group and id in format "group/id". Or... "auto" for disabling the override. "" for disabling the direction. </td> </tr> </table> Example(s) <pre><code><overrideselector selleft='_' selright='img1' selup='auto' />_ </code></pre> <h2>moveselector</h2> Moves selector to given direction. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>direction</td> <td>string</td> <td>none</td> <td>"left" moves selector to left. "right" moves selector to right. "up" moves selector to up. "down" moves selector to down. </td> </tr> </table> Example(s) <pre><code><moveselector direction='left' />_ </code></pre> <h1>Item Groups</h1> A group is a special case of the UI items. It is a UI item that contains other UI items. A group cannot contain other groups, to keep the UI topology Just as a flat one level hierarchy. The z-order applies to item groups too, so the UIs can be made to look as the groups would be inside another group by making it smaller, placing it inside the other group"s area (or for instance anchoring it to the center of another group), and making it the topmost item group. Item groups are always opaque rectangular areas. The background of the item group can be drawn with solid color, it can be an image, or a tiled image. The (x,y) coordinates are relative to the current anchor point (as with UI items), which is the top-left corner of the screen if no anchor point is specified. <h2>Modal item groups</h2> Modal item groups are a special case of item group. They remember the last UI focus as they are shown. Also, they do not give UI focus to any other item group but another modal item group. When modal item group is hidden or deleted, it returns the ui focus to the UI item that was last selected, before the modal item group was shown. This feature can be enabled with modal="true" creation parameter. <h2>attributes</h2> <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>id</td> <td>string</td> <td>Item group Id </td> </tr> <tr> <td>visible</td> <td>bool</td> <td>Visibility flag </td> </tr> <tr> <td>bgcolor</td> <td>int </td> <td>Current background color </td> </tr> <tr> <td>width</td> <td>int</td> <td>Width of the item group </td> </tr> <tr> <td>height</td> <td>int</td> <td>height of the item group </td> </tr> <tr> <td>x</td> <td>int</td> <td>x-coordidate </td> </tr> <tr> <td>y</td> <td>int</td> <td>y-coordinate </td> </tr> </table> <h2>creation</h2> <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>id</td> <td>string</td> <td>auto</td> <td>Item id </td> </tr> <tr> <td>inherits</td> <td>string</td> <td>none</td> <td>Item inherits the hooks of this item </td> </tr> <tr> <td>visible</td> <td>bool</td> <td>true</td> <td>Visible flag </td> </tr> <tr> <td>anchor</td> <td>string</td> <td>none</td> <td>Anchor point at the destination item </td> </tr> <tr> <td>reference</td> <td>string</td> <td>none</td> <td>Anchor point at this item </td> </tr> <tr> <td>anchorid</td> <td>string</td> <td>none</td> <td>Anchor item </td> </tr> <tr> <td>bgcolor</td> <td>3-byte hex / string </td> <td>“white”</td> <td>Background color </td> </tr> <tr> <td>x</td> <td>int</td> <td>0</td> <td>X-coordinate </td> </tr> <tr> <td>y</td> <td>int</td> <td>0</td> <td>Y-coordinate </td> </tr> <tr> <td>width</td> <td>int</td> <td>canvas width</td> <td>Item group width </td> </tr> <tr> <td>height</td> <td>int</td> <td>canvas height</td> <td>Item group height </td> </tr> <tr> <td>style</td> <td>string</td> <td>“color”</td> <td> “color” = bgcolor attribute used for solid color background “image” = centered background image “tiled” = tiled background image “transparent”= transparent background “rounded” = group has a round border </td> </tr> <tr> <td>img</td> <td>string</td> <td>none</td> <td>URL that points to image that is used as a background. </td> </tr> <tr> <td>resource</td> <td>string</td> <td>none</td> <td>Image resource that is used as a background. Optional to "img" parameter. </td> </tr> <tr> <td>border</td> <td>bool</td> <td>false</td> <td>Set to true if the item group's border should be drawn. </td> </tr> <tr> <td>topmost</td> <td>bool</td> <td>false</td> <td>Set to true if the item group should stay on top of non-topmost item groups. </td> </tr> <tr> <td>modal</td> <td>bool</td> <td>false</td> <td>Set to true if the item group is a modal item group which remembers the UI focus when it is hidden.</td> </tr> </table> Example(s) <pre><code><group id="mygroup" x="20%" y="30%" width="60%" height="40%"> <parms> <style>color</style> <bgcolor>black</bgcolor> </parms> <hook name="on\_show"> ... some script here ... </hook> <image id="img1" x="0" y="0" resource="res1" /> </group> </code></pre> <h2>scroll</h2> Scrolls an item group horizontally and/or vertically by moving the UI items inside the item group. However, items that have been created using sticky="true" parameter, are not scrolled. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>deltax</td> <td>int</td> <td>0</td> <td>Horizontal delta. </td> </tr> <tr> <td>deltay</td> <td>int</td> <td>0</td> <td>Vertical delta. </td> </tr> </table> Example(s) <pre><code><scroll id="group1" deltax="5" /> </code></pre> <h2>resize</h2> Resizes the item group horizontally and/or vertically. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>width</td> <td>int</td> <td>current</td> <td>Item width </td> </tr> <tr> <td>height</td> <td>int</td> <td>current</td> <td>Item height </td> </tr> <tr> <td>deltawidth</td> <td>int</td> <td>0</td> <td>Change in width </td> </tr> <tr> <td>deltaheight</td> <td>int</td> <td>0</td> <td>Change in height </td> </tr> </table> Example(s) <pre><code><resize id="group1" deltawidth="5" /> </code></pre> <h1>string</h1> String is a UI item that has a rectangular area where a text string is rendered using given font, style and color. The size of the area can be set to automatic fit the text into it. If the string item uses static area size, the text that does not fit the area is clipped out. If only the width of the area is defined the text will automatically stretch the bounding box vertically to fit all the lines in the area. If only height is defined, the text has a static height bounding box but it automatically stretches horizontally according to the text size. And finally if neither width or height is defined, the height of the bounding box is the used font height and width equals to the text width. The text is drawn with current fgcolor value and background with the current bgcolor. The bounding box can also be set as transparent, in which case only the text is drawn. <h2>attributes</h2> <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>id</td> <td>string</td> <td>Item Id </td> </tr> <tr> <td>group</td> <td>string</td> <td>Item group </td> </tr> <tr> <td>visible</td> <td>bool</td> <td>Visible flag </td> </tr> <tr> <td>selectable</td> <td>bool</td> <td>Is item selectable by user </td> </tr> <tr> <td>fgcolor</td> <td>int </td> <td>Text color </td> </tr> <tr> <td>bgcolor</td> <td>int </td> <td>Background color for the item </td> </tr> <tr> <td>width</td> <td>int</td> <td>Width of the item</td> </tr> <tr> <td>height</td> <td>int</td> <td>Height of the item</td> </tr> <tr> <td>x</td> <td>int</td> <td>X-coordinate relative to currently anchored item </td> </tr> <tr> <td>y</td> <td>int</td> <td>Y-coordinate relative to currently anchored item </td> </tr> <tr> <td>top</td> <td>Int</td> <td>Y-coordinate relative to item group. </td> </tr> <tr> <td>left</td> <td>int</td> <td>X-coordinate relative to item group. </td> </tr> <tr> <td>bottom</td> <td>int</td> <td>(y+width)-coordinate relative to item group. </td> </tr> <tr> <td>right</td> <td>int</td> <td>(x+height)-coordinate relative to item group. </td> </tr> <tr> <td>sticky</td> <td>bool</td> <td>True if the item is not scrollable </td> </tr> <tr> <td>text</td> <td>string</td> <td>The text </td> </tr> </table> <h2>creation</h2> <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>id</td> <td>string</td> <td>auto</td> <td>Item Id </td> </tr> <tr> <td>group</td> <td>string</td> <td>default</td> <td>Item group </td> </tr> <tr> <td>inherits</td> <td>string</td> <td>none</td> <td>Item inherits the hooks of this item </td> </tr> <tr> <td>selectable</td> <td>bool</td> <td>false</td> <td>Item is selectable by user </td> </tr> <tr> <td>visible</td> <td>bool</td> <td>true</td> <td>Visible flag </td> </tr> <tr> <td>anchor</td> <td>string</td> <td>none</td> <td>Anchor point at the destination item </td> </tr> <tr> <td>reference</td> <td>string</td> <td>none</td> <td>Anchor point at this item </td> </tr> <tr> <td>anchorid</td> <td>string</td> <td>none</td> <td>Anchor item </td> </tr> <tr> <td>fgcolor</td> <td>3-byte hex / string </td> <td>“black”</td> <td>Text color </td> </tr> <tr> <td>bgcolor</td> <td>3-byte hex / string </td> <td>“white”</td> <td>Background color for the item </td> </tr> <tr> <td>x</td> <td>int</td> <td>0</td> <td>X-coordinate </td> </tr> <tr> <td>y</td> <td>int</td> <td>0</td> <td>Y-coordinate </td> </tr> <tr> <td>sticky</td> <td>bool</td> <td>false</td> <td>Set to true if the ui should not be scrolled via scroll. </td> </tr> <tr> <td>width</td> <td>int</td> <td>text width</td> <td>Width of the item</td> </tr> <tr> <td>height</td> <td>int</td> <td>font height</td> <td>Height of the item</td> </tr> <tr> <td>text</td> <td>string</td> <td>none</td> <td>The text string </td> </tr> <tr> <td>face</td> <td>string</td> <td>“system”</td> <td>Font face: “system”, “monospace” or “proportional” </td> </tr> <tr> <td>size</td> <td>string</td> <td>"small"</td> <td>Font size: “small”, “medium”, “large” </td> </tr> <tr> <td>bold</td> <td>bool</td> <td>false</td> <td>Flag for bold text </td> </tr> <tr> <td>italic</td> <td>bool</td> <td>false</td> <td>Flag for Italic text </td> </tr> <tr> <td>plain</td> <td>bool</td> <td>false</td> <td>Flag for plain text </td> </tr> <tr> <td>underlined</td> <td>bool</td> <td>false</td> <td>Flag for Underlined text </td> </tr> <tr> <td>font</td> <td>string</td> <td>none</td> <td>Alternatively to default MIDP fonts, you can use a bitmap font image resource. Set the resource id here or leavy unspecified for using the default fonts.</td> </tr> <tr> <td>opaque</td> <td>bool</td> <td>false</td> <td>Flag for opaque text </td> </tr> <tr> <td>halign</td> <td>string</td> <td>“left”</td> <td>Horizontal alignment of the text inside bounding box: “left”, “center”, “right” </td> </tr> <tr> <td>valign</td> <td>string</td> <td>“top"</td> <td>Vertical alignment of the text inside bounding box: “top”, “center”, “bottom” </td> </tr> <tr> <td>align</td> <td>string</td> <td>"top/left"</td> <td>Optional way to define the alignment. Using format "horizontal alignment/vertical alignment" </td> </tr> <tr> <td>hpadding</td> <td>int</td> <td>0</td> <td>Horizontal padding for the text. Amount of pixels at left and right borders not used by the text inside the bounding box. </td> </tr> <tr> <td>border</td> <td>bool</td> <td>false</td> <td>Set to true if the text bounding box needs to be drawn. </td> </tr> <tr> <td>drawselector</td> <td>bool</td> <td>true</td> <td>Set to false if the ui item handles its own selector visuals. </td> </tr> <tr> <td>topmost</td> <td>bool</td> <td>false</td> <td>Set to true if the item should stay on top of non-topmost items. </td> </tr> <tr> <td>xoffset</td> <td>int</td> <td>0</td> <td>Initial x-offset of the text inside it's bounding box. </td> </tr> <tr> <td>yoffset</td> <td>int</td> <td>0</td> <td>Initial y-offset of the text inside it's bounding box. </td> </tr> <tr> <td>autowrap</td> <td>bool</td> <td>true</td> <td>Set this to false if you do not want the text to lines to be wrapped at the bounding box border. </td> </tr> </table> Example(s) <pre><code><string id="string1" x="50" y="50" face="monospace"> <parms> <text>Hello world!</text> </parms> </string> <string id="string2" anchor="bottom\_center" reference="top\_center"> <parms> <y>10</y> <face>monospace</face> <text>======</text> </parms> </string> </code></pre> <h2>settext</h2> Changes the text string for the UI item. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>text</td> <td>string</td> <td>none</td> <td>The text string </td> </tr> </table> Example(s) <pre><code><settext id="string1" text="changed text" /> </code></pre> <h2>setstyle</h2> Changes the font and style of the text. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>face</td> <td>string</td> <td>“system”</td> <td>Font face: “system”, “monospace” or “proportional” </td> </tr> <tr> <td>size</td> <td>string</td> <td>“medium”</td> <td>Font size: “small”, “medium”, “large” </td> </tr> <tr> <td>bold</td> <td>bool</td> <td>false</td> <td>Flag for bold text </td> </tr> <tr> <td>italic</td> <td>bool</td> <td>false</td> <td>Flag for Italic text </td> </tr> <tr> <td>plain</td> <td>bool</td> <td>false</td> <td>Flag for plain text </td> </tr> <tr> <td>underlined</td> <td>bool</td> <td>false</td> <td>Flag for Underlined text </td> </tr> <tr> <td>opaque</td> <td>bool</td> <td>false</td> <td>Flag for opaque text </td> </tr> <tr> <td>halign</td> <td>string</td> <td>“left”</td> <td>Horizontal alignment of the text inside bounding box: “left”, “center”, “right” </td> </tr> <tr> <td>valign</td> <td>string</td> <td>“top"</td> <td>Vertical alignment of the text inside bounding box: “top”, “center”, “bottom” </td> </tr> <tr> <td>align</td> <td>string</td> <td>"top/left"</td> <td>Optional way to define the alignment. Using format "horizontal alignment/vertical alignment" </td> </tr> <tr> <td>hpadding</td> <td>int</td> <td>0</td> <td>Horizontal padding for the text. Amount of pixels at left and right borders not used by the text inside the bounding box. </td> </tr> <tr> <td>border</td> <td>bool</td> <td>false</td> <td>Set to true if the text bounding box needs to be drawn. </td> </tr> <tr> <td>xoffset</td> <td>int</td> <td>current</td> <td>Initial x-offset of the text inside it's bounding box. </td> </tr> <tr> <td>yoffset</td> <td>int</td> <td>current</td> <td>Initial y-offset of the text inside it's bounding box. </td> </tr> </table> Example(s) <pre><code><setstyle id="string1" face="proportional" /> </code></pre> <h2>resize</h2> Resizes the bounding box of the string item. If the width or height is set to -1 that means the bounding box will automatically calculate the width or height values according to the text size. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>width</td> <td>int</td> <td>current</td> <td>Item width </td> </tr> <tr> <td>height</td> <td>int</td> <td>current</td> <td>Item height </td> </tr> <tr> <td>deltawidth</td> <td>int</td> <td>0</td> <td>Change in width </td> </tr> <tr> <td>deltaheight</td> <td>int</td> <td>0</td> <td>Change in height </td> </tr> </table> Example(s) <pre><code><resize id="string1" width="100" height="10" /> </code></pre> <h2>scroll</h2> Scrolls the text inside it's bounding box. If the limit of available text is reached on one of the direction the scrolling is not done, i.e the text cannot be scrolled out of view. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>xoffset</td> <td>int</td> <td>current</td> <td>Text x-coordinate inside bounding box. Value 0 resets the text to original position. </td> </tr> <tr> <td>yoffset</td> <td>int</td> <td>current</td> <td>Text y-coordinate inside bounding box. Value 0 resets the text to original position. </td> </tr> <tr> <td>deltax</td> <td>int</td> <td>0</td> <td>Relative horizontal scroll amount in pixels. </td> </tr> <tr> <td>deltay</td> <td>int</td> <td>0</td> <td>Relative vertical scroll amount in pixels. </td> </tr> </table> Example(s) <pre><code><scroll id="string1" deltax="10" /> </code></pre> <h2>append</h2> Appends a string in the end of the text. This is handly especially when the text is very long and it is updated rapidly. It also implements a FiFo buffer that cuts text off the beginning while adding text to the end. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>text</td> <td>string</td> <td>none</td> <td>The text string </td> </tr> <tr> <td>max</td> <td>int</td> <td>0</td> <td>Maximum size of the text after append.</td> </tr> </table> Example(s) <pre><code><append id="string1" text="new text" max="100" /> </code></pre> <h2>insert</h2> Inserts a string in the beginning of the text. This is handly especially when the text is very long and it is updated rapidly. It also implements a FiFo buffer that cuts text off the end while adding text to the beginning. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>text</td> <td>string</td> <td>none</td> <td>The text string </td> </tr> <tr> <td>max</td> <td>int</td> <td>0</td> <td>Maximum size of the text after insertion.</td> </tr> </table> Example(s) <pre><code><insert id="string1" text="new text" max="100" /> </code></pre> <h1>image</h1> UI item that supports downloadable images. It can be set to download an image from internet or it can use a defined image resource with "resource:" prefix as the url parameter. Like the other UI items it can be placed anywhere in its group. One can specify static framewidth and frameheight parameters to use the image data as a storage of multiple frames of data. If the framewidth and frameheight are specified the image is shown as given size and it is possible to change the active visible area using setframe method, where the given value parameter corresponds to a image frame in the actually image data. This functionality can be used to create image frame animations by having all the frames of a "sprite" in one image and then changing the active frame with setframe method. This method also saves some memory and it is faster to download one large image than many smaller ones. <h2>attributes</h2> <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>id</td> <td>string</td> <td>Item Id </td> </tr> <tr> <td>group</td> <td>string</td> <td>Item group </td> </tr> <tr> <td>visible</td> <td>bool</td> <td>Visible flag </td> </tr> <tr> <td>selectable</td> <td>bool</td> <td>Is item selectable by user </td> </tr> <tr> <td>fgcolor</td> <td>int </td> <td>Text color </td> </tr> <tr> <td>bgcolor</td> <td>int </td> <td>Background color for the item </td> </tr> <tr> <td>width</td> <td>int</td> <td>Width of the item</td> </tr> <tr> <td>height</td> <td>int</td> <td>Height of the item</td> </tr> <tr> <td>x</td> <td>int</td> <td>X-coordinate relative to currently anchored item </td> </tr> <tr> <td>y</td> <td>int</td> <td>Y-coordinate relative to currently anchored item </td> </tr> <tr> <td>top</td> <td>Int</td> <td>Y-coordinate relative to item group. </td> </tr> <tr> <td>left</td> <td>int</td> <td>X-coordinate relative to item group. </td> </tr> <tr> <td>bottom</td> <td>int</td> <td>(y+width)-coordinate relative to item group. </td> </tr> <tr> <td>right</td> <td>int</td> <td>(x+height)-coordinate relative to item group. </td> </tr> <tr> <td>sticky</td> <td>bool</td> <td>True if the item is not scrollable </td> </tr> <tr> <td>url</td> <td>string</td> <td>Image URL </td> </tr> <tr> <td>frame</td> <td>int</td> <td>Current frame number. </td> </tr> </table> <h2>creation</h2> <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>id</td> <td>string</td> <td>auto</td> <td>Item Id </td> </tr> <tr> <td>group</td> <td>string</td> <td>default</td> <td>Item group </td> </tr> <tr> <td>inherits</td> <td>string</td> <td>none</td> <td>Item inherits the hooks of this item </td> </tr> <tr> <td>selectable</td> <td>bool</td> <td>false</td> <td>Item is selectable by user </td> </tr> <tr> <td>visible</td> <td>bool</td> <td>true</td> <td>Visible flag </td> </tr> <tr> <td>anchor</td> <td>string</td> <td>none</td> <td>Anchor point at the destination item </td> </tr> <tr> <td>reference</td> <td>string</td> <td>none</td> <td>Anchor point at this item </td> </tr> <tr> <td>anchorid</td> <td>string</td> <td>none</td> <td>Anchor item </td> </tr> <tr> <td>fgcolor</td> <td>3-byte hex / string </td> <td>“black”</td> <td>Text color </td> </tr> <tr> <td>bgcolor</td> <td>3-byte hex / string </td> <td>“white”</td> <td>Background color for the item </td> </tr> <tr> <td>x</td> <td>int</td> <td>0</td> <td>X-coordinate </td> </tr> <tr> <td>y</td> <td>int</td> <td>0</td> <td>Y-coordinate </td> </tr> <tr> <td>sticky</td> <td>bool</td> <td>false</td> <td>Set to true if the ui should not be scrolled via scroll. </td> </tr> <tr> <td>url</td> <td>string</td> <td>none</td> <td>URL for downloadable image. </td> </tr> <tr> <td>resource</td> <td>string</td> <td>none</td> <td>Image resource id. Alternate to URL parameter. </td> </tr> <tr> <td>framewidth</td> <td>int</td> <td>none</td> <td>Width of an image frame for sprite images </td> </tr> <tr> <td>frameheight</td> <td>int</td> <td>none</td> <td>Height of an image frame for sprite images </td> </tr> <tr> <td>cache</td> <td>string</td> <td>"true"</td> <td>Set to "false" if the image should not be cached but downloaded each time. Set to "update" if the data in cache only needs to be updated. </td> </tr> <tr> <td>cropx</td> <td>int</td> <td>0</td> <td>Crop rect for displaying a portion of a larger image resource. </td> </tr> <tr> <td>cropy</td> <td>int</td> <td>0</td> <td>Crop rect for displaying a portion of a larger image resource. </td> </tr> <tr> <td>cropwidth</td> <td>int</td> <td>Image width</td> <td>Crop rect for displaying a portion of a larger image resource. </td> </tr> <tr> <td>cropheight</td> <td>int</td> <td>Image height</td> <td>Crop rect for displaying a portion of a larger image resource. </td> </tr> <tr> <td>drawselector</td> <td>bool</td> <td>true</td> <td>Set to false if the ui item handles its own selector visuals. </td> </tr> <tr> <td>topmost</td> <td>bool</td> <td>false</td> <td>Set to true if the item should stay on top of non-topmost items. </td> </tr> </table> Example(s) <pre><code><image id="logo" x="10" y="10" resource="res\_logo" /> <image id="logo2'> <parms> <anchor>center_right</anchor> <reference>center_left</reference> <anchorid>logo</anchorid> <url>logo2.png</url> </parms> </image> </code></pre> <h2>setimage</h2> Sets new image data for the image item. It can either be a url to a network image or a image resource. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>url</td> <td>string</td> <td>none</td> <td>URL to downloadable image. </td> </tr> <tr> <td>resource</td> <td>string</td> <td>none</td> <td>Reference to image resource (optional to url). </td> </tr> <tr> <td>framewidth</td> <td>int</td> <td>none</td> <td>Width of an image frame for sprite images </td> </tr> <tr> <td>frameheight</td> <td>int</td> <td>none</td> <td>Height of an image frame for sprite images </td> </tr> <tr> <td>cache</td> <td>string</td> <td>"true"</td> <td>Set to "false" if the image should not be cached but downloaded each time. Set to "update" if the data in cache only needs to be updated. </td> </tr> <tr> <td>cropx</td> <td>int</td> <td>0</td> <td>Crop rect for displaying a portion of a larger image resource. </td> </tr> <tr> <td>cropy</td> <td>int</td> <td>0</td> <td>Crop rect for displaying a portion of a larger image resource. </td> </tr> <tr> <td>cropwidth</td> <td>int</td> <td>Image width</td> <td>Crop rect for displaying a portion of a larger image resource. </td> </tr> <tr> <td>cropheight</td> <td>int</td> <td>Image height</td> <td>Crop rect for displaying a portion of a larger image resource. </td> </tr> </table> Example(s) <pre><code><setimage id="logo" url="http://www.images.com/logo3.png" /> </code></pre> <h2>setframe</h2> Sets an active frame of the sprite image. The sprite functionality can be activated by setting static framewidth and frameheight parameters for an image. The actual image is divided into frames so that it is possible to change the active image frame by changing image frame index. The first image is the one in the top left corner, the next is the one on the right and so forth. The 1st image frame index is 0 and the next frame index is 1 and so forth. The frames can be arranged in multiple rows and columns as well. If the given frame index is outside the range of frames defined for the image, the index is the normalized into the range. I.e. if there is 5 frames (0…4) defined for an image and one tries to use index="6" parameter within the setframe method the frame index set for the image is actually ‘1" when after normalization. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>index</td> <td>int</td> <td>current</td> <td>Absolute index to visible frame. </td> </tr> <tr> <td>delta</td> <td>int</td> <td>0</td> <td>Relative index to visible frame. i.e. delta=1 means next frame. delta=-1 means previous frame. </td> </tr> </table> Example(s) <pre><code><setframe id="sprite1" delta="3" /> </code></pre> <h2>transform</h2> Applies given transformations to the image. Currently available transformations are image rotation and mirror. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>rotate</td> <td>string</td> <td>none</td> <td>Rotation value. Valid values are: “clockwise” = rotates image 90 degrees clockwise “anticlockwise” = rotates image 90 degrees anticlockwise “deg0” = 0 degrees “deg90” = 90 degrees “deg180” = 180 degrees “deg270” = 270 degrees </td> </tr> <tr> <td>origox</td> <td>int</td> <td>0</td> <td>X-coordinate of the rotation center </td> </tr> <tr> <td>origoy</td> <td>int</td> <td>0</td> <td>X-coordinate of the rotation center </td> </tr> <tr> <td>mirror</td> <td>bool</td> <td>false</td> <td>True for mirrored image </td> </tr> </table> Example(s) <pre><code><transform id="sprite1" rotate="deg90" mirror="true" /> </code></pre> <h1>graphics</h1> Graphics is a UI item that consists of graphics elements. The elements are: line, rectangle, circle, ellipse and arc. These graphics elements can be drawn anywhere in the graphics item"s bounding box. The graphics item can have a solid color background or the background can be left transparent. Each graphics element can be drawn with a different color and they may be drawn filled. ince version 2.26 of the client the graphics items can drawn using double buffering. This way the drawing of the graphics item becomes faster with the following limitations: <ul> <li>the graphics item cannot be transparent</li> <li>resize, undo and forget do not work with double buffered graphics items</li> </ul> <h2>attributes</h2> <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>id</td> <td>string</td> <td>Item Id </td> </tr> <tr> <td>group</td> <td>string</td> <td>Item group </td> </tr> <tr> <td>visible</td> <td>bool</td> <td>Visible flag </td> </tr> <tr> <td>selectable</td> <td>bool</td> <td>Is item selectable by user </td> </tr> <tr> <td>fgcolor</td> <td>int </td> <td>Text color </td> </tr> <tr> <td>bgcolor</td> <td>int </td> <td>Background color of the item</td> </tr> <tr> <td>width</td> <td>int</td> <td>Width of the item</td> </tr> <tr> <td>height</td> <td>int</td> <td>Height of the item</td> </tr> <tr> <td>x</td> <td>int</td> <td>X-coordinate relative to currently anchored item </td> </tr> <tr> <td>y</td> <td>int</td> <td>Y-coordinate relative to currently anchored item </td> </tr> <tr> <td>top</td> <td>Int</td> <td>Y-coordinate relative to item group. </td> </tr> <tr> <td>left</td> <td>int</td> <td>X-coordinate relative to item group. </td> </tr> <tr> <td>bottom</td> <td>int</td> <td>(y+width)-coordinate relative to item group. </td> </tr> <tr> <td>right</td> <td>int</td> <td>(x+height)-coordinate relative to item group. </td> </tr> <tr> <td>sticky</td> <td>bool</td> <td>True if the item is not scrollable </td> </tr> </table> <h2>creation</h2> <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>id</td> <td>string</td> <td>auto</td> <td>Item Id </td> </tr> <tr> <td>group</td> <td>string</td> <td>default</td> <td>Item group </td> </tr> <tr> <td>inherits</td> <td>string</td> <td>none</td> <td>Item inherits the hooks of this item </td> </tr> <tr> <td>selectable</td> <td>bool</td> <td>false</td> <td>Item is selectable by user </td> </tr> <tr> <td>visible</td> <td>bool</td> <td>true</td> <td>Visible flag </td> </tr> <tr> <td>anchor</td> <td>string</td> <td>none</td> <td>Anchor point at the destination item </td> </tr> <tr> <td>reference</td> <td>string</td> <td>none</td> <td>Anchor point at this item </td> </tr> <tr> <td>anchorid</td> <td>string</td> <td>none</td> <td>Anchor item </td> </tr> <tr> <td>fgcolor</td> <td>3-byte hex / string </td> <td>“black”</td> <td>Text color </td> </tr> <tr> <td>bgcolor</td> <td>3-byte hex / string </td> <td>“white”</td> <td>Background color of the item</td> </tr> <tr> <td>x</td> <td>int</td> <td>0</td> <td>X-coordinate </td> </tr> <tr> <td>y</td> <td>int</td> <td>0</td> <td>Y-coordinate </td> </tr> <tr> <td>sticky</td> <td>bool</td> <td>false</td> <td>Set to true if the ui should not be scrolled via scroll. </td> </tr> <tr> <td>width</td> <td>int</td> <td>canvas width</td> <td>Item width </td> </tr> <tr> <td>height</td> <td>int</td> <td>canvas height</td> <td>Item height </td> </tr> <tr> <td>doublebuffer</td> <td>bool</td> <td>false</td> <td>Set to true for double buffered graphics items. </td> </tr> <tr> <td>drawselector</td> <td>bool</td> <td>true</td> <td>Set to false if the ui item handles its own selector visuals. </td> </tr> <tr> <td>topmost</td> <td>bool</td> <td>false</td> <td>Set to true if the item should stay on top of non-topmost items. </td> </tr> <tr> <td>autoscale</td> <td>bool</td> <td>false</td> <td>Set to true if graphics item should autoscale its contents according to resizing.</td> </tr> </table> Example(s) <pre><code><graphics id="redcircleonyellow" x="10" y="100"> <parms> <width>50</width> <height>50</height> </parms> <clear color="yellow" /> <circle x="50%" y="50%" width="100%" filled="true"> <parms><color>red</color></parms> </circle> </graphics> </code></pre> <h2>resize</h2> Resizes the graphics UI item. The graphics elements that are drawn using percentage values are resized with the graphics item. As with move method there are two ways of resizing: either giving new absolute width and height values, or changing the width and height with delta values, or using both. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>width</td> <td>int</td> <td>current</td> <td>Item width </td> </tr> <tr> <td>height</td> <td>int</td> <td>current</td> <td>Item height </td> </tr> <tr> <td>deltawidth</td> <td>int</td> <td>0</td> <td>Change in width </td> </tr> <tr> <td>deltaheight</td> <td>int</td> <td>0</td> <td>Change in height </td> </tr> </table> Example(s) <pre><code><resize id="redcircleonyellow" deltawidth="10" deltaheight="10" /> </code></pre> <h2>clear</h2> Clears the graphics item from graphics elements and sets the background color. If the color parameter is left unspecified the background will be transparent. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>color</td> <td>3-byte hex / string</td> <td>none</td> <td>Background color </td> </tr> </table> Example(s) <pre><code><clear id="redcircleonyellow" /> <clear id="redcircleonyellow" color="blue" /> </code></pre> <h2>line</h2> Adds a line to the graphics item drawn with given color. The coordinates are relative to the top-left corner of the graphics item and the graphics element is clipped to the graphics item"s bounding box. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>color</td> <td>3-byte hex / string</td> <td>none</td> <td>Drawing color </td> </tr> <tr> <td>x</td> <td>int</td> <td>0</td> <td>start x-coordinate </td> </tr> <tr> <td>y</td> <td>int</td> <td>0</td> <td>start y-coordinate </td> </tr> <tr> <td>x2</td> <td>int</td> <td>0</td> <td>start x-coordinate </td> </tr> <tr> <td>y2</td> <td>int</td> <td>0</td> <td>End y-coordinate </td> </tr> </table> Example(s) <pre><code><line id="reccircleonyellow" x="0" y="0" x2="100%" y2="100%" /> <line id="reccircleonyellow" x="0" y="100%" x2="100%" y2="0" /> </code></pre> <h2>circle</h2> Adds a circle to the graphics item drawn with given color. The coordinates are relative to the top-left corner of the graphics item and the graphics element is clipped to the graphics item"s bounding box. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>color</td> <td>3-byte hex / string</td> <td>none</td> <td>Drawing color </td> </tr> <tr> <td>x</td> <td>int</td> <td>0</td> <td>X-coordinate </td> </tr> <tr> <td>y</td> <td>int</td> <td>0</td> <td>Y-coordinate </td> </tr> <tr> <td>width</td> <td>int</td> <td>0</td> <td>Graph width </td> </tr> <tr> <td>filled</td> <td>bool</td> <td>false</td> <td>true = filled graph, false = border only </td> </tr> </table> Example(s) <pre><code><circle id="redcircleonyellow" x="10" y="10" width="20"> <parms> <filled>true</filled> <color>green</color> </parms> </circle> </code></pre> <h2>ellipse</h2> Adds an ellipse to the graphics item drawn with given color. The coordinates are relative to the top-left corner of the graphics item and the graphics element is clipped to the graphics item"s bounding box. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>color</td> <td>3-byte hex / string</td> <td>none</td> <td>Drawing color </td> </tr> <tr> <td>x</td> <td>int</td> <td>0</td> <td>X-coordinate </td> </tr> <tr> <td>y</td> <td>int</td> <td>0</td> <td>Y-coordinate </td> </tr> <tr> <td>width</td> <td>int</td> <td>0</td> <td>Graph width </td> </tr> <tr> <td>height</td> <td>int </td> <td>0</td> <td>Graph height </td> </tr> <tr> <td>filled</td> <td>bool</td> <td>false</td> <td>true = filled graph, false = border only </td> </tr> </table> Example(s) <pre><code><ellipse id="redcircleonyellow" x="90%" y="10"> <parms> <height>10</height> <width>20</width> <filled>true</filled> <color> black</color> </parms> </ellipse> </code></pre> <h2>arc</h2> Adds an arc to the graphics item drawn with given color. The coordinates are relative to the top-left corner of the graphics item and the graphics element is clipped to the graphics item's bounding box. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>color</td> <td>3-byte hex / string</td> <td>none</td> <td>Drawing color </td> </tr> <tr> <td>x</td> <td>int</td> <td>0</td> <td>X-coordinate </td> </tr> <tr> <td>y</td> <td>int</td> <td>0</td> <td>Y-coordinate </td> </tr> <tr> <td>width</td> <td>int</td> <td>0</td> <td>Graph width </td> </tr> <tr> <td>height</td> <td>int </td> <td>0</td> <td>Graph height </td> </tr> <tr> <td>filled</td> <td>bool</td> <td>false</td> <td>true = filled graph, false = border only </td> </tr> <tr> <td>sangle</td> <td>int</td> <td>0</td> <td>Start angle 0..360, 0 = right most point of ellipse </td> </tr> <tr> <td>eangle</td> <td>int</td> <td>360</td> <td>Extent of the arc in degrees, a positive value means counter-clockwise rotation </td> </tr> </table> Example(s) <pre><code><arc id="redcircleonyellow" x="90%" y="10 height="10" width="20"> <parms> <sangle>90</sangle> <eangle>270</eangle> <filled>true</filled> <color> black</color> </parms> </arc> </code></pre> <h2>rect</h2> Adds a rectangle to the graphics item drawn with given color. The coordinates are relative to the top-left corner of the graphics item and the graphics element is clipped to the graphics item"s bounding box. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>color</td> <td>3-byte hex / string</td> <td>none</td> <td>Drawing color </td> </tr> <tr> <td>x</td> <td>int</td> <td>0</td> <td>X-coordinate </td> </tr> <tr> <td>y</td> <td>int</td> <td>0</td> <td>Y-coordinate </td> </tr> <tr> <td>width</td> <td>int</td> <td>0</td> <td>Graph width </td> </tr> <tr> <td>height</td> <td>int </td> <td>0</td> <td>Graph height </td> </tr> <tr> <td>filled</td> <td>bool</td> <td>false</td> <td>true = filled graph, false = border only </td> </tr> </table> Example(s) <pre><code><rect id="redcircleonyellow" x="90%" y="10 height="10" width="20"> <parms> <filled>false</filled> <color> black</color> </parms> </rect> </code></pre> <h2>roundrect</h2> Adds a rectangle to the graphics item drawn with given color. The coordinates are relative to the top-left corner of the graphics item and the graphics element is clipped to the graphics item"s bounding box. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>color</td> <td>3-byte hex / string</td> <td>none</td> <td>Drawing color </td> </tr> <tr> <td>x</td> <td>int</td> <td>0</td> <td>X-coordinate </td> </tr> <tr> <td>y</td> <td>int</td> <td>0</td> <td>Y-coordinate </td> </tr> <tr> <td>width</td> <td>int</td> <td>0</td> <td>Graph width </td> </tr> <tr> <td>height</td> <td>int </td> <td>0</td> <td>Graph height </td> </tr> <tr> <td>filled</td> <td>bool</td> <td>false</td> <td>true = filled graph, false = border only </td> </tr> <tr> <td>corner</td> <td>int </td> <td>0</td> <td>Size of the corner</td> </tr> <tr> </table> Example(s) <pre><code><roundrect id="redcircleonyellow" x="90%" y="10 height="100" width="70" corner="15"> <parms> <filled>false</filled> <color> black</color> </parms> </roundrect> </code></pre> <h2>triangle</h2> Adds a triangle to the graphics item drawn with given color. The coordinates are relative to the top-left corner of the graphics item and the graphics element is clipped to the graphics item"s bounding box. Parameters <table border="1" cellpadding="5"> <tr> <th bgcolor="#efefef">Param </th> <th bgcolor="#efefef">Type </th> <th bgcolor="#efefef">Default </th> <th bgcolor="#efefef">Meaning </th> </tr> <tr> <td>identifiers</td> <td>params</td> <td>current item</td> <td>Item reference. </td> </tr> <tr> <td>color</td> <td>3-byte hex / string</td> <td>none</td> <td>Drawing color </td> </tr> <tr> <td>x</td> <td>int</td> <td>0</td> <td>X-coordinate of first corner </td> </tr> <tr> <td>y</td> <td>int</td> <td>0</td> <td>Y-coordinate of first corner </td> </tr> <tr> <td>x2</td> <td>int</td> <td>0</td> <td>X-coordinate of second corner </td> </tr> <tr> <td>y2</td> <td>int</td> <td>0</td> <td>Y-coordinate of second corner </td> </tr> <tr> <td>x3</td> <td>int</td> <td>0</td> <td>X-coordinate of third corner </td> </tr> <tr> <td>y3</td> <td>int</td> <td>0</td> <td>Y-coordinate of third corner </td> </tr> <tr> <td>filled</td> <td>bool</td> <td>false</td> <td>true = filled graph, false = border only </td> </tr> </table> Example(s) <pre><code><rect id="redcircleonyellow" x="90%" y="10 height="10" width="20"> <parms> <filled>false</filled> <color> black</color> </parms> </rect> </code></pre> <h2>undo</h2> Discards the last drawing operation. Example(s) <pre><code><rect id="redcircleonyellow" x="90%" y="10 height="10" width="20"> <parms> <filled>false</filled> <color> black</color> </parms> </rect> <rect id="redcircleonyellow&q