====== 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: 
<code html>{{device.device_key}}</code>

The site name is : 
<code html>{{user_device.description}}</code>

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

<code html>
<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>
</code>

==== Example 1====

Using a formula:

<code html>Daily production for meter1: {* DIFF('meter1_kWh_Total_Active',1) *}
</code>