| | 18 | = Installation = |
| | 19 | == Upload the Required Files == |
| | 20 | 1. Download the latest release, and then unzip the contents to your local machine. |
| | 21 | 1. Open the Vera console, and then click '''MiOS developers'''. |
| | 22 | 1. In the ''MiOS developers'' window, select the '''Luup files''' tab. |
| | 23 | 1. Scroll to the end of the page, click '''Choose File''', and then select a file from the ''Luup'' folder. |
| | 24 | 1. Repeat for every file in the ''Luup'' folder. |
| | 25 | 1. Check '''Restart Luup after upload''', and then click ''GO''. |
| | 26 | 1. Wait for Vera to load the files. |
| 39 | | For a complete list of local wiki pages, see TitleIndex. |
| | 44 | = Additional Information = |
| | 45 | The project source also includes a handy utility that allows you to develop Vera UI panels using any standard HTML development tools. The utility can be found in the `util` folder, and by executing the `exportControls()` method in your browser's !JavaScript console will output the required JSON object for a Vera UI panel. |
| | 46 | |
| | 47 | By annotating standard HTML input controls you can add Vera-specific options, such as specifying which controls are displayed on the dashboard, which commands should be sent to Vera, and which variables should be used for display purposes. Using this method you can use an HTML editor for positioning and layout of controls in the Vera panel and use HTML files as the source of truth for the `Control` sections of your static Vera JSON files. The following tables list the supported HTML elements and data attributes. |
| | 48 | |
| | 49 | == Supported HTML Elements== |
| | 50 | ||= HTML Element =||= Vera Control =|| |
| | 51 | ||`input type="button"`||Button|| |
| | 52 | ||`input type="checkbox"`||Checkbox|| |
| | 53 | ||`input type="text"`||Either a text input field or a variable depending on whether the `readonly="readonly"` attribute and value is set.|| |
| | 54 | ||`span`||Label|| |
| | 55 | |
| | 56 | == Supported HTML Attributes == |
| | 57 | ||= HTML Attribute =||= Description =|| |
| | 58 | ||`style`||Converts the `width`, `height`, `left`, and `top` CSS styles as entries for in the `Display` element.|| |
| | 59 | ||`value`||The text to display when used with `input` elements.|| |
| | 60 | ||`data-control-group`||Sets the attribute value as the !ControlGroup value.|| |
| | 61 | ||`data-display-service`||The uPnP service to retrieve a variable from.|| |
| | 62 | ||`data-display-variable`||The variable to display data from.|| |
| | 63 | ||`data-display-value`||The initial (variable) value to display.|| |
| | 64 | ||`data-command-service`||The uPnP service to call.|| |
| | 65 | ||`data-command-action`||The action to call in the service.|| |
| | 66 | |
| | 67 | == Examples == |
| | 68 | The following shows an HTML snippet that creates a static label, a label that displays text from a variable, and two buttons that turn on a device on and off. |
| | 69 | |
| | 70 | {{{ |
| | 71 | <div id="cpanel_content"> |
| | 72 | <span style="position:absolute;width:150px; height:20px; left: 10px; top: 5px;">Yamaha RX-V3800</span> |
| | 73 | <input data-control-group="1" data-display-service="urn:yamaha-com:serviceId:Receiver1" data-display-variable="Zone1Message" data-display-value=" " type="text" readonly="readonly" style="position:absolute;width:325px; height:20px; left: 10px; top: 25px;"/> |
| | 74 | |
| | 75 | <input data-control-group="2" data-command-service="urn:upnp-org:serviceId:SwitchPower1" data-command-action="SetTarget" data-command-parameters='{"Name": "newTargetValue", "Value": "0"}' data-display-service="urn:upnp-org:serviceId:SwitchPower1" type="button" value="All Off" style="position:absolute;width:75px; height:30px; left: 440px; top: 5px;"/> |
| | 76 | <input data-control-group="3" data-command-service="urn:upnp-org:serviceId:SwitchPower1" data-command-action="SetTarget" data-command-parameters='{"Name": "newTargetValue", "Value": "1"}' data-display-service="urn:upnp-org:serviceId:SwitchPower1" type="button" value="All On" style="position:absolute;width:75px; height:30px; left: 535px; top: 5px;"/> |
| | 77 | </div> |
| | 78 | }}} |
| | 79 | |
| | 80 | = Author = |
| | 81 | Created by Tomi Blinnikka. http://www.bliny.net |
