93 </xsl:attribute> |
93 </xsl:attribute> |
94 <xsl:for-each select="@*"> |
94 <xsl:for-each select="@*"> |
95 <xsl:copy/> |
95 <xsl:copy/> |
96 </xsl:for-each> |
96 </xsl:for-each> |
97 </xsl:copy> |
97 </xsl:copy> |
98 <xsl:apply-templates mode="index" select="*[1]"> |
98 <xsl:apply-templates select="*[1]" mode="index"> |
99 <xsl:with-param name="index" select="$index + 1"/> |
99 <xsl:with-param name="index" select="$index + 1"/> |
100 <xsl:with-param name="parentpath"> |
100 <xsl:with-param name="parentpath"> |
101 <xsl:value-of select="$path"/> |
101 <xsl:value-of select="$path"/> |
102 </xsl:with-param> |
102 </xsl:with-param> |
103 </xsl:apply-templates> |
103 </xsl:apply-templates> |
104 </xsl:when> |
104 </xsl:when> |
105 <xsl:otherwise> |
105 <xsl:otherwise> |
106 <xsl:apply-templates mode="index" select="*[1]"> |
106 <xsl:apply-templates select="*[1]" mode="index"> |
107 <xsl:with-param name="index" select="$index"/> |
107 <xsl:with-param name="index" select="$index"/> |
108 <xsl:with-param name="parentpath"> |
108 <xsl:with-param name="parentpath"> |
109 <xsl:value-of select="$path"/> |
109 <xsl:value-of select="$path"/> |
110 </xsl:with-param> |
110 </xsl:with-param> |
111 </xsl:apply-templates> |
111 </xsl:apply-templates> |
112 </xsl:otherwise> |
112 </xsl:otherwise> |
113 </xsl:choose> |
113 </xsl:choose> |
114 </xsl:variable> |
114 </xsl:variable> |
115 <xsl:copy-of select="$content"/> |
115 <xsl:copy-of select="$content"/> |
116 <xsl:apply-templates mode="index" select="following-sibling::*[1]"> |
116 <xsl:apply-templates select="following-sibling::*[1]" mode="index"> |
117 <xsl:with-param name="index" select="$index + count(exsl:node-set($content)/*)"/> |
117 <xsl:with-param name="index" select="$index + count(exsl:node-set($content)/*)"/> |
118 <xsl:with-param name="parentpath"> |
118 <xsl:with-param name="parentpath"> |
119 <xsl:value-of select="$parentpath"/> |
119 <xsl:value-of select="$parentpath"/> |
120 </xsl:with-param> |
120 </xsl:with-param> |
121 </xsl:apply-templates> |
121 </xsl:apply-templates> |
122 </xsl:template> |
122 </xsl:template> |
123 <xsl:template mode="parselabel" match="*"> |
123 <xsl:template match="*" mode="parselabel"> |
124 <xsl:variable name="label" select="@inkscape:label"/> |
124 <xsl:variable name="label" select="@inkscape:label"/> |
125 <xsl:variable name="description" select="substring-after($label,'HMI:')"/> |
125 <xsl:variable name="description" select="substring-after($label,'HMI:')"/> |
126 <xsl:variable name="_args" select="substring-before($description,'@')"/> |
126 <xsl:variable name="_args" select="substring-before($description,'@')"/> |
127 <xsl:variable name="args"> |
127 <xsl:variable name="args"> |
128 <xsl:choose> |
128 <xsl:choose> |
619 </xsl:text> |
619 </xsl:text> |
620 </xsl:for-each> |
620 </xsl:for-each> |
621 <xsl:text> |
621 <xsl:text> |
622 </xsl:text> |
622 </xsl:text> |
623 </xsl:template> |
623 </xsl:template> |
624 <xsl:template mode="inline_svg" match="@* | node()"> |
624 <xsl:template match="@* | node()" mode="inline_svg"> |
625 <xsl:if test="not(@id = $discardable_elements/@id)"> |
625 <xsl:if test="not(@id = $discardable_elements/@id)"> |
626 <xsl:copy> |
626 <xsl:copy> |
627 <xsl:apply-templates mode="inline_svg" select="@* | node()"/> |
627 <xsl:apply-templates select="@* | node()" mode="inline_svg"/> |
628 </xsl:copy> |
628 </xsl:copy> |
629 </xsl:if> |
629 </xsl:if> |
630 </xsl:template> |
630 </xsl:template> |
631 <xsl:template mode="inline_svg" match="svg:svg/@width"/> |
631 <xsl:template match="svg:svg/@width" mode="inline_svg"/> |
632 <xsl:template mode="inline_svg" match="svg:svg/@height"/> |
632 <xsl:template match="svg:svg/@height" mode="inline_svg"/> |
633 <xsl:template xmlns="http://www.w3.org/2000/svg" mode="inline_svg" match="svg:svg"> |
633 <xsl:template xmlns="http://www.w3.org/2000/svg" match="svg:svg" mode="inline_svg"> |
634 <svg> |
634 <svg> |
635 <xsl:attribute name="preserveAspectRatio"> |
635 <xsl:attribute name="preserveAspectRatio"> |
636 <xsl:text>none</xsl:text> |
636 <xsl:text>none</xsl:text> |
637 </xsl:attribute> |
637 </xsl:attribute> |
638 <xsl:attribute name="height"> |
638 <xsl:attribute name="height"> |
639 <xsl:text>100vh</xsl:text> |
639 <xsl:text>100vh</xsl:text> |
640 </xsl:attribute> |
640 </xsl:attribute> |
641 <xsl:attribute name="width"> |
641 <xsl:attribute name="width"> |
642 <xsl:text>100vw</xsl:text> |
642 <xsl:text>100vw</xsl:text> |
643 </xsl:attribute> |
643 </xsl:attribute> |
644 <xsl:apply-templates mode="inline_svg" select="@* | node()"/> |
644 <xsl:apply-templates select="@* | node()" mode="inline_svg"/> |
645 </svg> |
645 </svg> |
646 </xsl:template> |
646 </xsl:template> |
647 <xsl:template mode="inline_svg" match="svg:svg[@viewBox!=concat('0 0 ', @width, ' ', @height)]"> |
647 <xsl:template match="svg:svg[@viewBox!=concat('0 0 ', @width, ' ', @height)]" mode="inline_svg"> |
648 <xsl:message terminate="yes"> |
648 <xsl:message terminate="yes"> |
649 <xsl:text>ViewBox settings other than X=0, Y=0 and Scale=1 are not supported</xsl:text> |
649 <xsl:text>ViewBox settings other than X=0, Y=0 and Scale=1 are not supported</xsl:text> |
650 </xsl:message> |
650 </xsl:message> |
651 </xsl:template> |
651 </xsl:template> |
652 <xsl:template mode="inline_svg" match="sodipodi:namedview[@units!='px' or @inkscape:document-units!='px']"> |
652 <xsl:template match="sodipodi:namedview[@units!='px' or @inkscape:document-units!='px']" mode="inline_svg"> |
653 <xsl:message terminate="yes"> |
653 <xsl:message terminate="yes"> |
654 <xsl:text>All units must be set to "px" in Inkscape's document properties</xsl:text> |
654 <xsl:text>All units must be set to "px" in Inkscape's document properties</xsl:text> |
655 </xsl:message> |
655 </xsl:message> |
656 </xsl:template> |
656 </xsl:template> |
657 <xsl:variable name="hmi_lists_descs" select="$parsed_widgets/widget[@type = 'List']"/> |
657 <xsl:variable name="hmi_lists_descs" select="$parsed_widgets/widget[@type = 'List']"/> |
658 <xsl:variable name="hmi_lists" select="$hmi_elements[@id = $hmi_lists_descs/@id]"/> |
658 <xsl:variable name="hmi_lists" select="$hmi_elements[@id = $hmi_lists_descs/@id]"/> |
659 <xsl:variable name="targets_not_to_unlink" select="$hmi_elements[@id = $hmi_lists/@id]/descendant::svg:*"/> |
659 <xsl:variable name="targets_not_to_unlink" select="$hmi_elements[@id = $hmi_lists/@id]/descendant::svg:*"/> |
660 <xsl:variable name="to_unlink" select="$hmi_elements[not(@id = $hmi_pages/@id)]/descendant-or-self::svg:use"/> |
660 <xsl:variable name="to_unlink" select="$hmi_elements[not(@id = $hmi_pages/@id)]/descendant-or-self::svg:use"/> |
661 <xsl:template xmlns="http://www.w3.org/2000/svg" mode="inline_svg" match="svg:use"> |
661 <xsl:template xmlns="http://www.w3.org/2000/svg" match="svg:use" mode="inline_svg"> |
662 <xsl:variable name="targetid" select="substring-after(@xlink:href,'#')"/> |
662 <xsl:variable name="targetid" select="substring-after(@xlink:href,'#')"/> |
663 <xsl:choose> |
663 <xsl:choose> |
664 <xsl:when test="@id = $to_unlink/@id and not($targetid = $targets_not_to_unlink/@id)"> |
664 <xsl:when test="@id = $to_unlink/@id and not($targetid = $targets_not_to_unlink/@id)"> |
665 <xsl:call-template name="unlink_clone"> |
665 <xsl:call-template name="unlink_clone"> |
666 <xsl:with-param name="targetid" select="$targetid"/> |
666 <xsl:with-param name="targetid" select="$targetid"/> |
667 </xsl:call-template> |
667 </xsl:call-template> |
668 </xsl:when> |
668 </xsl:when> |
669 <xsl:otherwise> |
669 <xsl:otherwise> |
670 <xsl:copy> |
670 <xsl:copy> |
671 <xsl:apply-templates mode="inline_svg" select="@* | node()"/> |
671 <xsl:apply-templates select="@* | node()" mode="inline_svg"/> |
672 </xsl:copy> |
672 </xsl:copy> |
673 </xsl:otherwise> |
673 </xsl:otherwise> |
674 </xsl:choose> |
674 </xsl:choose> |
675 </xsl:template> |
675 </xsl:template> |
676 <xsl:variable name="_excluded_use_attrs"> |
676 <xsl:variable name="_excluded_use_attrs"> |
727 <xsl:text> </xsl:text> |
727 <xsl:text> </xsl:text> |
728 </xsl:if> |
728 </xsl:if> |
729 <xsl:value-of select="$target/@transform"/> |
729 <xsl:value-of select="$target/@transform"/> |
730 </xsl:attribute> |
730 </xsl:attribute> |
731 </xsl:if> |
731 </xsl:if> |
732 <xsl:apply-templates mode="unlink_clone" select="$target/*"> |
732 <xsl:apply-templates select="$target/*" mode="unlink_clone"> |
733 <xsl:with-param name="seed" select="@id"/> |
733 <xsl:with-param name="seed" select="@id"/> |
734 </xsl:apply-templates> |
734 </xsl:apply-templates> |
735 </xsl:when> |
735 </xsl:when> |
736 <xsl:otherwise> |
736 <xsl:otherwise> |
737 <xsl:for-each select="@*[not(local-name() = $excluded_use_attrs/name)]"> |
737 <xsl:for-each select="@*[not(local-name() = $excluded_use_attrs/name)]"> |
738 <xsl:attribute name="{name()}"> |
738 <xsl:attribute name="{name()}"> |
739 <xsl:value-of select="."/> |
739 <xsl:value-of select="."/> |
740 </xsl:attribute> |
740 </xsl:attribute> |
741 </xsl:for-each> |
741 </xsl:for-each> |
742 <xsl:apply-templates mode="unlink_clone" select="$target"> |
742 <xsl:apply-templates select="$target" mode="unlink_clone"> |
743 <xsl:with-param name="seed" select="@id"/> |
743 <xsl:with-param name="seed" select="@id"/> |
744 </xsl:apply-templates> |
744 </xsl:apply-templates> |
745 </xsl:otherwise> |
745 </xsl:otherwise> |
746 </xsl:choose> |
746 </xsl:choose> |
747 </g> |
747 </g> |
748 </xsl:template> |
748 </xsl:template> |
749 <xsl:template xmlns="http://www.w3.org/2000/svg" mode="unlink_clone" match="@id"> |
749 <xsl:template xmlns="http://www.w3.org/2000/svg" match="@id" mode="unlink_clone"> |
750 <xsl:param name="seed"/> |
750 <xsl:param name="seed"/> |
751 <xsl:attribute name="id"> |
751 <xsl:attribute name="id"> |
752 <xsl:value-of select="$seed"/> |
752 <xsl:value-of select="$seed"/> |
753 <xsl:text>_</xsl:text> |
753 <xsl:text>_</xsl:text> |
754 <xsl:value-of select="."/> |
754 <xsl:value-of select="."/> |
755 </xsl:attribute> |
755 </xsl:attribute> |
756 </xsl:template> |
756 </xsl:template> |
757 <xsl:template xmlns="http://www.w3.org/2000/svg" mode="unlink_clone" match="@*"> |
757 <xsl:template xmlns="http://www.w3.org/2000/svg" match="@*" mode="unlink_clone"> |
758 <xsl:copy/> |
758 <xsl:copy/> |
759 </xsl:template> |
759 </xsl:template> |
760 <xsl:template xmlns="http://www.w3.org/2000/svg" mode="unlink_clone" match="svg:*"> |
760 <xsl:template xmlns="http://www.w3.org/2000/svg" match="svg:*" mode="unlink_clone"> |
761 <xsl:param name="seed"/> |
761 <xsl:param name="seed"/> |
762 <xsl:choose> |
762 <xsl:choose> |
763 <xsl:when test="@id = $hmi_elements/@id"> |
763 <xsl:when test="@id = $hmi_elements/@id"> |
764 <use> |
764 <use> |
765 <xsl:attribute name="xlink:href"> |
765 <xsl:attribute name="xlink:href"> |
1255 <xsl:text> } |
1255 <xsl:text> } |
1256 </xsl:text> |
1256 </xsl:text> |
1257 <xsl:text>} |
1257 <xsl:text>} |
1258 </xsl:text> |
1258 </xsl:text> |
1259 </xsl:template> |
1259 </xsl:template> |
1260 <xsl:template mode="widget_defs" match="widget[@type='Button']"> |
1260 <xsl:template match="widget[@type='Button']" mode="widget_class"> |
|
1261 <xsl:text>t{ |
|
1262 </xsl:text> |
|
1263 <xsl:text>5; |
|
1264 </xsl:text> |
|
1265 <xsl:text>0; |
|
1266 </xsl:text> |
|
1267 <xsl:text>d; |
|
1268 </xsl:text> |
|
1269 <xsl:text>d; |
|
1270 </xsl:text> |
|
1271 <xsl:text> |
|
1272 </xsl:text> |
|
1273 <xsl:text> { |
|
1274 </xsl:text> |
|
1275 <xsl:text> { |
|
1276 </xsl:text> |
|
1277 <xsl:text>); |
|
1278 </xsl:text> |
|
1279 <xsl:text>); |
|
1280 </xsl:text> |
|
1281 <xsl:text> } |
|
1282 </xsl:text> |
|
1283 <xsl:text>); |
|
1284 </xsl:text> |
|
1285 <xsl:text> } |
|
1286 </xsl:text> |
|
1287 <xsl:text> |
|
1288 </xsl:text> |
|
1289 <xsl:text> { |
|
1290 </xsl:text> |
|
1291 <xsl:text> { |
|
1292 </xsl:text> |
|
1293 <xsl:text>); |
|
1294 </xsl:text> |
|
1295 <xsl:text>); |
|
1296 </xsl:text> |
|
1297 <xsl:text> } |
|
1298 </xsl:text> |
|
1299 <xsl:text>); |
|
1300 </xsl:text> |
|
1301 <xsl:text> } |
|
1302 </xsl:text> |
|
1303 <xsl:text> |
|
1304 </xsl:text> |
|
1305 <xsl:text> { |
|
1306 </xsl:text> |
|
1307 <xsl:text>d; |
|
1308 </xsl:text> |
|
1309 <xsl:text>d; |
|
1310 </xsl:text> |
|
1311 <xsl:text> |
|
1312 </xsl:text> |
|
1313 <xsl:text> { |
|
1314 </xsl:text> |
|
1315 <xsl:text>); |
|
1316 </xsl:text> |
|
1317 <xsl:text>); |
|
1318 </xsl:text> |
|
1319 <xsl:text> } |
|
1320 </xsl:text> |
|
1321 <xsl:text> |
|
1322 </xsl:text> |
|
1323 <xsl:text>); |
|
1324 </xsl:text> |
|
1325 <xsl:text>); |
|
1326 </xsl:text> |
|
1327 <xsl:text> } |
|
1328 </xsl:text> |
|
1329 <xsl:text> } |
|
1330 </xsl:text> |
|
1331 <xsl:text>|| |
|
1332 </xsl:text> |
|
1333 </xsl:template> |
|
1334 <xsl:template match="widget[@type='Button']" mode="widget_defs"> |
1261 <xsl:param name="hmi_element"/> |
1335 <xsl:param name="hmi_element"/> |
1262 <xsl:call-template name="defs_by_labels"> |
1336 <xsl:call-template name="defs_by_labels"> |
1263 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
1337 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
1264 <xsl:with-param name="labels"> |
1338 <xsl:with-param name="labels"> |
1265 <xsl:text>active inactive</xsl:text> |
1339 <xsl:text>active inactive</xsl:text> |
1266 </xsl:with-param> |
1340 </xsl:with-param> |
1267 <xsl:with-param name="mandatory" select="'no'"/> |
1341 <xsl:with-param name="mandatory" select="'no'"/> |
1268 </xsl:call-template> |
1342 </xsl:call-template> |
1269 <xsl:text>frequency: 5, |
1343 <xsl:text> |
1270 </xsl:text> |
1344 </xsl:text> |
1271 <xsl:text>on_mouse_down: function(evt) { |
1345 </xsl:template> |
1272 </xsl:text> |
1346 <xsl:template match="widget[@type='CircularBar']" mode="widget_defs"> |
1273 <xsl:text> if (this.active_style && this.inactive_style) { |
|
1274 </xsl:text> |
|
1275 <xsl:text> this.active_elt.setAttribute("style", this.active_style); |
|
1276 </xsl:text> |
|
1277 <xsl:text> this.inactive_elt.setAttribute("style", "display:none"); |
|
1278 </xsl:text> |
|
1279 <xsl:text> } |
|
1280 </xsl:text> |
|
1281 <xsl:text> this.apply_hmi_value(0, 1); |
|
1282 </xsl:text> |
|
1283 <xsl:text>}, |
|
1284 </xsl:text> |
|
1285 <xsl:text>on_mouse_up: function(evt) { |
|
1286 </xsl:text> |
|
1287 <xsl:text> if (this.active_style && this.inactive_style) { |
|
1288 </xsl:text> |
|
1289 <xsl:text> this.active_elt.setAttribute("style", "display:none"); |
|
1290 </xsl:text> |
|
1291 <xsl:text> this.inactive_elt.setAttribute("style", this.inactive_style); |
|
1292 </xsl:text> |
|
1293 <xsl:text> } |
|
1294 </xsl:text> |
|
1295 <xsl:text> this.apply_hmi_value(0, 0); |
|
1296 </xsl:text> |
|
1297 <xsl:text>}, |
|
1298 </xsl:text> |
|
1299 <xsl:text>active_style: undefined, |
|
1300 </xsl:text> |
|
1301 <xsl:text>inactive_style: undefined, |
|
1302 </xsl:text> |
|
1303 <xsl:text>init: function() { |
|
1304 </xsl:text> |
|
1305 <xsl:text> this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined; |
|
1306 </xsl:text> |
|
1307 <xsl:text> this.inactive_style = this.inactive_elt ? this.inactive_elt.style.cssText : undefined; |
|
1308 </xsl:text> |
|
1309 <xsl:text> if (this.active_style && this.inactive_style) { |
|
1310 </xsl:text> |
|
1311 <xsl:text> this.active_elt.setAttribute("style", "display:none"); |
|
1312 </xsl:text> |
|
1313 <xsl:text> this.inactive_elt.setAttribute("style", this.inactive_style); |
|
1314 </xsl:text> |
|
1315 <xsl:text> } |
|
1316 </xsl:text> |
|
1317 <xsl:text> this.element.setAttribute("onmousedown", "hmi_widgets['</xsl:text> |
|
1318 <xsl:value-of select="$hmi_element/@id"/> |
|
1319 <xsl:text>'].on_mouse_down(evt)"); |
|
1320 </xsl:text> |
|
1321 <xsl:text> this.element.setAttribute("onmouseup", "hmi_widgets['</xsl:text> |
|
1322 <xsl:value-of select="$hmi_element/@id"/> |
|
1323 <xsl:text>'].on_mouse_up(evt)"); |
|
1324 </xsl:text> |
|
1325 <xsl:text>}, |
|
1326 </xsl:text> |
|
1327 </xsl:template> |
|
1328 <xsl:template mode="widget_defs" match="widget[@type='CircularBar']"> |
|
1329 <xsl:param name="hmi_element"/> |
1347 <xsl:param name="hmi_element"/> |
1330 <xsl:text>frequency: 10, |
1348 <xsl:text>frequency: 10, |
1331 </xsl:text> |
1349 </xsl:text> |
1332 <xsl:call-template name="defs_by_labels"> |
1350 <xsl:call-template name="defs_by_labels"> |
1333 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
1351 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
1419 <xsl:text> this.proportions = [rx, ry]; |
1437 <xsl:text> this.proportions = [rx, ry]; |
1420 </xsl:text> |
1438 </xsl:text> |
1421 <xsl:text>}, |
1439 <xsl:text>}, |
1422 </xsl:text> |
1440 </xsl:text> |
1423 </xsl:template> |
1441 </xsl:template> |
1424 <xsl:template mode="widget_class" match="widget[@type='Display']"> |
1442 <xsl:template match="widget[@type='CircularSlider']" mode="widget_class"> |
|
1443 <xsl:text>class CircularSliderWidget extends Widget{ |
|
1444 </xsl:text> |
|
1445 <xsl:text> frequency = 5; |
|
1446 </xsl:text> |
|
1447 <xsl:text> range = undefined; |
|
1448 </xsl:text> |
|
1449 <xsl:text> circle = undefined; |
|
1450 </xsl:text> |
|
1451 <xsl:text> handle_pos = undefined; |
|
1452 </xsl:text> |
|
1453 <xsl:text> drag = false; |
|
1454 </xsl:text> |
|
1455 <xsl:text> enTimer = false; |
|
1456 </xsl:text> |
|
1457 <xsl:text> |
|
1458 </xsl:text> |
|
1459 <xsl:text> dispatch(value) { |
|
1460 </xsl:text> |
|
1461 <xsl:text> if(!this.drag){ |
|
1462 </xsl:text> |
|
1463 <xsl:text> if(this.value_elt) |
|
1464 </xsl:text> |
|
1465 <xsl:text> this.value_elt.textContent = String(value); |
|
1466 </xsl:text> |
|
1467 <xsl:text> |
|
1468 </xsl:text> |
|
1469 <xsl:text> this.handle_position(value); |
|
1470 </xsl:text> |
|
1471 <xsl:text> } |
|
1472 </xsl:text> |
|
1473 <xsl:text> } |
|
1474 </xsl:text> |
|
1475 <xsl:text> |
|
1476 </xsl:text> |
|
1477 <xsl:text> handle_position(value){ |
|
1478 </xsl:text> |
|
1479 <xsl:text> let [min,max,totalDistance] = this.range; |
|
1480 </xsl:text> |
|
1481 <xsl:text> let length = Math.max(0,Math.min((totalDistance),(Number(value)-min)/(max-min)*(totalDistance))); |
|
1482 </xsl:text> |
|
1483 <xsl:text> let tip = this.range_elt.getPointAtLength(length); |
|
1484 </xsl:text> |
|
1485 <xsl:text> this.handle_elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")"); |
|
1486 </xsl:text> |
|
1487 <xsl:text> } |
|
1488 </xsl:text> |
|
1489 <xsl:text> |
|
1490 </xsl:text> |
|
1491 <xsl:text> on_release(evt) { |
|
1492 </xsl:text> |
|
1493 <xsl:text> if(this.drag){ |
|
1494 </xsl:text> |
|
1495 <xsl:text> this.drag = false; |
|
1496 </xsl:text> |
|
1497 <xsl:text> } |
|
1498 </xsl:text> |
|
1499 <xsl:text> } |
|
1500 </xsl:text> |
|
1501 <xsl:text> |
|
1502 </xsl:text> |
|
1503 <xsl:text> update_position(evt){ |
|
1504 </xsl:text> |
|
1505 <xsl:text> if(this.drag && this.enTimer){ |
|
1506 </xsl:text> |
|
1507 <xsl:text> var svg_dist = 0; |
|
1508 </xsl:text> |
|
1509 <xsl:text> |
|
1510 </xsl:text> |
|
1511 <xsl:text> //calculate center of widget in html |
|
1512 </xsl:text> |
|
1513 <xsl:text> // --TODO maybe it would be better to bind this part to window change size event ??? |
|
1514 </xsl:text> |
|
1515 <xsl:text> let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox; |
|
1516 </xsl:text> |
|
1517 <xsl:text> let [cX, cY,fiStart,fiEnd,minMax,x1,y1,width,height] = this.circle; |
|
1518 </xsl:text> |
|
1519 <xsl:text> let htmlCirc = this.range_elt.getBoundingClientRect(); |
|
1520 </xsl:text> |
|
1521 <xsl:text> let cxHtml = ((htmlCirc.right-htmlCirc.left)/(width)*(cX-x1))+htmlCirc.left; |
|
1522 </xsl:text> |
|
1523 <xsl:text> let cyHtml = ((htmlCirc.bottom-htmlCirc.top)/(height)*(cY-y1))+htmlCirc.top; |
|
1524 </xsl:text> |
|
1525 <xsl:text> |
|
1526 </xsl:text> |
|
1527 <xsl:text> |
|
1528 </xsl:text> |
|
1529 <xsl:text> //get mouse coordinates |
|
1530 </xsl:text> |
|
1531 <xsl:text> let mouseX = undefined; |
|
1532 </xsl:text> |
|
1533 <xsl:text> let mouseY = undefined; |
|
1534 </xsl:text> |
|
1535 <xsl:text> if (evt.type.startsWith("touch")){ |
|
1536 </xsl:text> |
|
1537 <xsl:text> mouseX = Math.ceil(evt.touches[0].clientX); |
|
1538 </xsl:text> |
|
1539 <xsl:text> mouseY = Math.ceil(evt.touches[0].clientY); |
|
1540 </xsl:text> |
|
1541 <xsl:text> } |
|
1542 </xsl:text> |
|
1543 <xsl:text> else{ |
|
1544 </xsl:text> |
|
1545 <xsl:text> mouseX = evt.pageX; |
|
1546 </xsl:text> |
|
1547 <xsl:text> mouseY = evt.pageY; |
|
1548 </xsl:text> |
|
1549 <xsl:text> } |
|
1550 </xsl:text> |
|
1551 <xsl:text> |
|
1552 </xsl:text> |
|
1553 <xsl:text> //calculate angle |
|
1554 </xsl:text> |
|
1555 <xsl:text> let fi = Math.atan2(cyHtml-mouseY, mouseX-cxHtml); |
|
1556 </xsl:text> |
|
1557 <xsl:text> |
|
1558 </xsl:text> |
|
1559 <xsl:text> // transform from 0 to 2PI |
|
1560 </xsl:text> |
|
1561 <xsl:text> if (fi > 0){ |
|
1562 </xsl:text> |
|
1563 <xsl:text> fi = 2*Math.PI-fi; |
|
1564 </xsl:text> |
|
1565 <xsl:text> } |
|
1566 </xsl:text> |
|
1567 <xsl:text> else{ |
|
1568 </xsl:text> |
|
1569 <xsl:text> fi = -fi; |
|
1570 </xsl:text> |
|
1571 <xsl:text> } |
|
1572 </xsl:text> |
|
1573 <xsl:text> |
|
1574 </xsl:text> |
|
1575 <xsl:text> //offset it to 0 |
|
1576 </xsl:text> |
|
1577 <xsl:text> fi = fi - fiStart; |
|
1578 </xsl:text> |
|
1579 <xsl:text> if (fi < 0){ |
|
1580 </xsl:text> |
|
1581 <xsl:text> fi = fi + 2*Math.PI; |
|
1582 </xsl:text> |
|
1583 <xsl:text> } |
|
1584 </xsl:text> |
|
1585 <xsl:text> |
|
1586 </xsl:text> |
|
1587 <xsl:text> //get handle distance from mouse position |
|
1588 </xsl:text> |
|
1589 <xsl:text> if(fi<fiEnd){ |
|
1590 </xsl:text> |
|
1591 <xsl:text> svg_dist=(fi)/(fiEnd)*(this.range[1]-this.range[0]); |
|
1592 </xsl:text> |
|
1593 <xsl:text> } |
|
1594 </xsl:text> |
|
1595 <xsl:text> else if(fiEnd<fi && fi<fiEnd+minMax){ |
|
1596 </xsl:text> |
|
1597 <xsl:text> svg_dist = this.range[1]; |
|
1598 </xsl:text> |
|
1599 <xsl:text> } |
|
1600 </xsl:text> |
|
1601 <xsl:text> else{ |
|
1602 </xsl:text> |
|
1603 <xsl:text> svg_dist = this.range[0]; |
|
1604 </xsl:text> |
|
1605 <xsl:text> } |
|
1606 </xsl:text> |
|
1607 <xsl:text> |
|
1608 </xsl:text> |
|
1609 <xsl:text> //redraw handle --TODO is it fast enough if I just call change_hmi_value??? |
|
1610 </xsl:text> |
|
1611 <xsl:text> this.handle_position(svg_dist); |
|
1612 </xsl:text> |
|
1613 <xsl:text> if(this.value_elt) |
|
1614 </xsl:text> |
|
1615 <xsl:text> this.value_elt.textContent = String(Math.ceil(svg_dist)); |
|
1616 </xsl:text> |
|
1617 <xsl:text> change_hmi_value(this.indexes[0], "="+Math.ceil(svg_dist)); |
|
1618 </xsl:text> |
|
1619 <xsl:text> |
|
1620 </xsl:text> |
|
1621 <xsl:text> //reset timer |
|
1622 </xsl:text> |
|
1623 <xsl:text> this.enTimer = false; |
|
1624 </xsl:text> |
|
1625 <xsl:text> setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); |
|
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> on_select(evt){ |
|
1636 </xsl:text> |
|
1637 <xsl:text> this.drag = true; |
|
1638 </xsl:text> |
|
1639 <xsl:text> this.enTimer = true; |
|
1640 </xsl:text> |
|
1641 <xsl:text> this.update_position(evt); |
|
1642 </xsl:text> |
|
1643 <xsl:text> } |
|
1644 </xsl:text> |
|
1645 <xsl:text> |
|
1646 </xsl:text> |
|
1647 <xsl:text> init() { |
|
1648 </xsl:text> |
|
1649 <xsl:text> //get min max |
|
1650 </xsl:text> |
|
1651 <xsl:text> let min = this.min_elt ? |
|
1652 </xsl:text> |
|
1653 <xsl:text> Number(this.min_elt.textContent) : |
|
1654 </xsl:text> |
|
1655 <xsl:text> this.args.length >= 1 ? this.args[0] : 0; |
|
1656 </xsl:text> |
|
1657 <xsl:text> let max = this.max_elt ? |
|
1658 </xsl:text> |
|
1659 <xsl:text> Number(this.max_elt.textContent) : |
|
1660 </xsl:text> |
|
1661 <xsl:text> this.args.length >= 2 ? this.args[1] : 100; |
|
1662 </xsl:text> |
|
1663 <xsl:text> |
|
1664 </xsl:text> |
|
1665 <xsl:text> //fiStart ==> offset |
|
1666 </xsl:text> |
|
1667 <xsl:text> let fiStart = Number(this.range_elt.getAttribute('sodipodi:start')); |
|
1668 </xsl:text> |
|
1669 <xsl:text> let fiEnd = Number(this.range_elt.getAttribute('sodipodi:end')); |
|
1670 </xsl:text> |
|
1671 <xsl:text> fiEnd = fiEnd - fiStart; |
|
1672 </xsl:text> |
|
1673 <xsl:text> |
|
1674 </xsl:text> |
|
1675 <xsl:text> //fiEnd ==> size of angle |
|
1676 </xsl:text> |
|
1677 <xsl:text> if (fiEnd < 0){ |
|
1678 </xsl:text> |
|
1679 <xsl:text> fiEnd = 2*Math.PI + fiEnd; |
|
1680 </xsl:text> |
|
1681 <xsl:text> } |
|
1682 </xsl:text> |
|
1683 <xsl:text> |
|
1684 </xsl:text> |
|
1685 <xsl:text> //min max barrier angle |
|
1686 </xsl:text> |
|
1687 <xsl:text> let minMax = (2*Math.PI - fiEnd)/2; |
|
1688 </xsl:text> |
|
1689 <xsl:text> |
|
1690 </xsl:text> |
|
1691 <xsl:text> //get parameters from svg |
|
1692 </xsl:text> |
|
1693 <xsl:text> let cX = Number(this.range_elt.getAttribute('sodipodi:cx')); |
|
1694 </xsl:text> |
|
1695 <xsl:text> let cY = Number(this.range_elt.getAttribute('sodipodi:cy')); |
|
1696 </xsl:text> |
|
1697 <xsl:text> this.range_elt.style.strokeMiterlimit="0"; //eliminates some weird border around html object |
|
1698 </xsl:text> |
|
1699 <xsl:text> this.range = [min, max,this.range_elt.getTotalLength()]; |
|
1700 </xsl:text> |
|
1701 <xsl:text> let cPos = this.range_elt.getBBox(); |
|
1702 </xsl:text> |
|
1703 <xsl:text> this.handle_pos = this.range_elt.getPointAtLength(0); |
|
1704 </xsl:text> |
|
1705 <xsl:text> this.circle = [cX, cY,fiStart,fiEnd,minMax,cPos.x,cPos.y,cPos.width,cPos.height]; |
|
1706 </xsl:text> |
|
1707 <xsl:text> |
|
1708 </xsl:text> |
|
1709 <xsl:text> //init events |
|
1710 </xsl:text> |
|
1711 <xsl:text> this.handle_elt.addEventListener("touchstart", hmi_widgets[this.element_id].on_select.bind(this)); |
|
1712 </xsl:text> |
|
1713 <xsl:text> this.handle_elt.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this)); |
|
1714 </xsl:text> |
|
1715 <xsl:text> this.element.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this)); |
|
1716 </xsl:text> |
|
1717 <xsl:text> |
|
1718 </xsl:text> |
|
1719 <xsl:text> window.addEventListener("touchmove", hmi_widgets[this.element_id].update_position.bind(this)); |
|
1720 </xsl:text> |
|
1721 <xsl:text> window.addEventListener("mousemove", hmi_widgets[this.element_id].update_position.bind(this)); |
|
1722 </xsl:text> |
|
1723 <xsl:text> |
|
1724 </xsl:text> |
|
1725 <xsl:text> window.addEventListener("mouseup", hmi_widgets[this.element_id].on_release.bind(this)) |
|
1726 </xsl:text> |
|
1727 <xsl:text> window.addEventListener("touchend", hmi_widgets[this.element_id].on_release.bind(this)); |
|
1728 </xsl:text> |
|
1729 <xsl:text> window.addEventListener("touchcancel", hmi_widgets[this.element_id].on_release.bind(this)); |
|
1730 </xsl:text> |
|
1731 <xsl:text> |
|
1732 </xsl:text> |
|
1733 <xsl:text> } |
|
1734 </xsl:text> |
|
1735 <xsl:text>} |
|
1736 </xsl:text> |
|
1737 </xsl:template> |
|
1738 <xsl:template match="widget[@type='CircularSlider']" mode="widget_defs"> |
|
1739 <xsl:param name="hmi_element"/> |
|
1740 <xsl:call-template name="defs_by_labels"> |
|
1741 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
|
1742 <xsl:with-param name="labels"> |
|
1743 <xsl:text>handle range</xsl:text> |
|
1744 </xsl:with-param> |
|
1745 </xsl:call-template> |
|
1746 <xsl:call-template name="defs_by_labels"> |
|
1747 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
|
1748 <xsl:with-param name="labels"> |
|
1749 <xsl:text>value min max</xsl:text> |
|
1750 </xsl:with-param> |
|
1751 <xsl:with-param name="mandatory" select="'no'"/> |
|
1752 </xsl:call-template> |
|
1753 <xsl:text> |
|
1754 </xsl:text> |
|
1755 </xsl:template> |
|
1756 <xsl:template match="widget[@type='Display']" mode="widget_class"> |
1425 <xsl:text>class DisplayWidget extends Widget{ |
1757 <xsl:text>class DisplayWidget extends Widget{ |
1426 </xsl:text> |
1758 </xsl:text> |
1427 <xsl:text> frequency = 5; |
1759 <xsl:text> frequency = 5; |
1428 </xsl:text> |
1760 </xsl:text> |
1429 <xsl:text> dispatch(value, oldval, index) { |
1761 <xsl:text> dispatch(value, oldval, index) { |
2826 <xsl:text> } |
3167 <xsl:text> } |
2827 </xsl:text> |
3168 </xsl:text> |
2828 <xsl:text>} |
3169 <xsl:text>} |
2829 </xsl:text> |
3170 </xsl:text> |
2830 </xsl:template> |
3171 </xsl:template> |
2831 <xsl:template mode="json_table_elt_render" match="svg:*"> |
3172 <xsl:template match="svg:*" mode="json_table_elt_render"> |
2832 <xsl:message terminate="yes"> |
3173 <xsl:message terminate="yes"> |
2833 <xsl:text>JsonTable Widget can't contain element of type </xsl:text> |
3174 <xsl:text>JsonTable Widget can't contain element of type </xsl:text> |
2834 <xsl:value-of select="local-name()"/> |
3175 <xsl:value-of select="local-name()"/> |
2835 <xsl:text>.</xsl:text> |
3176 <xsl:text>.</xsl:text> |
2836 </xsl:message> |
3177 </xsl:message> |
2837 </xsl:template> |
3178 </xsl:template> |
2838 <xsl:template mode="json_table_elt_render" match="svg:use"> |
3179 <xsl:template match="svg:use" mode="json_table_elt_render"> |
2839 <xsl:param name="value_expr"/> |
3180 <xsl:param name="value_expr"/> |
2840 <xsl:variable name="targetid" select="substring-after(@xlink:href,'#')"/> |
3181 <xsl:variable name="targetid" select="substring-after(@xlink:href,'#')"/> |
2841 <xsl:variable name="from_list" select="$hmi_lists[(@id | */@id) = $targetid]"/> |
3182 <xsl:variable name="from_list" select="$hmi_lists[(@id | */@id) = $targetid]"/> |
2842 <xsl:if test="count($from_list) = 0"> |
3183 <xsl:if test="count($from_list) = 0"> |
2843 <xsl:message terminate="yes"> |
3184 <xsl:message terminate="yes"> |
2844 <xsl:text>Clones (svg:use) in JsonTable Widget must point to a valid HMI:List widget or HMI:List item. Reference "</xsl:text> |
3185 <xsl:text>Clones (svg:use) in JsonTable Widget must point to a valid HMI:List widget or HMI:List item. Reference "</xsl:text> |
2845 <xsl:value-of select="@xlink:href"/> |
3186 <xsl:value-of select="@xlink:href"/> |
2846 <xsl:text>" is not valid.</xsl:text> |
3187 <xsl:text>" is not valid.</xsl:text> |
2847 </xsl:message> |
3188 </xsl:message> |
2848 </xsl:if> |
3189 </xsl:if> |
2849 <xsl:text> console.log("</xsl:text> |
|
2850 <xsl:value-of select="@id"/> |
|
2851 <xsl:text>", "</xsl:text> |
|
2852 <xsl:value-of select="$value_expr"/> |
|
2853 <xsl:text>", </xsl:text> |
|
2854 <xsl:value-of select="$value_expr"/> |
|
2855 <xsl:text>); |
|
2856 </xsl:text> |
|
2857 <xsl:text> id("</xsl:text> |
3190 <xsl:text> id("</xsl:text> |
2858 <xsl:value-of select="@id"/> |
3191 <xsl:value-of select="@id"/> |
2859 <xsl:text>").setAttribute("xlink:href", |
3192 <xsl:text>").setAttribute("xlink:href", |
2860 </xsl:text> |
3193 </xsl:text> |
2861 <xsl:text> "#"+hmi_widgets["</xsl:text> |
3194 <xsl:text> "#"+hmi_widgets["</xsl:text> |
2863 <xsl:text>"].items[</xsl:text> |
3196 <xsl:text>"].items[</xsl:text> |
2864 <xsl:value-of select="$value_expr"/> |
3197 <xsl:value-of select="$value_expr"/> |
2865 <xsl:text>]); |
3198 <xsl:text>]); |
2866 </xsl:text> |
3199 </xsl:text> |
2867 </xsl:template> |
3200 </xsl:template> |
2868 <xsl:template mode="json_table_elt_render" match="svg:text"> |
3201 <xsl:template match="svg:text" mode="json_table_elt_render"> |
2869 <xsl:param name="value_expr"/> |
3202 <xsl:param name="value_expr"/> |
2870 <xsl:text> console.log("</xsl:text> |
|
2871 <xsl:value-of select="@id"/> |
|
2872 <xsl:text>", "</xsl:text> |
|
2873 <xsl:value-of select="$value_expr"/> |
|
2874 <xsl:text>", </xsl:text> |
|
2875 <xsl:value-of select="$value_expr"/> |
|
2876 <xsl:text>); |
|
2877 </xsl:text> |
|
2878 <xsl:text> id("</xsl:text> |
3203 <xsl:text> id("</xsl:text> |
2879 <xsl:value-of select="@id"/> |
3204 <xsl:value-of select="@id"/> |
2880 <xsl:text>").textContent = String(</xsl:text> |
3205 <xsl:text>").textContent = String(</xsl:text> |
2881 <xsl:value-of select="$value_expr"/> |
3206 <xsl:value-of select="$value_expr"/> |
2882 <xsl:text>); |
3207 <xsl:text>); |
2883 </xsl:text> |
3208 </xsl:text> |
2884 </xsl:template> |
3209 </xsl:template> |
2885 <xsl:template mode="json_table_render" match="svg:*"> |
3210 <xsl:template match="svg:*" mode="json_table_render"> |
2886 <xsl:param name="objname"/> |
3211 <xsl:param name="objname"/> |
2887 <xsl:apply-templates mode="json_table_elt_render" select="."> |
3212 <xsl:apply-templates select="." mode="json_table_elt_render"> |
2888 <xsl:with-param name="value_expr"> |
3213 <xsl:with-param name="value_expr"> |
2889 <xsl:value-of select="$objname"/> |
3214 <xsl:value-of select="$objname"/> |
2890 <xsl:value-of select="@inkscape:label"/> |
3215 <xsl:value-of select="@inkscape:label"/> |
2891 </xsl:with-param> |
3216 </xsl:with-param> |
2892 </xsl:apply-templates> |
3217 </xsl:apply-templates> |
2893 </xsl:template> |
3218 </xsl:template> |
2894 <xsl:template mode="json_table_render" match="svg:g"> |
3219 <xsl:template match="svg:g" mode="json_table_render"> |
2895 <xsl:param name="objname"/> |
3220 <xsl:param name="objname"/> |
2896 <xsl:text> let obj_</xsl:text> |
3221 <xsl:text> let obj_</xsl:text> |
2897 <xsl:value-of select="@id"/> |
3222 <xsl:value-of select="@id"/> |
2898 <xsl:text> = </xsl:text> |
3223 <xsl:text> = </xsl:text> |
2899 <xsl:value-of select="$objname"/> |
3224 <xsl:value-of select="$objname"/> |
2900 <xsl:value-of select="@inkscape:label"/> |
3225 <xsl:value-of select="@inkscape:label"/> |
2901 <xsl:text>; |
3226 <xsl:text>; |
2902 </xsl:text> |
3227 </xsl:text> |
2903 <xsl:apply-templates mode="json_table_render" select="*[@inkscape:label]"> |
3228 <xsl:apply-templates select="*[@inkscape:label]" mode="json_table_render"> |
2904 <xsl:with-param name="objname"> |
3229 <xsl:with-param name="objname"> |
2905 <xsl:text>obj_</xsl:text> |
3230 <xsl:text>obj_</xsl:text> |
2906 <xsl:value-of select="@id"/> |
3231 <xsl:value-of select="@id"/> |
2907 </xsl:with-param> |
3232 </xsl:with-param> |
2908 </xsl:apply-templates> |
3233 </xsl:apply-templates> |
2909 </xsl:template> |
3234 </xsl:template> |
2910 <xsl:template mode="widget_defs" match="widget[@type='JsonTable']"> |
3235 <xsl:template match="widget[@type='JsonTable']" mode="widget_defs"> |
2911 <xsl:param name="hmi_element"/> |
3236 <xsl:param name="hmi_element"/> |
2912 <xsl:call-template name="defs_by_labels"> |
3237 <xsl:call-template name="defs_by_labels"> |
2913 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
3238 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
2914 <xsl:with-param name="labels"> |
3239 <xsl:with-param name="labels"> |
2915 <xsl:text>data</xsl:text> |
3240 <xsl:text>data</xsl:text> |
3188 <xsl:text>} |
3511 <xsl:text>} |
3189 </xsl:text> |
3512 </xsl:text> |
3190 <xsl:text> |
3513 <xsl:text> |
3191 </xsl:text> |
3514 </xsl:text> |
3192 </xsl:template> |
3515 </xsl:template> |
3193 <xsl:template mode="widget_defs" match="widget[@type='Keypad']"> |
3516 <xsl:template match="widget[@type='Keypad']" mode="widget_class"> |
|
3517 <xsl:text>class KeypadWidget extends Widget{ |
|
3518 </xsl:text> |
|
3519 <xsl:text> moving = undefined; |
|
3520 </xsl:text> |
|
3521 <xsl:text> enTimer = undefined; |
|
3522 </xsl:text> |
|
3523 <xsl:text> offset = undefined; |
|
3524 </xsl:text> |
|
3525 <xsl:text> |
|
3526 </xsl:text> |
|
3527 <xsl:text> on_position_click(evt) { |
|
3528 </xsl:text> |
|
3529 <xsl:text> this.moving = true; |
|
3530 </xsl:text> |
|
3531 <xsl:text> this.enTimer = true; |
|
3532 </xsl:text> |
|
3533 <xsl:text> |
|
3534 </xsl:text> |
|
3535 <xsl:text> // get click position offset from widget x,y and save it to variable |
|
3536 </xsl:text> |
|
3537 <xsl:text> var keypad_borders = this.position_elt.getBoundingClientRect(); |
|
3538 </xsl:text> |
|
3539 <xsl:text> var clickX = undefined; |
|
3540 </xsl:text> |
|
3541 <xsl:text> var clickY = undefined; |
|
3542 </xsl:text> |
|
3543 <xsl:text> if (evt.type == "touchstart"){ |
|
3544 </xsl:text> |
|
3545 <xsl:text> clickX = Math.ceil(evt.touches[0].clientX); |
|
3546 </xsl:text> |
|
3547 <xsl:text> clickY = Math.ceil(evt.touches[0].clientY); |
|
3548 </xsl:text> |
|
3549 <xsl:text> } |
|
3550 </xsl:text> |
|
3551 <xsl:text> else{ |
|
3552 </xsl:text> |
|
3553 <xsl:text> clickX = evt.pageX; |
|
3554 </xsl:text> |
|
3555 <xsl:text> clickY = evt.pageY; |
|
3556 </xsl:text> |
|
3557 <xsl:text> } |
|
3558 </xsl:text> |
|
3559 <xsl:text> this.offset=[clickX-keypad_borders.left,clickY-keypad_borders.top] |
|
3560 </xsl:text> |
|
3561 <xsl:text> } |
|
3562 </xsl:text> |
|
3563 <xsl:text> |
|
3564 </xsl:text> |
|
3565 <xsl:text> off_position_click(evt) { |
|
3566 </xsl:text> |
|
3567 <xsl:text> if(this.moving) |
|
3568 </xsl:text> |
|
3569 <xsl:text> this.moving = false; |
|
3570 </xsl:text> |
|
3571 <xsl:text> } |
|
3572 </xsl:text> |
|
3573 <xsl:text> |
|
3574 </xsl:text> |
|
3575 <xsl:text> on_move(evt) { |
|
3576 </xsl:text> |
|
3577 <xsl:text> if(this.moving && this.enTimer){ |
|
3578 </xsl:text> |
|
3579 <xsl:text> //get keyboard pos in html |
|
3580 </xsl:text> |
|
3581 <xsl:text> let [eltid, tmpgrp] = current_modal; |
|
3582 </xsl:text> |
|
3583 <xsl:text> let [xcoord,ycoord] = this.coordinates; |
|
3584 </xsl:text> |
|
3585 <xsl:text> let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox; |
|
3586 </xsl:text> |
|
3587 <xsl:text> |
|
3588 </xsl:text> |
|
3589 <xsl:text> //get mouse coordinates |
|
3590 </xsl:text> |
|
3591 <xsl:text> var clickX = undefined; |
|
3592 </xsl:text> |
|
3593 <xsl:text> var clickY = undefined; |
|
3594 </xsl:text> |
|
3595 <xsl:text> if (evt.type == "touchmove"){ |
|
3596 </xsl:text> |
|
3597 <xsl:text> clickX = Math.ceil(evt.touches[0].clientX); |
|
3598 </xsl:text> |
|
3599 <xsl:text> clickY = Math.ceil(evt.touches[0].clientY); |
|
3600 </xsl:text> |
|
3601 <xsl:text> } |
|
3602 </xsl:text> |
|
3603 <xsl:text> else{ |
|
3604 </xsl:text> |
|
3605 <xsl:text> clickX = evt.pageX; |
|
3606 </xsl:text> |
|
3607 <xsl:text> clickY = evt.pageY; |
|
3608 </xsl:text> |
|
3609 <xsl:text> } |
|
3610 </xsl:text> |
|
3611 <xsl:text> |
|
3612 </xsl:text> |
|
3613 <xsl:text> //translate keyboard position |
|
3614 </xsl:text> |
|
3615 <xsl:text> let mouseX = ((clickX-this.offset[0])/window.innerWidth)*svgWidth; |
|
3616 </xsl:text> |
|
3617 <xsl:text> let mouseY = ((clickY-this.offset[1])/window.innerHeight)*svgHeight; |
|
3618 </xsl:text> |
|
3619 <xsl:text> tmpgrp.setAttribute("transform","translate("+String(xdest-xcoord+mouseX)+","+String(ydest-ycoord+mouseY)+")"); |
|
3620 </xsl:text> |
|
3621 <xsl:text> |
|
3622 </xsl:text> |
|
3623 <xsl:text> //reset timer |
|
3624 </xsl:text> |
|
3625 <xsl:text> this.enTimer = false; |
|
3626 </xsl:text> |
|
3627 <xsl:text> setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); |
|
3628 </xsl:text> |
|
3629 <xsl:text> } |
|
3630 </xsl:text> |
|
3631 <xsl:text> |
|
3632 </xsl:text> |
|
3633 <xsl:text> } |
|
3634 </xsl:text> |
|
3635 <xsl:text> |
|
3636 </xsl:text> |
|
3637 <xsl:text> on_key_click(symbols) { |
|
3638 </xsl:text> |
|
3639 <xsl:text> var syms = symbols.split(" "); |
|
3640 </xsl:text> |
|
3641 <xsl:text> this.shift |= this.caps; |
|
3642 </xsl:text> |
|
3643 <xsl:text> this.editstr += syms[this.shift?syms.length-1:0]; |
|
3644 </xsl:text> |
|
3645 <xsl:text> this.shift = false; |
|
3646 </xsl:text> |
|
3647 <xsl:text> this.update(); |
|
3648 </xsl:text> |
|
3649 <xsl:text> } |
|
3650 </xsl:text> |
|
3651 <xsl:text> |
|
3652 </xsl:text> |
|
3653 <xsl:text> on_Esc_click() { |
|
3654 </xsl:text> |
|
3655 <xsl:text> end_modal.call(this); |
|
3656 </xsl:text> |
|
3657 <xsl:text> } |
|
3658 </xsl:text> |
|
3659 <xsl:text> |
|
3660 </xsl:text> |
|
3661 <xsl:text> on_Enter_click() { |
|
3662 </xsl:text> |
|
3663 <xsl:text> end_modal.call(this); |
|
3664 </xsl:text> |
|
3665 <xsl:text> let callback_obj = this.result_callback_obj; |
|
3666 </xsl:text> |
|
3667 <xsl:text> callback_obj.edit_callback(this.editstr); |
|
3668 </xsl:text> |
|
3669 <xsl:text> } |
|
3670 </xsl:text> |
|
3671 <xsl:text> |
|
3672 </xsl:text> |
|
3673 <xsl:text> on_BackSpace_click() { |
|
3674 </xsl:text> |
|
3675 <xsl:text> this.editstr = this.editstr.slice(0,this.editstr.length-1); |
|
3676 </xsl:text> |
|
3677 <xsl:text> this.update(); |
|
3678 </xsl:text> |
|
3679 <xsl:text> } |
|
3680 </xsl:text> |
|
3681 <xsl:text> |
|
3682 </xsl:text> |
|
3683 <xsl:text> on_Sign_click() { |
|
3684 </xsl:text> |
|
3685 <xsl:text> if(this.editstr[0] == "-") |
|
3686 </xsl:text> |
|
3687 <xsl:text> this.editstr = this.editstr.slice(1,this.editstr.length); |
|
3688 </xsl:text> |
|
3689 <xsl:text> else |
|
3690 </xsl:text> |
|
3691 <xsl:text> this.editstr = "-" + this.editstr; |
|
3692 </xsl:text> |
|
3693 <xsl:text> this.update(); |
|
3694 </xsl:text> |
|
3695 <xsl:text> } |
|
3696 </xsl:text> |
|
3697 <xsl:text> |
|
3698 </xsl:text> |
|
3699 <xsl:text> on_NumDot_click() { |
|
3700 </xsl:text> |
|
3701 <xsl:text> if(this.editstr.indexOf(".") == "-1"){ |
|
3702 </xsl:text> |
|
3703 <xsl:text> this.editstr += "."; |
|
3704 </xsl:text> |
|
3705 <xsl:text> this.update(); |
|
3706 </xsl:text> |
|
3707 <xsl:text> } |
|
3708 </xsl:text> |
|
3709 <xsl:text> } |
|
3710 </xsl:text> |
|
3711 <xsl:text> |
|
3712 </xsl:text> |
|
3713 <xsl:text> on_Space_click() { |
|
3714 </xsl:text> |
|
3715 <xsl:text> this.editstr += " "; |
|
3716 </xsl:text> |
|
3717 <xsl:text> this.update(); |
|
3718 </xsl:text> |
|
3719 <xsl:text> } |
|
3720 </xsl:text> |
|
3721 <xsl:text> |
|
3722 </xsl:text> |
|
3723 <xsl:text> caps = false; |
|
3724 </xsl:text> |
|
3725 <xsl:text> _caps = undefined; |
|
3726 </xsl:text> |
|
3727 <xsl:text> on_CapsLock_click() { |
|
3728 </xsl:text> |
|
3729 <xsl:text> this.caps = !this.caps; |
|
3730 </xsl:text> |
|
3731 <xsl:text> this.update(); |
|
3732 </xsl:text> |
|
3733 <xsl:text> } |
|
3734 </xsl:text> |
|
3735 <xsl:text> |
|
3736 </xsl:text> |
|
3737 <xsl:text> shift = false; |
|
3738 </xsl:text> |
|
3739 <xsl:text> _shift = undefined; |
|
3740 </xsl:text> |
|
3741 <xsl:text> on_Shift_click() { |
|
3742 </xsl:text> |
|
3743 <xsl:text> this.shift = !this.shift; |
|
3744 </xsl:text> |
|
3745 <xsl:text> this.caps = false; |
|
3746 </xsl:text> |
|
3747 <xsl:text> this.update(); |
|
3748 </xsl:text> |
|
3749 <xsl:text> } |
|
3750 </xsl:text> |
|
3751 <xsl:text> editstr = ""; |
|
3752 </xsl:text> |
|
3753 <xsl:text> _editstr = undefined; |
|
3754 </xsl:text> |
|
3755 <xsl:text> result_callback_obj = undefined; |
|
3756 </xsl:text> |
|
3757 <xsl:text> start_edit(info, valuetype, callback_obj, initial,size) { |
|
3758 </xsl:text> |
|
3759 <xsl:text> show_modal.call(this,size); |
|
3760 </xsl:text> |
|
3761 <xsl:text> this.editstr = initial; |
|
3762 </xsl:text> |
|
3763 <xsl:text> this.result_callback_obj = callback_obj; |
|
3764 </xsl:text> |
|
3765 <xsl:text> this.Info_elt.textContent = info; |
|
3766 </xsl:text> |
|
3767 <xsl:text> this.shift = false; |
|
3768 </xsl:text> |
|
3769 <xsl:text> this.caps = false; |
|
3770 </xsl:text> |
|
3771 <xsl:text> this.update(); |
|
3772 </xsl:text> |
|
3773 <xsl:text> } |
|
3774 </xsl:text> |
|
3775 <xsl:text> |
|
3776 </xsl:text> |
|
3777 <xsl:text> update() { |
|
3778 </xsl:text> |
|
3779 <xsl:text> if(this.editstr != this._editstr){ |
|
3780 </xsl:text> |
|
3781 <xsl:text> this._editstr = this.editstr; |
|
3782 </xsl:text> |
|
3783 <xsl:text> this.Value_elt.textContent = this.editstr; |
|
3784 </xsl:text> |
|
3785 <xsl:text> } |
|
3786 </xsl:text> |
|
3787 <xsl:text> if(this.shift != this._shift){ |
|
3788 </xsl:text> |
|
3789 <xsl:text> this._shift = this.shift; |
|
3790 </xsl:text> |
|
3791 <xsl:text> (this.shift?widget_active_activable:widget_inactive_activable)(this.Shift_sub); |
|
3792 </xsl:text> |
|
3793 <xsl:text> } |
|
3794 </xsl:text> |
|
3795 <xsl:text> if(this.caps != this._caps){ |
|
3796 </xsl:text> |
|
3797 <xsl:text> this._caps = this.caps; |
|
3798 </xsl:text> |
|
3799 <xsl:text> (this.caps?widget_active_activable:widget_inactive_activable)(this.CapsLock_sub); |
|
3800 </xsl:text> |
|
3801 <xsl:text> } |
|
3802 </xsl:text> |
|
3803 <xsl:text> } |
|
3804 </xsl:text> |
|
3805 <xsl:text>} |
|
3806 </xsl:text> |
|
3807 </xsl:template> |
|
3808 <xsl:template match="widget[@type='Keypad']" mode="widget_defs"> |
3194 <xsl:param name="hmi_element"/> |
3809 <xsl:param name="hmi_element"/> |
3195 <xsl:call-template name="defs_by_labels"> |
3810 <xsl:call-template name="defs_by_labels"> |
3196 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
3811 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
3197 <xsl:with-param name="labels"> |
3812 <xsl:with-param name="labels"> |
3198 <xsl:text>Esc Enter BackSpace Keys Info Value</xsl:text> |
3813 <xsl:text>Esc Enter BackSpace Keys Info Value</xsl:text> |
3199 </xsl:with-param> |
3814 </xsl:with-param> |
3200 </xsl:call-template> |
3815 </xsl:call-template> |
3201 <xsl:call-template name="defs_by_labels"> |
3816 <xsl:call-template name="defs_by_labels"> |
3202 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
3817 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
3203 <xsl:with-param name="labels"> |
3818 <xsl:with-param name="labels"> |
3204 <xsl:text>Sign Space NumDot</xsl:text> |
3819 <xsl:text>Sign Space NumDot position</xsl:text> |
3205 </xsl:with-param> |
3820 </xsl:with-param> |
3206 <xsl:with-param name="mandatory" select="'no'"/> |
3821 <xsl:with-param name="mandatory" select="'no'"/> |
3207 </xsl:call-template> |
3822 </xsl:call-template> |
3208 <xsl:call-template name="defs_by_labels"> |
3823 <xsl:call-template name="defs_by_labels"> |
3209 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
3824 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
3237 <xsl:text>'].on_</xsl:text> |
3852 <xsl:text>'].on_</xsl:text> |
3238 <xsl:value-of select="."/> |
3853 <xsl:value-of select="."/> |
3239 <xsl:text>_click()"); |
3854 <xsl:text>_click()"); |
3240 </xsl:text> |
3855 </xsl:text> |
3241 </xsl:for-each> |
3856 </xsl:for-each> |
|
3857 <xsl:text> if(this.position_elt){ |
|
3858 </xsl:text> |
|
3859 <xsl:text> this.position_elt.setAttribute("onmousedown", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)"); |
|
3860 </xsl:text> |
|
3861 <xsl:text> this.position_elt.setAttribute("ontouchstart", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)"); |
|
3862 </xsl:text> |
|
3863 <xsl:text> window.addEventListener("mouseup", hmi_widgets[this.element_id].off_position_click.bind(this)); |
|
3864 </xsl:text> |
|
3865 <xsl:text> window.addEventListener("touchend", hmi_widgets[this.element_id].off_position_click.bind(this)); |
|
3866 </xsl:text> |
|
3867 <xsl:text> window.addEventListener("touchcancel", hmi_widgets[this.element_id].off_position_click.bind(this)); |
|
3868 </xsl:text> |
|
3869 <xsl:text> window.addEventListener("mousemove", hmi_widgets[this.element_id].on_move.bind(this)); |
|
3870 </xsl:text> |
|
3871 <xsl:text> window.addEventListener("touchmove", hmi_widgets[this.element_id].on_move.bind(this)); |
|
3872 </xsl:text> |
|
3873 <xsl:text> } |
|
3874 </xsl:text> |
3242 <xsl:text> }, |
3875 <xsl:text> }, |
3243 </xsl:text> |
3876 </xsl:text> |
3244 <xsl:text> on_key_click: function(symbols) { |
3877 <xsl:text> |
3245 </xsl:text> |
|
3246 <xsl:text> var syms = symbols.split(" "); |
|
3247 </xsl:text> |
|
3248 <xsl:text> this.shift |= this.caps; |
|
3249 </xsl:text> |
|
3250 <xsl:text> this.editstr += syms[this.shift?syms.length-1:0]; |
|
3251 </xsl:text> |
|
3252 <xsl:text> this.shift = false; |
|
3253 </xsl:text> |
|
3254 <xsl:text> this.update(); |
|
3255 </xsl:text> |
|
3256 <xsl:text> }, |
|
3257 </xsl:text> |
|
3258 <xsl:text> on_Esc_click: function() { |
|
3259 </xsl:text> |
|
3260 <xsl:text> end_modal.call(this); |
|
3261 </xsl:text> |
|
3262 <xsl:text> }, |
|
3263 </xsl:text> |
|
3264 <xsl:text> on_Enter_click: function() { |
|
3265 </xsl:text> |
|
3266 <xsl:text> end_modal.call(this); |
|
3267 </xsl:text> |
|
3268 <xsl:text> callback_obj = this.result_callback_obj; |
|
3269 </xsl:text> |
|
3270 <xsl:text> callback_obj.edit_callback(this.editstr); |
|
3271 </xsl:text> |
|
3272 <xsl:text> }, |
|
3273 </xsl:text> |
|
3274 <xsl:text> on_BackSpace_click: function() { |
|
3275 </xsl:text> |
|
3276 <xsl:text> this.editstr = this.editstr.slice(0,this.editstr.length-1); |
|
3277 </xsl:text> |
|
3278 <xsl:text> this.update(); |
|
3279 </xsl:text> |
|
3280 <xsl:text> }, |
|
3281 </xsl:text> |
|
3282 <xsl:text> on_Sign_click: function() { |
|
3283 </xsl:text> |
|
3284 <xsl:text> if(this.editstr[0] == "-") |
|
3285 </xsl:text> |
|
3286 <xsl:text> this.editstr = this.editstr.slice(1,this.editstr.length); |
|
3287 </xsl:text> |
|
3288 <xsl:text> else |
|
3289 </xsl:text> |
|
3290 <xsl:text> this.editstr = "-" + this.editstr; |
|
3291 </xsl:text> |
|
3292 <xsl:text> this.update(); |
|
3293 </xsl:text> |
|
3294 <xsl:text> }, |
|
3295 </xsl:text> |
|
3296 <xsl:text> on_NumDot_click: function() { |
|
3297 </xsl:text> |
|
3298 <xsl:text> if(this.editstr.indexOf(".") == "-1"){ |
|
3299 </xsl:text> |
|
3300 <xsl:text> this.editstr += "."; |
|
3301 </xsl:text> |
|
3302 <xsl:text> this.update(); |
|
3303 </xsl:text> |
|
3304 <xsl:text> } |
|
3305 </xsl:text> |
|
3306 <xsl:text> }, |
|
3307 </xsl:text> |
|
3308 <xsl:text> on_Space_click: function() { |
|
3309 </xsl:text> |
|
3310 <xsl:text> this.editstr += " "; |
|
3311 </xsl:text> |
|
3312 <xsl:text> this.update(); |
|
3313 </xsl:text> |
|
3314 <xsl:text> }, |
|
3315 </xsl:text> |
|
3316 <xsl:text> caps: false, |
|
3317 </xsl:text> |
|
3318 <xsl:text> _caps: undefined, |
|
3319 </xsl:text> |
|
3320 <xsl:text> on_CapsLock_click: function() { |
|
3321 </xsl:text> |
|
3322 <xsl:text> this.caps = !this.caps; |
|
3323 </xsl:text> |
|
3324 <xsl:text> this.update(); |
|
3325 </xsl:text> |
|
3326 <xsl:text> }, |
|
3327 </xsl:text> |
|
3328 <xsl:text> shift: false, |
|
3329 </xsl:text> |
|
3330 <xsl:text> _shift: undefined, |
|
3331 </xsl:text> |
|
3332 <xsl:text> on_Shift_click: function() { |
|
3333 </xsl:text> |
|
3334 <xsl:text> this.shift = !this.shift; |
|
3335 </xsl:text> |
|
3336 <xsl:text> this.caps = false; |
|
3337 </xsl:text> |
|
3338 <xsl:text> this.update(); |
|
3339 </xsl:text> |
|
3340 <xsl:text> }, |
|
3341 </xsl:text> |
3878 </xsl:text> |
3342 <xsl:variable name="g" select="$geometry[@Id = $hmi_element/@id]"/> |
3879 <xsl:variable name="g" select="$geometry[@Id = $hmi_element/@id]"/> |
3343 <xsl:text> coordinates: [</xsl:text> |
3880 <xsl:text> coordinates: [</xsl:text> |
3344 <xsl:value-of select="$g/@x"/> |
3881 <xsl:value-of select="$g/@x"/> |
3345 <xsl:text>, </xsl:text> |
3882 <xsl:text>, </xsl:text> |
3346 <xsl:value-of select="$g/@y"/> |
3883 <xsl:value-of select="$g/@y"/> |
3347 <xsl:text>], |
3884 <xsl:text>], |
3348 </xsl:text> |
3885 </xsl:text> |
3349 <xsl:text> editstr: "", |
3886 </xsl:template> |
3350 </xsl:text> |
3887 <xsl:template match="widget[@type='List']" mode="widget_defs"> |
3351 <xsl:text> _editstr: undefined, |
|
3352 </xsl:text> |
|
3353 <xsl:text> result_callback_obj: undefined, |
|
3354 </xsl:text> |
|
3355 <xsl:text> start_edit: function(info, valuetype, callback_obj, initial) { |
|
3356 </xsl:text> |
|
3357 <xsl:text> show_modal.call(this); |
|
3358 </xsl:text> |
|
3359 <xsl:text> this.editstr = initial; |
|
3360 </xsl:text> |
|
3361 <xsl:text> this.result_callback_obj = callback_obj; |
|
3362 </xsl:text> |
|
3363 <xsl:text> this.Info_elt.textContent = info; |
|
3364 </xsl:text> |
|
3365 <xsl:text> this.shift = false; |
|
3366 </xsl:text> |
|
3367 <xsl:text> this.caps = false; |
|
3368 </xsl:text> |
|
3369 <xsl:text> this.update(); |
|
3370 </xsl:text> |
|
3371 <xsl:text> }, |
|
3372 </xsl:text> |
|
3373 <xsl:text> update: function() { |
|
3374 </xsl:text> |
|
3375 <xsl:text> if(this.editstr != this._editstr){ |
|
3376 </xsl:text> |
|
3377 <xsl:text> this._editstr = this.editstr; |
|
3378 </xsl:text> |
|
3379 <xsl:text> this.Value_elt.textContent = this.editstr; |
|
3380 </xsl:text> |
|
3381 <xsl:text> } |
|
3382 </xsl:text> |
|
3383 <xsl:text> if(this.shift != this._shift){ |
|
3384 </xsl:text> |
|
3385 <xsl:text> this._shift = this.shift; |
|
3386 </xsl:text> |
|
3387 <xsl:text> (this.shift?widget_active_activable:widget_inactive_activable)(this.Shift_sub); |
|
3388 </xsl:text> |
|
3389 <xsl:text> } |
|
3390 </xsl:text> |
|
3391 <xsl:text> if(this.caps != this._caps){ |
|
3392 </xsl:text> |
|
3393 <xsl:text> this._caps = this.caps; |
|
3394 </xsl:text> |
|
3395 <xsl:text> (this.caps?widget_active_activable:widget_inactive_activable)(this.CapsLock_sub); |
|
3396 </xsl:text> |
|
3397 <xsl:text> } |
|
3398 </xsl:text> |
|
3399 <xsl:text> }, |
|
3400 </xsl:text> |
|
3401 </xsl:template> |
|
3402 <xsl:template mode="widget_defs" match="widget[@type='List']"> |
|
3403 <xsl:param name="hmi_element"/> |
3888 <xsl:param name="hmi_element"/> |
3404 <xsl:text> items: { |
3889 <xsl:text> items: { |
3405 </xsl:text> |
3890 </xsl:text> |
3406 <xsl:for-each select="$hmi_element/*[@inkscape:label]"> |
3891 <xsl:for-each select="$hmi_element/*[@inkscape:label]"> |
3407 <xsl:text> </xsl:text> |
3892 <xsl:text> </xsl:text> |
3527 </xsl:text> |
4068 </xsl:text> |
3528 </xsl:for-each> |
4069 </xsl:for-each> |
3529 <xsl:text> ], |
4070 <xsl:text> ], |
3530 </xsl:text> |
4071 </xsl:text> |
3531 </xsl:template> |
4072 </xsl:template> |
3532 <xsl:template mode="widget_defs" match="widget[@type='ToggleButton']"> |
4073 <xsl:template match="widget[@type='Slider']" mode="widget_class"> |
|
4074 <xsl:text>class SliderWidget extends Widget{ |
|
4075 </xsl:text> |
|
4076 <xsl:text> frequency = 5; |
|
4077 </xsl:text> |
|
4078 <xsl:text> range = undefined; |
|
4079 </xsl:text> |
|
4080 <xsl:text> fi = undefined; |
|
4081 </xsl:text> |
|
4082 <xsl:text> drag = false; |
|
4083 </xsl:text> |
|
4084 <xsl:text> enTimer = false; |
|
4085 </xsl:text> |
|
4086 <xsl:text> |
|
4087 </xsl:text> |
|
4088 <xsl:text> dispatch(value) { |
|
4089 </xsl:text> |
|
4090 <xsl:text> if(!this.drag){ |
|
4091 </xsl:text> |
|
4092 <xsl:text> if(this.value_elt) |
|
4093 </xsl:text> |
|
4094 <xsl:text> this.value_elt.textContent = String(value); |
|
4095 </xsl:text> |
|
4096 <xsl:text> |
|
4097 </xsl:text> |
|
4098 <xsl:text> this.handle_position(value); |
|
4099 </xsl:text> |
|
4100 <xsl:text> } |
|
4101 </xsl:text> |
|
4102 <xsl:text> } |
|
4103 </xsl:text> |
|
4104 <xsl:text> |
|
4105 </xsl:text> |
|
4106 <xsl:text> handle_position(value){ |
|
4107 </xsl:text> |
|
4108 <xsl:text> let [min,max,start,totallength] = this.range; |
|
4109 </xsl:text> |
|
4110 <xsl:text> let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min))); |
|
4111 </xsl:text> |
|
4112 <xsl:text> let tip = this.range_elt.getPointAtLength(length); |
|
4113 </xsl:text> |
|
4114 <xsl:text> this.handle_elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")"); |
|
4115 </xsl:text> |
|
4116 <xsl:text> } |
|
4117 </xsl:text> |
|
4118 <xsl:text> |
|
4119 </xsl:text> |
|
4120 <xsl:text> on_release(evt) { |
|
4121 </xsl:text> |
|
4122 <xsl:text> if(this.drag){ |
|
4123 </xsl:text> |
|
4124 <xsl:text> this.drag = false; |
|
4125 </xsl:text> |
|
4126 <xsl:text> } |
|
4127 </xsl:text> |
|
4128 <xsl:text> } |
|
4129 </xsl:text> |
|
4130 <xsl:text> |
|
4131 </xsl:text> |
|
4132 <xsl:text> update_position(evt){ |
|
4133 </xsl:text> |
|
4134 <xsl:text> if(this.drag && this.enTimer){ |
|
4135 </xsl:text> |
|
4136 <xsl:text> var html_dist = 0; |
|
4137 </xsl:text> |
|
4138 <xsl:text> var svg_dist = 0; |
|
4139 </xsl:text> |
|
4140 <xsl:text> |
|
4141 </xsl:text> |
|
4142 <xsl:text> //calculate size of widget in html |
|
4143 </xsl:text> |
|
4144 <xsl:text> var range_borders = this.range_elt.getBoundingClientRect(); |
|
4145 </xsl:text> |
|
4146 <xsl:text> var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width ); |
|
4147 </xsl:text> |
|
4148 <xsl:text> var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top]; |
|
4149 </xsl:text> |
|
4150 <xsl:text> |
|
4151 </xsl:text> |
|
4152 <xsl:text> //get range and mouse coordinates |
|
4153 </xsl:text> |
|
4154 <xsl:text> var mouseX = undefined; |
|
4155 </xsl:text> |
|
4156 <xsl:text> var mouseY = undefined; |
|
4157 </xsl:text> |
|
4158 <xsl:text> if (evt.type.startsWith("touch")){ |
|
4159 </xsl:text> |
|
4160 <xsl:text> mouseX = Math.ceil(evt.touches[0].clientX); |
|
4161 </xsl:text> |
|
4162 <xsl:text> mouseY = Math.ceil(evt.touches[0].clientY); |
|
4163 </xsl:text> |
|
4164 <xsl:text> } |
|
4165 </xsl:text> |
|
4166 <xsl:text> else{ |
|
4167 </xsl:text> |
|
4168 <xsl:text> mouseX = evt.pageX; |
|
4169 </xsl:text> |
|
4170 <xsl:text> mouseY = evt.pageY; |
|
4171 </xsl:text> |
|
4172 <xsl:text> } |
|
4173 </xsl:text> |
|
4174 <xsl:text> |
|
4175 </xsl:text> |
|
4176 <xsl:text> //get handle distance from mouse position |
|
4177 </xsl:text> |
|
4178 <xsl:text> if (minX > mouseX && minY < mouseY){ |
|
4179 </xsl:text> |
|
4180 <xsl:text> html_dist = 0; |
|
4181 </xsl:text> |
|
4182 <xsl:text> } |
|
4183 </xsl:text> |
|
4184 <xsl:text> else if (maxX < mouseX && maxY > mouseY){ |
|
4185 </xsl:text> |
|
4186 <xsl:text> html_dist = range_length; |
|
4187 </xsl:text> |
|
4188 <xsl:text> } |
|
4189 </xsl:text> |
|
4190 <xsl:text> else{ |
|
4191 </xsl:text> |
|
4192 <xsl:text> // calculate distace |
|
4193 </xsl:text> |
|
4194 <xsl:text> if(this.fi > 0.7){ |
|
4195 </xsl:text> |
|
4196 <xsl:text> html_dist = (minY - mouseY)/Math.sin(this.fi); |
|
4197 </xsl:text> |
|
4198 <xsl:text> } |
|
4199 </xsl:text> |
|
4200 <xsl:text> else{ |
|
4201 </xsl:text> |
|
4202 <xsl:text> html_dist = (mouseX - minX)/Math.cos(this.fi); |
|
4203 </xsl:text> |
|
4204 <xsl:text> } |
|
4205 </xsl:text> |
|
4206 <xsl:text> |
|
4207 </xsl:text> |
|
4208 <xsl:text> //check if in range |
|
4209 </xsl:text> |
|
4210 <xsl:text> if (html_dist > range_length){ |
|
4211 </xsl:text> |
|
4212 <xsl:text> html_dist = range_length; |
|
4213 </xsl:text> |
|
4214 <xsl:text> } |
|
4215 </xsl:text> |
|
4216 <xsl:text> else if (html_dist < 0){ |
|
4217 </xsl:text> |
|
4218 <xsl:text> html_dist = 0; |
|
4219 </xsl:text> |
|
4220 <xsl:text> } |
|
4221 </xsl:text> |
|
4222 <xsl:text> } |
|
4223 </xsl:text> |
|
4224 <xsl:text> //redraw handle |
|
4225 </xsl:text> |
|
4226 <xsl:text> this.handle_position(svg_dist=(html_dist/range_length)*this.range[1]); |
|
4227 </xsl:text> |
|
4228 <xsl:text> this.value_elt.textContent = String(Math.ceil(svg_dist)); |
|
4229 </xsl:text> |
|
4230 <xsl:text> change_hmi_value(this.indexes[0], "="+Math.ceil(svg_dist)); |
|
4231 </xsl:text> |
|
4232 <xsl:text> //reset timer |
|
4233 </xsl:text> |
|
4234 <xsl:text> this.enTimer = false; |
|
4235 </xsl:text> |
|
4236 <xsl:text> setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); |
|
4237 </xsl:text> |
|
4238 <xsl:text> } |
|
4239 </xsl:text> |
|
4240 <xsl:text> |
|
4241 </xsl:text> |
|
4242 <xsl:text> } |
|
4243 </xsl:text> |
|
4244 <xsl:text> |
|
4245 </xsl:text> |
|
4246 <xsl:text> on_select(evt){ |
|
4247 </xsl:text> |
|
4248 <xsl:text> this.drag = true; |
|
4249 </xsl:text> |
|
4250 <xsl:text> this.enTimer = true; |
|
4251 </xsl:text> |
|
4252 <xsl:text> this.update_position(evt); |
|
4253 </xsl:text> |
|
4254 <xsl:text> } |
|
4255 </xsl:text> |
|
4256 <xsl:text> |
|
4257 </xsl:text> |
|
4258 <xsl:text> init() { |
|
4259 </xsl:text> |
|
4260 <xsl:text> let min = this.min_elt ? |
|
4261 </xsl:text> |
|
4262 <xsl:text> Number(this.min_elt.textContent) : |
|
4263 </xsl:text> |
|
4264 <xsl:text> this.args.length >= 1 ? this.args[0] : 0; |
|
4265 </xsl:text> |
|
4266 <xsl:text> let max = this.max_elt ? |
|
4267 </xsl:text> |
|
4268 <xsl:text> Number(this.max_elt.textContent) : |
|
4269 </xsl:text> |
|
4270 <xsl:text> this.args.length >= 2 ? this.args[1] : 100; |
|
4271 </xsl:text> |
|
4272 <xsl:text> |
|
4273 </xsl:text> |
|
4274 <xsl:text> this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()]; |
|
4275 </xsl:text> |
|
4276 <xsl:text> let start = this.range_elt.getPointAtLength(0); |
|
4277 </xsl:text> |
|
4278 <xsl:text> let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength()); |
|
4279 </xsl:text> |
|
4280 <xsl:text> this.fi = Math.atan2(start.y-end.y, end.x-start.x); |
|
4281 </xsl:text> |
|
4282 <xsl:text> |
|
4283 </xsl:text> |
|
4284 <xsl:text> |
|
4285 </xsl:text> |
|
4286 <xsl:text> this.handle_elt.addEventListener("touchstart", hmi_widgets[this.element_id].on_select.bind(this)); |
|
4287 </xsl:text> |
|
4288 <xsl:text> this.handle_elt.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this)); |
|
4289 </xsl:text> |
|
4290 <xsl:text> this.element.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this)); |
|
4291 </xsl:text> |
|
4292 <xsl:text> |
|
4293 </xsl:text> |
|
4294 <xsl:text> window.addEventListener("touchmove", hmi_widgets[this.element_id].update_position.bind(this)); |
|
4295 </xsl:text> |
|
4296 <xsl:text> window.addEventListener("mousemove", hmi_widgets[this.element_id].update_position.bind(this)); |
|
4297 </xsl:text> |
|
4298 <xsl:text> |
|
4299 </xsl:text> |
|
4300 <xsl:text> window.addEventListener("mouseup", hmi_widgets[this.element_id].on_release.bind(this)) |
|
4301 </xsl:text> |
|
4302 <xsl:text> window.addEventListener("touchend", hmi_widgets[this.element_id].on_release.bind(this)); |
|
4303 </xsl:text> |
|
4304 <xsl:text> window.addEventListener("touchcancel", hmi_widgets[this.element_id].on_release.bind(this)); |
|
4305 </xsl:text> |
|
4306 <xsl:text> |
|
4307 </xsl:text> |
|
4308 <xsl:text> } |
|
4309 </xsl:text> |
|
4310 <xsl:text>} |
|
4311 </xsl:text> |
|
4312 </xsl:template> |
|
4313 <xsl:template match="widget[@type='Slider']" mode="widget_defs"> |
|
4314 <xsl:param name="hmi_element"/> |
|
4315 <xsl:call-template name="defs_by_labels"> |
|
4316 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
|
4317 <xsl:with-param name="labels"> |
|
4318 <xsl:text>handle range</xsl:text> |
|
4319 </xsl:with-param> |
|
4320 </xsl:call-template> |
|
4321 <xsl:call-template name="defs_by_labels"> |
|
4322 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
|
4323 <xsl:with-param name="labels"> |
|
4324 <xsl:text>value min max</xsl:text> |
|
4325 </xsl:with-param> |
|
4326 <xsl:with-param name="mandatory" select="'no'"/> |
|
4327 </xsl:call-template> |
|
4328 <xsl:text> |
|
4329 </xsl:text> |
|
4330 </xsl:template> |
|
4331 <xsl:template match="widget[@type='Switch']" mode="widget_class"> |
|
4332 <xsl:text>class SwitchWidget extends Widget{ |
|
4333 </xsl:text> |
|
4334 <xsl:text> frequency = 5; |
|
4335 </xsl:text> |
|
4336 <xsl:text> dispatch(value) { |
|
4337 </xsl:text> |
|
4338 <xsl:text> for(let choice of this.choices){ |
|
4339 </xsl:text> |
|
4340 <xsl:text> if(value != choice.value){ |
|
4341 </xsl:text> |
|
4342 <xsl:text> choice.elt.setAttribute("style", "display:none"); |
|
4343 </xsl:text> |
|
4344 <xsl:text> } else { |
|
4345 </xsl:text> |
|
4346 <xsl:text> choice.elt.setAttribute("style", choice.style); |
|
4347 </xsl:text> |
|
4348 <xsl:text> } |
|
4349 </xsl:text> |
|
4350 <xsl:text> } |
|
4351 </xsl:text> |
|
4352 <xsl:text> } |
|
4353 </xsl:text> |
|
4354 <xsl:text>} |
|
4355 </xsl:text> |
|
4356 </xsl:template> |
|
4357 <xsl:template match="widget[@type='Switch']" mode="widget_defs"> |
|
4358 <xsl:param name="hmi_element"/> |
|
4359 <xsl:text> choices: [ |
|
4360 </xsl:text> |
|
4361 <xsl:variable name="regex" select="'^("[^"].*"|\-?[0-9]+|false|true)(#.*)?$'"/> |
|
4362 <xsl:for-each select="$result_svg_ns//*[@id = $hmi_element/@id]//*[regexp:test(@inkscape:label,$regex)]"> |
|
4363 <xsl:variable name="literal" select="regexp:match(@inkscape:label,$regex)[2]"/> |
|
4364 <xsl:text> { |
|
4365 </xsl:text> |
|
4366 <xsl:text> elt:id("</xsl:text> |
|
4367 <xsl:value-of select="@id"/> |
|
4368 <xsl:text>"), |
|
4369 </xsl:text> |
|
4370 <xsl:text> style:"</xsl:text> |
|
4371 <xsl:value-of select="@style"/> |
|
4372 <xsl:text>", |
|
4373 </xsl:text> |
|
4374 <xsl:text> value:</xsl:text> |
|
4375 <xsl:value-of select="$literal"/> |
|
4376 <xsl:text> |
|
4377 </xsl:text> |
|
4378 <xsl:text> }</xsl:text> |
|
4379 <xsl:if test="position()!=last()"> |
|
4380 <xsl:text>,</xsl:text> |
|
4381 </xsl:if> |
|
4382 <xsl:text> |
|
4383 </xsl:text> |
|
4384 </xsl:for-each> |
|
4385 <xsl:text> ], |
|
4386 </xsl:text> |
|
4387 </xsl:template> |
|
4388 <xsl:template match="widget[@type='ToggleButton']" mode="widget_class"> |
|
4389 <xsl:text>class ToggleButtonWidget extends Widget{ |
|
4390 </xsl:text> |
|
4391 <xsl:text> frequency = 5; |
|
4392 </xsl:text> |
|
4393 <xsl:text> state = 0; |
|
4394 </xsl:text> |
|
4395 <xsl:text> active_style = undefined; |
|
4396 </xsl:text> |
|
4397 <xsl:text> inactive_style = undefined; |
|
4398 </xsl:text> |
|
4399 <xsl:text> |
|
4400 </xsl:text> |
|
4401 <xsl:text> dispatch(value) { |
|
4402 </xsl:text> |
|
4403 <xsl:text> this.state = value; |
|
4404 </xsl:text> |
|
4405 <xsl:text> if (this.state) { |
|
4406 </xsl:text> |
|
4407 <xsl:text> this.active_elt.setAttribute("style", this.active_style); |
|
4408 </xsl:text> |
|
4409 <xsl:text> this.inactive_elt.setAttribute("style", "display:none"); |
|
4410 </xsl:text> |
|
4411 <xsl:text> this.state = 0; |
|
4412 </xsl:text> |
|
4413 <xsl:text> } else { |
|
4414 </xsl:text> |
|
4415 <xsl:text> this.inactive_elt.setAttribute("style", this.inactive_style); |
|
4416 </xsl:text> |
|
4417 <xsl:text> this.active_elt.setAttribute("style", "display:none"); |
|
4418 </xsl:text> |
|
4419 <xsl:text> this.state = 1; |
|
4420 </xsl:text> |
|
4421 <xsl:text> } |
|
4422 </xsl:text> |
|
4423 <xsl:text> } |
|
4424 </xsl:text> |
|
4425 <xsl:text> |
|
4426 </xsl:text> |
|
4427 <xsl:text> on_click(evt) { |
|
4428 </xsl:text> |
|
4429 <xsl:text> change_hmi_value(this.indexes[0], "="+this.state); |
|
4430 </xsl:text> |
|
4431 <xsl:text> } |
|
4432 </xsl:text> |
|
4433 <xsl:text> |
|
4434 </xsl:text> |
|
4435 <xsl:text> init() { |
|
4436 </xsl:text> |
|
4437 <xsl:text> this.active_style = this.active_elt.style.cssText; |
|
4438 </xsl:text> |
|
4439 <xsl:text> this.inactive_style = this.inactive_elt.style.cssText; |
|
4440 </xsl:text> |
|
4441 <xsl:text> this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)"); |
|
4442 </xsl:text> |
|
4443 <xsl:text> } |
|
4444 </xsl:text> |
|
4445 <xsl:text>} |
|
4446 </xsl:text> |
|
4447 </xsl:template> |
|
4448 <xsl:template match="widget[@type='ToggleButton']" mode="widget_defs"> |
3533 <xsl:param name="hmi_element"/> |
4449 <xsl:param name="hmi_element"/> |
3534 <xsl:call-template name="defs_by_labels"> |
4450 <xsl:call-template name="defs_by_labels"> |
3535 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
4451 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
3536 <xsl:with-param name="labels"> |
4452 <xsl:with-param name="labels"> |
3537 <xsl:text>active inactive</xsl:text> |
4453 <xsl:text>active inactive</xsl:text> |
3538 </xsl:with-param> |
4454 </xsl:with-param> |
3539 </xsl:call-template> |
4455 </xsl:call-template> |
3540 <xsl:text> frequency: 5, |
4456 <xsl:text> |
3541 </xsl:text> |
|
3542 <xsl:text> state: 0, |
|
3543 </xsl:text> |
|
3544 <xsl:text> dispatch: function(value) { |
|
3545 </xsl:text> |
|
3546 <xsl:text> this.state = value; |
|
3547 </xsl:text> |
|
3548 <xsl:text> if (this.state) { |
|
3549 </xsl:text> |
|
3550 <xsl:text> this.active_elt.setAttribute("style", this.active_style); |
|
3551 </xsl:text> |
|
3552 <xsl:text> this.inactive_elt.setAttribute("style", "display:none"); |
|
3553 </xsl:text> |
|
3554 <xsl:text> this.state = 0; |
|
3555 </xsl:text> |
|
3556 <xsl:text> } else { |
|
3557 </xsl:text> |
|
3558 <xsl:text> this.inactive_elt.setAttribute("style", this.inactive_style); |
|
3559 </xsl:text> |
|
3560 <xsl:text> this.active_elt.setAttribute("style", "display:none"); |
|
3561 </xsl:text> |
|
3562 <xsl:text> this.state = 1; |
|
3563 </xsl:text> |
|
3564 <xsl:text> } |
|
3565 </xsl:text> |
|
3566 <xsl:text> }, |
|
3567 </xsl:text> |
|
3568 <xsl:text> on_click: function(evt) { |
|
3569 </xsl:text> |
|
3570 <xsl:text> this.apply_hmi_value(0, this.state); |
|
3571 </xsl:text> |
|
3572 <xsl:text> }, |
|
3573 </xsl:text> |
|
3574 <xsl:text> active_style: undefined, |
|
3575 </xsl:text> |
|
3576 <xsl:text> inactive_style: undefined, |
|
3577 </xsl:text> |
|
3578 <xsl:text> init: function() { |
|
3579 </xsl:text> |
|
3580 <xsl:text> this.active_style = this.active_elt.style.cssText; |
|
3581 </xsl:text> |
|
3582 <xsl:text> this.inactive_style = this.inactive_elt.style.cssText; |
|
3583 </xsl:text> |
|
3584 <xsl:text> this.element.setAttribute("onclick", "hmi_widgets['</xsl:text> |
|
3585 <xsl:value-of select="$hmi_element/@id"/> |
|
3586 <xsl:text>'].on_click(evt)"); |
|
3587 </xsl:text> |
|
3588 <xsl:text> }, |
|
3589 </xsl:text> |
4457 </xsl:text> |
3590 </xsl:template> |
4458 </xsl:template> |
3591 <xsl:template match="/"> |
4459 <xsl:template match="/"> |
3592 <xsl:comment> |
4460 <xsl:comment> |
3593 <xsl:text>Made with SVGHMI. https://beremiz.org</xsl:text> |
4461 <xsl:text>Made with SVGHMI. https://beremiz.org</xsl:text> |
3594 </xsl:comment> |
4462 </xsl:comment> |
3595 <xsl:comment> |
4463 <xsl:comment> |
3596 <xsl:apply-templates select="document('')/*/debug:*"/> |
4464 <xsl:apply-templates select="document('')/*/debug:*"/> |
3597 </xsl:comment> |
4465 </xsl:comment> |
3598 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
4466 <html xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1999/xhtml"> |
3599 <head/> |
4467 <head/> |
3600 <body style="margin:0;overflow:hidden;"> |
4468 <body style="margin:0;overflow:hidden;"> |
3601 <xsl:copy-of select="$result_svg"/> |
4469 <xsl:copy-of select="$result_svg"/> |
3602 <script> |
4470 <script> |
3603 <xsl:text> |
4471 <xsl:text> |