In the next several posts I will go through an example of how to create a simple alarm sensor panel using the Virtual Panel Plugin. You can find the plugin files as well as instructions on how to install it from the post below.
[url=http://forum.micasaverde.com/index.php/topic,31128.msg223995.html#msg223995]http://forum.micasaverde.com/index.php/topic,31128.msg223995.html#msg223995[/url]
Once you have the plugin installed. Create a new panel by clicking on the right arrow on the Panel Manager device panel.
- Click on the Configure Panels option. This will bring up the list of defined panels for the plugin.
- At the very bottom of the Configured Panels list there will be a + icon. Click this icon and you will be presented with a dialog asking for the name of your new panel.
- Enter Security in the space provided.
- When finished press the Save Panels button and wait for Vera to create your new panel in the devices list. Give her a minute or so to sort it all out.
After Vera has had time to process your new panel, a device named security will show on your devices list. Click the right arrow on the new Security panel to open the detail tab for it. At the top of the page in the green section click on Layout.
A tab will be opened that contains the blank layout of our new panel so let’s start adding some sensors to it.
- Click the + icon in the Panel Elements list.
- Select Color Indicator from the dropdown and press the Select Control Type button.
- A dialog box will open that will allow us to define the properties for the indicator.
Identify the sensor that we want to monitor by selecting the device variable that identifies whether it is tripped.
- Find the sensor by selecting it from the Device dropdown.
- Select the Service Id by typing it in or selecting it from the list of service Ids defined on the device you previously selected. For a standard security sensor this will be urn:micasaverde-com:serviceId:SecuritySensor1.
- Once you have filled in the Service Id you may select a variable or type the variable name into the provided space. In this case we are using the Tripped variable.
Set the default color and the expression to change the color when the sensor is tripped.
- Type silver or #C0C0C0 in the Default Color box. This can be any valid html color mapping.
- At the bottom of the Expression list press the + icon to add a condition to the expression.
- Select == for the operator.
- Enter 1 for the Value
- Select or enter Red for the color
Now that you have defined the indicator press the Add Indicator button at the bottom.
Once you have pressed the Add Indicator button the Add Indicator dialog will close and the indicator will appear in the Panel Elements list, Dashboard View, and Detail Tab View
- Click the + icon again on the bottom of the Panel Elements list
- This time choose Label from the dropdown then press the Select Control Type button.
- An Add New Label dialog box will appear.
Format the label to your liking. Below is a sample of what I like at the moment.
- Type the name of the sensor into the Text
- Click on the shadowed format box below the text you just entered. A popup will appear that will allow you to stylize the label.
- For me I left the Face as [default], changed the size to .7em, and selected gray as the color. As you change the style the text inside the format box will change to reflect your settings.
Press the Add Label button when you are done fiddling around with the label.
You should now have two entries in your Panel Elements list a dashboard view that contains the indicator and the label and a Detail Tab view where the label is overwriting the indicator.
Move the label so it does not overlap the indicator in the Detail Tab View.
- With your mouse click on the text of the label. A dashed box will appear around the label.
- Using your right arrow nudge the label to the right until the indicator is exposed.
- When the label starts to move two buttons will appear at the top. Revert Positions and Save Positions. When the label has been positioned correctly press the Save Positions button to commit the detail tab changes.
For all intents and purposes you should have a fully function security sensor panel at this point. If you press the Reload Luup button, wait for luup to finish reloading then refresh our browser. If you trip the sensor it will turn the indicator red. If the sensor untrips it will turn silver again.
Add in the rest of your sensors.
- Press the pencil icon next to the Tripped color indicator in the Panel Elements list.
- This will bring up the color indicator in edit mode.
- Select a new security sensor from the dropdown.
- Change the Top value to 15
- Press the Add Indicator button (NOT THE Save Indicator button) to duplicate the indicator 15 pixels below the first one with a new device to monitor.
Duplicate the label like we did for the color indicator. All controls can be replicated this way by clicking on edit then pressing the add button at the bottom. This is not true for items such as groupings and line breaks where there are no properties to set anyway.
Like the instructions on a shampoo bottle, finish adding in all your sensors by repeating these two steps and adding 15 more pixels to the top for each sensor/label combination. If you don’t want to monkey with the math you can simply select the control and drag it into position on the detail tab view.
After I performed the rinse & repeat for all my sensors I am left with a panel that looks like below. Hardly a work of art but functional nonetheless. Now we need to group the controls and position them on the dashboard view.
Add a line break between each of the pairs.
- Press the + icon at the bottom of the Panel Elements list
- Select Line Break from the dropdown and press the Select Control Type button.
- Click and hold the green line break in the panel elements list and drag it to just below the first label at the top.
- Repeat steps 1-3 until there is a line break between each label and indicator pair. The last one does not need a line break. Your output should look similar to the second screenshot.
We now have a very readable panel that will flash red each time a security sensor is tripped. However, lets put in some groupings so that the sensors will be displayed in two separate columns.
- Click the + icon at the bottom of the Panel elements list.
- Choose Group Start from the dropdown and press the Select Control Type button. For this group we do not have to select any of the other options just press the Add Grouping button.
- Click and hold the new group that was added to the bottom of the panel elements and drag it to the center of your sensor list. Note how it now shows two columns in the dashboard view.
Putting on the polish.
If you have any labels that you added that seem to be cut off you can extend them by clicking on them to get the dashed box to appear around the label. Then press the right arrow while holding down the shift key to expand the width of the label. Don’t forget to press the Save Positions button or they will revert if the view gets reloaded. When you are done tweaking your panel and have saved any repositioning press the Reload Luup button then refresh your browser to see your panel in action.
I’ll leave the rest of the tweaking up to you but as you can see you have created a panel for all your devices very rapidly.