HAD Customization: Custom device table

What is a custom device table?

One of the powerful customization option is to use a custom device table. In it's simplest form, it is simply a way to group together the devices that you want together. As an example, you could group some devices based on their location. But it can do a lot more than that.

Common uses are:

• Show a device, but control it using a scene
• Control a program
• Control a variable using a "slider*
• Show a variable, controlled by a program

The power comes from grouping them as makes sense for you. An example would be to have a section for your living room which would include lights control along with program to start music in that room. Another example could be sprinker controls, where one option is to run you sprinkler cycle (a program), and below offer individual sprinkler controls.

How to use a custom device table?

You need to do the following:

1. Create a device list definition containing the data that specifies what to include in the custom device table (in index.htm)
2. Create a placeholder to display the device table
3. Adjust UDFdevLoaded to process and display the template when /rest/node is loaded (in custom.js).
4. Optional: Adjust UDFvarsLoaded if your device table refers to variables by name (in custom.js).
5. Optional: Adjust UDFpgmLoaded if your device table refers to programs by name (in custom.js).

Create a device list definitions

This determines what will be displayed, and what are the controls. A simple example of 5 devices in 2 sections would look like this. HAD knows what time of device it is and will react accordingly.

var deviceList = 
[			
  { location: "A section with two device2", 	
    list : [ 
	{ name : "Device1" }
	{ name : "Device2" }
	]},
  { location: "A section with three devices", 	
    list : [ 
	{ name : "Device1" }
	{ name : "Device2" }
	{ name : "Device3" }
    ]}
];

In this example, all devices whose name is "name" will be displayed, and controls show will be based on the device type. A dimmer will be show with a slider. A thermostat will be shown with thermostat controls.

For more information, go to;

• HAD Advanced custom table

Create a placeholder to display the device table

You need a div like this somewhere in your html. When the template is processed, the content will pushed inside this div.

<div id="deviceListPlaceholder"></div> 

Adjust UDFdevLoaded to process and display the template

You need to adjust UDFdevLoaded and use tableInitCustomTable to initialize your custom table with the data coming from /rest/nodes. That's the purpose of tableInitCustomTable.

Then, use processTemplate to display your deviceList table, at the placeholder deviceListPlaceholder, using the template deviceListTemplate.

function UDFdevLoaded(devdata)
{
    ...
    tableInitCustomTable(devdata, deviceList) 
    ...
    processTemplate("#deviceListPlaceholder", deviceList, "deviceListTemplate");		
}

Optional: Adjust UDFvarsLoaded

If your device table refers to variables by name, you need this additional step.

First, make sure that you have loadVar1Defs, loadVar2Defs or both set to 1 (in custom.js).

 
var loadVar1Defs = 1; // Set to 1 if some integer variable names are used in a custom table, or if using generic var table. Set to 0 for better performance.
var loadVar2Defs = 1; // Set to 1 if some state variable names are used in a custom table, or if using generic var table. Set to 0 for better performance.

Then, you have to use processVarButtons in UDFvarsDefLoaded in order to create buttons to control the variable.

function UDFvarsDefLoaded(vars1def, vars2def, devdata)
{
	...
	// For each typeControl=Var: when a variable name was specified instead of type+id, updates the buttons with appropriate names to id's
	processVarButtons(vars1def, vars2def); 
	...
}

Optional: Adjust UDFpgmLoaded

If your device table refers to programs by name, you need this additional step.

First, make sure that you have loadPgms set to 1 (in custom.js).

 
var loadPgms = 1; // Set to 1 if some program names are used in a custom table, or if using generic pgm table. Set to 0 for better performance. (Will not run UDFpgmLoaded)

Then, you have to use processPgmButtons in UDFpgmLoaded in order to create buttons to control the variable.

function UDFpgmLoaded(pgmdata, vars1def, vars2def, devdata)
{
	...
	// For each typeControl=Program: Updates the buttons when needed
	processPgmButtons(pgmdata, vars1def, vars2def); 
	...
}

The logic behind this is that it takes too long to wait for all rest calls to complete. So the page gets rendered as soon as /rest/nodes is finished with dummy buttons (in UDFdevLoaded). Then, when programs and vars definitions are loaded, the buttons are created in the background with the appropriate onclick.