899   <xsl:template mode="widget_defs" match="widget[@type='Button']">

   900     <xsl:param name="hmi_element"/>

   901     <xsl:text>frequency: 5,

   902 </xsl:text>

   903     <xsl:text>init: function() {

   904 </xsl:text>

   905     <xsl:text>    this.element.addEventListener(

   906 </xsl:text>

   907     <xsl:text>      "mousedown",

   908 </xsl:text>

   909     <xsl:text>      evt =&gt; {

   910 </xsl:text>

   911     <xsl:text>          change_hmi_value(this.indexes[0], "=1");

   912 </xsl:text>

   913     <xsl:text>      });

   914 </xsl:text>

   915     <xsl:text>    this.element.addEventListener(

   916 </xsl:text>

   917     <xsl:text>      "mouseup",

   918 </xsl:text>

   919     <xsl:text>      evt =&gt; {

   920 </xsl:text>

   921     <xsl:text>          change_hmi_value(this.indexes[0], "=0");

   922 </xsl:text>

   923     <xsl:text>      });

   924 </xsl:text>

   925     <xsl:text>},

   926 </xsl:text>

   927   </xsl:template>

   928   <xsl:template mode="widget_defs" match="widget[@type='CircularBar']">

   929     <xsl:param name="hmi_element"/>

   930     <xsl:text>frequency: 10,

   931 </xsl:text>

   932     <xsl:call-template name="defs_by_labels">

   933       <xsl:with-param name="hmi_element" select="$hmi_element"/>

   934       <xsl:with-param name="labels">

   935         <xsl:text>path</xsl:text>

   936       </xsl:with-param>

   937     </xsl:call-template>

   938     <xsl:call-template name="defs_by_labels">

   939       <xsl:with-param name="hmi_element" select="$hmi_element"/>

   940       <xsl:with-param name="labels">

   941         <xsl:text>value min max</xsl:text>

   942       </xsl:with-param>

   943       <xsl:with-param name="mandatory" select="'no'"/>

   944     </xsl:call-template>

   945     <xsl:text>dispatch: function(value) {

   946 </xsl:text>

   947     <xsl:text>    if(this.value_elt)

   948 </xsl:text>

   949     <xsl:text>        this.value_elt.textContent = String(value);

   950 </xsl:text>

   951     <xsl:text>    let [min,max,start,end] = this.range;

   952 </xsl:text>

   953     <xsl:text>    let [cx,cy] = this.center;

   954 </xsl:text>

   955     <xsl:text>    let [rx,ry] = this.proportions;

   956 </xsl:text>

   957     <xsl:text>    let tip = start + (end-start)*Number(value)/(max-min);

   958 </xsl:text>

   959     <xsl:text>    let size = 0;

   960 </xsl:text>

   961     <xsl:text>    if (tip-start &gt; Math.PI) {

   962 </xsl:text>

   963     <xsl:text>        size = 1;

   964 </xsl:text>

   965     <xsl:text>    } else {

   966 </xsl:text>

   967     <xsl:text>        size = 0;

   968 </xsl:text>

   969     <xsl:text>    }

   970 </xsl:text>

   971     <xsl:text>    this.path_elt.setAttribute('d', "M "+(cx+rx*Math.cos(start))+","+(cy+ry*Math.sin(start))+" A "+rx+","+ry+" 0 "+size+" 1 "+(cx+rx*Math.cos(tip))+","+(cy+ry*Math.sin(tip)));

   972 </xsl:text>

   973     <xsl:text>},

   974 </xsl:text>

   975     <xsl:text>range: undefined,

   976 </xsl:text>

   977     <xsl:text>init: function() {

   978 </xsl:text>

   979     <xsl:text>    let start = Number(this.path_elt.getAttribute('sodipodi:start'));

   980 </xsl:text>

   981     <xsl:text>    let end = Number(this.path_elt.getAttribute('sodipodi:end'));

   982 </xsl:text>

   983     <xsl:text>    let cx = Number(this.path_elt.getAttribute('sodipodi:cx'));

   984 </xsl:text>

   985     <xsl:text>    let cy = Number(this.path_elt.getAttribute('sodipodi:cy'));

   986 </xsl:text>

   987     <xsl:text>    let rx = Number(this.path_elt.getAttribute('sodipodi:rx'));

   988 </xsl:text>

   989     <xsl:text>    let ry = Number(this.path_elt.getAttribute('sodipodi:ry'));

   990 </xsl:text>

   991     <xsl:text>    if (ry == 0) {

   992 </xsl:text>

   993     <xsl:text>        ry = rx;

   994 </xsl:text>

   995     <xsl:text>    }

   996 </xsl:text>

   997     <xsl:text>    if (start &gt; end) {

   998 </xsl:text>

   999     <xsl:text>        end = end + 2*Math.PI;

  1000 </xsl:text>

  1001     <xsl:text>    }

  1002 </xsl:text>

  1003     <xsl:text>    let min = this.min_elt ?

  1004 </xsl:text>

  1005     <xsl:text>              Number(this.min_elt.textContent) :

  1006 </xsl:text>

  1007     <xsl:text>              this.args.length &gt;= 1 ? this.args[0] : 0;

  1008 </xsl:text>

  1009     <xsl:text>    let max = this.max_elt ?

  1010 </xsl:text>

  1011     <xsl:text>              Number(this.max_elt.textContent) :

  1012 </xsl:text>

  1013     <xsl:text>              this.args.length &gt;= 2 ? this.args[1] : 100;

  1014 </xsl:text>

  1015     <xsl:text>    this.range = [min, max, start, end];

  1016 </xsl:text>

  1017     <xsl:text>    this.center = [cx, cy];

  1018 </xsl:text>

  1019     <xsl:text>    this.proportions = [rx, ry];

  1020 </xsl:text>

  1021     <xsl:text>},

  1022 </xsl:text>

  1023   </xsl:template>