Feature pages are used to display information that is not settings related. To display settings, use the JUI formatted settings page. A feature page is an HTML file that exists in the HomeSeer html folder, plugin folder. All plugin HTML content is stored in a folder that is named with the plugin ID. Feature pages are registered to HomeSeer using the HomeSeerSystem.RegisterFeaturePage API call. When a page is registered it will appear in the Plugins menu in HomeSeer.
A feature page is a standard HTML page and may contain dynamic content. Dynamic content is provided with the use of tags. See HTML Pages for more information.
For reference, install the sample plugin. This will install some sample feature pages that can be used as template for new pages.
HTML pages are based on the Bootstrap responsive CSS library. This allows pages to display properly on desktop as well as mobile devices. The HTML uses the MDB Boostrap libray. See the MDB documentation for more information about Bootstrap formatting.
When To Use
Any settings that the plugin requires need to be handled by a JUI settings page. Anything that is device related, should be handled by devices and can be supported with GetJuiDeviceConfigPage. Anything that is not device related, say status, debug, or general information, should be supported with a feature page.
When installing a plugin, feature pages need to be installed in the HomeSeer HTML folder in a folder named with the ID of the plugin.
Page header that includes required CSS files.
The two code blocks above complete a full working feature page.
Registering Feature Pages with HomeSeer
From the plugin Initialize function, call HomeSeerSystem.RegisterFeaturePage(..). Assuming your feature page is name "acme.html" and your plugin ID is "acme", the call would be:
The page will installed in the HomeSeer Plugins menu under the plugin name.
Feature pages must have a .html extension or they will not display properly.
HomeSeer uses 2 sites for images and it is suggested you use these sites so images are consistent throughout the UI.
Fontawesome is the easiest to use since you can reference an icon easily with just an <i> tag. Materialdesignicons will require you to download the image and save it in an images folder in your plugin's HTML folder.
To create dynamic HTML pages for plugins a dedicated tag is available that will allow you to call custom functions in your plugin. The format of the tag is:
Where the PLUGID is the ID of your plugin, PLUG_FUNCTION is the name of the function to call, and PLUG_PARAMETERS_ARRAY is an array of parameters to pass to the function. If no parameters are required, set this to Null (C#) or Nothing (VB).
For example, your feature page may need to display a table of information that is dynamic or just some information that changes depending on the plugin usage. The sample plugin has some examples of custom tags.
To create a custom tag first create the function in your HSPI class. If you need a function that simply returns a string of data, a number, or any standard .NET type create a function like:
In your feature page HTML file enter the tag:
When the page is displayed your function MyCustomFunction(param) will be called, which returns the string "1234" and "1234" will be displayed on the page. Note that "" in the example is that parameter that is sent to the plugin function, not used in this case.
'HomeSeerSamplePlugin' is the ID of the plugin that is being called.
You can also return arrays from your plugin and iterate over the array in the tag.
Create the function in your HSPI class as:
To iterate over this with a tag:
If you want to use your own class as the returned type, you need to make it Serializable:
To use the properties of your class in your html file:
The definition of the serializable class needs to be in the plugin exe, located in the HS root folder.