In the next several posts I will describe how to create a panel that shows the status of the only device I can guarantee all of you have. This is your Vera itself. If this is a successful tutorial I will create others outlining how to create customized panels for your use.
The panel that we will be creating will allow you to see information about your Vera rolled up into a single place. We will also create a button on the panel that reloads the Luup engine. If you are like me and you reload Luup a lot you may find the button to be useful so you don’t have to navigate all the way down into develop apps to reload luup. Once we are done creating the panel if you have no use for it you can simply delete it from the panel manager and all traces of it will be removed from your Vera.
You will need the Virtual Panel Plugin from the link below. In order to complete the steps you will need to have the Virtual Panel Plugin v1.4 or above installed on your Vera.
[url=http://forum.micasaverde.com/index.php/topic,31128.0.html]http://forum.micasaverde.com/index.php/topic,31128.0.html[/url]
Included below is the end result of the panel we will be creating.
After you have installed the Virtual Panel Plugin navigate to the Panel Manager device on your Vera. Then select the right arrow icon to bring up the detail tabs.
- 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.
- For this example we will create a panel simply called Vera so enter Vera in the prompt and press the Add Panel button. If you want to call it something different you can rename it later but for now simply call it Vera.
- 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.
In this step we are going to begin putting some intelligence into our panel. So the first thing we want to do is have the panel show us the current z-wave status. To do this we are going to display a green z-wave icon when the status is good and one that is grayed out when it is not.
- Click on the right arrow on the newly created device panel that we created in the first step.
- After the device details tab opens select the Layout option. This will bring up the layout editor for our new panel.
Change the Default Icon
We want the icon to reflect the state of our z-wave network so the first thing we are going to do is set the default to be grayed out.
- Click on the Default Icon in the panel icons section. A dialog showing you the list of available icons loaded on your Vera will be displayed.
- Scroll down to the zwave_default_off.png file and highlight it. After you have highlighted it press. the Select Icon button. The dialog will close and the image will change on the Default Icon button to our newly selected icon.
Add an Icon that reflects the ok status of your Vera
- Click the + icon located to the right of the Default Icon. This will bring up a dialog that is similar to the dialog in the previous step with one distinct difference. There is a listing at the bottom for adding conditions to display the icon. Select the zwave_default_on.png icon. See screen shot below.
- In order to tell Vera when to display the icon we need to add a state condition to this Icon. To do this press the + icon at the bottom of the State Conditions list. This will add a line where we can fill out the condition.
- Under the Device heading select ZWave as the device.
- Under the Service heading enter urn:micasaverde-com:serviceId:ZWaveNetwork1. If your browser supports it the field will auto fill when you begin typing. On some browsers you can simply select it by hitting the down arrow in the field.
- Under the Variable heading select or type NetStatusText
- Under the Operator heading choose ==
- Under the value heading type OK in capital letters. Essentially what we are saying here is that Vera should display the selected icon whenever the NetStatusText variable equals OK on the main ZWave device.
Now that we have a panel that shows a green icon when the luup engine is ready and a gray one when it is not. Let’s put some text on the screen that reflects what is going on.
Create a Status Label
- In the Panel Elements list hit the + icon to bring up the “Select the type of element to add” dialog.
- Choose Label from the dropdown and press the Select Control Type button. This will bring up a dialog that will allow you to place a label on our new panel.
- In the field at the very top next to the word Text enter Status
- Next click on the shadowed status field. This will bring up a box that will let you change the style of the text that is displayed in the panel. Choose .7em for the size and select the B button to make the label bold. See screenshot below.
- Finally, press the Add Label button. The dialog will be dismissed and the new label will appear in our Panel Elements list.
Create the Status Variable
- In the Panel Elements list hit the + icon to bring up the “Select the type of element to add” dialog.
- Choose Variable from the dropdown and press the Select Control Type button. This will bring up a dialog that will allow you to place a variable on our new panel.
- Select the device where the variable resides in this case it is on ZWave.
- Enter urn:micasaverde-com:serviceId:ZWaveNetwork1 in the Service Id field. Again if your browser supports it, this will seed as you begin typing or you can select it from a list.
- Enter NetStatusText for the Variable field. Like all the other fields this will auto-fill or you can select it from a list.
- We are going to make the status stand out so click on the shadowed box like we did for the label. Click the B to make it bold, choose .7em as the size and type crimson into the color field.
- We need this to appear to the right of the label that we just created so enter 54 in the left field under the Size & Position header. NOTE: This position only affects the way items are displayed on the device details tab. As of 7.05 you have less control over their placement on the dashboard. See screenshot below.
What we have told the plugin to do in this step is show the variable NetStatusText from the ZWave device on the dashboard.
Now would be a good time to review our work. Press the reload luup button and give Vera a minute or two to finish reloading the luup engine. If we had our panel finished we would be able to see when she was finished loading as this would be reflected in the status. Refresh your browser and you will see the new icon, label and status text displayed on the panel. See screenshot below.
Now that we have admired our work let’s put the date and time that Vera last performed a network heal. A heal is what tells your devices how to communicate within your z-wave network and who should participate in that communication. If you are having problems with devices not reacting perhaps a network heal could resolve those issues.
Create a Last Heal Label
If this is fresh in your mind from adding the Status label and Variable the process is identical with the exception that we will be using a different variable and placing the label and variable 10px lower in the details tab.
- In the panel elements list hit the + icon to bring up the “Select the type of element to add” dialog
- Choose Label from the dropdown and press the Select Control Type button. This will bring up a dialog that will allow you to place a label on our panel.
- In the field at the very top next to the word Text enter Last Heal
- Next click on the shadowed status field. This will bring up a box that will let you change the style of the text that is displayed in the panel. Choose .7em for the size and select the B button to make the label bold.
- We want this text to be displayed under the status text so type 10 in the top field under the Size & Position header. NOTE: This only places the text on the details tab and we will come back later to add a line break to position it in the dashboard.
- Finally, press the Add Label button. The dialog will be dismissed and the new label will appear in our Panel Elements list
Create the Last Heal date/time variable
- In the Panel Elements list hit the + icon to bring up the “Select the type of element to add” dialog.
- Choose Variable from the dropdown and press the Select Control Type button. This will bring up a dialog that will allow you to place a variable on our new panel.
- Select the device where the variable resides in this case it is on ZWave.
- Enter urn:micasaverde-com:serviceId:ZWaveNetwork1 in the Service Id field. Again if your browser supports it, this will seed as you begin typing or you can select it from a list.
- Enter LastHeal for the Variable field. Like all the other fields this will auto-fill or you can select it from a list.
- Since the information stored in this field is simply a number that is readable just fine by electronic equipment and we want the information to display in human readable form, select a DateTime format in the format field. If your browser does not support the selection type {0:DateTime,%x %X} into this box. If you want to do a bit of googling this is actually the strftime format so you can do all kinds of stuff with this.
- We want the information for the last heal time to stand out but not as much as the Status so so click on the shadowed box like we did for the label. Click the B to make it bold, choose .7em as the size and type seagreen into the color field.
- We need this to appear to the right of the label and below our status text so enter 54 in the left field and 10 in the top field under the Size & Position header. NOTE: This position only affects the way items are displayed on the device details tab. As of 7.05 you have less control over their placement on the dashboard. See screenshot below.
- Finally, press the Save Variable button to add the variable to our element list.
In this step we added another label and corresponding variable. With this variable we applied a special format so that it is more readable to us.
Next we are going to add a button to our panel. Since we are working only with devices I know you have let’s add a button that will reload the luup engine. By now I am sure you are getting the gist what the plugin is capable of regarding aggregating the status of devices located on your Vera but it is capable of so much more.
Have you ever had to reload the luup engine and had to futz around to find that blasted reload luup button hidden under the serial port configuration. Well no more. Let’s add one to our panel.
Create a Reload Luup button
- In the panel elements list hit the + icon to bring up the “Select the type of element to add” dialog
- Choose Button from the dropdown and press the Select Control Type button. This will bring up a dialog that will allow you to place a button on our panel.
- Buttons in 4 distinct styles but for this example we will be using the Momentary style. For shucks I listed them below.
[ul][li]Momentary: A button that shows no state and simply executes a single command[/li]
[li]Persistent: A button that is highlighted when a device variable condition is true and executes a single command[/li]
[li]Toggle: A button that is highlighted or un-highlighted when clicked and executes one of two commands depending on its current highlighted state[/li][li]Persistent Toggle: A button that is highlighted or un-highlighted when a device variable condition is true and executes one of two commands depending on its current highlighted state[/li][/ul]
- Enter Reload Luup in the Text field
- We want this button to appear to the right of and below our text reflecting the status and last heal of our z-wave network. So enter 200 in the left field, 137 in the width field, and 20 in the top field. Again this only positions the button on the details tab of the panel.
- Now we need to tell this button what it is supposed to do when it is clicked so select Call an Action on a Device from the action dropdown. The screen will change to allow you to fill out the details regarding our action. An action is any command that is supported by the target device. If we wanted to dim or turn on/off a light then you would select the target device and fill out the call action parameters.
- In this case we are going to choose Panel Manager from the device dropdown… so do that.
- Enter urn:rstrouse-com:serviceId:VirtualPanel1 in the service id field. Again this will auto fill as you type or you can select it from a list depending on your browser support.
- In the action field type ReloadLuup (pay attention to the capitalization). This call does not need any parameters so we won’t be entering any.
- Press the Save Button button. Really it’s a button button.
In this step we added a button to our panel which calls out to Vera to reload its luup engine. Now would be a good time to take a look at our panel and admire our work. So press the Reload Luup button (not the one we just created the one under the Panel Elements list). Give Vera a minute to do her thing and refresh your browser.
Now that you’ve taken a look at the panel you will notice that it is all flowing together and resembles one of the Lee brothers either home or ugg take your pick.
Still the button works to reload the luup engine. In fact if you press it you will see the icon change to grayed out and the status text will change to Resetting ZWave Network as the luup engine reloads. NOTE: Sometimes it takes several seconds for Vera to begin the reload process so after you press the button give it a moment or two until the reload process commences.
Adding Dashboard Positioning Elements
As of 7.05 the positioning of elements on the Vera dashboard changed dramatically. So we need to do some things to tell the panel how the controls are to be positioned.
- In the panel elements list hit the + icon to bring up the “Select the type of element to add” dialog
- Choose Line Break from the dropdown and press the Select Control Type button. This will add a line break element to the end of the Panel Elements list. Which really does us no good. We want a line break after the NetStatusText so click and drag on the line break and position it between the NetStatusText variable and the Last Heal label.
- We also want the button to be below all of this so add another line break and drag it to just above our Reload Luup button.
- Finally we want our button to be to the right on the panel so lets add a horizontal spacer. The spacer uses a horizontal multiplier to take up horizontal space between panel elements.
- So hit the + again and choose Horizontal Spacer a dialog will appear allowing you to enter a spacing factor. I have found that values between 1 and 10 give space somewhere within the panel. You can experiment later but for now enter 8 in the width field. Then press the Add Spacer button.
- A spacer after our Reload Luup button will not do much good so like the line breaks grab it and drag it between the last line break and the Reload Luup button elements. When you are done your panel elements list will look like the one depicted below.
Press the Reload Luup button and refresh your browser then admire your work. I’ll let you take it from here if you want to put other items on the panel and experiment with the other controls… and you thought paneling went out in the '70s
This concludes this tutorial.
When I get to step 2 and want to select an icon, i dont get any options to choose… anything I missed here?
Are you running locally on your Vera? The browser window reads /cmh… Also, the switch from 7.04 to 7.05 changed the physical location of the state icons. Code to support this was added in v1.4 of the plugin so prior versions looked at the old directory. You only need to worry about the local connection for configuration of the panels. After that there is no dependency.
Hi
Sorry, it would help you if I gave more info…
I have the Vera Edge
I am connected directly with IP address
I have the latest firmware installed.
You are running the latest version: 1.7.1018
@konradwalsh,
Do you have SCP installed or have a way to browse the files on your Vera? I thought it was odd that the state icon directory changed between fw 7.04 and 7.05. Anyhow can you navigate to /www/cmh/skins/default/img/devices/device_states and see if there are any files in there? If this is out of your wheelhouse perhaps we can go a different route.
I did that
And yes this folder is there but with shortcuts only…
This is a screenshot from
/mios/www/cmh/skins/default/img/devices/device_states
Huh, that directory structure should be fine and you are sure you have 1.4 of the plugin installed? The prior version looked at the directory where these files used to be installed for 7.04. Did you reload luup after installation?
hey… 100% sure…
1.4
I fully rebooted and reloaded. I installed this yesterday… I have a vera lite… So I will give it a try on there and report back…
hmmm
I edited you lua file and added
/mios/www/cmh/skins/default/img/devices/device_states
and now it works
Thanks Konrad. As you can see the code to get listing is really quite simple. I’ll do some digging to see if there is some twist with popen that can give odd results with certain files. Maybe it is just running into a file with a name of nil when it calls popen.
Thanks to you… great plugin
Hi
I created a panel and added a variabele to show on the dash (see images)
Now the variabeles is not shown on the dash
did i do something wrong?
TwannieM,
There are two steps you need to perform after you finish editing a panel. These include Reloading Luup then refreshing your browser. Did you perform both of these steps?