Embedding Codes

When you add an SVG file to the media of one of your assets, ARDI will automatically check for embedding codes when users download the file.

These codes make it possible for you to make a single SVG file that applies to a number of different assets.

Where you would normally put in an point code, you can instead use embedding codes to fill in some or part of the code automatically.

First, it's important to note that you do not need to include any script files in your SVG. ARDI will add these tags automatically if they are required.

You skip the creation of your HMIPanel object - ARDI will inject that code as-required, which allows ARDI to embed the SVG in a variety of pages.

You also don't need to call OnlyWhenFocused or ConnectTo - these will also automatically be included.

Simply add the following at the bottom of your SVG…

 
  <script>
  //SUBS
  //ENDSUBS
  </script>
 

…and place any of your subscription calls between the SUBS and ENDSUBS comments. The system will provide an HMIPanel object named connection.

For example,

<script>
  //SUBS
connection.Subscribe("[PX_POWER]",function (val) {		
	$('#power').html(parseFloat(val).toFixed(2) + " kW");	
});
  //ENDSUBS
</script>

The example above uses an embed code, which is found between the square brackets.

ARDI replaces any embed codes with different values.

The embed code [ASSETNAME] is replaced with the name of the active asset (the asset this SVG was opened from).

In this case, PX_POWER is a Property Embed, which replaces the entire code (including the square bracket) with the point code for the power property of the asset.

These sorts of embeds allow you to make a single SVG image that then works for all of the assets of a particular type.

The embed code reference shows some of the embed codes you can use.