svghmi/gen_index_xhtml.xslt
branchsvghmi
changeset 3065 c369a742443d
parent 3058 6ea4b7e1a9ed
child 3068 81758c94f3df
equal deleted inserted replaced
3064:4b44d09c48a7 3065:c369a742443d
  1473       <xsl:otherwise>
  1473       <xsl:otherwise>
  1474         <func:result select="$txt"/>
  1474         <func:result select="$txt"/>
  1475       </xsl:otherwise>
  1475       </xsl:otherwise>
  1476     </xsl:choose>
  1476     </xsl:choose>
  1477   </func:function>
  1477   </func:function>
       
  1478   <xsl:template mode="widget_class" match="widget[@type='Animate']">
       
  1479     <xsl:text>class AnimateWidget extends Widget{
       
  1480 </xsl:text>
       
  1481     <xsl:text>    frequency = 5;
       
  1482 </xsl:text>
       
  1483     <xsl:text>    speed = 0;
       
  1484 </xsl:text>
       
  1485     <xsl:text>    start = false;
       
  1486 </xsl:text>
       
  1487     <xsl:text>    widget_center = undefined;
       
  1488 </xsl:text>
       
  1489     <xsl:text>
       
  1490 </xsl:text>
       
  1491     <xsl:text>    dispatch(value) {
       
  1492 </xsl:text>
       
  1493     <xsl:text>        this.speed = value / 5;
       
  1494 </xsl:text>
       
  1495     <xsl:text>
       
  1496 </xsl:text>
       
  1497     <xsl:text>        //reconfigure animation
       
  1498 </xsl:text>
       
  1499     <xsl:text>        this.request_animate();
       
  1500 </xsl:text>
       
  1501     <xsl:text>    }
       
  1502 </xsl:text>
       
  1503     <xsl:text>
       
  1504 </xsl:text>
       
  1505     <xsl:text>    animate(){
       
  1506 </xsl:text>
       
  1507     <xsl:text>       // change animation properties
       
  1508 </xsl:text>
       
  1509     <xsl:text>       for(let child of this.element.children){
       
  1510 </xsl:text>
       
  1511     <xsl:text>            if(child.nodeName.startsWith("animate")){
       
  1512 </xsl:text>
       
  1513     <xsl:text>                if(this.speed != 0 &amp;&amp; !this.start){
       
  1514 </xsl:text>
       
  1515     <xsl:text>                    this.start = true;
       
  1516 </xsl:text>
       
  1517     <xsl:text>                    this.element.beginElement();
       
  1518 </xsl:text>
       
  1519     <xsl:text>                }
       
  1520 </xsl:text>
       
  1521     <xsl:text>
       
  1522 </xsl:text>
       
  1523     <xsl:text>                if(this.speed &gt; 0){
       
  1524 </xsl:text>
       
  1525     <xsl:text>                    child.setAttribute("dur", this.speed+"s");
       
  1526 </xsl:text>
       
  1527     <xsl:text>                }
       
  1528 </xsl:text>
       
  1529     <xsl:text>                else if(this.speed &lt; 0){
       
  1530 </xsl:text>
       
  1531     <xsl:text>                    child.setAttribute("dur", (-1)*this.speed+"s");
       
  1532 </xsl:text>
       
  1533     <xsl:text>                }
       
  1534 </xsl:text>
       
  1535     <xsl:text>                else{
       
  1536 </xsl:text>
       
  1537     <xsl:text>                    this.start = false;
       
  1538 </xsl:text>
       
  1539     <xsl:text>                    this.element.endElement();
       
  1540 </xsl:text>
       
  1541     <xsl:text>                }
       
  1542 </xsl:text>
       
  1543     <xsl:text>            }
       
  1544 </xsl:text>
       
  1545     <xsl:text>       }
       
  1546 </xsl:text>
       
  1547     <xsl:text>    }
       
  1548 </xsl:text>
       
  1549     <xsl:text>
       
  1550 </xsl:text>
       
  1551     <xsl:text>    init() {
       
  1552 </xsl:text>
       
  1553     <xsl:text>        let widget_pos = this.element.getBBox();
       
  1554 </xsl:text>
       
  1555     <xsl:text>        this.widget_center = [(widget_pos.x+widget_pos.width/2), (widget_pos.y+widget_pos.height/2)];
       
  1556 </xsl:text>
       
  1557     <xsl:text>    }
       
  1558 </xsl:text>
       
  1559     <xsl:text>}
       
  1560 </xsl:text>
       
  1561   </xsl:template>
       
  1562   <xsl:template mode="widget_defs" match="widget[@type='Animate']">
       
  1563     <xsl:param name="hmi_element"/>
       
  1564     <xsl:text>
       
  1565 </xsl:text>
       
  1566   </xsl:template>
       
  1567   <xsl:template mode="widget_class" match="widget[@type='AnimateRotation']">
       
  1568     <xsl:text>class AnimateRotationWidget extends Widget{
       
  1569 </xsl:text>
       
  1570     <xsl:text>    frequency = 5;
       
  1571 </xsl:text>
       
  1572     <xsl:text>    speed = 0;
       
  1573 </xsl:text>
       
  1574     <xsl:text>    widget_center = undefined;
       
  1575 </xsl:text>
       
  1576     <xsl:text>
       
  1577 </xsl:text>
       
  1578     <xsl:text>    dispatch(value) {
       
  1579 </xsl:text>
       
  1580     <xsl:text>        this.speed = value / 5;
       
  1581 </xsl:text>
       
  1582     <xsl:text>
       
  1583 </xsl:text>
       
  1584     <xsl:text>        //reconfigure animation
       
  1585 </xsl:text>
       
  1586     <xsl:text>        this.request_animate();
       
  1587 </xsl:text>
       
  1588     <xsl:text>    }
       
  1589 </xsl:text>
       
  1590     <xsl:text>
       
  1591 </xsl:text>
       
  1592     <xsl:text>    animate(){
       
  1593 </xsl:text>
       
  1594     <xsl:text>       // change animation properties
       
  1595 </xsl:text>
       
  1596     <xsl:text>       for(let child of this.element.children){
       
  1597 </xsl:text>
       
  1598     <xsl:text>            if(child.nodeName == "animateTransform"){
       
  1599 </xsl:text>
       
  1600     <xsl:text>                if(this.speed &gt; 0){
       
  1601 </xsl:text>
       
  1602     <xsl:text>                    child.setAttribute("dur", this.speed+"s");
       
  1603 </xsl:text>
       
  1604     <xsl:text>                    child.setAttribute("from", "0 "+this.widget_center[0]+" "+this.widget_center[1]);
       
  1605 </xsl:text>
       
  1606     <xsl:text>                    child.setAttribute("to", "360 "+this.widget_center[0]+" "+this.widget_center[1]);
       
  1607 </xsl:text>
       
  1608     <xsl:text>                }
       
  1609 </xsl:text>
       
  1610     <xsl:text>                else if(this.speed &lt; 0){
       
  1611 </xsl:text>
       
  1612     <xsl:text>                    child.setAttribute("dur", (-1)*this.speed+"s");
       
  1613 </xsl:text>
       
  1614     <xsl:text>                    child.setAttribute("from", "360 "+this.widget_center[0]+" "+this.widget_center[1]);
       
  1615 </xsl:text>
       
  1616     <xsl:text>                    child.setAttribute("to", "0 "+this.widget_center[0]+" "+this.widget_center[1]);
       
  1617 </xsl:text>
       
  1618     <xsl:text>                }
       
  1619 </xsl:text>
       
  1620     <xsl:text>                else{
       
  1621 </xsl:text>
       
  1622     <xsl:text>                    child.setAttribute("from", "0 "+this.widget_center[0]+" "+this.widget_center[1]);
       
  1623 </xsl:text>
       
  1624     <xsl:text>                    child.setAttribute("to", "0 "+this.widget_center[0]+" "+this.widget_center[1]);
       
  1625 </xsl:text>
       
  1626     <xsl:text>                }
       
  1627 </xsl:text>
       
  1628     <xsl:text>            }
       
  1629 </xsl:text>
       
  1630     <xsl:text>       }
       
  1631 </xsl:text>
       
  1632     <xsl:text>    }
       
  1633 </xsl:text>
       
  1634     <xsl:text>
       
  1635 </xsl:text>
       
  1636     <xsl:text>    init() {
       
  1637 </xsl:text>
       
  1638     <xsl:text>        let widget_pos = this.element.getBBox();
       
  1639 </xsl:text>
       
  1640     <xsl:text>        this.widget_center = [(widget_pos.x+widget_pos.width/2), (widget_pos.y+widget_pos.height/2)];
       
  1641 </xsl:text>
       
  1642     <xsl:text>    }
       
  1643 </xsl:text>
       
  1644     <xsl:text>}
       
  1645 </xsl:text>
       
  1646   </xsl:template>
       
  1647   <xsl:template mode="widget_defs" match="widget[@type='AnimateRotation']">
       
  1648     <xsl:param name="hmi_element"/>
       
  1649     <xsl:text>
       
  1650 </xsl:text>
       
  1651   </xsl:template>
  1478   <xsl:template mode="widget_class" match="widget[@type='Back']">
  1652   <xsl:template mode="widget_class" match="widget[@type='Back']">
  1479     <xsl:text>class BackWidget extends Widget{
  1653     <xsl:text>class BackWidget extends Widget{
  1480 </xsl:text>
  1654 </xsl:text>
  1481     <xsl:text>    on_click(evt) {
  1655     <xsl:text>    on_click(evt) {
  1482 </xsl:text>
  1656 </xsl:text>
  1504   <xsl:template mode="widget_class" match="widget[@type='Button']">
  1678   <xsl:template mode="widget_class" match="widget[@type='Button']">
  1505     <xsl:text>class ButtonWidget extends Widget{
  1679     <xsl:text>class ButtonWidget extends Widget{
  1506 </xsl:text>
  1680 </xsl:text>
  1507     <xsl:text>    frequency = 5;
  1681     <xsl:text>    frequency = 5;
  1508 </xsl:text>
  1682 </xsl:text>
  1509     <xsl:text>    state = 0;
  1683     <xsl:text>    state_plc = 0;
       
  1684 </xsl:text>
       
  1685     <xsl:text>    state_hmi = 0;
  1510 </xsl:text>
  1686 </xsl:text>
  1511     <xsl:text>    plc_lock = false;
  1687     <xsl:text>    plc_lock = false;
  1512 </xsl:text>
  1688 </xsl:text>
  1513     <xsl:text>    active_style = undefined;
  1689     <xsl:text>    active_style = undefined;
  1514 </xsl:text>
  1690 </xsl:text>
  1516 </xsl:text>
  1692 </xsl:text>
  1517     <xsl:text>
  1693     <xsl:text>
  1518 </xsl:text>
  1694 </xsl:text>
  1519     <xsl:text>    dispatch(value) {
  1695     <xsl:text>    dispatch(value) {
  1520 </xsl:text>
  1696 </xsl:text>
  1521     <xsl:text>        if(value){
  1697     <xsl:text>        this.state_plc = value;
  1522 </xsl:text>
  1698 </xsl:text>
  1523     <xsl:text>            this.button_release();
  1699     <xsl:text>        if(this.plc_lock){
       
  1700 </xsl:text>
       
  1701     <xsl:text>            if(this.state_plc == 1){
       
  1702 </xsl:text>
       
  1703     <xsl:text>                this.apply_hmi_value(0, 0);
       
  1704 </xsl:text>
       
  1705     <xsl:text>                this.plc_lock = false;
       
  1706 </xsl:text>
       
  1707     <xsl:text>            }
  1524 </xsl:text>
  1708 </xsl:text>
  1525     <xsl:text>        }
  1709     <xsl:text>        }
  1526 </xsl:text>
  1710 </xsl:text>
  1527     <xsl:text>    }
  1711     <xsl:text>
  1528 </xsl:text>
  1712 </xsl:text>
  1529     <xsl:text>
  1713     <xsl:text>        //redraw button
  1530 </xsl:text>
  1714 </xsl:text>
  1531     <xsl:text>     on_mouse_down(evt) {
  1715     <xsl:text>        this.state_hmi = this.state_plc;
  1532 </xsl:text>
  1716 </xsl:text>
  1533     <xsl:text>         if (this.active_style &amp;&amp; this.inactive_style) {
  1717     <xsl:text>        this.request_animate();
  1534 </xsl:text>
  1718 </xsl:text>
  1535     <xsl:text>             this.active_elt.setAttribute("style", this.active_style);
  1719     <xsl:text>    }
  1536 </xsl:text>
  1720 </xsl:text>
  1537     <xsl:text>             this.inactive_elt.setAttribute("style", "display:none");
  1721     <xsl:text>
  1538 </xsl:text>
  1722 </xsl:text>
  1539     <xsl:text>         }
  1723     <xsl:text>    animate(){
  1540 </xsl:text>
  1724 </xsl:text>
  1541     <xsl:text>         this.apply_hmi_value(0, 1);
  1725     <xsl:text>        if (this.active_style &amp;&amp; this.inactive_style) {
  1542 </xsl:text>
  1726 </xsl:text>
  1543     <xsl:text>         this.plc_lock = false;
  1727     <xsl:text>           // redraw button on screen refresh
  1544 </xsl:text>
  1728 </xsl:text>
  1545     <xsl:text>     }
  1729     <xsl:text>           if (this.state_hmi) {
  1546 </xsl:text>
  1730 </xsl:text>
  1547     <xsl:text>
  1731     <xsl:text>               this.active_elt.setAttribute("style", this.active_style);
  1548 </xsl:text>
  1732 </xsl:text>
  1549     <xsl:text>     on_mouse_up(evt) {
  1733     <xsl:text>               this.inactive_elt.setAttribute("style", "display:none");
  1550 </xsl:text>
  1734 </xsl:text>
  1551     <xsl:text>         this.button_release();
  1735     <xsl:text>           } else {
  1552 </xsl:text>
  1736 </xsl:text>
  1553     <xsl:text>     }
  1737     <xsl:text>               this.inactive_elt.setAttribute("style", this.inactive_style);
  1554 </xsl:text>
  1738 </xsl:text>
  1555     <xsl:text>
  1739     <xsl:text>               this.active_elt.setAttribute("style", "display:none");
  1556 </xsl:text>
  1740 </xsl:text>
  1557     <xsl:text>     button_release(){
  1741     <xsl:text>           }
  1558 </xsl:text>
  1742 </xsl:text>
  1559     <xsl:text>        if(!this.plc_lock){
  1743     <xsl:text>       }
  1560 </xsl:text>
  1744 </xsl:text>
  1561     <xsl:text>            this.plc_lock = true;
  1745     <xsl:text>    }
       
  1746 </xsl:text>
       
  1747     <xsl:text>
       
  1748 </xsl:text>
       
  1749     <xsl:text>    on_click(evt) {
       
  1750 </xsl:text>
       
  1751     <xsl:text>        //set state and apply if plc is 0
       
  1752 </xsl:text>
       
  1753     <xsl:text>        this.plc_lock = true;
       
  1754 </xsl:text>
       
  1755     <xsl:text>        if(this.state_plc == 0){
       
  1756 </xsl:text>
       
  1757     <xsl:text>            this.apply_hmi_value(0, 1);
  1562 </xsl:text>
  1758 </xsl:text>
  1563     <xsl:text>        }
  1759     <xsl:text>        }
  1564 </xsl:text>
  1760 </xsl:text>
  1565     <xsl:text>        else{
  1761     <xsl:text>        //redraw button
  1566 </xsl:text>
  1762 </xsl:text>
  1567     <xsl:text>            if (this.active_style &amp;&amp; this.inactive_style) {
  1763     <xsl:text>        this.request_animate();
  1568 </xsl:text>
  1764 </xsl:text>
  1569     <xsl:text>                 this.active_elt.setAttribute("style", "display:none");
  1765     <xsl:text>    }
  1570 </xsl:text>
  1766 </xsl:text>
  1571     <xsl:text>                 this.inactive_elt.setAttribute("style", this.inactive_style);
  1767     <xsl:text>
  1572 </xsl:text>
  1768 </xsl:text>
  1573     <xsl:text>             }
  1769     <xsl:text>    on_press(evt) {
  1574 </xsl:text>
  1770 </xsl:text>
  1575     <xsl:text>             this.apply_hmi_value(0, 0);
  1771     <xsl:text>        //set graphic
       
  1772 </xsl:text>
       
  1773     <xsl:text>        this.state_hmi = 1;
       
  1774 </xsl:text>
       
  1775     <xsl:text>        //redraw button
       
  1776 </xsl:text>
       
  1777     <xsl:text>        this.request_animate();
       
  1778 </xsl:text>
       
  1779     <xsl:text>    }
       
  1780 </xsl:text>
       
  1781     <xsl:text>
       
  1782 </xsl:text>
       
  1783     <xsl:text>     init() {
       
  1784 </xsl:text>
       
  1785     <xsl:text>        this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined;
       
  1786 </xsl:text>
       
  1787     <xsl:text>        this.inactive_style = this.inactive_elt ? this.inactive_elt.style.cssText : undefined;
       
  1788 </xsl:text>
       
  1789     <xsl:text>
       
  1790 </xsl:text>
       
  1791     <xsl:text>        if (this.active_style &amp;&amp; this.inactive_style) {
       
  1792 </xsl:text>
       
  1793     <xsl:text>            this.active_elt.setAttribute("style", "display:none");
       
  1794 </xsl:text>
       
  1795     <xsl:text>            this.inactive_elt.setAttribute("style", this.inactive_style);
  1576 </xsl:text>
  1796 </xsl:text>
  1577     <xsl:text>        }
  1797     <xsl:text>        }
  1578 </xsl:text>
  1798 </xsl:text>
  1579     <xsl:text>     }
  1799     <xsl:text>
  1580 </xsl:text>
  1800 </xsl:text>
  1581     <xsl:text>
  1801     <xsl:text>        this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
  1582 </xsl:text>
  1802 </xsl:text>
  1583     <xsl:text>     init() {
  1803     <xsl:text>        this.element.setAttribute("onmousedown", "hmi_widgets['"+this.element_id+"'].on_press(evt)");
  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>
       
  1590 </xsl:text>
       
  1591     <xsl:text>        if (this.active_style &amp;&amp; this.inactive_style) {
       
  1592 </xsl:text>
       
  1593     <xsl:text>            this.active_elt.setAttribute("style", "display:none");
       
  1594 </xsl:text>
       
  1595     <xsl:text>            this.inactive_elt.setAttribute("style", this.inactive_style);
       
  1596 </xsl:text>
       
  1597     <xsl:text>        }
       
  1598 </xsl:text>
       
  1599     <xsl:text>
       
  1600 </xsl:text>
       
  1601     <xsl:text>        this.element.setAttribute("onmousedown", "hmi_widgets["+this.element_id+"].on_mouse_down(evt)");
       
  1602 </xsl:text>
       
  1603     <xsl:text>        this.element.setAttribute("onmouseup", "hmi_widgets["+this.element_id+"].on_mouse_up(evt)");
       
  1604 </xsl:text>
  1804 </xsl:text>
  1605     <xsl:text>     }
  1805     <xsl:text>     }
  1606 </xsl:text>
  1806 </xsl:text>
  1607     <xsl:text>}
  1807     <xsl:text>}
  1608 </xsl:text>
  1808 </xsl:text>
  1736 </xsl:text>
  1936 </xsl:text>
  1737     <xsl:text>    circle = undefined;
  1937     <xsl:text>    circle = undefined;
  1738 </xsl:text>
  1938 </xsl:text>
  1739     <xsl:text>    handle_pos = undefined;
  1939     <xsl:text>    handle_pos = undefined;
  1740 </xsl:text>
  1940 </xsl:text>
  1741     <xsl:text>    svg_dist = undefined;
  1941     <xsl:text>    curr_value = 0;
  1742 </xsl:text>
  1942 </xsl:text>
  1743     <xsl:text>    drag = false;
  1943     <xsl:text>    drag = false;
  1744 </xsl:text>
  1944 </xsl:text>
  1745     <xsl:text>    enTimer = false;
  1945     <xsl:text>    enTimer = false;
  1746 </xsl:text>
  1946 </xsl:text>
  1748 </xsl:text>
  1948 </xsl:text>
  1749     <xsl:text>
  1949     <xsl:text>
  1750 </xsl:text>
  1950 </xsl:text>
  1751     <xsl:text>    dispatch(value) {
  1951     <xsl:text>    dispatch(value) {
  1752 </xsl:text>
  1952 </xsl:text>
       
  1953     <xsl:text>        let [min,max,start,totallength] = this.range;
       
  1954 </xsl:text>
       
  1955     <xsl:text>        //save current value inside widget
       
  1956 </xsl:text>
       
  1957     <xsl:text>        this.curr_value = value;
       
  1958 </xsl:text>
       
  1959     <xsl:text>
       
  1960 </xsl:text>
       
  1961     <xsl:text>        //check if in range
       
  1962 </xsl:text>
       
  1963     <xsl:text>        if (this.curr_value &gt; max){
       
  1964 </xsl:text>
       
  1965     <xsl:text>            this.curr_value = max;
       
  1966 </xsl:text>
       
  1967     <xsl:text>            this.apply_hmi_value(0, this.curr_value);
       
  1968 </xsl:text>
       
  1969     <xsl:text>        }
       
  1970 </xsl:text>
       
  1971     <xsl:text>        else if (this.curr_value &lt; min){
       
  1972 </xsl:text>
       
  1973     <xsl:text>            this.curr_value = min;
       
  1974 </xsl:text>
       
  1975     <xsl:text>            this.apply_hmi_value(0, this.curr_value);
       
  1976 </xsl:text>
       
  1977     <xsl:text>        }
       
  1978 </xsl:text>
       
  1979     <xsl:text>
       
  1980 </xsl:text>
  1753     <xsl:text>        if(this.value_elt)
  1981     <xsl:text>        if(this.value_elt)
  1754 </xsl:text>
  1982 </xsl:text>
  1755     <xsl:text>            this.value_elt.textContent = String(value);
  1983     <xsl:text>            this.value_elt.textContent = String(value);
  1756 </xsl:text>
  1984 </xsl:text>
  1757     <xsl:text>
  1985     <xsl:text>
  1758 </xsl:text>
  1986 </xsl:text>
  1759     <xsl:text>        this.update_DOM(value, this.handle_elt);
  1987     <xsl:text>        //don't update if draging and setpoint ghost doesn't exist
       
  1988 </xsl:text>
       
  1989     <xsl:text>        if(!this.drag || (this.setpoint_elt != undefined)){
       
  1990 </xsl:text>
       
  1991     <xsl:text>            this.update_DOM(value, this.handle_elt);
       
  1992 </xsl:text>
       
  1993     <xsl:text>        }
  1760 </xsl:text>
  1994 </xsl:text>
  1761     <xsl:text>    }
  1995     <xsl:text>    }
  1762 </xsl:text>
  1996 </xsl:text>
  1763     <xsl:text>
  1997     <xsl:text>
  1764 </xsl:text>
  1998 </xsl:text>
  1772 </xsl:text>
  2006 </xsl:text>
  1773     <xsl:text>        elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")");
  2007     <xsl:text>        elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")");
  1774 </xsl:text>
  2008 </xsl:text>
  1775     <xsl:text>
  2009     <xsl:text>
  1776 </xsl:text>
  2010 </xsl:text>
       
  2011     <xsl:text>        // show or hide ghost if exists
       
  2012 </xsl:text>
  1777     <xsl:text>        if(this.setpoint_elt != undefined){
  2013     <xsl:text>        if(this.setpoint_elt != undefined){
  1778 </xsl:text>
  2014 </xsl:text>
  1779     <xsl:text>            if(this.last_drag!= this.drag){
  2015     <xsl:text>            if(this.last_drag!= this.drag){
  1780 </xsl:text>
  2016 </xsl:text>
  1781     <xsl:text>                if(this.drag){
  2017     <xsl:text>                if(this.drag){
  1798 </xsl:text>
  2034 </xsl:text>
  1799     <xsl:text>
  2035     <xsl:text>
  1800 </xsl:text>
  2036 </xsl:text>
  1801     <xsl:text>    on_release(evt) {
  2037     <xsl:text>    on_release(evt) {
  1802 </xsl:text>
  2038 </xsl:text>
       
  2039     <xsl:text>        //unbind events
       
  2040 </xsl:text>
  1803     <xsl:text>        window.removeEventListener("touchmove", this.on_bound_drag, true);
  2041     <xsl:text>        window.removeEventListener("touchmove", this.on_bound_drag, true);
  1804 </xsl:text>
  2042 </xsl:text>
  1805     <xsl:text>        window.removeEventListener("mousemove", this.on_bound_drag, true);
  2043     <xsl:text>        window.removeEventListener("mousemove", this.on_bound_drag, true);
  1806 </xsl:text>
  2044 </xsl:text>
  1807     <xsl:text>
  2045     <xsl:text>
  1810 </xsl:text>
  2048 </xsl:text>
  1811     <xsl:text>        window.removeEventListener("touchend", this.bound_on_release, true);
  2049     <xsl:text>        window.removeEventListener("touchend", this.bound_on_release, true);
  1812 </xsl:text>
  2050 </xsl:text>
  1813     <xsl:text>        window.removeEventListener("touchcancel", this.bound_on_release, true);
  2051     <xsl:text>        window.removeEventListener("touchcancel", this.bound_on_release, true);
  1814 </xsl:text>
  2052 </xsl:text>
       
  2053     <xsl:text>
       
  2054 </xsl:text>
       
  2055     <xsl:text>        //reset drag flag
       
  2056 </xsl:text>
  1815     <xsl:text>        if(this.drag){
  2057     <xsl:text>        if(this.drag){
  1816 </xsl:text>
  2058 </xsl:text>
  1817     <xsl:text>            this.drag = false;
  2059     <xsl:text>            this.drag = false;
  1818 </xsl:text>
  2060 </xsl:text>
  1819     <xsl:text>        }
  2061     <xsl:text>        }
  1820 </xsl:text>
  2062 </xsl:text>
       
  2063     <xsl:text>
       
  2064 </xsl:text>
       
  2065     <xsl:text>        // get final position
       
  2066 </xsl:text>
  1821     <xsl:text>        this.update_position(evt);
  2067     <xsl:text>        this.update_position(evt);
  1822 </xsl:text>
  2068 </xsl:text>
  1823     <xsl:text>    }
  2069     <xsl:text>    }
  1824 </xsl:text>
  2070 </xsl:text>
  1825     <xsl:text>
  2071     <xsl:text>
  1826 </xsl:text>
  2072 </xsl:text>
  1827     <xsl:text>    on_drag(evt){
  2073     <xsl:text>    on_drag(evt){
  1828 </xsl:text>
  2074 </xsl:text>
       
  2075     <xsl:text>        //ignore drag event for X amount of time and if not selected
       
  2076 </xsl:text>
  1829     <xsl:text>        if(this.enTimer &amp;&amp; this.drag){
  2077     <xsl:text>        if(this.enTimer &amp;&amp; this.drag){
  1830 </xsl:text>
  2078 </xsl:text>
  1831     <xsl:text>            this.update_position(evt);
  2079     <xsl:text>            this.update_position(evt);
  1832 </xsl:text>
  2080 </xsl:text>
       
  2081     <xsl:text>
       
  2082 </xsl:text>
  1833     <xsl:text>            //reset timer
  2083     <xsl:text>            //reset timer
  1834 </xsl:text>
  2084 </xsl:text>
  1835     <xsl:text>            this.enTimer = false;
  2085     <xsl:text>            this.enTimer = false;
  1836 </xsl:text>
  2086 </xsl:text>
  1837     <xsl:text>            setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
  2087     <xsl:text>            setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
  1928 </xsl:text>
  2178 </xsl:text>
  1929     <xsl:text>            //get handle distance from mouse position
  2179     <xsl:text>            //get handle distance from mouse position
  1930 </xsl:text>
  2180 </xsl:text>
  1931     <xsl:text>            if(fi&lt;fiEnd){
  2181     <xsl:text>            if(fi&lt;fiEnd){
  1932 </xsl:text>
  2182 </xsl:text>
  1933     <xsl:text>                this.svg_dist=(fi)/(fiEnd)*(this.range[1]-this.range[0]);
  2183     <xsl:text>               this.curr_value=(fi)/(fiEnd)*(this.range[1]-this.range[0]);
  1934 </xsl:text>
  2184 </xsl:text>
  1935     <xsl:text>            }
  2185     <xsl:text>            }
  1936 </xsl:text>
  2186 </xsl:text>
  1937     <xsl:text>            else if(fiEnd&lt;fi &amp;&amp; fi&lt;fiEnd+minMax){
  2187     <xsl:text>            else if(fiEnd&lt;fi &amp;&amp; fi&lt;fiEnd+minMax){
  1938 </xsl:text>
  2188 </xsl:text>
  1939     <xsl:text>                this.svg_dist = this.range[1];
  2189     <xsl:text>                this.curr_value = this.range[1];
  1940 </xsl:text>
  2190 </xsl:text>
  1941     <xsl:text>            }
  2191     <xsl:text>            }
  1942 </xsl:text>
  2192 </xsl:text>
  1943     <xsl:text>            else{
  2193     <xsl:text>            else{
  1944 </xsl:text>
  2194 </xsl:text>
  1945     <xsl:text>                this.svg_dist = this.range[0];
  2195     <xsl:text>                this.curr_value = this.range[0];
  1946 </xsl:text>
  2196 </xsl:text>
  1947     <xsl:text>            }
  2197     <xsl:text>            }
  1948 </xsl:text>
  2198 </xsl:text>
  1949     <xsl:text>
  2199     <xsl:text>
  1950 </xsl:text>
  2200 </xsl:text>
  1951     <xsl:text>
  2201     <xsl:text>            //apply value to hmi
  1952 </xsl:text>
  2202 </xsl:text>
  1953     <xsl:text>            this.apply_hmi_value(0, Math.ceil(this.svg_dist));
  2203     <xsl:text>            this.apply_hmi_value(0, Math.ceil(this.curr_value));
  1954 </xsl:text>
  2204 </xsl:text>
  1955     <xsl:text>
  2205     <xsl:text>
  1956 </xsl:text>
  2206 </xsl:text>
  1957     <xsl:text>            // update ghost cursor
  2207     <xsl:text>            //redraw handle
  1958 </xsl:text>
  2208 </xsl:text>
  1959     <xsl:text>            if(this.setpoint_elt != undefined){
  2209     <xsl:text>            this.request_animate();
  1960 </xsl:text>
  2210 </xsl:text>
  1961     <xsl:text>                this.request_animate();
  2211     <xsl:text>
  1962 </xsl:text>
       
  1963     <xsl:text>            }
       
  1964 </xsl:text>
  2212 </xsl:text>
  1965     <xsl:text>        }
  2213     <xsl:text>        }
  1966 </xsl:text>
  2214 </xsl:text>
  1967     <xsl:text>
  2215     <xsl:text>
  1968 </xsl:text>
  2216 </xsl:text>
  1970 </xsl:text>
  2218 </xsl:text>
  1971     <xsl:text>
  2219     <xsl:text>
  1972 </xsl:text>
  2220 </xsl:text>
  1973     <xsl:text>    animate(){
  2221     <xsl:text>    animate(){
  1974 </xsl:text>
  2222 </xsl:text>
  1975     <xsl:text>        this.update_DOM(this.svg_dist, this.setpoint_elt);
  2223     <xsl:text>        // redraw handle on screen refresh
       
  2224 </xsl:text>
       
  2225     <xsl:text>        // check if setpoint(ghost) handle exsist otherwise update main handle
       
  2226 </xsl:text>
       
  2227     <xsl:text>        if(this.setpoint_elt != undefined){
       
  2228 </xsl:text>
       
  2229     <xsl:text>            this.update_DOM(this.curr_value, this.setpoint_elt);
       
  2230 </xsl:text>
       
  2231     <xsl:text>        }
       
  2232 </xsl:text>
       
  2233     <xsl:text>        else{
       
  2234 </xsl:text>
       
  2235     <xsl:text>            this.update_DOM(this.curr_value, this.handle_elt);
       
  2236 </xsl:text>
       
  2237     <xsl:text>        }
  1976 </xsl:text>
  2238 </xsl:text>
  1977     <xsl:text>    }
  2239     <xsl:text>    }
  1978 </xsl:text>
  2240 </xsl:text>
  1979     <xsl:text>
  2241     <xsl:text>
  1980 </xsl:text>
  2242 </xsl:text>
  1981     <xsl:text>    on_select(evt){
  2243     <xsl:text>    on_select(evt){
  1982 </xsl:text>
  2244 </xsl:text>
       
  2245     <xsl:text>        //enable drag flag and timer
       
  2246 </xsl:text>
  1983     <xsl:text>        this.drag = true;
  2247     <xsl:text>        this.drag = true;
  1984 </xsl:text>
  2248 </xsl:text>
  1985     <xsl:text>        this.enTimer = true;
  2249     <xsl:text>        this.enTimer = true;
  1986 </xsl:text>
  2250 </xsl:text>
       
  2251     <xsl:text>
       
  2252 </xsl:text>
       
  2253     <xsl:text>        //bind events
       
  2254 </xsl:text>
  1987     <xsl:text>        window.addEventListener("touchmove", this.on_bound_drag, true);
  2255     <xsl:text>        window.addEventListener("touchmove", this.on_bound_drag, true);
  1988 </xsl:text>
  2256 </xsl:text>
  1989     <xsl:text>        window.addEventListener("mousemove", this.on_bound_drag, true);
  2257     <xsl:text>        window.addEventListener("mousemove", this.on_bound_drag, true);
  1990 </xsl:text>
  2258 </xsl:text>
  1991     <xsl:text>
  2259     <xsl:text>
  1992 </xsl:text>
  2260 </xsl:text>
  1993     <xsl:text>        window.addEventListener("mouseup", this.bound_on_release, true)
  2261     <xsl:text>        window.addEventListener("mouseup", this.bound_on_release, true);
  1994 </xsl:text>
  2262 </xsl:text>
  1995     <xsl:text>        window.addEventListener("touchend", this.bound_on_release, true);
  2263     <xsl:text>        window.addEventListener("touchend", this.bound_on_release, true);
  1996 </xsl:text>
  2264 </xsl:text>
  1997     <xsl:text>        window.addEventListener("touchcancel", this.bound_on_release, true);
  2265     <xsl:text>        window.addEventListener("touchcancel", this.bound_on_release, true);
  1998 </xsl:text>
  2266 </xsl:text>
       
  2267     <xsl:text>
       
  2268 </xsl:text>
       
  2269     <xsl:text>        //update postion on mouse press
       
  2270 </xsl:text>
  1999     <xsl:text>        this.update_position(evt);
  2271     <xsl:text>        this.update_position(evt);
  2000 </xsl:text>
  2272 </xsl:text>
       
  2273     <xsl:text>
       
  2274 </xsl:text>
       
  2275     <xsl:text>        //prevent next events
       
  2276 </xsl:text>
       
  2277     <xsl:text>        evt.stopPropagation();
       
  2278 </xsl:text>
  2001     <xsl:text>    }
  2279     <xsl:text>    }
  2002 </xsl:text>
  2280 </xsl:text>
  2003     <xsl:text>
  2281     <xsl:text>
  2004 </xsl:text>
  2282 </xsl:text>
  2005     <xsl:text>    init() {
  2283     <xsl:text>    init() {
  2072 </xsl:text>
  2350 </xsl:text>
  2073     <xsl:text>        this.on_bound_drag = this.on_drag.bind(this);
  2351     <xsl:text>        this.on_bound_drag = this.on_drag.bind(this);
  2074 </xsl:text>
  2352 </xsl:text>
  2075     <xsl:text>
  2353     <xsl:text>
  2076 </xsl:text>
  2354 </xsl:text>
  2077     <xsl:text>        //init events
  2355     <xsl:text>        this.handle_elt.addEventListener("mousedown", this.bound_on_select);
  2078 </xsl:text>
  2356 </xsl:text>
  2079     <xsl:text>        this.element.addEventListener("mousedown", this.bound_on_select);
  2357     <xsl:text>        this.element.addEventListener("mousedown", this.bound_on_select);
  2080 </xsl:text>
  2358 </xsl:text>
  2081     <xsl:text>        this.element.addEventListener("touchstart", this.bound_on_select);
  2359     <xsl:text>        this.element.addEventListener("touchstart", this.bound_on_select);
  2082 </xsl:text>
  2360 </xsl:text>
  2083     <xsl:text>
  2361     <xsl:text>        //touch recognised as page drag without next command
       
  2362 </xsl:text>
       
  2363     <xsl:text>        document.body.addEventListener("touchstart", function(e){}, false);
       
  2364 </xsl:text>
       
  2365     <xsl:text>
       
  2366 </xsl:text>
       
  2367     <xsl:text>        //save ghost style
       
  2368 </xsl:text>
       
  2369     <xsl:text>        //save ghost style
  2084 </xsl:text>
  2370 </xsl:text>
  2085     <xsl:text>        if(this.setpoint_elt != undefined){
  2371     <xsl:text>        if(this.setpoint_elt != undefined){
  2086 </xsl:text>
  2372 </xsl:text>
  2087     <xsl:text>            this.setpoint_style = this.setpoint_elt.getAttribute("style");
  2373     <xsl:text>            this.setpoint_style = this.setpoint_elt.getAttribute("style");
  2088 </xsl:text>
  2374 </xsl:text>
  2089     <xsl:text>            this.setpoint_elt.setAttribute("style", "display:none");
  2375     <xsl:text>            this.setpoint_elt.setAttribute("style", "display:none");
  2090 </xsl:text>
  2376 </xsl:text>
  2091     <xsl:text>        }
  2377     <xsl:text>        }
  2092 </xsl:text>
       
  2093     <xsl:text>
       
  2094 </xsl:text>
       
  2095     <xsl:text>
       
  2096 </xsl:text>
       
  2097     <xsl:text>        window.addEventListener("touchmove", hmi_widgets[this.element_id].update_position.bind(this));
       
  2098 </xsl:text>
       
  2099     <xsl:text>        window.addEventListener("mousemove", hmi_widgets[this.element_id].update_position.bind(this));
       
  2100 </xsl:text>
       
  2101     <xsl:text>
       
  2102 </xsl:text>
       
  2103     <xsl:text>        window.addEventListener("mouseup", hmi_widgets[this.element_id].on_release.bind(this))
       
  2104 </xsl:text>
       
  2105     <xsl:text>        window.addEventListener("touchend", hmi_widgets[this.element_id].on_release.bind(this));
       
  2106 </xsl:text>
       
  2107     <xsl:text>        window.addEventListener("touchcancel", hmi_widgets[this.element_id].on_release.bind(this));
       
  2108 </xsl:text>
  2378 </xsl:text>
  2109     <xsl:text>
  2379     <xsl:text>
  2110 </xsl:text>
  2380 </xsl:text>
  2111     <xsl:text>    }
  2381     <xsl:text>    }
  2112 </xsl:text>
  2382 </xsl:text>
  2122       </xsl:with-param>
  2392       </xsl:with-param>
  2123     </xsl:call-template>
  2393     </xsl:call-template>
  2124     <xsl:call-template name="defs_by_labels">
  2394     <xsl:call-template name="defs_by_labels">
  2125       <xsl:with-param name="hmi_element" select="$hmi_element"/>
  2395       <xsl:with-param name="hmi_element" select="$hmi_element"/>
  2126       <xsl:with-param name="labels">
  2396       <xsl:with-param name="labels">
  2127         <xsl:text>value min max</xsl:text>
  2397         <xsl:text>value min max setpoint</xsl:text>
  2128       </xsl:with-param>
  2398       </xsl:with-param>
  2129       <xsl:with-param name="mandatory" select="'no'"/>
  2399       <xsl:with-param name="mandatory" select="'no'"/>
       
  2400     </xsl:call-template>
       
  2401     <xsl:text>
       
  2402 </xsl:text>
       
  2403   </xsl:template>
       
  2404   <xsl:template mode="widget_class" match="widget[@type='CustomHtml']">
       
  2405     <xsl:text>class CustomHtmlWidget extends Widget{
       
  2406 </xsl:text>
       
  2407     <xsl:text>    frequency = 5;
       
  2408 </xsl:text>
       
  2409     <xsl:text>    widget_size = undefined;
       
  2410 </xsl:text>
       
  2411     <xsl:text>
       
  2412 </xsl:text>
       
  2413     <xsl:text>    dispatch(value) {
       
  2414 </xsl:text>
       
  2415     <xsl:text>        this.request_animate();
       
  2416 </xsl:text>
       
  2417     <xsl:text>    }
       
  2418 </xsl:text>
       
  2419     <xsl:text>
       
  2420 </xsl:text>
       
  2421     <xsl:text>    animate(){
       
  2422 </xsl:text>
       
  2423     <xsl:text>    }
       
  2424 </xsl:text>
       
  2425     <xsl:text>
       
  2426 </xsl:text>
       
  2427     <xsl:text>    init() {
       
  2428 </xsl:text>
       
  2429     <xsl:text>        this.widget_size = this.container_elt.getBBox();
       
  2430 </xsl:text>
       
  2431     <xsl:text>        this.element.innerHTML ='&lt;foreignObject x="'+
       
  2432 </xsl:text>
       
  2433     <xsl:text>            this.widget_size.x+'" y="'+this.widget_size.y+
       
  2434 </xsl:text>
       
  2435     <xsl:text>            '" width="'+this.widget_size.width+'" height="'+this.widget_size.height+'"&gt; '+
       
  2436 </xsl:text>
       
  2437     <xsl:text>            this.code_elt.textContent+
       
  2438 </xsl:text>
       
  2439     <xsl:text>            ' &lt;/foreignObject&gt;';
       
  2440 </xsl:text>
       
  2441     <xsl:text>    }
       
  2442 </xsl:text>
       
  2443     <xsl:text>}
       
  2444 </xsl:text>
       
  2445   </xsl:template>
       
  2446   <xsl:template mode="widget_defs" match="widget[@type='CustomHtml']">
       
  2447     <xsl:param name="hmi_element"/>
       
  2448     <xsl:call-template name="defs_by_labels">
       
  2449       <xsl:with-param name="hmi_element" select="$hmi_element"/>
       
  2450       <xsl:with-param name="labels">
       
  2451         <xsl:text>container code</xsl:text>
       
  2452       </xsl:with-param>
  2130     </xsl:call-template>
  2453     </xsl:call-template>
  2131     <xsl:text>
  2454     <xsl:text>
  2132 </xsl:text>
  2455 </xsl:text>
  2133   </xsl:template>
  2456   </xsl:template>
  2134   <xsl:template mode="widget_class" match="widget[@type='Display']">
  2457   <xsl:template mode="widget_class" match="widget[@type='Display']">
  2160       <xsl:for-each select="path">
  2483       <xsl:for-each select="path">
  2161         <xsl:choose>
  2484         <xsl:choose>
  2162           <xsl:when test="@type='HMI_STRING'">
  2485           <xsl:when test="@type='HMI_STRING'">
  2163             <xsl:text>""</xsl:text>
  2486             <xsl:text>""</xsl:text>
  2164           </xsl:when>
  2487           </xsl:when>
  2165           <xsl:otherwise>0</xsl:otherwise>
  2488           <xsl:otherwise>
       
  2489             <xsl:text>0</xsl:text>
       
  2490           </xsl:otherwise>
  2166         </xsl:choose>
  2491         </xsl:choose>
  2167         <xsl:if test="position()!=last()">
  2492         <xsl:if test="position()!=last()">
  2168           <xsl:text>,</xsl:text>
  2493           <xsl:text>,</xsl:text>
  2169         </xsl:if>
  2494         </xsl:if>
  2170       </xsl:for-each>
  2495       </xsl:for-each>
  3499 </xsl:text>
  3824 </xsl:text>
  3500   </xsl:template>
  3825   </xsl:template>
  3501   <xsl:template mode="widget_class" match="widget[@type='JsonTable']">
  3826   <xsl:template mode="widget_class" match="widget[@type='JsonTable']">
  3502     <xsl:text>class JsonTableWidget extends Widget{
  3827     <xsl:text>class JsonTableWidget extends Widget{
  3503 </xsl:text>
  3828 </xsl:text>
  3504     <xsl:text>    cache = [];
  3829     <xsl:text>    cache = [100,50];
  3505 </xsl:text>
  3830 </xsl:text>
  3506     <xsl:text>    do_http_request(...opt) {
  3831     <xsl:text>    do_http_request(...opt) {
  3507 </xsl:text>
  3832 </xsl:text>
  3508     <xsl:text>        const query = {
  3833     <xsl:text>        const query = {
  3509 </xsl:text>
  3834 </xsl:text>
  3510     <xsl:text>            args: this.args,
  3835     <xsl:text>            args: this.args,
  3511 </xsl:text>
  3836 </xsl:text>
  3512     <xsl:text>            vars: this.cache,
  3837     <xsl:text>            range: this.cache[1],
       
  3838 </xsl:text>
       
  3839     <xsl:text>            position: this.cache[2],
  3513 </xsl:text>
  3840 </xsl:text>
  3514     <xsl:text>            visible: this.visible,
  3841     <xsl:text>            visible: this.visible,
  3515 </xsl:text>
  3842 </xsl:text>
  3516     <xsl:text>            options: opt
  3843     <xsl:text>            options: opt
  3517 </xsl:text>
  3844 </xsl:text>
  3846 </xsl:text>
  4173 </xsl:text>
  3847     <xsl:text>        this.apply_hmi_value(1, range);
  4174     <xsl:text>        this.apply_hmi_value(1, range);
  3848 </xsl:text>
  4175 </xsl:text>
  3849     <xsl:text>        this.apply_hmi_value(2, position);
  4176     <xsl:text>        this.apply_hmi_value(2, position);
  3850 </xsl:text>
  4177 </xsl:text>
       
  4178     <xsl:text>        this.apply_hmi_value(3, this.visible);
       
  4179 </xsl:text>
  3851     <xsl:text>        console.log(range,position,jdata);
  4180     <xsl:text>        console.log(range,position,jdata);
  3852 </xsl:text>
  4181 </xsl:text>
  3853     <xsl:apply-templates mode="json_table_render_except_comments" select="$data_elt">
  4182     <xsl:apply-templates mode="json_table_render_except_comments" select="$data_elt">
  3854       <xsl:with-param name="expressions" select="$initexpr_ns"/>
  4183       <xsl:with-param name="expressions" select="$initexpr_ns"/>
  3855       <xsl:with-param name="widget_elts" select="$hmi_element/*[@inkscape:label = 'data']/descendant::svg:*"/>
  4184       <xsl:with-param name="widget_elts" select="$hmi_element/*[@inkscape:label = 'data']/descendant::svg:*"/>
  4754 </xsl:text>
  5083 </xsl:text>
  4755     <xsl:text>    range = undefined;
  5084     <xsl:text>    range = undefined;
  4756 </xsl:text>
  5085 </xsl:text>
  4757     <xsl:text>    handle_orig = undefined;
  5086     <xsl:text>    handle_orig = undefined;
  4758 </xsl:text>
  5087 </xsl:text>
  4759     <xsl:text>    scroll_size = 10;
  5088     <xsl:text>    scroll_size = undefined;
       
  5089 </xsl:text>
       
  5090     <xsl:text>    scroll_range = 0;
       
  5091 </xsl:text>
       
  5092     <xsl:text>    scroll_visible = 7;
  4760 </xsl:text>
  5093 </xsl:text>
  4761     <xsl:text>    min_size = 0.07;
  5094     <xsl:text>    min_size = 0.07;
  4762 </xsl:text>
  5095 </xsl:text>
  4763     <xsl:text>    fi = undefined;
  5096     <xsl:text>    fi = undefined;
  4764 </xsl:text>
  5097 </xsl:text>
  4772 </xsl:text>
  5105 </xsl:text>
  4773     <xsl:text>    last_drag = false;
  5106     <xsl:text>    last_drag = false;
  4774 </xsl:text>
  5107 </xsl:text>
  4775     <xsl:text>
  5108     <xsl:text>
  4776 </xsl:text>
  5109 </xsl:text>
  4777     <xsl:text>    dispatch(value) {
  5110     <xsl:text>    dispatch(value,oldval, index) {
  4778 </xsl:text>
  5111 </xsl:text>
  4779     <xsl:text>        //save current value inside widget
  5112     <xsl:text>        if (index == 0){
  4780 </xsl:text>
  5113 </xsl:text>
  4781     <xsl:text>        this.curr_value = value;
  5114     <xsl:text>            let [min,max,start,totallength] = this.range;
  4782 </xsl:text>
  5115 </xsl:text>
  4783     <xsl:text>
  5116     <xsl:text>            //save current value inside widget
  4784 </xsl:text>
  5117 </xsl:text>
  4785     <xsl:text>        if(this.value_elt)
  5118     <xsl:text>            this.curr_value = value;
  4786 </xsl:text>
  5119 </xsl:text>
  4787     <xsl:text>            this.value_elt.textContent = String(value);
  5120     <xsl:text>
       
  5121 </xsl:text>
       
  5122     <xsl:text>            //check if in range
       
  5123 </xsl:text>
       
  5124     <xsl:text>            if (this.curr_value &gt; max){
       
  5125 </xsl:text>
       
  5126     <xsl:text>                this.curr_value = max;
       
  5127 </xsl:text>
       
  5128     <xsl:text>                this.apply_hmi_value(0, this.curr_value);
       
  5129 </xsl:text>
       
  5130     <xsl:text>            }
       
  5131 </xsl:text>
       
  5132     <xsl:text>            else if (this.curr_value &lt; min){
       
  5133 </xsl:text>
       
  5134     <xsl:text>                this.curr_value = min;
       
  5135 </xsl:text>
       
  5136     <xsl:text>                this.apply_hmi_value(0, this.curr_value);
       
  5137 </xsl:text>
       
  5138     <xsl:text>            }
       
  5139 </xsl:text>
       
  5140     <xsl:text>
       
  5141 </xsl:text>
       
  5142     <xsl:text>            if(this.value_elt)
       
  5143 </xsl:text>
       
  5144     <xsl:text>                this.value_elt.textContent = String(value);
       
  5145 </xsl:text>
       
  5146     <xsl:text>        }
       
  5147 </xsl:text>
       
  5148     <xsl:text>        else if(index == 1){
       
  5149 </xsl:text>
       
  5150     <xsl:text>            this.scroll_range = value;
       
  5151 </xsl:text>
       
  5152     <xsl:text>            this.set_scroll();
       
  5153 </xsl:text>
       
  5154     <xsl:text>        }
       
  5155 </xsl:text>
       
  5156     <xsl:text>        else if(index == 2){
       
  5157 </xsl:text>
       
  5158     <xsl:text>            this.scroll_visible = value;
       
  5159 </xsl:text>
       
  5160     <xsl:text>            this.set_scroll();
       
  5161 </xsl:text>
       
  5162     <xsl:text>        }
  4788 </xsl:text>
  5163 </xsl:text>
  4789     <xsl:text>
  5164     <xsl:text>
  4790 </xsl:text>
  5165 </xsl:text>
  4791     <xsl:text>        //don't update if draging and setpoint ghost doesn't exist
  5166     <xsl:text>        //don't update if draging and setpoint ghost doesn't exist
  4792 </xsl:text>
  5167 </xsl:text>
  4793     <xsl:text>        if(!this.drag || (this.setpoint_elt != undefined)){
  5168     <xsl:text>        if(!this.drag || (this.setpoint_elt != undefined)){
  4794 </xsl:text>
  5169 </xsl:text>
  4795     <xsl:text>            this.update_DOM(value, this.handle_elt);
  5170     <xsl:text>            this.update_DOM(this.curr_value, this.handle_elt);
  4796 </xsl:text>
  5171 </xsl:text>
  4797     <xsl:text>        }
  5172     <xsl:text>        }
  4798 </xsl:text>
  5173 </xsl:text>
  4799     <xsl:text>    }
  5174     <xsl:text>    }
  4800 </xsl:text>
  5175 </xsl:text>
  4801     <xsl:text>
  5176     <xsl:text>
  4802 </xsl:text>
  5177 </xsl:text>
       
  5178     <xsl:text>    set_scroll(){
       
  5179 </xsl:text>
       
  5180     <xsl:text>        //check if range is bigger than visible and set scroll size
       
  5181 </xsl:text>
       
  5182     <xsl:text>        if(this.scroll_range &gt; this.scroll_visible){
       
  5183 </xsl:text>
       
  5184     <xsl:text>            this.scroll_size = this.scroll_range - this.scroll_visible;
       
  5185 </xsl:text>
       
  5186     <xsl:text>            this.range[0] = 0;
       
  5187 </xsl:text>
       
  5188     <xsl:text>            this.range[1] = this.scroll_size;
       
  5189 </xsl:text>
       
  5190     <xsl:text>        }
       
  5191 </xsl:text>
       
  5192     <xsl:text>        else{
       
  5193 </xsl:text>
       
  5194     <xsl:text>            this.scroll_size = 1;
       
  5195 </xsl:text>
       
  5196     <xsl:text>            this.range[0] = 0;
       
  5197 </xsl:text>
       
  5198     <xsl:text>            this.range[1] = 1;
       
  5199 </xsl:text>
       
  5200     <xsl:text>        }
       
  5201 </xsl:text>
       
  5202     <xsl:text>    }
       
  5203 </xsl:text>
       
  5204     <xsl:text>
       
  5205 </xsl:text>
  4803     <xsl:text>    update_DOM(value, elt){
  5206     <xsl:text>    update_DOM(value, elt){
  4804 </xsl:text>
  5207 </xsl:text>
  4805     <xsl:text>        let [min,max,start,totallength] = this.range;
  5208     <xsl:text>        let [min,max,start,totallength] = this.range;
  4806 </xsl:text>
  5209 </xsl:text>
  4807     <xsl:text>        // check if handle is resizeable
  5210     <xsl:text>        // check if handle is resizeable
  4944 </xsl:text>
  5347 </xsl:text>
  4945     <xsl:text>        window.removeEventListener("mousemove", this.on_bound_drag, true);
  5348     <xsl:text>        window.removeEventListener("mousemove", this.on_bound_drag, true);
  4946 </xsl:text>
  5349 </xsl:text>
  4947     <xsl:text>
  5350     <xsl:text>
  4948 </xsl:text>
  5351 </xsl:text>
  4949     <xsl:text>        window.removeEventListener("mouseup", this.bound_on_release, true)
  5352     <xsl:text>        window.removeEventListener("mouseup", this.bound_on_release, true);
  4950 </xsl:text>
  5353 </xsl:text>
  4951     <xsl:text>        window.removeEventListener("touchend", this.bound_on_release, true);
  5354     <xsl:text>        window.removeEventListener("touchend", this.bound_on_release, true);
  4952 </xsl:text>
  5355 </xsl:text>
  4953     <xsl:text>        window.removeEventListener("touchcancel", this.bound_on_release, true);
  5356     <xsl:text>        window.removeEventListener("touchcancel", this.bound_on_release, true);
  4954 </xsl:text>
  5357 </xsl:text>
  5136 </xsl:text>
  5539 </xsl:text>
  5137     <xsl:text>        }
  5540     <xsl:text>        }
  5138 </xsl:text>
  5541 </xsl:text>
  5139     <xsl:text>
  5542     <xsl:text>
  5140 </xsl:text>
  5543 </xsl:text>
  5141     <xsl:text>        //check if in range
  5544     <xsl:text>        //check if in range and apply
  5142 </xsl:text>
  5545 </xsl:text>
  5143     <xsl:text>        if (this.curr_value &gt; max){
  5546     <xsl:text>        if (this.curr_value &gt; max){
  5144 </xsl:text>
  5547 </xsl:text>
  5145     <xsl:text>            this.curr_value = max;
  5548     <xsl:text>            this.curr_value = max;
  5146 </xsl:text>
  5549 </xsl:text>
  5150 </xsl:text>
  5553 </xsl:text>
  5151     <xsl:text>            this.curr_value = min;
  5554     <xsl:text>            this.curr_value = min;
  5152 </xsl:text>
  5555 </xsl:text>
  5153     <xsl:text>        }
  5556     <xsl:text>        }
  5154 </xsl:text>
  5557 </xsl:text>
  5155     <xsl:text>
       
  5156 </xsl:text>
       
  5157     <xsl:text>        this.apply_hmi_value(0, this.curr_value);
  5558     <xsl:text>        this.apply_hmi_value(0, this.curr_value);
  5158 </xsl:text>
  5559 </xsl:text>
  5159     <xsl:text>
  5560     <xsl:text>
  5160 </xsl:text>
  5561 </xsl:text>
  5161     <xsl:text>        //redraw handle
  5562     <xsl:text>        //redraw handle
  5206 </xsl:text>
  5607 </xsl:text>
  5207     <xsl:text>        window.addEventListener("mousemove", this.on_bound_drag, true);
  5608     <xsl:text>        window.addEventListener("mousemove", this.on_bound_drag, true);
  5208 </xsl:text>
  5609 </xsl:text>
  5209     <xsl:text>
  5610     <xsl:text>
  5210 </xsl:text>
  5611 </xsl:text>
  5211     <xsl:text>        window.addEventListener("mouseup", this.bound_on_release, true)
  5612     <xsl:text>        window.addEventListener("mouseup", this.bound_on_release, true);
  5212 </xsl:text>
  5613 </xsl:text>
  5213     <xsl:text>        window.addEventListener("touchend", this.bound_on_release, true);
  5614     <xsl:text>        window.addEventListener("touchend", this.bound_on_release, true);
  5214 </xsl:text>
  5615 </xsl:text>
  5215     <xsl:text>        window.addEventListener("touchcancel", this.bound_on_release, true);
  5616     <xsl:text>        window.addEventListener("touchcancel", this.bound_on_release, true);
  5216 </xsl:text>
  5617 </xsl:text>
  5262 </xsl:text>
  5663 </xsl:text>
  5263     <xsl:text>        //prevent next events
  5664     <xsl:text>        //prevent next events
  5264 </xsl:text>
  5665 </xsl:text>
  5265     <xsl:text>        evt.stopPropagation();
  5666     <xsl:text>        evt.stopPropagation();
  5266 </xsl:text>
  5667 </xsl:text>
  5267     <xsl:text>    }
  5668     <xsl:text>
       
  5669 </xsl:text>
       
  5670     <xsl:text>    }
       
  5671 </xsl:text>
       
  5672     <xsl:text>
  5268 </xsl:text>
  5673 </xsl:text>
  5269     <xsl:text>
  5674     <xsl:text>
  5270 </xsl:text>
  5675 </xsl:text>
  5271     <xsl:text>    init() {
  5676     <xsl:text>    init() {
  5272 </xsl:text>
  5677 </xsl:text>
  5284 </xsl:text>
  5689 </xsl:text>
  5285     <xsl:text>                    this.args.length &gt;= 2 ? this.args[1] : 100;
  5690     <xsl:text>                    this.args.length &gt;= 2 ? this.args[1] : 100;
  5286 </xsl:text>
  5691 </xsl:text>
  5287     <xsl:text>
  5692     <xsl:text>
  5288 </xsl:text>
  5693 </xsl:text>
       
  5694     <xsl:text>
       
  5695 </xsl:text>
  5289     <xsl:text>        // save initial parameters
  5696     <xsl:text>        // save initial parameters
  5290 </xsl:text>
  5697 </xsl:text>
  5291     <xsl:text>        this.range_elt.style.strokeMiterlimit="0";
  5698     <xsl:text>        this.range_elt.style.strokeMiterlimit="0";
  5292 </xsl:text>
  5699 </xsl:text>
  5293     <xsl:text>        this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()];
  5700     <xsl:text>        this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()];
  5316 </xsl:text>
  5723 </xsl:text>
  5317     <xsl:text>        this.element.addEventListener("mousedown", this.bound_on_select);
  5724     <xsl:text>        this.element.addEventListener("mousedown", this.bound_on_select);
  5318 </xsl:text>
  5725 </xsl:text>
  5319     <xsl:text>        this.element.addEventListener("touchstart", this.bound_on_select);
  5726     <xsl:text>        this.element.addEventListener("touchstart", this.bound_on_select);
  5320 </xsl:text>
  5727 </xsl:text>
  5321     <xsl:text>
  5728     <xsl:text>        //touch recognised as page drag without next command
       
  5729 </xsl:text>
       
  5730     <xsl:text>        document.body.addEventListener("touchstart", function(e){}, false);
       
  5731 </xsl:text>
       
  5732     <xsl:text>
       
  5733 </xsl:text>
       
  5734     <xsl:text>        //save ghost style
  5322 </xsl:text>
  5735 </xsl:text>
  5323     <xsl:text>        if(this.setpoint_elt != undefined){
  5736     <xsl:text>        if(this.setpoint_elt != undefined){
  5324 </xsl:text>
  5737 </xsl:text>
  5325     <xsl:text>            this.setpoint_style = this.setpoint_elt.getAttribute("style");
  5738     <xsl:text>            this.setpoint_style = this.setpoint_elt.getAttribute("style");
  5326 </xsl:text>
  5739 </xsl:text>
  5423 </xsl:text>
  5836 </xsl:text>
  5424     <xsl:text>
  5837     <xsl:text>
  5425 </xsl:text>
  5838 </xsl:text>
  5426     <xsl:text>    dispatch(value) {
  5839     <xsl:text>    dispatch(value) {
  5427 </xsl:text>
  5840 </xsl:text>
  5428     <xsl:text>        if(this.state != value){
  5841     <xsl:text>        this.state = value;
  5429 </xsl:text>
  5842 </xsl:text>
  5430     <xsl:text>            this.state = value;
  5843     <xsl:text>        //redraw toggle button
  5431 </xsl:text>
  5844 </xsl:text>
  5432     <xsl:text>            if (this.state) {
  5845     <xsl:text>        this.request_animate();
  5433 </xsl:text>
  5846 </xsl:text>
  5434     <xsl:text>                this.active_elt.setAttribute("style", this.active_style);
  5847     <xsl:text>    }
  5435 </xsl:text>
  5848 </xsl:text>
  5436     <xsl:text>                this.inactive_elt.setAttribute("style", "display:none");
  5849     <xsl:text>
  5437 </xsl:text>
  5850 </xsl:text>
  5438     <xsl:text>            } else {
  5851     <xsl:text>    on_click(evt) {
  5439 </xsl:text>
  5852 </xsl:text>
  5440     <xsl:text>                this.inactive_elt.setAttribute("style", this.inactive_style);
  5853     <xsl:text>        //toggle state and apply
  5441 </xsl:text>
  5854 </xsl:text>
  5442     <xsl:text>                this.active_elt.setAttribute("style", "display:none");
  5855     <xsl:text>        if (this.state) {
  5443 </xsl:text>
  5856 </xsl:text>
  5444     <xsl:text>            }
  5857     <xsl:text>            this.state = 0;
       
  5858 </xsl:text>
       
  5859     <xsl:text>        } else {
       
  5860 </xsl:text>
       
  5861     <xsl:text>            this.state = 1;
  5445 </xsl:text>
  5862 </xsl:text>
  5446     <xsl:text>        }
  5863     <xsl:text>        }
  5447 </xsl:text>
  5864 </xsl:text>
  5448     <xsl:text>    }
  5865     <xsl:text>        this.apply_hmi_value(0, this.state);
  5449 </xsl:text>
  5866 </xsl:text>
  5450     <xsl:text>
  5867     <xsl:text>
  5451 </xsl:text>
  5868 </xsl:text>
  5452     <xsl:text>    on_click(evt) {
  5869     <xsl:text>        //redraw toggle button
  5453 </xsl:text>
  5870 </xsl:text>
  5454     <xsl:text>        if (this.state) {
  5871     <xsl:text>        this.request_animate();
       
  5872 </xsl:text>
       
  5873     <xsl:text>    }
       
  5874 </xsl:text>
       
  5875     <xsl:text>
       
  5876 </xsl:text>
       
  5877     <xsl:text>    animate(){
       
  5878 </xsl:text>
       
  5879     <xsl:text>       // redraw toggle button on screen refresh
       
  5880 </xsl:text>
       
  5881     <xsl:text>       if (this.state) {
       
  5882 </xsl:text>
       
  5883     <xsl:text>           this.active_elt.setAttribute("style", this.active_style);
       
  5884 </xsl:text>
       
  5885     <xsl:text>           this.inactive_elt.setAttribute("style", "display:none");
       
  5886 </xsl:text>
       
  5887     <xsl:text>       } else {
       
  5888 </xsl:text>
       
  5889     <xsl:text>           this.inactive_elt.setAttribute("style", this.inactive_style);
       
  5890 </xsl:text>
       
  5891     <xsl:text>           this.active_elt.setAttribute("style", "display:none");
       
  5892 </xsl:text>
       
  5893     <xsl:text>       }
       
  5894 </xsl:text>
       
  5895     <xsl:text>    }
       
  5896 </xsl:text>
       
  5897     <xsl:text>
       
  5898 </xsl:text>
       
  5899     <xsl:text>    init() {
       
  5900 </xsl:text>
       
  5901     <xsl:text>        this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined;
       
  5902 </xsl:text>
       
  5903     <xsl:text>        this.inactive_style = this.inactive_elt ? this.inactive_elt.style.cssText : undefined;
       
  5904 </xsl:text>
       
  5905     <xsl:text>
       
  5906 </xsl:text>
       
  5907     <xsl:text>        if (this.active_style &amp;&amp; this.inactive_style) {
       
  5908 </xsl:text>
       
  5909     <xsl:text>            this.active_elt.setAttribute("style", "display:none");
  5455 </xsl:text>
  5910 </xsl:text>
  5456     <xsl:text>            this.inactive_elt.setAttribute("style", this.inactive_style);
  5911     <xsl:text>            this.inactive_elt.setAttribute("style", this.inactive_style);
  5457 </xsl:text>
  5912 </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>
       
  5464     <xsl:text>            this.active_elt.setAttribute("style", this.active_style);
       
  5465 </xsl:text>
       
  5466     <xsl:text>            this.inactive_elt.setAttribute("style", "display:none");
       
  5467 </xsl:text>
       
  5468     <xsl:text>            this.state = 1;
       
  5469 </xsl:text>
       
  5470     <xsl:text>        }
  5913     <xsl:text>        }
  5471 </xsl:text>
  5914 </xsl:text>
  5472     <xsl:text>        this.apply_hmi_value(0, this.state);
  5915     <xsl:text>
  5473 </xsl:text>
       
  5474     <xsl:text>    }
       
  5475 </xsl:text>
       
  5476     <xsl:text>
       
  5477 </xsl:text>
       
  5478     <xsl:text>    init() {
       
  5479 </xsl:text>
       
  5480     <xsl:text>        this.active_style = this.active_elt.style.cssText;
       
  5481 </xsl:text>
       
  5482     <xsl:text>        this.inactive_style = this.inactive_elt.style.cssText;
       
  5483 </xsl:text>
  5916 </xsl:text>
  5484     <xsl:text>        this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
  5917     <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");
       
  5489 </xsl:text>
  5918 </xsl:text>
  5490     <xsl:text>    }
  5919     <xsl:text>    }
  5491 </xsl:text>
  5920 </xsl:text>
  5492     <xsl:text>}
  5921     <xsl:text>}
  5493 </xsl:text>
  5922 </xsl:text>
  5497     <xsl:call-template name="defs_by_labels">
  5926     <xsl:call-template name="defs_by_labels">
  5498       <xsl:with-param name="hmi_element" select="$hmi_element"/>
  5927       <xsl:with-param name="hmi_element" select="$hmi_element"/>
  5499       <xsl:with-param name="labels">
  5928       <xsl:with-param name="labels">
  5500         <xsl:text>active inactive</xsl:text>
  5929         <xsl:text>active inactive</xsl:text>
  5501       </xsl:with-param>
  5930       </xsl:with-param>
       
  5931       <xsl:with-param name="mandatory" select="'no'"/>
  5502     </xsl:call-template>
  5932     </xsl:call-template>
  5503     <xsl:text>
  5933     <xsl:text>
  5504 </xsl:text>
  5934 </xsl:text>
  5505   </xsl:template>
  5935   </xsl:template>
  5506   <xsl:template match="/">
  5936   <xsl:template match="/">