Templates are defined in Javascript, through the templates dictionary. This can be defined in it's own JSON file along-side your other display files.

The dictionary key is the unique code for the template (such as 'vbarchart' for a vertical bar-chart), followed by a string that contains the SVG text that will replace the parent object.

Text between percentage symbols (%) are replaced by parameter values. For example, the text “%x%” will be replaced with the value of 'x' in the originating SVG object.

You can also enclose Javascript math / functions inside the symbols to transform or translate the number.

For instance, if you wanted to create a template of a large black box that contains a smaller green one, your template would look like this…

<rect x="%x%" y="%y%" width="%width%" height="%height%" fill="black"/>
<rect x="%x+2%" y="%y+2%" width="%width-4%" height="%height-4%" fill="green"/>

Template replacements happen before the rest of the file is processed, so items that are animated will work.

Below is the template for a simple status control.

   <g transform="translate(%x% %y%)" class="status">
      <rect rx="10" ry="10" x="0" y="0" width="%width%" height="%height%" ardifill="{%paramprop%|@round/0|@colour}" class="statusbox element" name="%label%" ardivalue="{%paramprop%|@round/0|@text}"></rect>
       <text x="%width/2%" y="%height/2%" text-anchor="middle" text-baseline="middle" arditext="{%paramprop%|@round/0|@text}"></text>
   </g>

var templates = {
	"vbarchart": '<g><rect class="barchartbg element" x="%x%" y="%y%" rx="5" ry="5" width="%width%" height="%height%" name="%label%" units="%units%" ardivalue="{%paramprop%|%decimals%}"></rect><rect class="barchartfg" x="%x+2%" y="%y+2%" width="%width-4%" height="%height-4%" ardiy="[%y% + %height-2%-{%paramprop%|@scale/0/%maxin%/0/%height%}]" ardiheight="{%paramprop%|@scale/0/%maxin%/0/%height%}" ardifill="{%paramprop%|@colour}" rx="5" ry="5" ></rect></g>',
	"hbarchart": '<g><rect class="barchartbg element" x="%x%" y="%y%" rx="5" ry="5"  width="%width%" height="%height%" name="%label%" units="%units%" ardivalue="{%paramprop%|%decimals%}"></rect><rect class="barchartfg" x="%x+2%" y="%y+2%" width="%width-4%" height="%height-4%" ardiwidth="{%paramprop%|@scale/0/%maxin%/0/%width%}" ardifill="{%paramprop%|@colour}" rx="5" ry="5" ></rect></g>',
	"haxis": '<g transform="translate(%x% %y%)" class="axis"><line class="axisline" x1="0" y1="10" x2="%width%" y2="10"/><line class="axisline" x1="0" y1="0" x2="0" y2="%height%"/><line class="axisline" x1="%width%" y1="0" x2="%width%" y2="%height%"/><line class="axisline" x1="%width/2%" y1="0" x2="%width/2%" y2="%height%"/><text class="axisline" x="5" y="%height+5%">%min%</text><text class="axisline" x="%width-5%" y="%height+5%" text-anchor="end">%max%</text><text class="axisline" x="%width/2%" y="%height+20%" text-anchor="middle">%title%</text></g>',
	"raxis": '<g transform="translate(%x% %y%)" class="axis"><line class="axisline" x1="10" y1="0" x2="10" y2="%height%"/><line class="axisline" x1="0" y1="0" x2="%width/2%" y2="0"/><line class="axisline" x1="0" y1="%height%" x2="%width/2%" y2="%height%"/><line class="axisline" x1="0" y1="%height/2%" x2="%width*0.4%" y2="%height/2%"/><text class="axisline" x="%width*0.6%" y="5" alignment-baseline="middle">%max%</text><text class="axisline" x="%width*0.6%" y="%height%" text-anchor="start" alignment-baseline="middle">%min%</text><text class="axisline" x="%width*0.6%" y="%height/2%" transform="rotate(90 %width*0.6% %height/2%)" text-anchor="middle">%title%</text></g>',
	"laxis": '<g transform="translate(%x% %y%)" class="axis"><line class="axisline" x1="%width-10%" y1="0" x2="%width-10%" y2="%height%"/><line class="axisline" x1="%width%" y1="0" x2="%width/2%" y2="0"/><line class="axisline" x1="%width%" y1="%height%" x2="%width/2%" y2="%height%"/><line class="axisline" x1="%width%" y1="%height/2%" x2="%width/2%" y2="%height/2%"/><text class="axisline" x="%width*0.4%" y="5" alignment-baseline="middle" text-anchor="end">%max%</text><text class="axisline" x="%width*0.4%" y="%height%" text-anchor="end" alignment-baseline="middle">%min%</text><text class="axisline" x="10" y="%height/2%" transform="rotate(-90 10 %height/2%)" text-anchor="middle" test-baseline="hanging">%title%</text></g>',
	"title": '<text x="45.992844" y="66.797386" class="dg-display" font-size="36px" letter-spacing="0.5" id="text1559" style="font-weight:700;font-family:\'Arial Narrow\', Arial, sans-serif;fill:#2f2a24"><tspan id="tspan1555">%title% </tspan><tspan fill="#c67d00" id="tspan1557">/ %subtitle%</tspan></text>',
	"status": '<g transform="translate(%x% %y%)" class="status"><rect rx="10" ry="10" x="0" y="0" width="%width%" height="%height%" ardifill="{%paramprop%|@round/0|@colour}" class="statusbox element" name="%label%" ardivalue="{%paramprop%|@round/0|@text}"></rect><text x="%width/2%" y="%height/2%" text-anchor="middle" text-baseline="middle" arditext="{%paramprop%|@round/0|@text}"></text></g>',
	"gauge": '<g transform="translate(%cx% %cy%)" class="gauge"><circle cx="%r%" cy="%r%" r="%r%" class="outer" stroke-dasharray="%r*2*Math.PI * (270/360)% %r*2*Math.PI%" color="black" transform="rotate(135 %r% %r%)"/><circle cx="%r%" cy="%r%" r="%r%" color="yellow" ardistroke-dasharray="[(%r%*{%paramprop%|@scale/0/%max%/0/1}*2*Math.PI * (270/360)) + \' \' + (%r%*2*Math.PI)]" class="inner" fill="none" transform="rotate(135 %r% %r%)" ardistroke="{%paramprop%|@colour}" stroke-weight: "30px"/></g>'
};