1581 <xsl:with-param name="mandatory" select="'no'"/> |
1581 <xsl:with-param name="mandatory" select="'no'"/> |
1582 </xsl:call-template> |
1582 </xsl:call-template> |
1583 <xsl:text> |
1583 <xsl:text> |
1584 </xsl:text> |
1584 </xsl:text> |
1585 </xsl:template> |
1585 </xsl:template> |
|
1586 <xsl:template mode="widget_class" match="widget[@type='CircularBar']"> |
|
1587 <xsl:text>class CircularBarWidget extends Widget{ |
|
1588 </xsl:text> |
|
1589 <xsl:text> frequency = 10; |
|
1590 </xsl:text> |
|
1591 <xsl:text> range = undefined; |
|
1592 </xsl:text> |
|
1593 <xsl:text> |
|
1594 </xsl:text> |
|
1595 <xsl:text> dispatch(value) { |
|
1596 </xsl:text> |
|
1597 <xsl:text> if(this.value_elt) |
|
1598 </xsl:text> |
|
1599 <xsl:text> this.value_elt.textContent = String(value); |
|
1600 </xsl:text> |
|
1601 <xsl:text> let [min,max,start,end] = this.range; |
|
1602 </xsl:text> |
|
1603 <xsl:text> let [cx,cy] = this.center; |
|
1604 </xsl:text> |
|
1605 <xsl:text> let [rx,ry] = this.proportions; |
|
1606 </xsl:text> |
|
1607 <xsl:text> let tip = start + (end-start)*Number(value)/(max-min); |
|
1608 </xsl:text> |
|
1609 <xsl:text> let size = 0; |
|
1610 </xsl:text> |
|
1611 <xsl:text> if (tip-start > Math.PI) { |
|
1612 </xsl:text> |
|
1613 <xsl:text> size = 1; |
|
1614 </xsl:text> |
|
1615 <xsl:text> } else { |
|
1616 </xsl:text> |
|
1617 <xsl:text> size = 0; |
|
1618 </xsl:text> |
|
1619 <xsl:text> } |
|
1620 </xsl:text> |
|
1621 <xsl:text> this.path_elt.setAttribute('d', "M "+(cx+rx*Math.cos(start))+","+(cy+ry*Math.sin(start))+" A "+rx+","+ry+" 0 "+size+" 1 "+(cx+rx*Math.cos(tip))+","+(cy+ry*Math.sin(tip))); |
|
1622 </xsl:text> |
|
1623 <xsl:text> } |
|
1624 </xsl:text> |
|
1625 <xsl:text> |
|
1626 </xsl:text> |
|
1627 <xsl:text> init() { |
|
1628 </xsl:text> |
|
1629 <xsl:text> let start = Number(this.path_elt.getAttribute('sodipodi:start')); |
|
1630 </xsl:text> |
|
1631 <xsl:text> let end = Number(this.path_elt.getAttribute('sodipodi:end')); |
|
1632 </xsl:text> |
|
1633 <xsl:text> let cx = Number(this.path_elt.getAttribute('sodipodi:cx')); |
|
1634 </xsl:text> |
|
1635 <xsl:text> let cy = Number(this.path_elt.getAttribute('sodipodi:cy')); |
|
1636 </xsl:text> |
|
1637 <xsl:text> let rx = Number(this.path_elt.getAttribute('sodipodi:rx')); |
|
1638 </xsl:text> |
|
1639 <xsl:text> let ry = Number(this.path_elt.getAttribute('sodipodi:ry')); |
|
1640 </xsl:text> |
|
1641 <xsl:text> if (ry == 0) { |
|
1642 </xsl:text> |
|
1643 <xsl:text> ry = rx; |
|
1644 </xsl:text> |
|
1645 <xsl:text> } |
|
1646 </xsl:text> |
|
1647 <xsl:text> if (start > end) { |
|
1648 </xsl:text> |
|
1649 <xsl:text> end = end + 2*Math.PI; |
|
1650 </xsl:text> |
|
1651 <xsl:text> } |
|
1652 </xsl:text> |
|
1653 <xsl:text> let min = this.min_elt ? |
|
1654 </xsl:text> |
|
1655 <xsl:text> Number(this.min_elt.textContent) : |
|
1656 </xsl:text> |
|
1657 <xsl:text> this.args.length >= 1 ? this.args[0] : 0; |
|
1658 </xsl:text> |
|
1659 <xsl:text> let max = this.max_elt ? |
|
1660 </xsl:text> |
|
1661 <xsl:text> Number(this.max_elt.textContent) : |
|
1662 </xsl:text> |
|
1663 <xsl:text> this.args.length >= 2 ? this.args[1] : 100; |
|
1664 </xsl:text> |
|
1665 <xsl:text> this.range = [min, max, start, end]; |
|
1666 </xsl:text> |
|
1667 <xsl:text> this.center = [cx, cy]; |
|
1668 </xsl:text> |
|
1669 <xsl:text> this.proportions = [rx, ry]; |
|
1670 </xsl:text> |
|
1671 <xsl:text> } |
|
1672 </xsl:text> |
|
1673 <xsl:text>} |
|
1674 </xsl:text> |
|
1675 </xsl:template> |
1586 <xsl:template mode="widget_defs" match="widget[@type='CircularBar']"> |
1676 <xsl:template mode="widget_defs" match="widget[@type='CircularBar']"> |
1587 <xsl:param name="hmi_element"/> |
1677 <xsl:param name="hmi_element"/> |
1588 <xsl:text>frequency: 10, |
|
1589 </xsl:text> |
|
1590 <xsl:call-template name="defs_by_labels"> |
1678 <xsl:call-template name="defs_by_labels"> |
1591 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
1679 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
1592 <xsl:with-param name="labels"> |
1680 <xsl:with-param name="labels"> |
1593 <xsl:text>path</xsl:text> |
1681 <xsl:text>path</xsl:text> |
1594 </xsl:with-param> |
1682 </xsl:with-param> |
1598 <xsl:with-param name="labels"> |
1686 <xsl:with-param name="labels"> |
1599 <xsl:text>value min max</xsl:text> |
1687 <xsl:text>value min max</xsl:text> |
1600 </xsl:with-param> |
1688 </xsl:with-param> |
1601 <xsl:with-param name="mandatory" select="'no'"/> |
1689 <xsl:with-param name="mandatory" select="'no'"/> |
1602 </xsl:call-template> |
1690 </xsl:call-template> |
1603 <xsl:text>dispatch: function(value) { |
1691 <xsl:text> |
1604 </xsl:text> |
|
1605 <xsl:text> if(this.value_elt) |
|
1606 </xsl:text> |
|
1607 <xsl:text> this.value_elt.textContent = String(value); |
|
1608 </xsl:text> |
|
1609 <xsl:text> let [min,max,start,end] = this.range; |
|
1610 </xsl:text> |
|
1611 <xsl:text> let [cx,cy] = this.center; |
|
1612 </xsl:text> |
|
1613 <xsl:text> let [rx,ry] = this.proportions; |
|
1614 </xsl:text> |
|
1615 <xsl:text> let tip = start + (end-start)*Number(value)/(max-min); |
|
1616 </xsl:text> |
|
1617 <xsl:text> let size = 0; |
|
1618 </xsl:text> |
|
1619 <xsl:text> if (tip-start > Math.PI) { |
|
1620 </xsl:text> |
|
1621 <xsl:text> size = 1; |
|
1622 </xsl:text> |
|
1623 <xsl:text> } else { |
|
1624 </xsl:text> |
|
1625 <xsl:text> size = 0; |
|
1626 </xsl:text> |
|
1627 <xsl:text> } |
|
1628 </xsl:text> |
|
1629 <xsl:text> this.path_elt.setAttribute('d', "M "+(cx+rx*Math.cos(start))+","+(cy+ry*Math.sin(start))+" A "+rx+","+ry+" 0 "+size+" 1 "+(cx+rx*Math.cos(tip))+","+(cy+ry*Math.sin(tip))); |
|
1630 </xsl:text> |
|
1631 <xsl:text>}, |
|
1632 </xsl:text> |
|
1633 <xsl:text>range: undefined, |
|
1634 </xsl:text> |
|
1635 <xsl:text>init: function() { |
|
1636 </xsl:text> |
|
1637 <xsl:text> let start = Number(this.path_elt.getAttribute('sodipodi:start')); |
|
1638 </xsl:text> |
|
1639 <xsl:text> let end = Number(this.path_elt.getAttribute('sodipodi:end')); |
|
1640 </xsl:text> |
|
1641 <xsl:text> let cx = Number(this.path_elt.getAttribute('sodipodi:cx')); |
|
1642 </xsl:text> |
|
1643 <xsl:text> let cy = Number(this.path_elt.getAttribute('sodipodi:cy')); |
|
1644 </xsl:text> |
|
1645 <xsl:text> let rx = Number(this.path_elt.getAttribute('sodipodi:rx')); |
|
1646 </xsl:text> |
|
1647 <xsl:text> let ry = Number(this.path_elt.getAttribute('sodipodi:ry')); |
|
1648 </xsl:text> |
|
1649 <xsl:text> if (ry == 0) { |
|
1650 </xsl:text> |
|
1651 <xsl:text> ry = rx; |
|
1652 </xsl:text> |
|
1653 <xsl:text> } |
|
1654 </xsl:text> |
|
1655 <xsl:text> if (start > end) { |
|
1656 </xsl:text> |
|
1657 <xsl:text> end = end + 2*Math.PI; |
|
1658 </xsl:text> |
|
1659 <xsl:text> } |
|
1660 </xsl:text> |
|
1661 <xsl:text> let min = this.min_elt ? |
|
1662 </xsl:text> |
|
1663 <xsl:text> Number(this.min_elt.textContent) : |
|
1664 </xsl:text> |
|
1665 <xsl:text> this.args.length >= 1 ? this.args[0] : 0; |
|
1666 </xsl:text> |
|
1667 <xsl:text> let max = this.max_elt ? |
|
1668 </xsl:text> |
|
1669 <xsl:text> Number(this.max_elt.textContent) : |
|
1670 </xsl:text> |
|
1671 <xsl:text> this.args.length >= 2 ? this.args[1] : 100; |
|
1672 </xsl:text> |
|
1673 <xsl:text> this.range = [min, max, start, end]; |
|
1674 </xsl:text> |
|
1675 <xsl:text> this.center = [cx, cy]; |
|
1676 </xsl:text> |
|
1677 <xsl:text> this.proportions = [rx, ry]; |
|
1678 </xsl:text> |
|
1679 <xsl:text>}, |
|
1680 </xsl:text> |
1692 </xsl:text> |
1681 </xsl:template> |
1693 </xsl:template> |
1682 <xsl:template mode="widget_class" match="widget[@type='CircularSlider']"> |
1694 <xsl:template mode="widget_class" match="widget[@type='CircularSlider']"> |
1683 <xsl:text>class CircularSliderWidget extends Widget{ |
1695 <xsl:text>class CircularSliderWidget extends Widget{ |
1684 </xsl:text> |
1696 </xsl:text> |
1688 </xsl:text> |
1700 </xsl:text> |
1689 <xsl:text> circle = undefined; |
1701 <xsl:text> circle = undefined; |
1690 </xsl:text> |
1702 </xsl:text> |
1691 <xsl:text> handle_pos = undefined; |
1703 <xsl:text> handle_pos = undefined; |
1692 </xsl:text> |
1704 </xsl:text> |
|
1705 <xsl:text> svg_dist = undefined; |
|
1706 </xsl:text> |
1693 <xsl:text> drag = false; |
1707 <xsl:text> drag = false; |
1694 </xsl:text> |
1708 </xsl:text> |
1695 <xsl:text> enTimer = false; |
1709 <xsl:text> enTimer = false; |
1696 </xsl:text> |
1710 </xsl:text> |
|
1711 <xsl:text> last_drag = false; |
|
1712 </xsl:text> |
1697 <xsl:text> |
1713 <xsl:text> |
1698 </xsl:text> |
1714 </xsl:text> |
1699 <xsl:text> dispatch(value) { |
1715 <xsl:text> dispatch(value) { |
1700 </xsl:text> |
1716 </xsl:text> |
1701 <xsl:text> if(!this.drag){ |
1717 <xsl:text> if(this.value_elt) |
1702 </xsl:text> |
1718 </xsl:text> |
1703 <xsl:text> if(this.value_elt) |
1719 <xsl:text> this.value_elt.textContent = String(value); |
1704 </xsl:text> |
1720 </xsl:text> |
1705 <xsl:text> this.value_elt.textContent = String(value); |
1721 <xsl:text> |
1706 </xsl:text> |
1722 </xsl:text> |
1707 <xsl:text> |
1723 <xsl:text> this.update_DOM(value, this.handle_elt); |
1708 </xsl:text> |
1724 </xsl:text> |
1709 <xsl:text> this.handle_position(value); |
1725 <xsl:text> } |
|
1726 </xsl:text> |
|
1727 <xsl:text> |
|
1728 </xsl:text> |
|
1729 <xsl:text> update_DOM(value, elt){ |
|
1730 </xsl:text> |
|
1731 <xsl:text> let [min,max,totalDistance] = this.range; |
|
1732 </xsl:text> |
|
1733 <xsl:text> let length = Math.max(0,Math.min((totalDistance),(Number(value)-min)/(max-min)*(totalDistance))); |
|
1734 </xsl:text> |
|
1735 <xsl:text> let tip = this.range_elt.getPointAtLength(length); |
|
1736 </xsl:text> |
|
1737 <xsl:text> elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")"); |
|
1738 </xsl:text> |
|
1739 <xsl:text> |
|
1740 </xsl:text> |
|
1741 <xsl:text> if(this.setpoint_elt != undefined){ |
|
1742 </xsl:text> |
|
1743 <xsl:text> if(this.last_drag!= this.drag){ |
|
1744 </xsl:text> |
|
1745 <xsl:text> if(this.drag){ |
|
1746 </xsl:text> |
|
1747 <xsl:text> this.setpoint_elt.setAttribute("style", this.setpoint_style); |
|
1748 </xsl:text> |
|
1749 <xsl:text> }else{ |
|
1750 </xsl:text> |
|
1751 <xsl:text> this.setpoint_elt.setAttribute("style", "display:none"); |
|
1752 </xsl:text> |
|
1753 <xsl:text> } |
|
1754 </xsl:text> |
|
1755 <xsl:text> this.last_drag = this.drag; |
|
1756 </xsl:text> |
|
1757 <xsl:text> } |
1710 </xsl:text> |
1758 </xsl:text> |
1711 <xsl:text> } |
1759 <xsl:text> } |
1712 </xsl:text> |
1760 </xsl:text> |
1713 <xsl:text> } |
1761 <xsl:text> } |
1714 </xsl:text> |
1762 </xsl:text> |
1715 <xsl:text> |
1763 <xsl:text> |
1716 </xsl:text> |
1764 </xsl:text> |
1717 <xsl:text> handle_position(value){ |
|
1718 </xsl:text> |
|
1719 <xsl:text> let [min,max,totalDistance] = this.range; |
|
1720 </xsl:text> |
|
1721 <xsl:text> let length = Math.max(0,Math.min((totalDistance),(Number(value)-min)/(max-min)*(totalDistance))); |
|
1722 </xsl:text> |
|
1723 <xsl:text> let tip = this.range_elt.getPointAtLength(length); |
|
1724 </xsl:text> |
|
1725 <xsl:text> this.handle_elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")"); |
|
1726 </xsl:text> |
|
1727 <xsl:text> } |
|
1728 </xsl:text> |
|
1729 <xsl:text> |
|
1730 </xsl:text> |
|
1731 <xsl:text> on_release(evt) { |
1765 <xsl:text> on_release(evt) { |
1732 </xsl:text> |
1766 </xsl:text> |
|
1767 <xsl:text> window.removeEventListener("touchmove", this.on_bound_drag, true); |
|
1768 </xsl:text> |
|
1769 <xsl:text> window.removeEventListener("mousemove", this.on_bound_drag, true); |
|
1770 </xsl:text> |
|
1771 <xsl:text> |
|
1772 </xsl:text> |
|
1773 <xsl:text> window.removeEventListener("mouseup", this.bound_on_release, true) |
|
1774 </xsl:text> |
|
1775 <xsl:text> window.removeEventListener("touchend", this.bound_on_release, true); |
|
1776 </xsl:text> |
|
1777 <xsl:text> window.removeEventListener("touchcancel", this.bound_on_release, true); |
|
1778 </xsl:text> |
1733 <xsl:text> if(this.drag){ |
1779 <xsl:text> if(this.drag){ |
1734 </xsl:text> |
1780 </xsl:text> |
1735 <xsl:text> this.drag = false; |
1781 <xsl:text> this.drag = false; |
1736 </xsl:text> |
1782 </xsl:text> |
1737 <xsl:text> } |
1783 <xsl:text> } |
1738 </xsl:text> |
1784 </xsl:text> |
|
1785 <xsl:text> this.update_position(evt); |
|
1786 </xsl:text> |
|
1787 <xsl:text> } |
|
1788 </xsl:text> |
|
1789 <xsl:text> |
|
1790 </xsl:text> |
|
1791 <xsl:text> on_drag(evt){ |
|
1792 </xsl:text> |
|
1793 <xsl:text> if(this.enTimer && this.drag){ |
|
1794 </xsl:text> |
|
1795 <xsl:text> this.update_position(evt); |
|
1796 </xsl:text> |
|
1797 <xsl:text> //reset timer |
|
1798 </xsl:text> |
|
1799 <xsl:text> this.enTimer = false; |
|
1800 </xsl:text> |
|
1801 <xsl:text> setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); |
|
1802 </xsl:text> |
|
1803 <xsl:text> } |
|
1804 </xsl:text> |
1739 <xsl:text> } |
1805 <xsl:text> } |
1740 </xsl:text> |
1806 </xsl:text> |
1741 <xsl:text> |
1807 <xsl:text> |
1742 </xsl:text> |
1808 </xsl:text> |
1743 <xsl:text> update_position(evt){ |
1809 <xsl:text> update_position(evt){ |
1826 </xsl:text> |
1892 </xsl:text> |
1827 <xsl:text> //get handle distance from mouse position |
1893 <xsl:text> //get handle distance from mouse position |
1828 </xsl:text> |
1894 </xsl:text> |
1829 <xsl:text> if(fi<fiEnd){ |
1895 <xsl:text> if(fi<fiEnd){ |
1830 </xsl:text> |
1896 </xsl:text> |
1831 <xsl:text> svg_dist=(fi)/(fiEnd)*(this.range[1]-this.range[0]); |
1897 <xsl:text> this.svg_dist=(fi)/(fiEnd)*(this.range[1]-this.range[0]); |
1832 </xsl:text> |
1898 </xsl:text> |
1833 <xsl:text> } |
1899 <xsl:text> } |
1834 </xsl:text> |
1900 </xsl:text> |
1835 <xsl:text> else if(fiEnd<fi && fi<fiEnd+minMax){ |
1901 <xsl:text> else if(fiEnd<fi && fi<fiEnd+minMax){ |
1836 </xsl:text> |
1902 </xsl:text> |
1837 <xsl:text> svg_dist = this.range[1]; |
1903 <xsl:text> this.svg_dist = this.range[1]; |
1838 </xsl:text> |
1904 </xsl:text> |
1839 <xsl:text> } |
1905 <xsl:text> } |
1840 </xsl:text> |
1906 </xsl:text> |
1841 <xsl:text> else{ |
1907 <xsl:text> else{ |
1842 </xsl:text> |
1908 </xsl:text> |
1843 <xsl:text> svg_dist = this.range[0]; |
1909 <xsl:text> this.svg_dist = this.range[0]; |
1844 </xsl:text> |
1910 </xsl:text> |
1845 <xsl:text> } |
1911 <xsl:text> } |
1846 </xsl:text> |
1912 </xsl:text> |
1847 <xsl:text> |
1913 <xsl:text> |
1848 </xsl:text> |
1914 </xsl:text> |
1849 <xsl:text> //redraw handle --TODO is it fast enough if I just call change_hmi_value??? |
1915 <xsl:text> |
1850 </xsl:text> |
1916 </xsl:text> |
1851 <xsl:text> this.handle_position(svg_dist); |
1917 <xsl:text> this.apply_hmi_value(0, Math.ceil(this.svg_dist)); |
1852 </xsl:text> |
1918 </xsl:text> |
1853 <xsl:text> if(this.value_elt) |
1919 <xsl:text> |
1854 </xsl:text> |
1920 </xsl:text> |
1855 <xsl:text> this.value_elt.textContent = String(Math.ceil(svg_dist)); |
1921 <xsl:text> // update ghost cursor |
1856 </xsl:text> |
1922 </xsl:text> |
1857 <xsl:text> this.apply_hmi_value(0, Math.ceil(svg_dist)); |
1923 <xsl:text> if(this.setpoint_elt != undefined){ |
1858 </xsl:text> |
1924 </xsl:text> |
1859 <xsl:text> |
1925 <xsl:text> this.request_animate(); |
1860 </xsl:text> |
1926 </xsl:text> |
1861 <xsl:text> //reset timer |
1927 <xsl:text> } |
1862 </xsl:text> |
|
1863 <xsl:text> this.enTimer = false; |
|
1864 </xsl:text> |
|
1865 <xsl:text> setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); |
|
1866 </xsl:text> |
1928 </xsl:text> |
1867 <xsl:text> } |
1929 <xsl:text> } |
1868 </xsl:text> |
1930 </xsl:text> |
1869 <xsl:text> |
1931 <xsl:text> |
1870 </xsl:text> |
1932 </xsl:text> |
1871 <xsl:text> } |
1933 <xsl:text> } |
1872 </xsl:text> |
1934 </xsl:text> |
1873 <xsl:text> |
1935 <xsl:text> |
1874 </xsl:text> |
1936 </xsl:text> |
|
1937 <xsl:text> animate(){ |
|
1938 </xsl:text> |
|
1939 <xsl:text> this.update_DOM(this.svg_dist, this.setpoint_elt); |
|
1940 </xsl:text> |
|
1941 <xsl:text> } |
|
1942 </xsl:text> |
|
1943 <xsl:text> |
|
1944 </xsl:text> |
1875 <xsl:text> on_select(evt){ |
1945 <xsl:text> on_select(evt){ |
1876 </xsl:text> |
1946 </xsl:text> |
1877 <xsl:text> this.drag = true; |
1947 <xsl:text> this.drag = true; |
1878 </xsl:text> |
1948 </xsl:text> |
1879 <xsl:text> this.enTimer = true; |
1949 <xsl:text> this.enTimer = true; |
1880 </xsl:text> |
1950 </xsl:text> |
|
1951 <xsl:text> window.addEventListener("touchmove", this.on_bound_drag, true); |
|
1952 </xsl:text> |
|
1953 <xsl:text> window.addEventListener("mousemove", this.on_bound_drag, true); |
|
1954 </xsl:text> |
|
1955 <xsl:text> |
|
1956 </xsl:text> |
|
1957 <xsl:text> window.addEventListener("mouseup", this.bound_on_release, true) |
|
1958 </xsl:text> |
|
1959 <xsl:text> window.addEventListener("touchend", this.bound_on_release, true); |
|
1960 </xsl:text> |
|
1961 <xsl:text> window.addEventListener("touchcancel", this.bound_on_release, true); |
|
1962 </xsl:text> |
1881 <xsl:text> this.update_position(evt); |
1963 <xsl:text> this.update_position(evt); |
1882 </xsl:text> |
1964 </xsl:text> |
1883 <xsl:text> } |
1965 <xsl:text> } |
1884 </xsl:text> |
1966 </xsl:text> |
1885 <xsl:text> |
1967 <xsl:text> |
1944 </xsl:text> |
2026 </xsl:text> |
1945 <xsl:text> this.circle = [cX, cY,fiStart,fiEnd,minMax,cPos.x,cPos.y,cPos.width,cPos.height]; |
2027 <xsl:text> this.circle = [cX, cY,fiStart,fiEnd,minMax,cPos.x,cPos.y,cPos.width,cPos.height]; |
1946 </xsl:text> |
2028 </xsl:text> |
1947 <xsl:text> |
2029 <xsl:text> |
1948 </xsl:text> |
2030 </xsl:text> |
|
2031 <xsl:text> //bind functions |
|
2032 </xsl:text> |
|
2033 <xsl:text> this.bound_on_select = this.on_select.bind(this); |
|
2034 </xsl:text> |
|
2035 <xsl:text> this.bound_on_release = this.on_release.bind(this); |
|
2036 </xsl:text> |
|
2037 <xsl:text> this.on_bound_drag = this.on_drag.bind(this); |
|
2038 </xsl:text> |
|
2039 <xsl:text> |
|
2040 </xsl:text> |
1949 <xsl:text> //init events |
2041 <xsl:text> //init events |
1950 </xsl:text> |
2042 </xsl:text> |
1951 <xsl:text> this.handle_elt.addEventListener("touchstart", hmi_widgets[this.element_id].on_select.bind(this)); |
2043 <xsl:text> this.element.addEventListener("mousedown", this.bound_on_select); |
1952 </xsl:text> |
2044 </xsl:text> |
1953 <xsl:text> this.handle_elt.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this)); |
2045 <xsl:text> this.element.addEventListener("touchstart", this.bound_on_select); |
1954 </xsl:text> |
2046 </xsl:text> |
1955 <xsl:text> this.element.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this)); |
2047 <xsl:text> |
|
2048 </xsl:text> |
|
2049 <xsl:text> if(this.setpoint_elt != undefined){ |
|
2050 </xsl:text> |
|
2051 <xsl:text> this.setpoint_style = this.setpoint_elt.getAttribute("style"); |
|
2052 </xsl:text> |
|
2053 <xsl:text> this.setpoint_elt.setAttribute("style", "display:none"); |
|
2054 </xsl:text> |
|
2055 <xsl:text> } |
|
2056 </xsl:text> |
|
2057 <xsl:text> |
1956 </xsl:text> |
2058 </xsl:text> |
1957 <xsl:text> |
2059 <xsl:text> |
1958 </xsl:text> |
2060 </xsl:text> |
1959 <xsl:text> window.addEventListener("touchmove", hmi_widgets[this.element_id].update_position.bind(this)); |
2061 <xsl:text> window.addEventListener("touchmove", hmi_widgets[this.element_id].update_position.bind(this)); |
1960 </xsl:text> |
2062 </xsl:text> |
3971 <xsl:template mode="widget_class" match="widget[@type='Keypad']"> |
4073 <xsl:template mode="widget_class" match="widget[@type='Keypad']"> |
3972 <xsl:text>class KeypadWidget extends Widget{ |
4074 <xsl:text>class KeypadWidget extends Widget{ |
3973 </xsl:text> |
4075 </xsl:text> |
3974 <xsl:text> moving = undefined; |
4076 <xsl:text> moving = undefined; |
3975 </xsl:text> |
4077 </xsl:text> |
3976 <xsl:text> enTimer = undefined; |
4078 <xsl:text> click = undefined; |
3977 </xsl:text> |
4079 </xsl:text> |
3978 <xsl:text> offset = undefined; |
4080 <xsl:text> offset = undefined; |
3979 </xsl:text> |
4081 </xsl:text> |
3980 <xsl:text> |
4082 <xsl:text> |
3981 </xsl:text> |
4083 </xsl:text> |
3982 <xsl:text> on_position_click(evt) { |
4084 <xsl:text> on_position_click(evt) { |
3983 </xsl:text> |
4085 </xsl:text> |
3984 <xsl:text> this.moving = true; |
4086 <xsl:text> this.moving = true; |
3985 </xsl:text> |
4087 </xsl:text> |
3986 <xsl:text> this.enTimer = true; |
4088 <xsl:text> |
|
4089 </xsl:text> |
|
4090 <xsl:text> // chatch window events |
|
4091 </xsl:text> |
|
4092 <xsl:text> window.addEventListener("touchmove", this.bound_on_drag, true); |
|
4093 </xsl:text> |
|
4094 <xsl:text> window.addEventListener("mousemove", this.bound_on_drag, true); |
|
4095 </xsl:text> |
|
4096 <xsl:text> |
|
4097 </xsl:text> |
|
4098 <xsl:text> window.addEventListener("mouseup", this.bound_on_release, true) |
|
4099 </xsl:text> |
|
4100 <xsl:text> window.addEventListener("touchend", this.bound_on_release, true); |
|
4101 </xsl:text> |
|
4102 <xsl:text> window.addEventListener("touchcancel", this.bound_on_release, true); |
3987 </xsl:text> |
4103 </xsl:text> |
3988 <xsl:text> |
4104 <xsl:text> |
3989 </xsl:text> |
4105 </xsl:text> |
3990 <xsl:text> // get click position offset from widget x,y and save it to variable |
4106 <xsl:text> // get click position offset from widget x,y and save it to variable |
3991 </xsl:text> |
4107 </xsl:text> |
4015 </xsl:text> |
4131 </xsl:text> |
4016 <xsl:text> } |
4132 <xsl:text> } |
4017 </xsl:text> |
4133 </xsl:text> |
4018 <xsl:text> |
4134 <xsl:text> |
4019 </xsl:text> |
4135 </xsl:text> |
4020 <xsl:text> off_position_click(evt) { |
4136 <xsl:text> on_release(evt) { |
|
4137 </xsl:text> |
|
4138 <xsl:text> //relase binds |
|
4139 </xsl:text> |
|
4140 <xsl:text> window.removeEventListener("touchmove", this.bound_on_drag, true); |
|
4141 </xsl:text> |
|
4142 <xsl:text> window.removeEventListener("mousemove", this.bound_on_drag, true); |
|
4143 </xsl:text> |
|
4144 <xsl:text> |
|
4145 </xsl:text> |
|
4146 <xsl:text> window.removeEventListener("mouseup", this.bound_on_release, true) |
|
4147 </xsl:text> |
|
4148 <xsl:text> window.removeEventListener("touchend", this.bound_on_release, true); |
|
4149 </xsl:text> |
|
4150 <xsl:text> window.removeEventListener("touchcancel", this.bound_on_release, true); |
|
4151 </xsl:text> |
|
4152 <xsl:text> |
4021 </xsl:text> |
4153 </xsl:text> |
4022 <xsl:text> if(this.moving) |
4154 <xsl:text> if(this.moving) |
4023 </xsl:text> |
4155 </xsl:text> |
4024 <xsl:text> this.moving = false; |
4156 <xsl:text> this.moving = false; |
4025 </xsl:text> |
4157 </xsl:text> |
4026 <xsl:text> } |
4158 <xsl:text> } |
4027 </xsl:text> |
4159 </xsl:text> |
4028 <xsl:text> |
4160 <xsl:text> |
4029 </xsl:text> |
4161 </xsl:text> |
4030 <xsl:text> on_move(evt) { |
4162 <xsl:text> on_drag(evt) { |
4031 </xsl:text> |
4163 </xsl:text> |
4032 <xsl:text> if(this.moving && this.enTimer){ |
4164 <xsl:text> if(this.moving) |
4033 </xsl:text> |
4165 </xsl:text> |
4034 <xsl:text> //get keyboard pos in html |
4166 <xsl:text> //get mouse coordinates |
4035 </xsl:text> |
4167 </xsl:text> |
4036 <xsl:text> let [eltid, tmpgrp] = current_modal; |
4168 <xsl:text> var clickX = undefined; |
4037 </xsl:text> |
4169 </xsl:text> |
4038 <xsl:text> let [xcoord,ycoord] = this.coordinates; |
4170 <xsl:text> var clickY = undefined; |
4039 </xsl:text> |
4171 </xsl:text> |
4040 <xsl:text> let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox; |
4172 <xsl:text> if (evt.type == "touchmove"){ |
4041 </xsl:text> |
4173 </xsl:text> |
4042 <xsl:text> |
4174 <xsl:text> clickX = Math.ceil(evt.touches[0].clientX); |
4043 </xsl:text> |
4175 </xsl:text> |
4044 <xsl:text> //get mouse coordinates |
4176 <xsl:text> clickY = Math.ceil(evt.touches[0].clientY); |
4045 </xsl:text> |
4177 </xsl:text> |
4046 <xsl:text> var clickX = undefined; |
4178 <xsl:text> } |
4047 </xsl:text> |
4179 </xsl:text> |
4048 <xsl:text> var clickY = undefined; |
4180 <xsl:text> else{ |
4049 </xsl:text> |
4181 </xsl:text> |
4050 <xsl:text> if (evt.type == "touchmove"){ |
4182 <xsl:text> clickX = evt.pageX; |
4051 </xsl:text> |
4183 </xsl:text> |
4052 <xsl:text> clickX = Math.ceil(evt.touches[0].clientX); |
4184 <xsl:text> clickY = evt.pageY; |
4053 </xsl:text> |
4185 </xsl:text> |
4054 <xsl:text> clickY = Math.ceil(evt.touches[0].clientY); |
4186 <xsl:text> } |
4055 </xsl:text> |
4187 </xsl:text> |
4056 <xsl:text> } |
4188 <xsl:text> this.click = [clickX,clickY] |
4057 </xsl:text> |
4189 </xsl:text> |
4058 <xsl:text> else{ |
4190 <xsl:text> |
4059 </xsl:text> |
4191 </xsl:text> |
4060 <xsl:text> clickX = evt.pageX; |
4192 <xsl:text> //requeset redraw |
4061 </xsl:text> |
4193 </xsl:text> |
4062 <xsl:text> clickY = evt.pageY; |
4194 <xsl:text> this.request_animate(); |
4063 </xsl:text> |
4195 </xsl:text> |
4064 <xsl:text> } |
4196 <xsl:text> } |
4065 </xsl:text> |
4197 </xsl:text> |
4066 <xsl:text> |
4198 <xsl:text> |
4067 </xsl:text> |
4199 </xsl:text> |
4068 <xsl:text> //translate keyboard position |
4200 <xsl:text> animate(){ |
4069 </xsl:text> |
4201 </xsl:text> |
4070 <xsl:text> let mouseX = ((clickX-this.offset[0])/window.innerWidth)*svgWidth; |
4202 <xsl:text> //get keyboard pos in html |
4071 </xsl:text> |
4203 </xsl:text> |
4072 <xsl:text> let mouseY = ((clickY-this.offset[1])/window.innerHeight)*svgHeight; |
4204 <xsl:text> let [eltid, tmpgrp] = current_modal; |
4073 </xsl:text> |
4205 </xsl:text> |
4074 <xsl:text> tmpgrp.setAttribute("transform","translate("+String(xdest-xcoord+mouseX)+","+String(ydest-ycoord+mouseY)+")"); |
4206 <xsl:text> let [xcoord,ycoord] = this.coordinates; |
4075 </xsl:text> |
4207 </xsl:text> |
4076 <xsl:text> |
4208 <xsl:text> let [clickX,clickY] = this.click; |
4077 </xsl:text> |
4209 </xsl:text> |
4078 <xsl:text> //reset timer |
4210 <xsl:text> let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox; |
4079 </xsl:text> |
4211 </xsl:text> |
4080 <xsl:text> this.enTimer = false; |
4212 <xsl:text> |
4081 </xsl:text> |
4213 </xsl:text> |
4082 <xsl:text> setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); |
4214 <xsl:text> //translate keyboard position |
4083 </xsl:text> |
4215 </xsl:text> |
4084 <xsl:text> } |
4216 <xsl:text> let mouseX = ((clickX-this.offset[0])/window.innerWidth)*svgWidth; |
4085 </xsl:text> |
4217 </xsl:text> |
4086 <xsl:text> |
4218 <xsl:text> let mouseY = ((clickY-this.offset[1])/window.innerHeight)*svgHeight; |
|
4219 </xsl:text> |
|
4220 <xsl:text> tmpgrp.setAttribute("transform","translate("+String(xdest-xcoord+mouseX)+","+String(ydest-ycoord+mouseY)+")"); |
4087 </xsl:text> |
4221 </xsl:text> |
4088 <xsl:text> } |
4222 <xsl:text> } |
4089 </xsl:text> |
4223 </xsl:text> |
4090 <xsl:text> |
4224 <xsl:text> |
4091 </xsl:text> |
4225 </xsl:text> |
4327 <xsl:text>_click()"); |
4461 <xsl:text>_click()"); |
4328 </xsl:text> |
4462 </xsl:text> |
4329 </xsl:for-each> |
4463 </xsl:for-each> |
4330 <xsl:text> if(this.position_elt){ |
4464 <xsl:text> if(this.position_elt){ |
4331 </xsl:text> |
4465 </xsl:text> |
|
4466 <xsl:text> this.bound_on_release = this.on_release.bind(this); |
|
4467 </xsl:text> |
|
4468 <xsl:text> this.bound_on_drag = this.on_drag.bind(this); |
|
4469 </xsl:text> |
|
4470 <xsl:text> |
|
4471 </xsl:text> |
4332 <xsl:text> this.position_elt.setAttribute("onmousedown", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)"); |
4472 <xsl:text> this.position_elt.setAttribute("onmousedown", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)"); |
4333 </xsl:text> |
4473 </xsl:text> |
4334 <xsl:text> this.position_elt.setAttribute("ontouchstart", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)"); |
4474 <xsl:text> this.position_elt.setAttribute("ontouchstart", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)"); |
4335 </xsl:text> |
|
4336 <xsl:text> window.addEventListener("mouseup", hmi_widgets[this.element_id].off_position_click.bind(this)); |
|
4337 </xsl:text> |
|
4338 <xsl:text> window.addEventListener("touchend", hmi_widgets[this.element_id].off_position_click.bind(this)); |
|
4339 </xsl:text> |
|
4340 <xsl:text> window.addEventListener("touchcancel", hmi_widgets[this.element_id].off_position_click.bind(this)); |
|
4341 </xsl:text> |
|
4342 <xsl:text> window.addEventListener("mousemove", hmi_widgets[this.element_id].on_move.bind(this)); |
|
4343 </xsl:text> |
|
4344 <xsl:text> window.addEventListener("touchmove", hmi_widgets[this.element_id].on_move.bind(this)); |
|
4345 </xsl:text> |
4475 </xsl:text> |
4346 <xsl:text> } |
4476 <xsl:text> } |
4347 </xsl:text> |
4477 </xsl:text> |
4348 <xsl:text> }, |
4478 <xsl:text> }, |
4349 </xsl:text> |
4479 </xsl:text> |
4386 </xsl:text> |
4516 </xsl:text> |
4387 </xsl:for-each> |
4517 </xsl:for-each> |
4388 <xsl:text> }, |
4518 <xsl:text> }, |
4389 </xsl:text> |
4519 </xsl:text> |
4390 </xsl:template> |
4520 </xsl:template> |
|
4521 <xsl:template mode="widget_class" match="widget[@type='Meter']"> |
|
4522 <xsl:text>class MeterWidget extends Widget{ |
|
4523 </xsl:text> |
|
4524 <xsl:text> frequency = 10; |
|
4525 </xsl:text> |
|
4526 <xsl:text> origin = undefined; |
|
4527 </xsl:text> |
|
4528 <xsl:text> range = undefined; |
|
4529 </xsl:text> |
|
4530 <xsl:text> |
|
4531 </xsl:text> |
|
4532 <xsl:text> dispatch(value) { |
|
4533 </xsl:text> |
|
4534 <xsl:text> if(this.value_elt) |
|
4535 </xsl:text> |
|
4536 <xsl:text> this.value_elt.textContent = String(value); |
|
4537 </xsl:text> |
|
4538 <xsl:text> let [min,max,totallength] = this.range; |
|
4539 </xsl:text> |
|
4540 <xsl:text> let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min))); |
|
4541 </xsl:text> |
|
4542 <xsl:text> let tip = this.range_elt.getPointAtLength(length); |
|
4543 </xsl:text> |
|
4544 <xsl:text> this.needle_elt.setAttribute('d', "M "+this.origin.x+","+this.origin.y+" "+tip.x+","+tip.y); |
|
4545 </xsl:text> |
|
4546 <xsl:text> } |
|
4547 </xsl:text> |
|
4548 <xsl:text> |
|
4549 </xsl:text> |
|
4550 <xsl:text> init() { |
|
4551 </xsl:text> |
|
4552 <xsl:text> let min = this.min_elt ? |
|
4553 </xsl:text> |
|
4554 <xsl:text> Number(this.min_elt.textContent) : |
|
4555 </xsl:text> |
|
4556 <xsl:text> this.args.length >= 1 ? this.args[0] : 0; |
|
4557 </xsl:text> |
|
4558 <xsl:text> let max = this.max_elt ? |
|
4559 </xsl:text> |
|
4560 <xsl:text> Number(this.max_elt.textContent) : |
|
4561 </xsl:text> |
|
4562 <xsl:text> this.args.length >= 2 ? this.args[1] : 100; |
|
4563 </xsl:text> |
|
4564 <xsl:text> this.range = [min, max, this.range_elt.getTotalLength()] |
|
4565 </xsl:text> |
|
4566 <xsl:text> this.origin = this.needle_elt.getPointAtLength(0); |
|
4567 </xsl:text> |
|
4568 <xsl:text> } |
|
4569 </xsl:text> |
|
4570 <xsl:text> |
|
4571 </xsl:text> |
|
4572 <xsl:text>} |
|
4573 </xsl:text> |
|
4574 </xsl:template> |
4391 <xsl:template mode="widget_defs" match="widget[@type='Meter']"> |
4575 <xsl:template mode="widget_defs" match="widget[@type='Meter']"> |
4392 <xsl:param name="hmi_element"/> |
4576 <xsl:param name="hmi_element"/> |
4393 <xsl:text> frequency: 10, |
|
4394 </xsl:text> |
|
4395 <xsl:call-template name="defs_by_labels"> |
4577 <xsl:call-template name="defs_by_labels"> |
4396 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
4578 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
4397 <xsl:with-param name="labels"> |
4579 <xsl:with-param name="labels"> |
4398 <xsl:text>needle range</xsl:text> |
4580 <xsl:text>needle range</xsl:text> |
4399 </xsl:with-param> |
4581 </xsl:with-param> |
4403 <xsl:with-param name="labels"> |
4585 <xsl:with-param name="labels"> |
4404 <xsl:text>value min max</xsl:text> |
4586 <xsl:text>value min max</xsl:text> |
4405 </xsl:with-param> |
4587 </xsl:with-param> |
4406 <xsl:with-param name="mandatory" select="'no'"/> |
4588 <xsl:with-param name="mandatory" select="'no'"/> |
4407 </xsl:call-template> |
4589 </xsl:call-template> |
4408 <xsl:text> dispatch: function(value) { |
4590 <xsl:text> |
4409 </xsl:text> |
|
4410 <xsl:text> if(this.value_elt) |
|
4411 </xsl:text> |
|
4412 <xsl:text> this.value_elt.textContent = String(value); |
|
4413 </xsl:text> |
|
4414 <xsl:text> let [min,max,totallength] = this.range; |
|
4415 </xsl:text> |
|
4416 <xsl:text> let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min))); |
|
4417 </xsl:text> |
|
4418 <xsl:text> let tip = this.range_elt.getPointAtLength(length); |
|
4419 </xsl:text> |
|
4420 <xsl:text> this.needle_elt.setAttribute('d', "M "+this.origin.x+","+this.origin.y+" "+tip.x+","+tip.y); |
|
4421 </xsl:text> |
|
4422 <xsl:text> }, |
|
4423 </xsl:text> |
|
4424 <xsl:text> origin: undefined, |
|
4425 </xsl:text> |
|
4426 <xsl:text> range: undefined, |
|
4427 </xsl:text> |
|
4428 <xsl:text> init: function() { |
|
4429 </xsl:text> |
|
4430 <xsl:text> let min = this.min_elt ? |
|
4431 </xsl:text> |
|
4432 <xsl:text> Number(this.min_elt.textContent) : |
|
4433 </xsl:text> |
|
4434 <xsl:text> this.args.length >= 1 ? this.args[0] : 0; |
|
4435 </xsl:text> |
|
4436 <xsl:text> let max = this.max_elt ? |
|
4437 </xsl:text> |
|
4438 <xsl:text> Number(this.max_elt.textContent) : |
|
4439 </xsl:text> |
|
4440 <xsl:text> this.args.length >= 2 ? this.args[1] : 100; |
|
4441 </xsl:text> |
|
4442 <xsl:text> this.range = [min, max, this.range_elt.getTotalLength()] |
|
4443 </xsl:text> |
|
4444 <xsl:text> this.origin = this.needle_elt.getPointAtLength(0); |
|
4445 </xsl:text> |
|
4446 <xsl:text> }, |
|
4447 </xsl:text> |
4591 </xsl:text> |
4448 </xsl:template> |
4592 </xsl:template> |
4449 <xsl:template mode="widget_class" match="widget[@type='MultiState']"> |
4593 <xsl:template mode="widget_class" match="widget[@type='MultiState']"> |
4450 <xsl:text>class MultiStateWidget extends Widget{ |
4594 <xsl:text>class MultiStateWidget extends Widget{ |
4451 </xsl:text> |
4595 </xsl:text> |