Difference between revisions of "ButtonImage"
Jump to navigation
Jump to search
| (8 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
| − | + | {{UI Object Header}} | |
| − | Controls a | + | Controls a light or automation device, has the same function of the [[Button|button object]], but you can choose custom graphic images for the different states. |
You can add an optional label text next to the image, and define several optional | You can add an optional label text next to the image, and define several optional | ||
CSS attributes to control the text’s format and position. The “top” CSS attribute is used to move the text from its default position. If top is not defined, the text will be located just below the image. If defined, you can specify a positive or negative offset, in pixels. The zero offset position is at the top corner of the image; a positive offset moves the text down, a negative offset moves the text up. | CSS attributes to control the text’s format and position. The “top” CSS attribute is used to move the text from its default position. If top is not defined, the text will be located just below the image. If defined, you can specify a positive or negative offset, in pixels. The zero offset position is at the top corner of the image; a positive offset moves the text down, a negative offset moves the text up. | ||
If the button object is connected to a device or light that allows it, a long press on the button will open a [[popup]] with a [[slider]]. A second long press will close the [[popup]]. | If the button object is connected to a device or light that allows it, a long press on the button will open a [[popup]] with a [[slider]]. A second long press will close the [[popup]]. | ||
| − | If specified on | + | If specified on systemtopo.txt, it will show a thumbnail on mouse over or touch. |
== Parameters == | == Parameters == | ||
| − | |||
*'''address''': device data point name | *'''address''': device data point name | ||
*'''position''': the object's position. Use the pixels or rows and columns coordinates format | *'''position''': the object's position. Use the pixels or rows and columns coordinates format | ||
| Line 15: | Line 14: | ||
*'''on''': image associated to the "on" state | *'''on''': image associated to the "on" state | ||
*'''off''': image associated to the "off" state | *'''off''': image associated to the "off" state | ||
| − | *'''up'': image associated to the "up" state | + | *'''up''': image associated to the "up" state |
*'''down''': image associated to the "down" state | *'''down''': image associated to the "down" state | ||
*'''off up''': image associated to the "off up" state | *'''off up''': image associated to the "off up" state | ||
*'''off down''': image associated to the "off down" state | *'''off down''': image associated to the "off down" state | ||
*'''label''': the text label next to the button. Can contain HTML tags. It's optional | *'''label''': the text label next to the button. Can contain HTML tags. It's optional | ||
| − | *'''css style''': the label's css style, optional. See [[Object's Label CSS Style|css style] | + | *'''css style''': the label's css style, optional. See [[Object's Label CSS Style|css style]] |
| + | |||
{{Note: IMG Filename}} | {{Note: IMG Filename}} | ||
| Line 26: | Line 26: | ||
== Syntax == | == Syntax == | ||
(buttonimage <address>; <pos>; <width>; <height>; <unknown img>; <on img>; <off img>; <up img>; <down img>; <offup img>; <offdown img>; <text>; <css>) | (buttonimage <address>; <pos>; <width>; <height>; <unknown img>; <on img>; <off img>; <up img>; <down img>; <offup img>; <offdown img>; <text>; <css>) | ||
| − | + | E.g. | |
| − | (buttonimage autom.1; x10y20; 200; 200; door_unknown.png; door_open.pgn; door_closed.png | + | (buttonimage autom.1; x10y20; 200; 200; door_unknown.png; door_open.pgn; door_closed.png; ; ; ; ; Front Door; font-size:20px) |
| − | |||
| − | |||
| − | |||
Latest revision as of 09:39, 28 April 2014
For a description and a complete list of UI Objects, see Controls a light or automation device, has the same function of the button object, but you can choose custom graphic images for the different states. You can add an optional label text next to the image, and define several optional CSS attributes to control the text’s format and position. The “top” CSS attribute is used to move the text from its default position. If top is not defined, the text will be located just below the image. If defined, you can specify a positive or negative offset, in pixels. The zero offset position is at the top corner of the image; a positive offset moves the text down, a negative offset moves the text up.
If the button object is connected to a device or light that allows it, a long press on the button will open a popup with a slider. A second long press will close the popup. If specified on systemtopo.txt, it will show a thumbnail on mouse over or touch.
Parameters
- address: device data point name
- position: the object's position. Use the pixels or rows and columns coordinates format
- size: the image's width and height
- unknown: image associated to the "unknown" state
- on: image associated to the "on" state
- off: image associated to the "off" state
- up: image associated to the "up" state
- down: image associated to the "down" state
- off up: image associated to the "off up" state
- off down: image associated to the "off down" state
- label: the text label next to the button. Can contain HTML tags. It's optional
- css style: the label's css style, optional. See 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
(buttonimage <address>; <pos>; <width>; <height>; <unknown img>; <on img>; <off img>; <up img>; <down img>; <offup img>; <offdown img>; <text>; <css>)
E.g.
(buttonimage autom.1; x10y20; 200; 200; door_unknown.png; door_open.pgn; door_closed.png; ; ; ; ; Front Door; font-size:20px)
