Custom HTML

The Custom HTML widget lets you add custom code and layout to your widget. This can be used with Angular JS controllers to create dynamic content.

Certain angular device variables and objects are available depending on the type of dashboard page. Detail pages (linked to a particular device ID) will have the following objects:

Object Description
device Information pertaining to the current device
user_device User-specific data pertaining to the current device
deviceconfig WattmonOS v3.0 and above only: Details on all devices and roles in the config for the device

In order to use a specific variable, enclose it in double curly braces.

In order to use formulas, enclose the formulat with {* and *}. Formulas are static (they won't dynamically update with the page until the next refresh)

Example 1

The MAC address is: 

{{device.device_key}}

The site name is : 

{{user_device.description}}

A more complex example to list the serial numbers of all inverters of type 7081: 

<h4>Inverters</h4>
<div class='row'>
		<div class='col-md-3'><strong>ID</strong></div>
		<div class='col-md-4'><strong>Inverter</strong></div>
		<div class='col-md-5'><strong>Serial Number</strong></div>
</div>
<div class='row' ng-repeat='dev in deviceconfig.devices'>
	<div ng-show='dev.type_id==7081'>
		<div class='col-md-3'>{{dev.id}}</div>
		<div class='col-md-4'>{{dev.description}}</div>
		<div class='col-md-5'>{{dev.serial}}</div>
	</div>
</div>

Example 1

Using a formula: 

Daily production for meter1: {* DIFF('meter1_kWh_Total_Active',1) *}