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

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

  1156     <xsl:text>class ButtonWidget extends Widget{

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

  1157 </xsl:text>

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

  1158     <xsl:text>    frequency = 5;

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

  1159 </xsl:text>

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

  1160     <xsl:text>    init() {

  1160         <xsl:text>active inactive</xsl:text>

  1161 </xsl:text>

  1161       </xsl:with-param>

  1162     <xsl:text>        // TODO : use attributes to allow interaction through svg:use

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

  1163 </xsl:text>

  1163     </xsl:call-template>

  1164     <xsl:text>        // TODO : deal with dragging

  1164     <xsl:text>frequency: 5,

  1165 </xsl:text>

  1165 </xsl:text>

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

  1166     <xsl:text>on_mouse_down: function(evt) {

  1167 </xsl:text>

  1167 </xsl:text>

  1168     <xsl:text>          "mousedown",

  1168     <xsl:text>    if (this.active_style &amp;&amp; this.inactive_style) {

  1169 </xsl:text>

  1169 </xsl:text>

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

  1170     <xsl:text>        this.active_elt.setAttribute("style", this.active_style);

  1171 </xsl:text>

  1171 </xsl:text>

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

  1172     <xsl:text>        this.inactive_elt.setAttribute("style", "display:none");

  1173 </xsl:text>

  1174     <xsl:text>          });

  1175 </xsl:text>

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

  1177 </xsl:text>

  1178     <xsl:text>          "mouseup",

  1179 </xsl:text>

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

  1181 </xsl:text>

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

  1183 </xsl:text>

  1184     <xsl:text>          });

  1188     <xsl:text>}

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

  1177 </xsl:text>

  1178     <xsl:text>},

  1179 </xsl:text>

  1180     <xsl:text>on_mouse_up: function(evt) {

  1181 </xsl:text>

  1182     <xsl:text>    if (this.active_style &amp;&amp; this.inactive_style) {

  1183 </xsl:text>

  1184     <xsl:text>        this.active_elt.setAttribute("style", "display:none");

  1185 </xsl:text>

  1186     <xsl:text>        this.inactive_elt.setAttribute("style", this.inactive_style);

  1187 </xsl:text>

  1188     <xsl:text>    }

  1189 </xsl:text>

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

  1191 </xsl:text>

  1192     <xsl:text>},

  1193 </xsl:text>

  1194     <xsl:text>active_style: undefined,

  1195 </xsl:text>

  1196     <xsl:text>inactive_style: undefined,

  1197 </xsl:text>

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

  1199 </xsl:text>

  1200     <xsl:text>  this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined;

  1201 </xsl:text>

  1202     <xsl:text>  this.inactive_style = this.inactive_elt ? this.inactive_elt.style.cssText : undefined;

  1203 </xsl:text>

  1204     <xsl:text>  if (this.active_style &amp;&amp; this.inactive_style) {

  1205 </xsl:text>

  1206     <xsl:text>      this.active_elt.setAttribute("style", "display:none");

  1207 </xsl:text>

  1208     <xsl:text>      this.inactive_elt.setAttribute("style", this.inactive_style);

  1209 </xsl:text>

  1210     <xsl:text>  }

  1211 </xsl:text>

  1212     <xsl:text>  this.element.setAttribute("onmousedown", "hmi_widgets['</xsl:text>

  1213     <xsl:value-of select="$hmi_element/@id"/>

  1214     <xsl:text>'].on_mouse_down(evt)");

  1215 </xsl:text>

  1216     <xsl:text>  this.element.setAttribute("onmouseup", "hmi_widgets['</xsl:text>

  1217     <xsl:value-of select="$hmi_element/@id"/>

  1218     <xsl:text>'].on_mouse_up(evt)");

  1219 </xsl:text>

  1220     <xsl:text>},