Mercurial Mercurial > beremiz / comparison
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
svghmi/gen_index_xhtml.xslt
branchsvghmi
changeset 3058 6ea4b7e1a9ed
parent 3048 d46d545ff7b7
child 3065 c369a742443d
equal deleted inserted replaced
3055:6dd617cc9c05 3058:6ea4b7e1a9ed 
   913       <xsl:for-each select="$widget/path">
 
   913       <xsl:for-each select="$widget/path">
 
   914         <xsl:choose>
 
   914         <xsl:choose>
 
   915           <xsl:when test="not(@index)">
 
   915           <xsl:when test="not(@index)">
 
   916             <xsl:choose>
 
   916             <xsl:choose>
 
   917               <xsl:when test="not(@type)">
 
   917               <xsl:when test="not(@type)">
 
   918                 <xsl:message terminate="yes">
 
   918                 <xsl:message terminate="no">
 
   919                   <xsl:text>Widget </xsl:text>
 
   919                   <xsl:text>Widget </xsl:text>
 
   920                   <xsl:value-of select="$widget/@type"/>
 
   920                   <xsl:value-of select="$widget/@type"/>
 
   921                   <xsl:text> id="</xsl:text>
 
   921                   <xsl:text> id="</xsl:text>
 
   922                   <xsl:value-of select="$eltid"/>
 
   922                   <xsl:value-of select="$eltid"/>
 
   923                   <xsl:text>" : No match for path "</xsl:text>
 
   923                   <xsl:text>" : No match for path "</xsl:text>
 
   924                   <xsl:value-of select="@value"/>
 
   924                   <xsl:value-of select="@value"/>
 
   925                   <xsl:text>" in HMI tree</xsl:text>
 
   925                   <xsl:text>" in HMI tree</xsl:text>
 
   926                 </xsl:message>
 
   926                 </xsl:message>
 
       
   927                 <xsl:text>undefined</xsl:text>
 
       
   928                 <xsl:if test="position()!=last()">
 
       
   929                   <xsl:text>,</xsl:text>
 
       
   930                 </xsl:if>
 
   927               </xsl:when>
 
   931               </xsl:when>
 
   928               <xsl:when test="@type = 'PAGE_LOCAL'">
 
   932               <xsl:when test="@type = 'PAGE_LOCAL'">
 
   929                 <xsl:text>"</xsl:text>
 
   933                 <xsl:text>"</xsl:text>
 
   930                 <xsl:value-of select="@value"/>
 
   934                 <xsl:value-of select="@value"/>
 
   931                 <xsl:text>"</xsl:text>
 
   935                 <xsl:text>"</xsl:text>
 
  1177 </xsl:text>
 
  1181 </xsl:text>
 
  1178     <xsl:text>            for(let i = 0; i &lt; this.indexes.length; i++) {
 
  1182     <xsl:text>            for(let i = 0; i &lt; this.indexes.length; i++) {
 
  1179 </xsl:text>
 
  1183 </xsl:text>
 
  1180     <xsl:text>                let index = this.get_variable_index(i);
 
  1184     <xsl:text>                let index = this.get_variable_index(i);
 
  1181 </xsl:text>
 
  1185 </xsl:text>
 
       
  1186     <xsl:text>                if(index == undefined) continue;
 
       
  1187 </xsl:text>
 
  1182     <xsl:text>                subscribers(index).add(this);
 
  1188     <xsl:text>                subscribers(index).add(this);
 
  1183 </xsl:text>
 
  1189 </xsl:text>
 
  1184     <xsl:text>            }
 
  1190     <xsl:text>            }
 
  1185 </xsl:text>
 
  1191 </xsl:text>
 
  1186     <xsl:text>        need_cache_apply.push(this); 
  1192     <xsl:text>        need_cache_apply.push(this); 
  1195 </xsl:text>
 
  1201 </xsl:text>
 
  1196     <xsl:text>            /* dispatch current cache in newly opened page widgets */
 
  1202     <xsl:text>            /* dispatch current cache in newly opened page widgets */
 
  1197 </xsl:text>
 
  1203 </xsl:text>
 
  1198     <xsl:text>            let realindex = this.get_variable_index(index);
 
  1204     <xsl:text>            let realindex = this.get_variable_index(index);
 
  1199 </xsl:text>
 
  1205 </xsl:text>
 
       
  1206     <xsl:text>            if(realindex == undefined) continue;
 
       
  1207 </xsl:text>
 
  1200     <xsl:text>            let cached_val = cache[realindex];
 
  1208     <xsl:text>            let cached_val = cache[realindex];
 
  1201 </xsl:text>
 
  1209 </xsl:text>
 
  1202     <xsl:text>            if(cached_val != undefined)
 
  1210     <xsl:text>            if(cached_val != undefined)
 
  1203 </xsl:text>
 
  1211 </xsl:text>
 
  1204     <xsl:text>                this._dispatch(cached_val, cached_val, index);
 
  1212     <xsl:text>                this._dispatch(cached_val, cached_val, index);
 
  1229 </xsl:text>
 
  1237 </xsl:text>
 
  1230     <xsl:text>        return index;
 
  1238     <xsl:text>        return index;
 
  1231 </xsl:text>
 
  1239 </xsl:text>
 
  1232     <xsl:text>    }
 
  1240     <xsl:text>    }
 
  1233 </xsl:text>
 
  1241 </xsl:text>
 
  1234     <xsl:text>    change_hmi_value(index,opstr) {
 
  1242     <xsl:text>    change_hmi_value(index, opstr) {
 
  1235 </xsl:text>
 
  1243 </xsl:text>
 
  1236     <xsl:text>        return change_hmi_value(this.get_variable_index(index), opstr);
 
  1244     <xsl:text>        let realindex = this.get_variable_index(index);
 
       
  1245 </xsl:text>
 
       
  1246     <xsl:text>        if(realindex == undefined) return undefined;
 
       
  1247 </xsl:text>
 
       
  1248     <xsl:text>        return change_hmi_value(realindex, opstr);
 
  1237 </xsl:text>
 
  1249 </xsl:text>
 
  1238     <xsl:text>    }
 
  1250     <xsl:text>    }
 
  1239 </xsl:text>
 
  1251 </xsl:text>
 
  1240     <xsl:text>
 
  1252     <xsl:text>
 
  1241 </xsl:text>
 
  1253 </xsl:text>
 
  1242     <xsl:text>    apply_hmi_value(index, new_val) {
 
  1254     <xsl:text>    apply_hmi_value(index, new_val) {
 
  1243 </xsl:text>
 
  1255 </xsl:text>
 
  1244     <xsl:text>        return apply_hmi_value(this.get_variable_index(index), new_val);
 
  1256     <xsl:text>        let realindex = this.get_variable_index(index);
 
       
  1257 </xsl:text>
 
       
  1258     <xsl:text>        if(realindex == undefined) return undefined;
 
       
  1259 </xsl:text>
 
       
  1260     <xsl:text>        return apply_hmi_value(realindex, new_val);
 
  1245 </xsl:text>
 
  1261 </xsl:text>
 
  1246     <xsl:text>    }
 
  1262     <xsl:text>    }
 
  1247 </xsl:text>
 
  1263 </xsl:text>
 
  1248     <xsl:text>
 
  1264     <xsl:text>
 
  1249 </xsl:text>
 
  1265 </xsl:text>
 
  1252     <xsl:text>        // TODO avoid searching, store index at sub()
 
  1268     <xsl:text>        // TODO avoid searching, store index at sub()
 
  1253 </xsl:text>
 
  1269 </xsl:text>
 
  1254     <xsl:text>        for(let i = 0; i &lt; this.indexes.length; i++) {
 
  1270     <xsl:text>        for(let i = 0; i &lt; this.indexes.length; i++) {
 
  1255 </xsl:text>
 
  1271 </xsl:text>
 
  1256     <xsl:text>            let refindex = this.get_variable_index(i);
 
  1272     <xsl:text>            let refindex = this.get_variable_index(i);
 
       
  1273 </xsl:text>
 
       
  1274     <xsl:text>            if(refindex == undefined) continue;
 
  1257 </xsl:text>
 
  1275 </xsl:text>
 
  1258     <xsl:text>
 
  1276     <xsl:text>
 
  1259 </xsl:text>
 
  1277 </xsl:text>
 
  1260     <xsl:text>            if(index == refindex) {
 
  1278     <xsl:text>            if(index == refindex) {
 
  1261 </xsl:text>
 
  1279 </xsl:text>
 
  1488 </xsl:text>
 
  1506 </xsl:text>
 
  1489     <xsl:text>    frequency = 5;
 
  1507     <xsl:text>    frequency = 5;
 
  1490 </xsl:text>
 
  1508 </xsl:text>
 
  1491     <xsl:text>    state = 0;
 
  1509     <xsl:text>    state = 0;
 
  1492 </xsl:text>
 
  1510 </xsl:text>
 
       
  1511     <xsl:text>    plc_lock = false;
 
       
  1512 </xsl:text>
 
  1493     <xsl:text>    active_style = undefined;
 
  1513     <xsl:text>    active_style = undefined;
 
  1494 </xsl:text>
 
  1514 </xsl:text>
 
  1495     <xsl:text>    inactive_style = undefined;
 
  1515     <xsl:text>    inactive_style = undefined;
 
  1496 </xsl:text>
 
  1516 </xsl:text>
 
  1497     <xsl:text>
 
  1517     <xsl:text>
 
  1498 </xsl:text>
 
  1518 </xsl:text>
 
  1499     <xsl:text>    // TODO decouple update of DOM from event (i.e use animate())
 
  1519     <xsl:text>    dispatch(value) {
 
  1500 </xsl:text>
 
  1520 </xsl:text>
 
  1501     <xsl:text>
 
  1521     <xsl:text>        if(value){
 
  1502 </xsl:text>
 
  1522 </xsl:text>
 
  1503     <xsl:text>
 
  1523     <xsl:text>            this.button_release();
 
  1504 </xsl:text>
 
  1524 </xsl:text>
 
  1505     <xsl:text>    // TODO State of the button should distinguish UI feedbak from current PLC value
 
  1525     <xsl:text>        }
 
  1506 </xsl:text>
 
  1526 </xsl:text>
 
  1507     <xsl:text>
 
  1527     <xsl:text>    }
 
  1508 </xsl:text>
 
  1528 </xsl:text>
 
  1509     <xsl:text>    on_mouse_down(evt) {
 
  1529     <xsl:text>
 
       
  1530 </xsl:text>
 
       
  1531     <xsl:text>     on_mouse_down(evt) {
 
       
  1532 </xsl:text>
 
       
  1533     <xsl:text>         if (this.active_style &amp;&amp; this.inactive_style) {
 
       
  1534 </xsl:text>
 
       
  1535     <xsl:text>             this.active_elt.setAttribute("style", this.active_style);
 
       
  1536 </xsl:text>
 
       
  1537     <xsl:text>             this.inactive_elt.setAttribute("style", "display:none");
 
       
  1538 </xsl:text>
 
       
  1539     <xsl:text>         }
 
       
  1540 </xsl:text>
 
       
  1541     <xsl:text>         this.apply_hmi_value(0, 1);
 
       
  1542 </xsl:text>
 
       
  1543     <xsl:text>         this.plc_lock = false;
 
       
  1544 </xsl:text>
 
       
  1545     <xsl:text>     }
 
       
  1546 </xsl:text>
 
       
  1547     <xsl:text>
 
       
  1548 </xsl:text>
 
       
  1549     <xsl:text>     on_mouse_up(evt) {
 
       
  1550 </xsl:text>
 
       
  1551     <xsl:text>         this.button_release();
 
       
  1552 </xsl:text>
 
       
  1553     <xsl:text>     }
 
       
  1554 </xsl:text>
 
       
  1555     <xsl:text>
 
       
  1556 </xsl:text>
 
       
  1557     <xsl:text>     button_release(){
 
       
  1558 </xsl:text>
 
       
  1559     <xsl:text>        if(!this.plc_lock){
 
       
  1560 </xsl:text>
 
       
  1561     <xsl:text>            this.plc_lock = true;
 
       
  1562 </xsl:text>
 
       
  1563     <xsl:text>        }
 
       
  1564 </xsl:text>
 
       
  1565     <xsl:text>        else{
 
       
  1566 </xsl:text>
 
       
  1567     <xsl:text>            if (this.active_style &amp;&amp; this.inactive_style) {
 
       
  1568 </xsl:text>
 
       
  1569     <xsl:text>                 this.active_elt.setAttribute("style", "display:none");
 
       
  1570 </xsl:text>
 
       
  1571     <xsl:text>                 this.inactive_elt.setAttribute("style", this.inactive_style);
 
       
  1572 </xsl:text>
 
       
  1573     <xsl:text>             }
 
       
  1574 </xsl:text>
 
       
  1575     <xsl:text>             this.apply_hmi_value(0, 0);
 
       
  1576 </xsl:text>
 
       
  1577     <xsl:text>        }
 
       
  1578 </xsl:text>
 
       
  1579     <xsl:text>     }
 
       
  1580 </xsl:text>
 
       
  1581     <xsl:text>
 
       
  1582 </xsl:text>
 
       
  1583     <xsl:text>     init() {
 
       
  1584 </xsl:text>
 
       
  1585     <xsl:text>        this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined;
 
       
  1586 </xsl:text>
 
       
  1587     <xsl:text>        this.inactive_style = this.inactive_elt ? this.inactive_elt.style.cssText : undefined;
 
       
  1588 </xsl:text>
 
       
  1589     <xsl:text>
 
  1510 </xsl:text>
 
  1590 </xsl:text>
 
  1511     <xsl:text>        if (this.active_style &amp;&amp; this.inactive_style) {
 
  1591     <xsl:text>        if (this.active_style &amp;&amp; this.inactive_style) {
 
  1512 </xsl:text>
 
  1592 </xsl:text>
 
  1513     <xsl:text>            this.active_elt.setAttribute("style", this.active_style);
 
  1593     <xsl:text>            this.active_elt.setAttribute("style", "display:none");
 
  1514 </xsl:text>
 
  1594 </xsl:text>
 
  1515     <xsl:text>            this.inactive_elt.setAttribute("style", "display:none");
 
  1595     <xsl:text>            this.inactive_elt.setAttribute("style", this.inactive_style);
 
  1516 </xsl:text>
 
  1596 </xsl:text>
 
  1517     <xsl:text>        }
 
  1597     <xsl:text>        }
 
  1518 </xsl:text>
 
  1598 </xsl:text>
 
  1519     <xsl:text>        this.apply_hmi_value(0, 1);
 
  1599     <xsl:text>
 
  1520 </xsl:text>
 
  1600 </xsl:text>
 
  1521     <xsl:text>        // TODO inhibit all mouse/touch events except mouse up (in other word grab cursor)
 
  1601     <xsl:text>        this.element.setAttribute("onmousedown", "hmi_widgets["+this.element_id+"].on_mouse_down(evt)");
 
  1522 </xsl:text>
 
  1602 </xsl:text>
 
  1523     <xsl:text>    }
 
  1603     <xsl:text>        this.element.setAttribute("onmouseup", "hmi_widgets["+this.element_id+"].on_mouse_up(evt)");
 
  1524 </xsl:text>
 
  1604 </xsl:text>
 
  1525     <xsl:text>
 
  1605     <xsl:text>     }
 
  1526 </xsl:text>
 
       
  1527     <xsl:text>    on_mouse_up(evt) {
 
       
  1528 </xsl:text>
 
       
  1529     <xsl:text>        if (this.active_style &amp;&amp; this.inactive_style) {
 
       
  1530 </xsl:text>
 
       
  1531     <xsl:text>            this.active_elt.setAttribute("style", "display:none");
 
       
  1532 </xsl:text>
 
       
  1533     <xsl:text>            this.inactive_elt.setAttribute("style", this.inactive_style);
 
       
  1534 </xsl:text>
 
       
  1535     <xsl:text>        }
 
       
  1536 </xsl:text>
 
       
  1537     <xsl:text>        this.apply_hmi_value(0, 0);
 
       
  1538 </xsl:text>
 
       
  1539     <xsl:text>        // TODO release inhibited events 
       
  1540 </xsl:text>
 
       
  1541     <xsl:text>    }
 
       
  1542 </xsl:text>
 
       
  1543     <xsl:text>
 
       
  1544 </xsl:text>
 
       
  1545     <xsl:text>    init() {
 
       
  1546 </xsl:text>
 
       
  1547     <xsl:text>       // TODO : move to widget_defs so that we can have generated string literals directly
 
       
  1548 </xsl:text>
 
       
  1549     <xsl:text>       this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined;
 
       
  1550 </xsl:text>
 
       
  1551     <xsl:text>       this.inactive_style = this.inactive_elt ? this.inactive_elt.style.cssText : undefined;
 
       
  1552 </xsl:text>
 
       
  1553     <xsl:text>
 
       
  1554 </xsl:text>
 
       
  1555     <xsl:text>       if (this.active_style &amp;&amp; this.inactive_style) {
 
       
  1556 </xsl:text>
 
       
  1557     <xsl:text>           this.active_elt.setAttribute("style", "display:none");
 
       
  1558 </xsl:text>
 
       
  1559     <xsl:text>           this.inactive_elt.setAttribute("style", this.inactive_style);
 
       
  1560 </xsl:text>
 
       
  1561     <xsl:text>       }
 
       
  1562 </xsl:text>
 
       
  1563     <xsl:text>
 
       
  1564 </xsl:text>
 
       
  1565     <xsl:text>       this.element.setAttribute("onmousedown", "hmi_widgets[\""+this.element_id+"\"].on_mouse_down(evt)");
 
       
  1566 </xsl:text>
 
       
  1567     <xsl:text>       this.element.setAttribute("onmouseup", "hmi_widgets[\""+this.element_id+"\"].on_mouse_up(evt)");
 
       
  1568 </xsl:text>
 
       
  1569     <xsl:text>    }
 
       
  1570 </xsl:text>
 
  1606 </xsl:text>
 
  1571     <xsl:text>}
 
  1607     <xsl:text>}
 
  1572 </xsl:text>
 
  1608 </xsl:text>
 
  1573   </xsl:template>
 
  1609   </xsl:template>
 
  1574   <xsl:template mode="widget_defs" match="widget[@type='Button']">
 
  1610   <xsl:template mode="widget_defs" match="widget[@type='Button']">
 
  4716 </xsl:text>
 
  4752 </xsl:text>
 
  4717     <xsl:text>    frequency = 5;
 
  4753     <xsl:text>    frequency = 5;
 
  4718 </xsl:text>
 
  4754 </xsl:text>
 
  4719     <xsl:text>    range = undefined;
 
  4755     <xsl:text>    range = undefined;
 
  4720 </xsl:text>
 
  4756 </xsl:text>
 
       
  4757     <xsl:text>    handle_orig = undefined;
 
       
  4758 </xsl:text>
 
       
  4759     <xsl:text>    scroll_size = 10;
 
       
  4760 </xsl:text>
 
       
  4761     <xsl:text>    min_size = 0.07;
 
       
  4762 </xsl:text>
 
  4721     <xsl:text>    fi = undefined;
 
  4763     <xsl:text>    fi = undefined;
 
  4722 </xsl:text>
 
  4764 </xsl:text>
 
  4723     <xsl:text>    svg_dist = undefined;
 
  4765     <xsl:text>    curr_value = 0;
 
  4724 </xsl:text>
 
  4766 </xsl:text>
 
  4725     <xsl:text>    drag = false;
 
  4767     <xsl:text>    drag = false;
 
  4726 </xsl:text>
 
  4768 </xsl:text>
 
  4727     <xsl:text>    enTimer = false;
 
  4769     <xsl:text>    enTimer = false;
 
  4728 </xsl:text>
 
  4770 </xsl:text>
 
       
  4771     <xsl:text>    handle_click = undefined;
 
       
  4772 </xsl:text>
 
       
  4773     <xsl:text>    last_drag = false;
 
       
  4774 </xsl:text>
 
  4729     <xsl:text>
 
  4775     <xsl:text>
 
  4730 </xsl:text>
 
  4776 </xsl:text>
 
  4731     <xsl:text>    dispatch(value) {
 
  4777     <xsl:text>    dispatch(value) {
 
  4732 </xsl:text>
 
  4778 </xsl:text>
 
       
  4779     <xsl:text>        //save current value inside widget
 
       
  4780 </xsl:text>
 
       
  4781     <xsl:text>        this.curr_value = value;
 
       
  4782 </xsl:text>
 
       
  4783     <xsl:text>
 
       
  4784 </xsl:text>
 
  4733     <xsl:text>        if(this.value_elt)
 
  4785     <xsl:text>        if(this.value_elt)
 
  4734 </xsl:text>
 
  4786 </xsl:text>
 
  4735     <xsl:text>            this.value_elt.textContent = String(value);
 
  4787     <xsl:text>            this.value_elt.textContent = String(value);
 
  4736 </xsl:text>
 
  4788 </xsl:text>
 
  4737     <xsl:text>
 
  4789     <xsl:text>
 
  4738 </xsl:text>
 
  4790 </xsl:text>
 
  4739     <xsl:text>        this.update_DOM(value, this.handle_elt);
 
  4791     <xsl:text>        //don't update if draging and setpoint ghost doesn't exist
 
  4740 </xsl:text>
 
  4792 </xsl:text>
 
  4741     <xsl:text>
 
  4793     <xsl:text>        if(!this.drag || (this.setpoint_elt != undefined)){
 
       
  4794 </xsl:text>
 
       
  4795     <xsl:text>            this.update_DOM(value, this.handle_elt);
 
       
  4796 </xsl:text>
 
       
  4797     <xsl:text>        }
 
  4742 </xsl:text>
 
  4798 </xsl:text>
 
  4743     <xsl:text>    }
 
  4799     <xsl:text>    }
 
  4744 </xsl:text>
 
  4800 </xsl:text>
 
  4745     <xsl:text>
 
  4801     <xsl:text>
 
  4746 </xsl:text>
 
  4802 </xsl:text>
 
  4747     <xsl:text>    last_drag = false;
 
       
  4748 </xsl:text>
 
       
  4749     <xsl:text>
 
       
  4750 </xsl:text>
 
       
  4751     <xsl:text>    update_DOM(value, elt){
 
  4803     <xsl:text>    update_DOM(value, elt){
 
  4752 </xsl:text>
 
  4804 </xsl:text>
 
  4753     <xsl:text>        let [min,max,start,totallength] = this.range;
 
  4805     <xsl:text>        let [min,max,start,totallength] = this.range;
 
  4754 </xsl:text>
 
  4806 </xsl:text>
 
  4755     <xsl:text>        let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min)));
 
  4807     <xsl:text>        // check if handle is resizeable
 
  4756 </xsl:text>
 
  4808 </xsl:text>
 
  4757     <xsl:text>        let tip = this.range_elt.getPointAtLength(length);
 
  4809     <xsl:text>        if (this.scroll_size != undefined){ //size changes
 
  4758 </xsl:text>
 
  4810 </xsl:text>
 
  4759     <xsl:text>        elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")");
 
  4811     <xsl:text>            //get parameters
 
  4760 </xsl:text>
 
  4812 </xsl:text>
 
  4761     <xsl:text>
 
  4813     <xsl:text>            let length = Math.max(min,Math.min(max,(Number(value)-min)*max/(max-min)));
 
       
  4814 </xsl:text>
 
       
  4815     <xsl:text>            let tip = this.range_elt.getPointAtLength(length);
 
       
  4816 </xsl:text>
 
       
  4817     <xsl:text>            let handle_min = totallength*this.min_size;
 
       
  4818 </xsl:text>
 
       
  4819     <xsl:text>
 
       
  4820 </xsl:text>
 
       
  4821     <xsl:text>            let step = 1;
 
       
  4822 </xsl:text>
 
       
  4823     <xsl:text>            //check if range is bigger than  max displayed and recalculate step
 
       
  4824 </xsl:text>
 
       
  4825     <xsl:text>            if ((totallength/handle_min) &lt; (max-min+1)){
 
       
  4826 </xsl:text>
 
       
  4827     <xsl:text>                step = (max-min+1)/(totallength/handle_min-1);
 
       
  4828 </xsl:text>
 
       
  4829     <xsl:text>            }
 
       
  4830 </xsl:text>
 
       
  4831     <xsl:text>
 
       
  4832 </xsl:text>
 
       
  4833     <xsl:text>            let kx,ky,offseY,offseX = undefined;
 
       
  4834 </xsl:text>
 
       
  4835     <xsl:text>            //scale on x or y axes
 
       
  4836 </xsl:text>
 
       
  4837     <xsl:text>            if (this.fi &gt; 0.75){
 
       
  4838 </xsl:text>
 
       
  4839     <xsl:text>                //get scale factor
 
       
  4840 </xsl:text>
 
       
  4841     <xsl:text>                if(step &gt; 1){
 
       
  4842 </xsl:text>
 
       
  4843     <xsl:text>                    ky = handle_min/this.handle_orig.height;
 
       
  4844 </xsl:text>
 
       
  4845     <xsl:text>                }
 
       
  4846 </xsl:text>
 
       
  4847     <xsl:text>                else{
 
       
  4848 </xsl:text>
 
       
  4849     <xsl:text>                    ky = (totallength-handle_min*(max-min))/this.handle_orig.height;
 
       
  4850 </xsl:text>
 
       
  4851     <xsl:text>                }
 
       
  4852 </xsl:text>
 
       
  4853     <xsl:text>                kx = 1;
 
       
  4854 </xsl:text>
 
       
  4855     <xsl:text>                //get 0 offset to stay inside range
 
       
  4856 </xsl:text>
 
       
  4857     <xsl:text>                offseY = start.y - (this.handle_orig.height + this.handle_orig.y) * ky;
 
       
  4858 </xsl:text>
 
       
  4859     <xsl:text>                offseX = 0;
 
       
  4860 </xsl:text>
 
       
  4861     <xsl:text>                //get distance from value
 
       
  4862 </xsl:text>
 
       
  4863     <xsl:text>                tip.y =this.range_elt.getPointAtLength(0).y - length/step *handle_min;
 
       
  4864 </xsl:text>
 
       
  4865     <xsl:text>            }
 
       
  4866 </xsl:text>
 
       
  4867     <xsl:text>            else{
 
       
  4868 </xsl:text>
 
       
  4869     <xsl:text>                //get scale factor
 
       
  4870 </xsl:text>
 
       
  4871     <xsl:text>                if(step &gt; 1){
 
       
  4872 </xsl:text>
 
       
  4873     <xsl:text>                    kx = handle_min/this.handle_orig.width;
 
       
  4874 </xsl:text>
 
       
  4875     <xsl:text>                }
 
       
  4876 </xsl:text>
 
       
  4877     <xsl:text>                else{
 
       
  4878 </xsl:text>
 
       
  4879     <xsl:text>                    kx = (totallength-handle_min*(max-min))/this.handle_orig.width;
 
       
  4880 </xsl:text>
 
       
  4881     <xsl:text>                }
 
       
  4882 </xsl:text>
 
       
  4883     <xsl:text>                ky = 1;
 
       
  4884 </xsl:text>
 
       
  4885     <xsl:text>                //get 0 offset to stay inside range
 
       
  4886 </xsl:text>
 
       
  4887     <xsl:text>                offseX = start.x - (this.handle_orig.x * kx);
 
       
  4888 </xsl:text>
 
       
  4889     <xsl:text>                offseY = 0;
 
       
  4890 </xsl:text>
 
       
  4891     <xsl:text>                //get distance from value
 
       
  4892 </xsl:text>
 
       
  4893     <xsl:text>                tip.x =this.range_elt.getPointAtLength(0).x + length/step *handle_min;
 
       
  4894 </xsl:text>
 
       
  4895     <xsl:text>            }
 
       
  4896 </xsl:text>
 
       
  4897     <xsl:text>            elt.setAttribute('transform',"matrix("+(kx)+" 0 0 "+(ky)+" "+(tip.x-start.x+offseX)+" "+(tip.y-start.y+offseY)+")");
 
       
  4898 </xsl:text>
 
       
  4899     <xsl:text>        }
 
       
  4900 </xsl:text>
 
       
  4901     <xsl:text>        else{ //size stays the same
 
       
  4902 </xsl:text>
 
       
  4903     <xsl:text>            let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min)));
 
       
  4904 </xsl:text>
 
       
  4905     <xsl:text>            let tip = this.range_elt.getPointAtLength(length);
 
       
  4906 </xsl:text>
 
       
  4907     <xsl:text>            elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")");
 
       
  4908 </xsl:text>
 
       
  4909     <xsl:text>        }
 
       
  4910 </xsl:text>
 
       
  4911     <xsl:text>
 
       
  4912 </xsl:text>
 
       
  4913     <xsl:text>        // show or hide ghost if exists
 
  4762 </xsl:text>
 
  4914 </xsl:text>
 
  4763     <xsl:text>        if(this.setpoint_elt != undefined){
 
  4915     <xsl:text>        if(this.setpoint_elt != undefined){
 
  4764 </xsl:text>
 
  4916 </xsl:text>
 
  4765     <xsl:text>            if(this.last_drag!= this.drag){
 
  4917     <xsl:text>            if(this.last_drag!= this.drag){
 
  4766 </xsl:text>
 
  4918 </xsl:text>
 
  4784 </xsl:text>
 
  4936 </xsl:text>
 
  4785     <xsl:text>
 
  4937     <xsl:text>
 
  4786 </xsl:text>
 
  4938 </xsl:text>
 
  4787     <xsl:text>    on_release(evt) {
 
  4939     <xsl:text>    on_release(evt) {
 
  4788 </xsl:text>
 
  4940 </xsl:text>
 
       
  4941     <xsl:text>        //unbind events
 
       
  4942 </xsl:text>
 
  4789     <xsl:text>        window.removeEventListener("touchmove", this.on_bound_drag, true);
 
  4943     <xsl:text>        window.removeEventListener("touchmove", this.on_bound_drag, true);
 
  4790 </xsl:text>
 
  4944 </xsl:text>
 
  4791     <xsl:text>        window.removeEventListener("mousemove", this.on_bound_drag, true);
 
  4945     <xsl:text>        window.removeEventListener("mousemove", this.on_bound_drag, true);
 
  4792 </xsl:text>
 
  4946 </xsl:text>
 
  4793     <xsl:text>
 
  4947     <xsl:text>
 
  4796 </xsl:text>
 
  4950 </xsl:text>
 
  4797     <xsl:text>        window.removeEventListener("touchend", this.bound_on_release, true);
 
  4951     <xsl:text>        window.removeEventListener("touchend", this.bound_on_release, true);
 
  4798 </xsl:text>
 
  4952 </xsl:text>
 
  4799     <xsl:text>        window.removeEventListener("touchcancel", this.bound_on_release, true);
 
  4953     <xsl:text>        window.removeEventListener("touchcancel", this.bound_on_release, true);
 
  4800 </xsl:text>
 
  4954 </xsl:text>
 
       
  4955     <xsl:text>
 
       
  4956 </xsl:text>
 
       
  4957     <xsl:text>        //reset drag flag
 
       
  4958 </xsl:text>
 
  4801     <xsl:text>        if(this.drag){
 
  4959     <xsl:text>        if(this.drag){
 
  4802 </xsl:text>
 
  4960 </xsl:text>
 
  4803     <xsl:text>            this.drag = false;
 
  4961     <xsl:text>            this.drag = false;
 
  4804 </xsl:text>
 
  4962 </xsl:text>
 
  4805     <xsl:text>        }
 
  4963     <xsl:text>        }
 
  4806 </xsl:text>
 
  4964 </xsl:text>
 
       
  4965     <xsl:text>
 
       
  4966 </xsl:text>
 
       
  4967     <xsl:text>        // get final position
 
       
  4968 </xsl:text>
 
  4807     <xsl:text>        this.update_position(evt);
 
  4969     <xsl:text>        this.update_position(evt);
 
  4808 </xsl:text>
 
  4970 </xsl:text>
 
       
  4971     <xsl:text>
 
       
  4972 </xsl:text>
 
  4809     <xsl:text>    }
 
  4973     <xsl:text>    }
 
  4810 </xsl:text>
 
  4974 </xsl:text>
 
  4811     <xsl:text>
 
  4975     <xsl:text>
 
  4812 </xsl:text>
 
  4976 </xsl:text>
 
  4813     <xsl:text>
 
       
  4814 </xsl:text>
 
       
  4815     <xsl:text>    on_drag(evt){
 
  4977     <xsl:text>    on_drag(evt){
 
  4816 </xsl:text>
 
  4978 </xsl:text>
 
       
  4979     <xsl:text>        //ignore drag event for X amount of time and if not selected
 
       
  4980 </xsl:text>
 
  4817     <xsl:text>        if(this.enTimer &amp;&amp; this.drag){
 
  4981     <xsl:text>        if(this.enTimer &amp;&amp; this.drag){
 
  4818 </xsl:text>
 
  4982 </xsl:text>
 
  4819     <xsl:text>            this.update_position(evt);
 
  4983     <xsl:text>            this.update_position(evt);
 
  4820 </xsl:text>
 
  4984 </xsl:text>
 
       
  4985     <xsl:text>
 
       
  4986 </xsl:text>
 
  4821     <xsl:text>            //reset timer
 
  4987     <xsl:text>            //reset timer
 
  4822 </xsl:text>
 
  4988 </xsl:text>
 
  4823     <xsl:text>            this.enTimer = false;
 
  4989     <xsl:text>            this.enTimer = false;
 
  4824 </xsl:text>
 
  4990 </xsl:text>
 
  4825     <xsl:text>            setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
 
  4991     <xsl:text>            setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
 
  4832 </xsl:text>
 
  4998 </xsl:text>
 
  4833     <xsl:text>    update_position(evt){
 
  4999     <xsl:text>    update_position(evt){
 
  4834 </xsl:text>
 
  5000 </xsl:text>
 
  4835     <xsl:text>        var html_dist = 0;
 
  5001     <xsl:text>        var html_dist = 0;
 
  4836 </xsl:text>
 
  5002 </xsl:text>
 
       
  5003     <xsl:text>        let [min,max,start,totallength] = this.range;
 
       
  5004 </xsl:text>
 
  4837     <xsl:text>
 
  5005     <xsl:text>
 
  4838 </xsl:text>
 
  5006 </xsl:text>
 
  4839     <xsl:text>        //calculate size of widget in html
 
  5007     <xsl:text>        //calculate size of widget in html
 
  4840 </xsl:text>
 
  5008 </xsl:text>
 
  4841     <xsl:text>        var range_borders = this.range_elt.getBoundingClientRect();
 
  5009     <xsl:text>        var range_borders = this.range_elt.getBoundingClientRect();
 
  4842 </xsl:text>
 
  5010 </xsl:text>
 
       
  5011     <xsl:text>        var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top];
 
       
  5012 </xsl:text>
 
  4843     <xsl:text>        var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width );
 
  5013     <xsl:text>        var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width );
 
  4844 </xsl:text>
 
  5014 </xsl:text>
 
  4845     <xsl:text>        var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top];
 
       
  4846 </xsl:text>
 
       
  4847     <xsl:text>
 
  5015     <xsl:text>
 
  4848 </xsl:text>
 
  5016 </xsl:text>
 
  4849     <xsl:text>        //get range and mouse coordinates
 
  5017     <xsl:text>        //get range and mouse coordinates
 
  4850 </xsl:text>
 
  5018 </xsl:text>
 
  4851     <xsl:text>        var mouseX = undefined;
 
  5019     <xsl:text>        var mouseX = undefined;
 
  4868 </xsl:text>
 
  5036 </xsl:text>
 
  4869     <xsl:text>        }
 
  5037     <xsl:text>        }
 
  4870 </xsl:text>
 
  5038 </xsl:text>
 
  4871     <xsl:text>
 
  5039     <xsl:text>
 
  4872 </xsl:text>
 
  5040 </xsl:text>
 
  4873     <xsl:text>        //get handle distance from mouse position
 
  5041     <xsl:text>        // calculate position
 
  4874 </xsl:text>
 
  5042 </xsl:text>
 
  4875     <xsl:text>        if (minX &gt; mouseX &amp;&amp; minY &lt; mouseY){
 
  5043     <xsl:text>        if (this.handle_click){ //if clicked on handle
 
  4876 </xsl:text>
 
  5044 </xsl:text>
 
  4877     <xsl:text>            html_dist = 0;
 
  5045     <xsl:text>            let moveDist = 0, resizeAdd = 0;
 
       
  5046 </xsl:text>
 
       
  5047     <xsl:text>            let range_percent = 1;
 
       
  5048 </xsl:text>
 
       
  5049     <xsl:text>
 
       
  5050 </xsl:text>
 
       
  5051     <xsl:text>            //set paramters for resizeable handle
 
       
  5052 </xsl:text>
 
       
  5053     <xsl:text>            if (this.scroll_size != undefined){
 
       
  5054 </xsl:text>
 
       
  5055     <xsl:text>                // add one more object to stay inside range
 
       
  5056 </xsl:text>
 
       
  5057     <xsl:text>                resizeAdd = 1;
 
       
  5058 </xsl:text>
 
       
  5059     <xsl:text>
 
       
  5060 </xsl:text>
 
       
  5061     <xsl:text>                //chack if range is bigger than display option and
 
       
  5062 </xsl:text>
 
       
  5063     <xsl:text>                // calculate percent of range with out handle
 
       
  5064 </xsl:text>
 
       
  5065     <xsl:text>                if(((max/(max*this.min_size)) &lt; (max-min+1))){
 
       
  5066 </xsl:text>
 
       
  5067     <xsl:text>                    range_percent = 1-this.min_size;
 
       
  5068 </xsl:text>
 
       
  5069     <xsl:text>                }
 
       
  5070 </xsl:text>
 
       
  5071     <xsl:text>                else{
 
       
  5072 </xsl:text>
 
       
  5073     <xsl:text>                    range_percent = 1-(max-max*this.min_size*(max-min))/max;
 
       
  5074 </xsl:text>
 
       
  5075     <xsl:text>                }
 
       
  5076 </xsl:text>
 
       
  5077     <xsl:text>            }
 
       
  5078 </xsl:text>
 
       
  5079     <xsl:text>
 
       
  5080 </xsl:text>
 
       
  5081     <xsl:text>            //calculate value difference on x or y axis
 
       
  5082 </xsl:text>
 
       
  5083     <xsl:text>            if(this.fi &gt; 0.7){
 
       
  5084 </xsl:text>
 
       
  5085     <xsl:text>                moveDist = ((max-min+resizeAdd)/(range_length*range_percent))*((this.handle_click[1]-mouseY)/Math.sin(this.fi));
 
       
  5086 </xsl:text>
 
       
  5087     <xsl:text>            }
 
       
  5088 </xsl:text>
 
       
  5089     <xsl:text>            else{
 
       
  5090 </xsl:text>
 
       
  5091     <xsl:text>                moveDist = ((max-min+resizeAdd)/(range_length*range_percent))*((mouseX-this.handle_click[0])/Math.cos(this.fi));
 
       
  5092 </xsl:text>
 
       
  5093     <xsl:text>            }
 
       
  5094 </xsl:text>
 
       
  5095     <xsl:text>
 
       
  5096 </xsl:text>
 
       
  5097     <xsl:text>            this.curr_value = Math.ceil(this.handle_click[2] + moveDist);
 
  4878 </xsl:text>
 
  5098 </xsl:text>
 
  4879     <xsl:text>        }
 
  5099     <xsl:text>        }
 
  4880 </xsl:text>
 
  5100 </xsl:text>
 
  4881     <xsl:text>        else if (maxX &lt; mouseX &amp;&amp; maxY &gt; mouseY){
 
  5101     <xsl:text>        else{ //if clicked on widget
 
  4882 </xsl:text>
 
  5102 </xsl:text>
 
  4883     <xsl:text>            html_dist = range_length;
 
  5103     <xsl:text>            //get handle distance from mouse position
 
       
  5104 </xsl:text>
 
       
  5105     <xsl:text>            if (minX &gt; mouseX &amp;&amp; minY &lt; mouseY){
 
       
  5106 </xsl:text>
 
       
  5107     <xsl:text>                html_dist = 0;
 
       
  5108 </xsl:text>
 
       
  5109     <xsl:text>            }
 
       
  5110 </xsl:text>
 
       
  5111     <xsl:text>            else if (maxX &lt; mouseX &amp;&amp; maxY &gt; mouseY){
 
       
  5112 </xsl:text>
 
       
  5113     <xsl:text>                html_dist = range_length;
 
       
  5114 </xsl:text>
 
       
  5115     <xsl:text>            }
 
       
  5116 </xsl:text>
 
       
  5117     <xsl:text>            else{
 
       
  5118 </xsl:text>
 
       
  5119     <xsl:text>                if(this.fi &gt; 0.7){
 
       
  5120 </xsl:text>
 
       
  5121     <xsl:text>                    html_dist = (minY - mouseY)/Math.sin(this.fi);
 
       
  5122 </xsl:text>
 
       
  5123     <xsl:text>                }
 
       
  5124 </xsl:text>
 
       
  5125     <xsl:text>                else{
 
       
  5126 </xsl:text>
 
       
  5127     <xsl:text>                    html_dist = (mouseX - minX)/Math.cos(this.fi);
 
       
  5128 </xsl:text>
 
       
  5129     <xsl:text>                }
 
       
  5130 </xsl:text>
 
       
  5131     <xsl:text>            }
 
       
  5132 </xsl:text>
 
       
  5133     <xsl:text>            //calculate distance
 
       
  5134 </xsl:text>
 
       
  5135     <xsl:text>            this.curr_value=Math.ceil((html_dist/range_length)*(this.range[1]-this.range[0])+this.range[0]);
 
  4884 </xsl:text>
 
  5136 </xsl:text>
 
  4885     <xsl:text>        }
 
  5137     <xsl:text>        }
 
  4886 </xsl:text>
 
  5138 </xsl:text>
 
       
  5139     <xsl:text>
 
       
  5140 </xsl:text>
 
       
  5141     <xsl:text>        //check if in range
 
       
  5142 </xsl:text>
 
       
  5143     <xsl:text>        if (this.curr_value &gt; max){
 
       
  5144 </xsl:text>
 
       
  5145     <xsl:text>            this.curr_value = max;
 
       
  5146 </xsl:text>
 
       
  5147     <xsl:text>        }
 
       
  5148 </xsl:text>
 
       
  5149     <xsl:text>        else if (this.curr_value &lt; min){
 
       
  5150 </xsl:text>
 
       
  5151     <xsl:text>            this.curr_value = min;
 
       
  5152 </xsl:text>
 
       
  5153     <xsl:text>        }
 
       
  5154 </xsl:text>
 
       
  5155     <xsl:text>
 
       
  5156 </xsl:text>
 
       
  5157     <xsl:text>        this.apply_hmi_value(0, this.curr_value);
 
       
  5158 </xsl:text>
 
       
  5159     <xsl:text>
 
       
  5160 </xsl:text>
 
       
  5161     <xsl:text>        //redraw handle
 
       
  5162 </xsl:text>
 
       
  5163     <xsl:text>        this.request_animate();
 
       
  5164 </xsl:text>
 
       
  5165     <xsl:text>
 
       
  5166 </xsl:text>
 
       
  5167     <xsl:text>    }
 
       
  5168 </xsl:text>
 
       
  5169     <xsl:text>
 
       
  5170 </xsl:text>
 
       
  5171     <xsl:text>    animate(){
 
       
  5172 </xsl:text>
 
       
  5173     <xsl:text>        // redraw handle on screen refresh
 
       
  5174 </xsl:text>
 
       
  5175     <xsl:text>        // check if setpoint(ghost) handle exsist otherwise update main handle
 
       
  5176 </xsl:text>
 
       
  5177     <xsl:text>        if(this.setpoint_elt != undefined){
 
       
  5178 </xsl:text>
 
       
  5179     <xsl:text>            this.update_DOM(this.curr_value, this.setpoint_elt);
 
       
  5180 </xsl:text>
 
       
  5181     <xsl:text>        }
 
       
  5182 </xsl:text>
 
  4887     <xsl:text>        else{
 
  5183     <xsl:text>        else{
 
  4888 </xsl:text>
 
  5184 </xsl:text>
 
  4889     <xsl:text>            // calculate distace
 
  5185     <xsl:text>            this.update_DOM(this.curr_value, this.handle_elt);
 
  4890 </xsl:text>
 
  5186 </xsl:text>
 
  4891     <xsl:text>            if(this.fi &gt; 0.7){
 
  5187     <xsl:text>        }
 
  4892 </xsl:text>
 
  5188 </xsl:text>
 
  4893     <xsl:text>                html_dist = (minY - mouseY)/Math.sin(this.fi);
 
  5189     <xsl:text>    }
 
       
  5190 </xsl:text>
 
       
  5191     <xsl:text>
 
       
  5192 </xsl:text>
 
       
  5193     <xsl:text>    on_select(evt){
 
       
  5194 </xsl:text>
 
       
  5195     <xsl:text>        //enable drag flag and timer
 
       
  5196 </xsl:text>
 
       
  5197     <xsl:text>        this.drag = true;
 
       
  5198 </xsl:text>
 
       
  5199     <xsl:text>        this.enTimer = true;
 
       
  5200 </xsl:text>
 
       
  5201     <xsl:text>
 
       
  5202 </xsl:text>
 
       
  5203     <xsl:text>        //bind events
 
       
  5204 </xsl:text>
 
       
  5205     <xsl:text>        window.addEventListener("touchmove", this.on_bound_drag, true);
 
       
  5206 </xsl:text>
 
       
  5207     <xsl:text>        window.addEventListener("mousemove", this.on_bound_drag, true);
 
       
  5208 </xsl:text>
 
       
  5209     <xsl:text>
 
       
  5210 </xsl:text>
 
       
  5211     <xsl:text>        window.addEventListener("mouseup", this.bound_on_release, true)
 
       
  5212 </xsl:text>
 
       
  5213     <xsl:text>        window.addEventListener("touchend", this.bound_on_release, true);
 
       
  5214 </xsl:text>
 
       
  5215     <xsl:text>        window.addEventListener("touchcancel", this.bound_on_release, true);
 
       
  5216 </xsl:text>
 
       
  5217     <xsl:text>
 
       
  5218 </xsl:text>
 
       
  5219     <xsl:text>        // check if handle was pressed
 
       
  5220 </xsl:text>
 
       
  5221     <xsl:text>        if (evt.currentTarget == this.handle_elt){
 
       
  5222 </xsl:text>
 
       
  5223     <xsl:text>            //get mouse position on the handle
 
       
  5224 </xsl:text>
 
       
  5225     <xsl:text>            let mouseX = undefined;
 
       
  5226 </xsl:text>
 
       
  5227     <xsl:text>            let mouseY = undefined;
 
       
  5228 </xsl:text>
 
       
  5229     <xsl:text>            if (evt.type.startsWith("touch")){
 
       
  5230 </xsl:text>
 
       
  5231     <xsl:text>                mouseX = Math.ceil(evt.touches[0].clientX);
 
       
  5232 </xsl:text>
 
       
  5233     <xsl:text>                mouseY = Math.ceil(evt.touches[0].clientY);
 
  4894 </xsl:text>
 
  5234 </xsl:text>
 
  4895     <xsl:text>            }
 
  5235     <xsl:text>            }
 
  4896 </xsl:text>
 
  5236 </xsl:text>
 
  4897     <xsl:text>            else{
 
  5237     <xsl:text>            else{
 
  4898 </xsl:text>
 
  5238 </xsl:text>
 
  4899     <xsl:text>                html_dist = (mouseX - minX)/Math.cos(this.fi);
 
  5239     <xsl:text>                mouseX = evt.pageX;
 
       
  5240 </xsl:text>
 
       
  5241     <xsl:text>                mouseY = evt.pageY;
 
  4900 </xsl:text>
 
  5242 </xsl:text>
 
  4901     <xsl:text>            }
 
  5243     <xsl:text>            }
 
  4902 </xsl:text>
 
  5244 </xsl:text>
 
  4903     <xsl:text>
 
  5245     <xsl:text>            //save coordinates and orig value
 
  4904 </xsl:text>
 
  5246 </xsl:text>
 
  4905     <xsl:text>            //check if in range
 
  5247     <xsl:text>            this.handle_click = [mouseX,mouseY,this.curr_value];
 
  4906 </xsl:text>
 
       
  4907     <xsl:text>            if (html_dist &gt; range_length){
 
       
  4908 </xsl:text>
 
       
  4909     <xsl:text>                html_dist = range_length;
 
       
  4910 </xsl:text>
 
       
  4911     <xsl:text>            }
 
       
  4912 </xsl:text>
 
       
  4913     <xsl:text>            else if (html_dist &lt; 0){
 
       
  4914 </xsl:text>
 
       
  4915     <xsl:text>                html_dist = 0;
 
       
  4916 </xsl:text>
 
       
  4917     <xsl:text>            }
 
       
  4918 </xsl:text>
 
       
  4919     <xsl:text>
 
       
  4920 </xsl:text>
 
  5248 </xsl:text>
 
  4921     <xsl:text>        }
 
  5249     <xsl:text>        }
 
  4922 </xsl:text>
 
  5250 </xsl:text>
 
  4923     <xsl:text>
 
  5251     <xsl:text>        else{
 
  4924 </xsl:text>
 
  5252 </xsl:text>
 
  4925     <xsl:text>        this.svg_dist=Math.ceil((html_dist/range_length)*this.range[1]);
 
  5253     <xsl:text>            // get new handle position and reset if handle was not pressed
 
  4926 </xsl:text>
 
  5254 </xsl:text>
 
  4927     <xsl:text>
 
  5255     <xsl:text>            this.handle_click = undefined;
 
  4928 </xsl:text>
 
  5256 </xsl:text>
 
  4929     <xsl:text>        this.apply_hmi_value(0, this.svg_dist);
 
  5257     <xsl:text>            this.update_position(evt);
 
  4930 </xsl:text>
 
       
  4931     <xsl:text>
 
       
  4932 </xsl:text>
 
       
  4933     <xsl:text>        // update ghost cursor
 
       
  4934 </xsl:text>
 
       
  4935     <xsl:text>        if(this.setpoint_elt != undefined){
 
       
  4936 </xsl:text>
 
       
  4937     <xsl:text>            this.request_animate();
 
       
  4938 </xsl:text>
 
  5258 </xsl:text>
 
  4939     <xsl:text>        }
 
  5259     <xsl:text>        }
 
  4940 </xsl:text>
 
  5260 </xsl:text>
 
       
  5261     <xsl:text>
 
       
  5262 </xsl:text>
 
       
  5263     <xsl:text>        //prevent next events
 
       
  5264 </xsl:text>
 
       
  5265     <xsl:text>        evt.stopPropagation();
 
       
  5266 </xsl:text>
 
  4941     <xsl:text>    }
 
  5267     <xsl:text>    }
 
  4942 </xsl:text>
 
  5268 </xsl:text>
 
  4943     <xsl:text>
 
  5269     <xsl:text>
 
  4944 </xsl:text>
 
  5270 </xsl:text>
 
  4945     <xsl:text>    animate(){
 
       
  4946 </xsl:text>
 
       
  4947     <xsl:text>        this.update_DOM(this.svg_dist, this.setpoint_elt);
 
       
  4948 </xsl:text>
 
       
  4949     <xsl:text>    }
 
       
  4950 </xsl:text>
 
       
  4951     <xsl:text>
 
       
  4952 </xsl:text>
 
       
  4953     <xsl:text>    on_select(evt){
 
       
  4954 </xsl:text>
 
       
  4955     <xsl:text>        this.drag = true;
 
       
  4956 </xsl:text>
 
       
  4957     <xsl:text>        this.enTimer = true;
 
       
  4958 </xsl:text>
 
       
  4959     <xsl:text>        window.addEventListener("touchmove", this.on_bound_drag, true);
 
       
  4960 </xsl:text>
 
       
  4961     <xsl:text>        window.addEventListener("mousemove", this.on_bound_drag, true);
 
       
  4962 </xsl:text>
 
       
  4963     <xsl:text>
 
       
  4964 </xsl:text>
 
       
  4965     <xsl:text>        window.addEventListener("mouseup", this.bound_on_release, true)
 
       
  4966 </xsl:text>
 
       
  4967     <xsl:text>        window.addEventListener("touchend", this.bound_on_release, true);
 
       
  4968 </xsl:text>
 
       
  4969     <xsl:text>        window.addEventListener("touchcancel", this.bound_on_release, true);
 
       
  4970 </xsl:text>
 
       
  4971     <xsl:text>        this.update_position(evt);
 
       
  4972 </xsl:text>
 
       
  4973     <xsl:text>    }
 
       
  4974 </xsl:text>
 
       
  4975     <xsl:text>
 
       
  4976 </xsl:text>
 
       
  4977     <xsl:text>    init() {
 
  5271     <xsl:text>    init() {
 
  4978 </xsl:text>
 
  5272 </xsl:text>
 
       
  5273     <xsl:text>        //set min max value if not defined
 
       
  5274 </xsl:text>
 
  4979     <xsl:text>        let min = this.min_elt ?
 
  5275     <xsl:text>        let min = this.min_elt ?
 
  4980 </xsl:text>
 
  5276 </xsl:text>
 
  4981     <xsl:text>                    Number(this.min_elt.textContent) :
 
  5277     <xsl:text>                    Number(this.min_elt.textContent) :
 
  4982 </xsl:text>
 
  5278 </xsl:text>
 
  4983     <xsl:text>                    this.args.length &gt;= 1 ? this.args[0] : 0;
 
  5279     <xsl:text>                    this.args.length &gt;= 1 ? this.args[0] : 0;
 
  4988 </xsl:text>
 
  5284 </xsl:text>
 
  4989     <xsl:text>                    this.args.length &gt;= 2 ? this.args[1] : 100;
 
  5285     <xsl:text>                    this.args.length &gt;= 2 ? this.args[1] : 100;
 
  4990 </xsl:text>
 
  5286 </xsl:text>
 
  4991     <xsl:text>
 
  5287     <xsl:text>
 
  4992 </xsl:text>
 
  5288 </xsl:text>
 
       
  5289     <xsl:text>        // save initial parameters
 
       
  5290 </xsl:text>
 
       
  5291     <xsl:text>        this.range_elt.style.strokeMiterlimit="0";
 
       
  5292 </xsl:text>
 
  4993     <xsl:text>        this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()];
 
  5293     <xsl:text>        this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()];
 
  4994 </xsl:text>
 
  5294 </xsl:text>
 
  4995     <xsl:text>        let start = this.range_elt.getPointAtLength(0);
 
  5295     <xsl:text>        let start = this.range_elt.getPointAtLength(0);
 
  4996 </xsl:text>
 
  5296 </xsl:text>
 
  4997     <xsl:text>        let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength());
 
  5297     <xsl:text>        let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength());
 
  4998 </xsl:text>
 
  5298 </xsl:text>
 
  4999     <xsl:text>        this.fi = Math.atan2(start.y-end.y, end.x-start.x);
 
  5299     <xsl:text>        this.fi = Math.atan2(start.y-end.y, end.x-start.x);
 
  5000 </xsl:text>
 
  5300 </xsl:text>
 
  5001     <xsl:text>
 
  5301     <xsl:text>        this.handle_orig = this.handle_elt.getBBox();
 
       
  5302 </xsl:text>
 
       
  5303     <xsl:text>
 
       
  5304 </xsl:text>
 
       
  5305     <xsl:text>        //bind functions
 
  5002 </xsl:text>
 
  5306 </xsl:text>
 
  5003     <xsl:text>        this.bound_on_select = this.on_select.bind(this);
 
  5307     <xsl:text>        this.bound_on_select = this.on_select.bind(this);
 
  5004 </xsl:text>
 
  5308 </xsl:text>
 
  5005     <xsl:text>        this.bound_on_release = this.on_release.bind(this);
 
  5309     <xsl:text>        this.bound_on_release = this.on_release.bind(this);
 
  5006 </xsl:text>
 
  5310 </xsl:text>
 
  5007     <xsl:text>        this.on_bound_drag = this.on_drag.bind(this);
 
  5311     <xsl:text>        this.on_bound_drag = this.on_drag.bind(this);
 
  5008 </xsl:text>
 
  5312 </xsl:text>
 
  5009     <xsl:text>
 
  5313     <xsl:text>
 
       
  5314 </xsl:text>
 
       
  5315     <xsl:text>        this.handle_elt.addEventListener("mousedown", this.bound_on_select);
 
  5010 </xsl:text>
 
  5316 </xsl:text>
 
  5011     <xsl:text>        this.element.addEventListener("mousedown", this.bound_on_select);
 
  5317     <xsl:text>        this.element.addEventListener("mousedown", this.bound_on_select);
 
  5012 </xsl:text>
 
  5318 </xsl:text>
 
  5013     <xsl:text>        this.element.addEventListener("touchstart", this.bound_on_select);
 
  5319     <xsl:text>        this.element.addEventListener("touchstart", this.bound_on_select);
 
  5014 </xsl:text>
 
  5320 </xsl:text>
 
  5117 </xsl:text>
 
  5423 </xsl:text>
 
  5118     <xsl:text>
 
  5424     <xsl:text>
 
  5119 </xsl:text>
 
  5425 </xsl:text>
 
  5120     <xsl:text>    dispatch(value) {
 
  5426     <xsl:text>    dispatch(value) {
 
  5121 </xsl:text>
 
  5427 </xsl:text>
 
  5122     <xsl:text>        this.state = value;
 
  5428     <xsl:text>        if(this.state != value){
 
       
  5429 </xsl:text>
 
       
  5430     <xsl:text>            this.state = value;
 
       
  5431 </xsl:text>
 
       
  5432     <xsl:text>            if (this.state) {
 
       
  5433 </xsl:text>
 
       
  5434     <xsl:text>                this.active_elt.setAttribute("style", this.active_style);
 
       
  5435 </xsl:text>
 
       
  5436     <xsl:text>                this.inactive_elt.setAttribute("style", "display:none");
 
       
  5437 </xsl:text>
 
       
  5438     <xsl:text>            } else {
 
       
  5439 </xsl:text>
 
       
  5440     <xsl:text>                this.inactive_elt.setAttribute("style", this.inactive_style);
 
       
  5441 </xsl:text>
 
       
  5442     <xsl:text>                this.active_elt.setAttribute("style", "display:none");
 
       
  5443 </xsl:text>
 
       
  5444     <xsl:text>            }
 
       
  5445 </xsl:text>
 
       
  5446     <xsl:text>        }
 
       
  5447 </xsl:text>
 
       
  5448     <xsl:text>    }
 
       
  5449 </xsl:text>
 
       
  5450     <xsl:text>
 
       
  5451 </xsl:text>
 
       
  5452     <xsl:text>    on_click(evt) {
 
  5123 </xsl:text>
 
  5453 </xsl:text>
 
  5124     <xsl:text>        if (this.state) {
 
  5454     <xsl:text>        if (this.state) {
 
  5125 </xsl:text>
 
  5455 </xsl:text>
 
       
  5456     <xsl:text>            this.inactive_elt.setAttribute("style", this.inactive_style);
 
       
  5457 </xsl:text>
 
       
  5458     <xsl:text>            this.active_elt.setAttribute("style", "display:none");
 
       
  5459 </xsl:text>
 
       
  5460     <xsl:text>            this.state = 0;
 
       
  5461 </xsl:text>
 
       
  5462     <xsl:text>        } else {
 
       
  5463 </xsl:text>
 
  5126     <xsl:text>            this.active_elt.setAttribute("style", this.active_style);
 
  5464     <xsl:text>            this.active_elt.setAttribute("style", this.active_style);
 
  5127 </xsl:text>
 
  5465 </xsl:text>
 
  5128     <xsl:text>            this.inactive_elt.setAttribute("style", "display:none");
 
  5466     <xsl:text>            this.inactive_elt.setAttribute("style", "display:none");
 
  5129 </xsl:text>
 
  5467 </xsl:text>
 
  5130     <xsl:text>            this.state = 0;
 
       
  5131 </xsl:text>
 
       
  5132     <xsl:text>        } else {
 
       
  5133 </xsl:text>
 
       
  5134     <xsl:text>            this.inactive_elt.setAttribute("style", this.inactive_style);
 
       
  5135 </xsl:text>
 
       
  5136     <xsl:text>            this.active_elt.setAttribute("style", "display:none");
 
       
  5137 </xsl:text>
 
       
  5138     <xsl:text>            this.state = 1;
 
  5468     <xsl:text>            this.state = 1;
 
  5139 </xsl:text>
 
  5469 </xsl:text>
 
  5140     <xsl:text>        }
 
  5470     <xsl:text>        }
 
  5141 </xsl:text>
 
  5471 </xsl:text>
 
       
  5472     <xsl:text>        this.apply_hmi_value(0, this.state);
 
       
  5473 </xsl:text>
 
  5142     <xsl:text>    }
 
  5474     <xsl:text>    }
 
  5143 </xsl:text>
 
  5475 </xsl:text>
 
  5144     <xsl:text>
 
  5476     <xsl:text>
 
  5145 </xsl:text>
 
  5477 </xsl:text>
 
  5146     <xsl:text>    on_click(evt) {
 
       
  5147 </xsl:text>
 
       
  5148     <xsl:text>        this.apply_hmi_value(0, this.state);
 
       
  5149 </xsl:text>
 
       
  5150     <xsl:text>    }
 
       
  5151 </xsl:text>
 
       
  5152     <xsl:text>
 
       
  5153 </xsl:text>
 
       
  5154     <xsl:text>    init() {
 
  5478     <xsl:text>    init() {
 
  5155 </xsl:text>
 
  5479 </xsl:text>
 
  5156     <xsl:text>        this.active_style = this.active_elt.style.cssText;
 
  5480     <xsl:text>        this.active_style = this.active_elt.style.cssText;
 
  5157 </xsl:text>
 
  5481 </xsl:text>
 
  5158     <xsl:text>        this.inactive_style = this.inactive_elt.style.cssText;
 
  5482     <xsl:text>        this.inactive_style = this.inactive_elt.style.cssText;
 
  5159 </xsl:text>
 
  5483 </xsl:text>
 
  5160     <xsl:text>        this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
 
  5484     <xsl:text>        this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
 
       
  5485 </xsl:text>
 
       
  5486     <xsl:text>        this.inactive_elt.setAttribute("style", this.inactive_style);
 
       
  5487 </xsl:text>
 
       
  5488     <xsl:text>        this.active_elt.setAttribute("style", "display:none");
 
  5161 </xsl:text>
 
  5489 </xsl:text>
 
  5162     <xsl:text>    }
 
  5490     <xsl:text>    }
 
  5163 </xsl:text>
 
  5491 </xsl:text>
 
  5164     <xsl:text>}
 
  5492     <xsl:text>}
 
  5165 </xsl:text>
 
  5493 </xsl:text>
beremiz