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> |
623 </xsl:text> |
623 </xsl:text> |
624 </xsl:for-each> |
624 </xsl:for-each> |
625 <xsl:text> |
625 <xsl:text> |
626 </xsl:text> |
626 </xsl:text> |
627 </xsl:template> |
627 </xsl:template> |
628 <xsl:template mode="inline_svg" match="@* | node()"> |
628 <xsl:template match="@* | node()" mode="inline_svg"> |
629 <xsl:if test="not(@id = $discardable_elements/@id)"> |
629 <xsl:if test="not(@id = $discardable_elements/@id)"> |
630 <xsl:copy> |
630 <xsl:copy> |
631 <xsl:apply-templates mode="inline_svg" select="@* | node()"/> |
631 <xsl:apply-templates select="@* | node()" mode="inline_svg"/> |
632 </xsl:copy> |
632 </xsl:copy> |
633 </xsl:if> |
633 </xsl:if> |
634 </xsl:template> |
634 </xsl:template> |
635 <xsl:template mode="inline_svg" match="svg:svg/@width"/> |
635 <xsl:template match="svg:svg/@width" mode="inline_svg"/> |
636 <xsl:template mode="inline_svg" match="svg:svg/@height"/> |
636 <xsl:template match="svg:svg/@height" mode="inline_svg"/> |
637 <xsl:template xmlns="http://www.w3.org/2000/svg" mode="inline_svg" match="svg:svg"> |
637 <xsl:template xmlns="http://www.w3.org/2000/svg" match="svg:svg" mode="inline_svg"> |
638 <svg> |
638 <svg> |
639 <xsl:attribute name="preserveAspectRatio"> |
639 <xsl:attribute name="preserveAspectRatio"> |
640 <xsl:text>none</xsl:text> |
640 <xsl:text>none</xsl:text> |
641 </xsl:attribute> |
641 </xsl:attribute> |
642 <xsl:attribute name="height"> |
642 <xsl:attribute name="height"> |
643 <xsl:text>100vh</xsl:text> |
643 <xsl:text>100vh</xsl:text> |
644 </xsl:attribute> |
644 </xsl:attribute> |
645 <xsl:attribute name="width"> |
645 <xsl:attribute name="width"> |
646 <xsl:text>100vw</xsl:text> |
646 <xsl:text>100vw</xsl:text> |
647 </xsl:attribute> |
647 </xsl:attribute> |
648 <xsl:apply-templates mode="inline_svg" select="@* | node()"/> |
648 <xsl:apply-templates select="@* | node()" mode="inline_svg"/> |
649 </svg> |
649 </svg> |
650 </xsl:template> |
650 </xsl:template> |
651 <xsl:template mode="inline_svg" match="svg:svg[@viewBox!=concat('0 0 ', @width, ' ', @height)]"> |
651 <xsl:template match="svg:svg[@viewBox!=concat('0 0 ', @width, ' ', @height)]" mode="inline_svg"> |
652 <xsl:message terminate="yes"> |
652 <xsl:message terminate="yes"> |
653 <xsl:text>ViewBox settings other than X=0, Y=0 and Scale=1 are not supported</xsl:text> |
653 <xsl:text>ViewBox settings other than X=0, Y=0 and Scale=1 are not supported</xsl:text> |
654 </xsl:message> |
654 </xsl:message> |
655 </xsl:template> |
655 </xsl:template> |
656 <xsl:template mode="inline_svg" match="sodipodi:namedview[@units!='px' or @inkscape:document-units!='px']"> |
656 <xsl:template match="sodipodi:namedview[@units!='px' or @inkscape:document-units!='px']" mode="inline_svg"> |
657 <xsl:message terminate="yes"> |
657 <xsl:message terminate="yes"> |
658 <xsl:text>All units must be set to "px" in Inkscape's document properties</xsl:text> |
658 <xsl:text>All units must be set to "px" in Inkscape's document properties</xsl:text> |
659 </xsl:message> |
659 </xsl:message> |
660 </xsl:template> |
660 </xsl:template> |
661 <xsl:variable name="hmi_lists_descs" select="$parsed_widgets/widget[@type = 'List']"/> |
661 <xsl:variable name="hmi_lists_descs" select="$parsed_widgets/widget[@type = 'List']"/> |
662 <xsl:variable name="hmi_lists" select="$hmi_elements[@id = $hmi_lists_descs/@id]"/> |
662 <xsl:variable name="hmi_lists" select="$hmi_elements[@id = $hmi_lists_descs/@id]"/> |
663 <xsl:variable name="targets_not_to_unlink" select="$hmi_elements[@id = $hmi_lists/@id]/descendant::svg:*"/> |
663 <xsl:variable name="targets_not_to_unlink" select="$hmi_elements[@id = $hmi_lists/@id]/descendant::svg:*"/> |
664 <xsl:variable name="to_unlink" select="$hmi_elements[not(@id = $hmi_pages/@id)]/descendant-or-self::svg:use"/> |
664 <xsl:variable name="to_unlink" select="$hmi_elements[not(@id = $hmi_pages/@id)]/descendant-or-self::svg:use"/> |
665 <xsl:template xmlns="http://www.w3.org/2000/svg" mode="inline_svg" match="svg:use"> |
665 <xsl:template xmlns="http://www.w3.org/2000/svg" match="svg:use" mode="inline_svg"> |
666 <xsl:variable name="targetid" select="substring-after(@xlink:href,'#')"/> |
666 <xsl:variable name="targetid" select="substring-after(@xlink:href,'#')"/> |
667 <xsl:choose> |
667 <xsl:choose> |
668 <xsl:when test="@id = $to_unlink/@id and not($targetid = $targets_not_to_unlink/@id)"> |
668 <xsl:when test="@id = $to_unlink/@id and not($targetid = $targets_not_to_unlink/@id)"> |
669 <xsl:call-template name="unlink_clone"> |
669 <xsl:call-template name="unlink_clone"> |
670 <xsl:with-param name="targetid" select="$targetid"/> |
670 <xsl:with-param name="targetid" select="$targetid"/> |
671 </xsl:call-template> |
671 </xsl:call-template> |
672 </xsl:when> |
672 </xsl:when> |
673 <xsl:otherwise> |
673 <xsl:otherwise> |
674 <xsl:copy> |
674 <xsl:copy> |
675 <xsl:apply-templates mode="inline_svg" select="@* | node()"/> |
675 <xsl:apply-templates select="@* | node()" mode="inline_svg"/> |
676 </xsl:copy> |
676 </xsl:copy> |
677 </xsl:otherwise> |
677 </xsl:otherwise> |
678 </xsl:choose> |
678 </xsl:choose> |
679 </xsl:template> |
679 </xsl:template> |
680 <xsl:variable name="_excluded_use_attrs"> |
680 <xsl:variable name="_excluded_use_attrs"> |
731 <xsl:text> </xsl:text> |
731 <xsl:text> </xsl:text> |
732 </xsl:if> |
732 </xsl:if> |
733 <xsl:value-of select="$target/@transform"/> |
733 <xsl:value-of select="$target/@transform"/> |
734 </xsl:attribute> |
734 </xsl:attribute> |
735 </xsl:if> |
735 </xsl:if> |
736 <xsl:apply-templates mode="unlink_clone" select="$target/*"> |
736 <xsl:apply-templates select="$target/*" mode="unlink_clone"> |
737 <xsl:with-param name="seed" select="@id"/> |
737 <xsl:with-param name="seed" select="@id"/> |
738 </xsl:apply-templates> |
738 </xsl:apply-templates> |
739 </xsl:when> |
739 </xsl:when> |
740 <xsl:otherwise> |
740 <xsl:otherwise> |
741 <xsl:for-each select="@*[not(local-name() = $excluded_use_attrs/name)]"> |
741 <xsl:for-each select="@*[not(local-name() = $excluded_use_attrs/name)]"> |
742 <xsl:attribute name="{name()}"> |
742 <xsl:attribute name="{name()}"> |
743 <xsl:value-of select="."/> |
743 <xsl:value-of select="."/> |
744 </xsl:attribute> |
744 </xsl:attribute> |
745 </xsl:for-each> |
745 </xsl:for-each> |
746 <xsl:apply-templates mode="unlink_clone" select="$target"> |
746 <xsl:apply-templates select="$target" mode="unlink_clone"> |
747 <xsl:with-param name="seed" select="@id"/> |
747 <xsl:with-param name="seed" select="@id"/> |
748 </xsl:apply-templates> |
748 </xsl:apply-templates> |
749 </xsl:otherwise> |
749 </xsl:otherwise> |
750 </xsl:choose> |
750 </xsl:choose> |
751 </g> |
751 </g> |
752 </xsl:template> |
752 </xsl:template> |
753 <xsl:template xmlns="http://www.w3.org/2000/svg" mode="unlink_clone" match="@id"> |
753 <xsl:template xmlns="http://www.w3.org/2000/svg" match="@id" mode="unlink_clone"> |
754 <xsl:param name="seed"/> |
754 <xsl:param name="seed"/> |
755 <xsl:attribute name="id"> |
755 <xsl:attribute name="id"> |
756 <xsl:value-of select="$seed"/> |
756 <xsl:value-of select="$seed"/> |
757 <xsl:text>_</xsl:text> |
757 <xsl:text>_</xsl:text> |
758 <xsl:value-of select="."/> |
758 <xsl:value-of select="."/> |
759 </xsl:attribute> |
759 </xsl:attribute> |
760 </xsl:template> |
760 </xsl:template> |
761 <xsl:template xmlns="http://www.w3.org/2000/svg" mode="unlink_clone" match="@*"> |
761 <xsl:template xmlns="http://www.w3.org/2000/svg" match="@*" mode="unlink_clone"> |
762 <xsl:copy/> |
762 <xsl:copy/> |
763 </xsl:template> |
763 </xsl:template> |
764 <xsl:template xmlns="http://www.w3.org/2000/svg" mode="unlink_clone" match="svg:*"> |
764 <xsl:template xmlns="http://www.w3.org/2000/svg" match="svg:*" mode="unlink_clone"> |
765 <xsl:param name="seed"/> |
765 <xsl:param name="seed"/> |
766 <xsl:choose> |
766 <xsl:choose> |
767 <xsl:when test="@id = $hmi_elements/@id"> |
767 <xsl:when test="@id = $hmi_elements/@id"> |
768 <use> |
768 <use> |
769 <xsl:attribute name="xlink:href"> |
769 <xsl:attribute name="xlink:href"> |
1187 <xsl:text> } |
1187 <xsl:text> } |
1188 </xsl:text> |
1188 </xsl:text> |
1189 <xsl:text>} |
1189 <xsl:text>} |
1190 </xsl:text> |
1190 </xsl:text> |
1191 </xsl:template> |
1191 </xsl:template> |
1192 <xsl:template mode="widget_defs" match="widget[@type='Button']"> |
1192 <xsl:template match="widget[@type='Button']" mode="widget_class"> |
|
1193 <xsl:text>t{ |
|
1194 </xsl:text> |
|
1195 <xsl:text>5; |
|
1196 </xsl:text> |
|
1197 <xsl:text>0; |
|
1198 </xsl:text> |
|
1199 <xsl:text>d; |
|
1200 </xsl:text> |
|
1201 <xsl:text>d; |
|
1202 </xsl:text> |
|
1203 <xsl:text> |
|
1204 </xsl:text> |
|
1205 <xsl:text> { |
|
1206 </xsl:text> |
|
1207 <xsl:text> { |
|
1208 </xsl:text> |
|
1209 <xsl:text>); |
|
1210 </xsl:text> |
|
1211 <xsl:text>); |
|
1212 </xsl:text> |
|
1213 <xsl:text> } |
|
1214 </xsl:text> |
|
1215 <xsl:text>); |
|
1216 </xsl:text> |
|
1217 <xsl:text> } |
|
1218 </xsl:text> |
|
1219 <xsl:text> |
|
1220 </xsl:text> |
|
1221 <xsl:text> { |
|
1222 </xsl:text> |
|
1223 <xsl:text> { |
|
1224 </xsl:text> |
|
1225 <xsl:text>); |
|
1226 </xsl:text> |
|
1227 <xsl:text>); |
|
1228 </xsl:text> |
|
1229 <xsl:text> } |
|
1230 </xsl:text> |
|
1231 <xsl:text>); |
|
1232 </xsl:text> |
|
1233 <xsl:text> } |
|
1234 </xsl:text> |
|
1235 <xsl:text> |
|
1236 </xsl:text> |
|
1237 <xsl:text> { |
|
1238 </xsl:text> |
|
1239 <xsl:text>d; |
|
1240 </xsl:text> |
|
1241 <xsl:text>d; |
|
1242 </xsl:text> |
|
1243 <xsl:text> |
|
1244 </xsl:text> |
|
1245 <xsl:text> { |
|
1246 </xsl:text> |
|
1247 <xsl:text>); |
|
1248 </xsl:text> |
|
1249 <xsl:text>); |
|
1250 </xsl:text> |
|
1251 <xsl:text> } |
|
1252 </xsl:text> |
|
1253 <xsl:text> |
|
1254 </xsl:text> |
|
1255 <xsl:text>); |
|
1256 </xsl:text> |
|
1257 <xsl:text>); |
|
1258 </xsl:text> |
|
1259 <xsl:text> } |
|
1260 </xsl:text> |
|
1261 <xsl:text> } |
|
1262 </xsl:text> |
|
1263 <xsl:text>|| |
|
1264 </xsl:text> |
|
1265 </xsl:template> |
|
1266 <xsl:template match="widget[@type='Button']" mode="widget_defs"> |
1193 <xsl:param name="hmi_element"/> |
1267 <xsl:param name="hmi_element"/> |
1194 <xsl:call-template name="defs_by_labels"> |
1268 <xsl:call-template name="defs_by_labels"> |
1195 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
1269 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
1196 <xsl:with-param name="labels"> |
1270 <xsl:with-param name="labels"> |
1197 <xsl:text>active inactive</xsl:text> |
1271 <xsl:text>active inactive</xsl:text> |
1198 </xsl:with-param> |
1272 </xsl:with-param> |
1199 <xsl:with-param name="mandatory" select="'no'"/> |
1273 <xsl:with-param name="mandatory" select="'no'"/> |
1200 </xsl:call-template> |
1274 </xsl:call-template> |
1201 <xsl:text>frequency: 5, |
1275 <xsl:text> |
1202 </xsl:text> |
1276 </xsl:text> |
1203 <xsl:text>on_mouse_down: function(evt) { |
1277 </xsl:template> |
1204 </xsl:text> |
1278 <xsl:template match="widget[@type='CircularBar']" mode="widget_defs"> |
1205 <xsl:text> if (this.active_style && this.inactive_style) { |
|
1206 </xsl:text> |
|
1207 <xsl:text> this.active_elt.setAttribute("style", this.active_style); |
|
1208 </xsl:text> |
|
1209 <xsl:text> this.inactive_elt.setAttribute("style", "display:none"); |
|
1210 </xsl:text> |
|
1211 <xsl:text> } |
|
1212 </xsl:text> |
|
1213 <xsl:text> this.apply_hmi_value(0, 1); |
|
1214 </xsl:text> |
|
1215 <xsl:text>}, |
|
1216 </xsl:text> |
|
1217 <xsl:text>on_mouse_up: function(evt) { |
|
1218 </xsl:text> |
|
1219 <xsl:text> if (this.active_style && this.inactive_style) { |
|
1220 </xsl:text> |
|
1221 <xsl:text> this.active_elt.setAttribute("style", "display:none"); |
|
1222 </xsl:text> |
|
1223 <xsl:text> this.inactive_elt.setAttribute("style", this.inactive_style); |
|
1224 </xsl:text> |
|
1225 <xsl:text> } |
|
1226 </xsl:text> |
|
1227 <xsl:text> this.apply_hmi_value(0, 0); |
|
1228 </xsl:text> |
|
1229 <xsl:text>}, |
|
1230 </xsl:text> |
|
1231 <xsl:text>active_style: undefined, |
|
1232 </xsl:text> |
|
1233 <xsl:text>inactive_style: undefined, |
|
1234 </xsl:text> |
|
1235 <xsl:text>init: function() { |
|
1236 </xsl:text> |
|
1237 <xsl:text> this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined; |
|
1238 </xsl:text> |
|
1239 <xsl:text> this.inactive_style = this.inactive_elt ? this.inactive_elt.style.cssText : undefined; |
|
1240 </xsl:text> |
|
1241 <xsl:text> if (this.active_style && this.inactive_style) { |
|
1242 </xsl:text> |
|
1243 <xsl:text> this.active_elt.setAttribute("style", "display:none"); |
|
1244 </xsl:text> |
|
1245 <xsl:text> this.inactive_elt.setAttribute("style", this.inactive_style); |
|
1246 </xsl:text> |
|
1247 <xsl:text> } |
|
1248 </xsl:text> |
|
1249 <xsl:text> this.element.setAttribute("onmousedown", "hmi_widgets['</xsl:text> |
|
1250 <xsl:value-of select="$hmi_element/@id"/> |
|
1251 <xsl:text>'].on_mouse_down(evt)"); |
|
1252 </xsl:text> |
|
1253 <xsl:text> this.element.setAttribute("onmouseup", "hmi_widgets['</xsl:text> |
|
1254 <xsl:value-of select="$hmi_element/@id"/> |
|
1255 <xsl:text>'].on_mouse_up(evt)"); |
|
1256 </xsl:text> |
|
1257 <xsl:text>}, |
|
1258 </xsl:text> |
|
1259 </xsl:template> |
|
1260 <xsl:template mode="widget_defs" match="widget[@type='CircularBar']"> |
|
1261 <xsl:param name="hmi_element"/> |
1279 <xsl:param name="hmi_element"/> |
1262 <xsl:text>frequency: 10, |
1280 <xsl:text>frequency: 10, |
1263 </xsl:text> |
1281 </xsl:text> |
1264 <xsl:call-template name="defs_by_labels"> |
1282 <xsl:call-template name="defs_by_labels"> |
1265 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
1283 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
1351 <xsl:text> this.proportions = [rx, ry]; |
1369 <xsl:text> this.proportions = [rx, ry]; |
1352 </xsl:text> |
1370 </xsl:text> |
1353 <xsl:text>}, |
1371 <xsl:text>}, |
1354 </xsl:text> |
1372 </xsl:text> |
1355 </xsl:template> |
1373 </xsl:template> |
1356 <xsl:template mode="widget_class" match="widget[@type='Display']"> |
1374 <xsl:template match="widget[@type='CircularSlider']" mode="widget_class"> |
|
1375 <xsl:text>class CircularSliderWidget extends Widget{ |
|
1376 </xsl:text> |
|
1377 <xsl:text> frequency = 5; |
|
1378 </xsl:text> |
|
1379 <xsl:text> range = undefined; |
|
1380 </xsl:text> |
|
1381 <xsl:text> circle = undefined; |
|
1382 </xsl:text> |
|
1383 <xsl:text> handle_pos = undefined; |
|
1384 </xsl:text> |
|
1385 <xsl:text> drag = false; |
|
1386 </xsl:text> |
|
1387 <xsl:text> enTimer = false; |
|
1388 </xsl:text> |
|
1389 <xsl:text> |
|
1390 </xsl:text> |
|
1391 <xsl:text> dispatch(value) { |
|
1392 </xsl:text> |
|
1393 <xsl:text> if(!this.drag){ |
|
1394 </xsl:text> |
|
1395 <xsl:text> if(this.value_elt) |
|
1396 </xsl:text> |
|
1397 <xsl:text> this.value_elt.textContent = String(value); |
|
1398 </xsl:text> |
|
1399 <xsl:text> |
|
1400 </xsl:text> |
|
1401 <xsl:text> this.handle_position(value); |
|
1402 </xsl:text> |
|
1403 <xsl:text> } |
|
1404 </xsl:text> |
|
1405 <xsl:text> } |
|
1406 </xsl:text> |
|
1407 <xsl:text> |
|
1408 </xsl:text> |
|
1409 <xsl:text> handle_position(value){ |
|
1410 </xsl:text> |
|
1411 <xsl:text> let [min,max,totalDistance] = this.range; |
|
1412 </xsl:text> |
|
1413 <xsl:text> let length = Math.max(0,Math.min((totalDistance),(Number(value)-min)/(max-min)*(totalDistance))); |
|
1414 </xsl:text> |
|
1415 <xsl:text> let tip = this.range_elt.getPointAtLength(length); |
|
1416 </xsl:text> |
|
1417 <xsl:text> this.handle_elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")"); |
|
1418 </xsl:text> |
|
1419 <xsl:text> } |
|
1420 </xsl:text> |
|
1421 <xsl:text> |
|
1422 </xsl:text> |
|
1423 <xsl:text> on_release(evt) { |
|
1424 </xsl:text> |
|
1425 <xsl:text> if(this.drag){ |
|
1426 </xsl:text> |
|
1427 <xsl:text> this.drag = false; |
|
1428 </xsl:text> |
|
1429 <xsl:text> } |
|
1430 </xsl:text> |
|
1431 <xsl:text> } |
|
1432 </xsl:text> |
|
1433 <xsl:text> |
|
1434 </xsl:text> |
|
1435 <xsl:text> update_position(evt){ |
|
1436 </xsl:text> |
|
1437 <xsl:text> if(this.drag && this.enTimer){ |
|
1438 </xsl:text> |
|
1439 <xsl:text> var svg_dist = 0; |
|
1440 </xsl:text> |
|
1441 <xsl:text> |
|
1442 </xsl:text> |
|
1443 <xsl:text> //calculate center of widget in html |
|
1444 </xsl:text> |
|
1445 <xsl:text> // --TODO maybe it would be better to bind this part to window change size event ??? |
|
1446 </xsl:text> |
|
1447 <xsl:text> let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox; |
|
1448 </xsl:text> |
|
1449 <xsl:text> let [cX, cY,fiStart,fiEnd,minMax,x1,y1,width,height] = this.circle; |
|
1450 </xsl:text> |
|
1451 <xsl:text> let htmlCirc = this.range_elt.getBoundingClientRect(); |
|
1452 </xsl:text> |
|
1453 <xsl:text> let cxHtml = ((htmlCirc.right-htmlCirc.left)/(width)*(cX-x1))+htmlCirc.left; |
|
1454 </xsl:text> |
|
1455 <xsl:text> let cyHtml = ((htmlCirc.bottom-htmlCirc.top)/(height)*(cY-y1))+htmlCirc.top; |
|
1456 </xsl:text> |
|
1457 <xsl:text> |
|
1458 </xsl:text> |
|
1459 <xsl:text> |
|
1460 </xsl:text> |
|
1461 <xsl:text> //get mouse coordinates |
|
1462 </xsl:text> |
|
1463 <xsl:text> let mouseX = undefined; |
|
1464 </xsl:text> |
|
1465 <xsl:text> let mouseY = undefined; |
|
1466 </xsl:text> |
|
1467 <xsl:text> if (evt.type.startsWith("touch")){ |
|
1468 </xsl:text> |
|
1469 <xsl:text> mouseX = Math.ceil(evt.touches[0].clientX); |
|
1470 </xsl:text> |
|
1471 <xsl:text> mouseY = Math.ceil(evt.touches[0].clientY); |
|
1472 </xsl:text> |
|
1473 <xsl:text> } |
|
1474 </xsl:text> |
|
1475 <xsl:text> else{ |
|
1476 </xsl:text> |
|
1477 <xsl:text> mouseX = evt.pageX; |
|
1478 </xsl:text> |
|
1479 <xsl:text> mouseY = evt.pageY; |
|
1480 </xsl:text> |
|
1481 <xsl:text> } |
|
1482 </xsl:text> |
|
1483 <xsl:text> |
|
1484 </xsl:text> |
|
1485 <xsl:text> //calculate angle |
|
1486 </xsl:text> |
|
1487 <xsl:text> let fi = Math.atan2(cyHtml-mouseY, mouseX-cxHtml); |
|
1488 </xsl:text> |
|
1489 <xsl:text> |
|
1490 </xsl:text> |
|
1491 <xsl:text> // transform from 0 to 2PI |
|
1492 </xsl:text> |
|
1493 <xsl:text> if (fi > 0){ |
|
1494 </xsl:text> |
|
1495 <xsl:text> fi = 2*Math.PI-fi; |
|
1496 </xsl:text> |
|
1497 <xsl:text> } |
|
1498 </xsl:text> |
|
1499 <xsl:text> else{ |
|
1500 </xsl:text> |
|
1501 <xsl:text> fi = -fi; |
|
1502 </xsl:text> |
|
1503 <xsl:text> } |
|
1504 </xsl:text> |
|
1505 <xsl:text> |
|
1506 </xsl:text> |
|
1507 <xsl:text> //offset it to 0 |
|
1508 </xsl:text> |
|
1509 <xsl:text> fi = fi - fiStart; |
|
1510 </xsl:text> |
|
1511 <xsl:text> if (fi < 0){ |
|
1512 </xsl:text> |
|
1513 <xsl:text> fi = fi + 2*Math.PI; |
|
1514 </xsl:text> |
|
1515 <xsl:text> } |
|
1516 </xsl:text> |
|
1517 <xsl:text> |
|
1518 </xsl:text> |
|
1519 <xsl:text> //get handle distance from mouse position |
|
1520 </xsl:text> |
|
1521 <xsl:text> if(fi<fiEnd){ |
|
1522 </xsl:text> |
|
1523 <xsl:text> svg_dist=(fi)/(fiEnd)*(this.range[1]-this.range[0]); |
|
1524 </xsl:text> |
|
1525 <xsl:text> } |
|
1526 </xsl:text> |
|
1527 <xsl:text> else if(fiEnd<fi && fi<fiEnd+minMax){ |
|
1528 </xsl:text> |
|
1529 <xsl:text> svg_dist = this.range[1]; |
|
1530 </xsl:text> |
|
1531 <xsl:text> } |
|
1532 </xsl:text> |
|
1533 <xsl:text> else{ |
|
1534 </xsl:text> |
|
1535 <xsl:text> svg_dist = this.range[0]; |
|
1536 </xsl:text> |
|
1537 <xsl:text> } |
|
1538 </xsl:text> |
|
1539 <xsl:text> |
|
1540 </xsl:text> |
|
1541 <xsl:text> //redraw handle --TODO is it fast enough if I just call change_hmi_value??? |
|
1542 </xsl:text> |
|
1543 <xsl:text> this.handle_position(svg_dist); |
|
1544 </xsl:text> |
|
1545 <xsl:text> if(this.value_elt) |
|
1546 </xsl:text> |
|
1547 <xsl:text> this.value_elt.textContent = String(Math.ceil(svg_dist)); |
|
1548 </xsl:text> |
|
1549 <xsl:text> change_hmi_value(this.indexes[0], "="+Math.ceil(svg_dist)); |
|
1550 </xsl:text> |
|
1551 <xsl:text> |
|
1552 </xsl:text> |
|
1553 <xsl:text> //reset timer |
|
1554 </xsl:text> |
|
1555 <xsl:text> this.enTimer = false; |
|
1556 </xsl:text> |
|
1557 <xsl:text> setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); |
|
1558 </xsl:text> |
|
1559 <xsl:text> } |
|
1560 </xsl:text> |
|
1561 <xsl:text> |
|
1562 </xsl:text> |
|
1563 <xsl:text> } |
|
1564 </xsl:text> |
|
1565 <xsl:text> |
|
1566 </xsl:text> |
|
1567 <xsl:text> on_select(evt){ |
|
1568 </xsl:text> |
|
1569 <xsl:text> this.drag = true; |
|
1570 </xsl:text> |
|
1571 <xsl:text> this.enTimer = true; |
|
1572 </xsl:text> |
|
1573 <xsl:text> this.update_position(evt); |
|
1574 </xsl:text> |
|
1575 <xsl:text> } |
|
1576 </xsl:text> |
|
1577 <xsl:text> |
|
1578 </xsl:text> |
|
1579 <xsl:text> init() { |
|
1580 </xsl:text> |
|
1581 <xsl:text> //get min max |
|
1582 </xsl:text> |
|
1583 <xsl:text> let min = this.min_elt ? |
|
1584 </xsl:text> |
|
1585 <xsl:text> Number(this.min_elt.textContent) : |
|
1586 </xsl:text> |
|
1587 <xsl:text> this.args.length >= 1 ? this.args[0] : 0; |
|
1588 </xsl:text> |
|
1589 <xsl:text> let max = this.max_elt ? |
|
1590 </xsl:text> |
|
1591 <xsl:text> Number(this.max_elt.textContent) : |
|
1592 </xsl:text> |
|
1593 <xsl:text> this.args.length >= 2 ? this.args[1] : 100; |
|
1594 </xsl:text> |
|
1595 <xsl:text> |
|
1596 </xsl:text> |
|
1597 <xsl:text> //fiStart ==> offset |
|
1598 </xsl:text> |
|
1599 <xsl:text> let fiStart = Number(this.range_elt.getAttribute('sodipodi:start')); |
|
1600 </xsl:text> |
|
1601 <xsl:text> let fiEnd = Number(this.range_elt.getAttribute('sodipodi:end')); |
|
1602 </xsl:text> |
|
1603 <xsl:text> fiEnd = fiEnd - fiStart; |
|
1604 </xsl:text> |
|
1605 <xsl:text> |
|
1606 </xsl:text> |
|
1607 <xsl:text> //fiEnd ==> size of angle |
|
1608 </xsl:text> |
|
1609 <xsl:text> if (fiEnd < 0){ |
|
1610 </xsl:text> |
|
1611 <xsl:text> fiEnd = 2*Math.PI + fiEnd; |
|
1612 </xsl:text> |
|
1613 <xsl:text> } |
|
1614 </xsl:text> |
|
1615 <xsl:text> |
|
1616 </xsl:text> |
|
1617 <xsl:text> //min max barrier angle |
|
1618 </xsl:text> |
|
1619 <xsl:text> let minMax = (2*Math.PI - fiEnd)/2; |
|
1620 </xsl:text> |
|
1621 <xsl:text> |
|
1622 </xsl:text> |
|
1623 <xsl:text> //get parameters from svg |
|
1624 </xsl:text> |
|
1625 <xsl:text> let cX = Number(this.range_elt.getAttribute('sodipodi:cx')); |
|
1626 </xsl:text> |
|
1627 <xsl:text> let cY = Number(this.range_elt.getAttribute('sodipodi:cy')); |
|
1628 </xsl:text> |
|
1629 <xsl:text> this.range_elt.style.strokeMiterlimit="0"; //eliminates some weird border around html object |
|
1630 </xsl:text> |
|
1631 <xsl:text> this.range = [min, max,this.range_elt.getTotalLength()]; |
|
1632 </xsl:text> |
|
1633 <xsl:text> let cPos = this.range_elt.getBBox(); |
|
1634 </xsl:text> |
|
1635 <xsl:text> this.handle_pos = this.range_elt.getPointAtLength(0); |
|
1636 </xsl:text> |
|
1637 <xsl:text> this.circle = [cX, cY,fiStart,fiEnd,minMax,cPos.x,cPos.y,cPos.width,cPos.height]; |
|
1638 </xsl:text> |
|
1639 <xsl:text> |
|
1640 </xsl:text> |
|
1641 <xsl:text> //init events |
|
1642 </xsl:text> |
|
1643 <xsl:text> this.handle_elt.addEventListener("touchstart", hmi_widgets[this.element_id].on_select.bind(this)); |
|
1644 </xsl:text> |
|
1645 <xsl:text> this.handle_elt.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this)); |
|
1646 </xsl:text> |
|
1647 <xsl:text> this.element.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this)); |
|
1648 </xsl:text> |
|
1649 <xsl:text> |
|
1650 </xsl:text> |
|
1651 <xsl:text> window.addEventListener("touchmove", hmi_widgets[this.element_id].update_position.bind(this)); |
|
1652 </xsl:text> |
|
1653 <xsl:text> window.addEventListener("mousemove", hmi_widgets[this.element_id].update_position.bind(this)); |
|
1654 </xsl:text> |
|
1655 <xsl:text> |
|
1656 </xsl:text> |
|
1657 <xsl:text> window.addEventListener("mouseup", hmi_widgets[this.element_id].on_release.bind(this)) |
|
1658 </xsl:text> |
|
1659 <xsl:text> window.addEventListener("touchend", hmi_widgets[this.element_id].on_release.bind(this)); |
|
1660 </xsl:text> |
|
1661 <xsl:text> window.addEventListener("touchcancel", hmi_widgets[this.element_id].on_release.bind(this)); |
|
1662 </xsl:text> |
|
1663 <xsl:text> |
|
1664 </xsl:text> |
|
1665 <xsl:text> } |
|
1666 </xsl:text> |
|
1667 <xsl:text>} |
|
1668 </xsl:text> |
|
1669 </xsl:template> |
|
1670 <xsl:template match="widget[@type='CircularSlider']" mode="widget_defs"> |
|
1671 <xsl:param name="hmi_element"/> |
|
1672 <xsl:call-template name="defs_by_labels"> |
|
1673 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
|
1674 <xsl:with-param name="labels"> |
|
1675 <xsl:text>handle range</xsl:text> |
|
1676 </xsl:with-param> |
|
1677 </xsl:call-template> |
|
1678 <xsl:call-template name="defs_by_labels"> |
|
1679 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
|
1680 <xsl:with-param name="labels"> |
|
1681 <xsl:text>value min max</xsl:text> |
|
1682 </xsl:with-param> |
|
1683 <xsl:with-param name="mandatory" select="'no'"/> |
|
1684 </xsl:call-template> |
|
1685 <xsl:text> |
|
1686 </xsl:text> |
|
1687 </xsl:template> |
|
1688 <xsl:template match="widget[@type='Display']" mode="widget_class"> |
1357 <xsl:text>class DisplayWidget extends Widget{ |
1689 <xsl:text>class DisplayWidget extends Widget{ |
1358 </xsl:text> |
1690 </xsl:text> |
1359 <xsl:text> frequency = 5; |
1691 <xsl:text> frequency = 5; |
1360 </xsl:text> |
1692 </xsl:text> |
1361 <xsl:text> dispatch(value) { |
1693 <xsl:text> dispatch(value) { |
2231 <xsl:text> } |
2572 <xsl:text> } |
2232 </xsl:text> |
2573 </xsl:text> |
2233 <xsl:text>} |
2574 <xsl:text>} |
2234 </xsl:text> |
2575 </xsl:text> |
2235 </xsl:template> |
2576 </xsl:template> |
2236 <xsl:template mode="json_table_elt_render" match="svg:*"> |
2577 <xsl:template match="svg:*" mode="json_table_elt_render"> |
2237 <xsl:message terminate="yes"> |
2578 <xsl:message terminate="yes"> |
2238 <xsl:text>JsonTable Widget can't contain element of type </xsl:text> |
2579 <xsl:text>JsonTable Widget can't contain element of type </xsl:text> |
2239 <xsl:value-of select="local-name()"/> |
2580 <xsl:value-of select="local-name()"/> |
2240 <xsl:text>.</xsl:text> |
2581 <xsl:text>.</xsl:text> |
2241 </xsl:message> |
2582 </xsl:message> |
2242 </xsl:template> |
2583 </xsl:template> |
2243 <xsl:template mode="json_table_elt_render" match="svg:use"> |
2584 <xsl:template match="svg:use" mode="json_table_elt_render"> |
2244 <xsl:param name="value_expr"/> |
2585 <xsl:param name="value_expr"/> |
2245 <xsl:variable name="targetid" select="substring-after(@xlink:href,'#')"/> |
2586 <xsl:variable name="targetid" select="substring-after(@xlink:href,'#')"/> |
2246 <xsl:variable name="from_list" select="$hmi_lists[(@id | */@id) = $targetid]"/> |
2587 <xsl:variable name="from_list" select="$hmi_lists[(@id | */@id) = $targetid]"/> |
2247 <xsl:if test="count($from_list) = 0"> |
2588 <xsl:if test="count($from_list) = 0"> |
2248 <xsl:message terminate="yes"> |
2589 <xsl:message terminate="yes"> |
2249 <xsl:text>Clones (svg:use) in JsonTable Widget must point to a valid HMI:List widget or HMI:List item. Reference "</xsl:text> |
2590 <xsl:text>Clones (svg:use) in JsonTable Widget must point to a valid HMI:List widget or HMI:List item. Reference "</xsl:text> |
2250 <xsl:value-of select="@xlink:href"/> |
2591 <xsl:value-of select="@xlink:href"/> |
2251 <xsl:text>" is not valid.</xsl:text> |
2592 <xsl:text>" is not valid.</xsl:text> |
2252 </xsl:message> |
2593 </xsl:message> |
2253 </xsl:if> |
2594 </xsl:if> |
2254 <xsl:text> console.log("</xsl:text> |
|
2255 <xsl:value-of select="@id"/> |
|
2256 <xsl:text>", "</xsl:text> |
|
2257 <xsl:value-of select="$value_expr"/> |
|
2258 <xsl:text>", </xsl:text> |
|
2259 <xsl:value-of select="$value_expr"/> |
|
2260 <xsl:text>); |
|
2261 </xsl:text> |
|
2262 <xsl:text> id("</xsl:text> |
2595 <xsl:text> id("</xsl:text> |
2263 <xsl:value-of select="@id"/> |
2596 <xsl:value-of select="@id"/> |
2264 <xsl:text>").setAttribute("xlink:href", |
2597 <xsl:text>").setAttribute("xlink:href", |
2265 </xsl:text> |
2598 </xsl:text> |
2266 <xsl:text> "#"+hmi_widgets["</xsl:text> |
2599 <xsl:text> "#"+hmi_widgets["</xsl:text> |
2268 <xsl:text>"].items[</xsl:text> |
2601 <xsl:text>"].items[</xsl:text> |
2269 <xsl:value-of select="$value_expr"/> |
2602 <xsl:value-of select="$value_expr"/> |
2270 <xsl:text>]); |
2603 <xsl:text>]); |
2271 </xsl:text> |
2604 </xsl:text> |
2272 </xsl:template> |
2605 </xsl:template> |
2273 <xsl:template mode="json_table_elt_render" match="svg:text"> |
2606 <xsl:template match="svg:text" mode="json_table_elt_render"> |
2274 <xsl:param name="value_expr"/> |
2607 <xsl:param name="value_expr"/> |
2275 <xsl:text> console.log("</xsl:text> |
|
2276 <xsl:value-of select="@id"/> |
|
2277 <xsl:text>", "</xsl:text> |
|
2278 <xsl:value-of select="$value_expr"/> |
|
2279 <xsl:text>", </xsl:text> |
|
2280 <xsl:value-of select="$value_expr"/> |
|
2281 <xsl:text>); |
|
2282 </xsl:text> |
|
2283 <xsl:text> id("</xsl:text> |
2608 <xsl:text> id("</xsl:text> |
2284 <xsl:value-of select="@id"/> |
2609 <xsl:value-of select="@id"/> |
2285 <xsl:text>").textContent = String(</xsl:text> |
2610 <xsl:text>").textContent = String(</xsl:text> |
2286 <xsl:value-of select="$value_expr"/> |
2611 <xsl:value-of select="$value_expr"/> |
2287 <xsl:text>); |
2612 <xsl:text>); |
2288 </xsl:text> |
2613 </xsl:text> |
2289 </xsl:template> |
2614 </xsl:template> |
2290 <xsl:template mode="json_table_render" match="svg:*"> |
2615 <xsl:template match="svg:*" mode="json_table_render"> |
2291 <xsl:param name="objname"/> |
2616 <xsl:param name="objname"/> |
2292 <xsl:apply-templates mode="json_table_elt_render" select="."> |
2617 <xsl:apply-templates select="." mode="json_table_elt_render"> |
2293 <xsl:with-param name="value_expr"> |
2618 <xsl:with-param name="value_expr"> |
2294 <xsl:value-of select="$objname"/> |
2619 <xsl:value-of select="$objname"/> |
2295 <xsl:value-of select="@inkscape:label"/> |
2620 <xsl:value-of select="@inkscape:label"/> |
2296 </xsl:with-param> |
2621 </xsl:with-param> |
2297 </xsl:apply-templates> |
2622 </xsl:apply-templates> |
2298 </xsl:template> |
2623 </xsl:template> |
2299 <xsl:template mode="json_table_render" match="svg:g"> |
2624 <xsl:template match="svg:g" mode="json_table_render"> |
2300 <xsl:param name="objname"/> |
2625 <xsl:param name="objname"/> |
2301 <xsl:text> let obj_</xsl:text> |
2626 <xsl:text> let obj_</xsl:text> |
2302 <xsl:value-of select="@id"/> |
2627 <xsl:value-of select="@id"/> |
2303 <xsl:text> = </xsl:text> |
2628 <xsl:text> = </xsl:text> |
2304 <xsl:value-of select="$objname"/> |
2629 <xsl:value-of select="$objname"/> |
2305 <xsl:value-of select="@inkscape:label"/> |
2630 <xsl:value-of select="@inkscape:label"/> |
2306 <xsl:text>; |
2631 <xsl:text>; |
2307 </xsl:text> |
2632 </xsl:text> |
2308 <xsl:apply-templates mode="json_table_render" select="*[@inkscape:label]"> |
2633 <xsl:apply-templates select="*[@inkscape:label]" mode="json_table_render"> |
2309 <xsl:with-param name="objname"> |
2634 <xsl:with-param name="objname"> |
2310 <xsl:text>obj_</xsl:text> |
2635 <xsl:text>obj_</xsl:text> |
2311 <xsl:value-of select="@id"/> |
2636 <xsl:value-of select="@id"/> |
2312 </xsl:with-param> |
2637 </xsl:with-param> |
2313 </xsl:apply-templates> |
2638 </xsl:apply-templates> |
2314 </xsl:template> |
2639 </xsl:template> |
2315 <xsl:template mode="widget_defs" match="widget[@type='JsonTable']"> |
2640 <xsl:template match="widget[@type='JsonTable']" mode="widget_defs"> |
2316 <xsl:param name="hmi_element"/> |
2641 <xsl:param name="hmi_element"/> |
2317 <xsl:call-template name="defs_by_labels"> |
2642 <xsl:call-template name="defs_by_labels"> |
2318 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
2643 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
2319 <xsl:with-param name="labels"> |
2644 <xsl:with-param name="labels"> |
2320 <xsl:text>data</xsl:text> |
2645 <xsl:text>data</xsl:text> |
2593 <xsl:text>} |
2916 <xsl:text>} |
2594 </xsl:text> |
2917 </xsl:text> |
2595 <xsl:text> |
2918 <xsl:text> |
2596 </xsl:text> |
2919 </xsl:text> |
2597 </xsl:template> |
2920 </xsl:template> |
2598 <xsl:template mode="widget_defs" match="widget[@type='Keypad']"> |
2921 <xsl:template match="widget[@type='Keypad']" mode="widget_class"> |
|
2922 <xsl:text>class KeypadWidget extends Widget{ |
|
2923 </xsl:text> |
|
2924 <xsl:text> moving = undefined; |
|
2925 </xsl:text> |
|
2926 <xsl:text> enTimer = undefined; |
|
2927 </xsl:text> |
|
2928 <xsl:text> offset = undefined; |
|
2929 </xsl:text> |
|
2930 <xsl:text> |
|
2931 </xsl:text> |
|
2932 <xsl:text> on_position_click(evt) { |
|
2933 </xsl:text> |
|
2934 <xsl:text> this.moving = true; |
|
2935 </xsl:text> |
|
2936 <xsl:text> this.enTimer = true; |
|
2937 </xsl:text> |
|
2938 <xsl:text> |
|
2939 </xsl:text> |
|
2940 <xsl:text> // get click position offset from widget x,y and save it to variable |
|
2941 </xsl:text> |
|
2942 <xsl:text> var keypad_borders = this.position_elt.getBoundingClientRect(); |
|
2943 </xsl:text> |
|
2944 <xsl:text> var clickX = undefined; |
|
2945 </xsl:text> |
|
2946 <xsl:text> var clickY = undefined; |
|
2947 </xsl:text> |
|
2948 <xsl:text> if (evt.type == "touchstart"){ |
|
2949 </xsl:text> |
|
2950 <xsl:text> clickX = Math.ceil(evt.touches[0].clientX); |
|
2951 </xsl:text> |
|
2952 <xsl:text> clickY = Math.ceil(evt.touches[0].clientY); |
|
2953 </xsl:text> |
|
2954 <xsl:text> } |
|
2955 </xsl:text> |
|
2956 <xsl:text> else{ |
|
2957 </xsl:text> |
|
2958 <xsl:text> clickX = evt.pageX; |
|
2959 </xsl:text> |
|
2960 <xsl:text> clickY = evt.pageY; |
|
2961 </xsl:text> |
|
2962 <xsl:text> } |
|
2963 </xsl:text> |
|
2964 <xsl:text> this.offset=[clickX-keypad_borders.left,clickY-keypad_borders.top] |
|
2965 </xsl:text> |
|
2966 <xsl:text> } |
|
2967 </xsl:text> |
|
2968 <xsl:text> |
|
2969 </xsl:text> |
|
2970 <xsl:text> off_position_click(evt) { |
|
2971 </xsl:text> |
|
2972 <xsl:text> if(this.moving) |
|
2973 </xsl:text> |
|
2974 <xsl:text> this.moving = false; |
|
2975 </xsl:text> |
|
2976 <xsl:text> } |
|
2977 </xsl:text> |
|
2978 <xsl:text> |
|
2979 </xsl:text> |
|
2980 <xsl:text> on_move(evt) { |
|
2981 </xsl:text> |
|
2982 <xsl:text> if(this.moving && this.enTimer){ |
|
2983 </xsl:text> |
|
2984 <xsl:text> //get keyboard pos in html |
|
2985 </xsl:text> |
|
2986 <xsl:text> let [eltid, tmpgrp] = current_modal; |
|
2987 </xsl:text> |
|
2988 <xsl:text> let [xcoord,ycoord] = this.coordinates; |
|
2989 </xsl:text> |
|
2990 <xsl:text> let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox; |
|
2991 </xsl:text> |
|
2992 <xsl:text> |
|
2993 </xsl:text> |
|
2994 <xsl:text> //get mouse coordinates |
|
2995 </xsl:text> |
|
2996 <xsl:text> var clickX = undefined; |
|
2997 </xsl:text> |
|
2998 <xsl:text> var clickY = undefined; |
|
2999 </xsl:text> |
|
3000 <xsl:text> if (evt.type == "touchmove"){ |
|
3001 </xsl:text> |
|
3002 <xsl:text> clickX = Math.ceil(evt.touches[0].clientX); |
|
3003 </xsl:text> |
|
3004 <xsl:text> clickY = Math.ceil(evt.touches[0].clientY); |
|
3005 </xsl:text> |
|
3006 <xsl:text> } |
|
3007 </xsl:text> |
|
3008 <xsl:text> else{ |
|
3009 </xsl:text> |
|
3010 <xsl:text> clickX = evt.pageX; |
|
3011 </xsl:text> |
|
3012 <xsl:text> clickY = evt.pageY; |
|
3013 </xsl:text> |
|
3014 <xsl:text> } |
|
3015 </xsl:text> |
|
3016 <xsl:text> |
|
3017 </xsl:text> |
|
3018 <xsl:text> //translate keyboard position |
|
3019 </xsl:text> |
|
3020 <xsl:text> let mouseX = ((clickX-this.offset[0])/window.innerWidth)*svgWidth; |
|
3021 </xsl:text> |
|
3022 <xsl:text> let mouseY = ((clickY-this.offset[1])/window.innerHeight)*svgHeight; |
|
3023 </xsl:text> |
|
3024 <xsl:text> tmpgrp.setAttribute("transform","translate("+String(xdest-xcoord+mouseX)+","+String(ydest-ycoord+mouseY)+")"); |
|
3025 </xsl:text> |
|
3026 <xsl:text> |
|
3027 </xsl:text> |
|
3028 <xsl:text> //reset timer |
|
3029 </xsl:text> |
|
3030 <xsl:text> this.enTimer = false; |
|
3031 </xsl:text> |
|
3032 <xsl:text> setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); |
|
3033 </xsl:text> |
|
3034 <xsl:text> } |
|
3035 </xsl:text> |
|
3036 <xsl:text> |
|
3037 </xsl:text> |
|
3038 <xsl:text> } |
|
3039 </xsl:text> |
|
3040 <xsl:text> |
|
3041 </xsl:text> |
|
3042 <xsl:text> on_key_click(symbols) { |
|
3043 </xsl:text> |
|
3044 <xsl:text> var syms = symbols.split(" "); |
|
3045 </xsl:text> |
|
3046 <xsl:text> this.shift |= this.caps; |
|
3047 </xsl:text> |
|
3048 <xsl:text> this.editstr += syms[this.shift?syms.length-1:0]; |
|
3049 </xsl:text> |
|
3050 <xsl:text> this.shift = false; |
|
3051 </xsl:text> |
|
3052 <xsl:text> this.update(); |
|
3053 </xsl:text> |
|
3054 <xsl:text> } |
|
3055 </xsl:text> |
|
3056 <xsl:text> |
|
3057 </xsl:text> |
|
3058 <xsl:text> on_Esc_click() { |
|
3059 </xsl:text> |
|
3060 <xsl:text> end_modal.call(this); |
|
3061 </xsl:text> |
|
3062 <xsl:text> } |
|
3063 </xsl:text> |
|
3064 <xsl:text> |
|
3065 </xsl:text> |
|
3066 <xsl:text> on_Enter_click() { |
|
3067 </xsl:text> |
|
3068 <xsl:text> end_modal.call(this); |
|
3069 </xsl:text> |
|
3070 <xsl:text> let callback_obj = this.result_callback_obj; |
|
3071 </xsl:text> |
|
3072 <xsl:text> callback_obj.edit_callback(this.editstr); |
|
3073 </xsl:text> |
|
3074 <xsl:text> } |
|
3075 </xsl:text> |
|
3076 <xsl:text> |
|
3077 </xsl:text> |
|
3078 <xsl:text> on_BackSpace_click() { |
|
3079 </xsl:text> |
|
3080 <xsl:text> this.editstr = this.editstr.slice(0,this.editstr.length-1); |
|
3081 </xsl:text> |
|
3082 <xsl:text> this.update(); |
|
3083 </xsl:text> |
|
3084 <xsl:text> } |
|
3085 </xsl:text> |
|
3086 <xsl:text> |
|
3087 </xsl:text> |
|
3088 <xsl:text> on_Sign_click() { |
|
3089 </xsl:text> |
|
3090 <xsl:text> if(this.editstr[0] == "-") |
|
3091 </xsl:text> |
|
3092 <xsl:text> this.editstr = this.editstr.slice(1,this.editstr.length); |
|
3093 </xsl:text> |
|
3094 <xsl:text> else |
|
3095 </xsl:text> |
|
3096 <xsl:text> this.editstr = "-" + this.editstr; |
|
3097 </xsl:text> |
|
3098 <xsl:text> this.update(); |
|
3099 </xsl:text> |
|
3100 <xsl:text> } |
|
3101 </xsl:text> |
|
3102 <xsl:text> |
|
3103 </xsl:text> |
|
3104 <xsl:text> on_NumDot_click() { |
|
3105 </xsl:text> |
|
3106 <xsl:text> if(this.editstr.indexOf(".") == "-1"){ |
|
3107 </xsl:text> |
|
3108 <xsl:text> this.editstr += "."; |
|
3109 </xsl:text> |
|
3110 <xsl:text> this.update(); |
|
3111 </xsl:text> |
|
3112 <xsl:text> } |
|
3113 </xsl:text> |
|
3114 <xsl:text> } |
|
3115 </xsl:text> |
|
3116 <xsl:text> |
|
3117 </xsl:text> |
|
3118 <xsl:text> on_Space_click() { |
|
3119 </xsl:text> |
|
3120 <xsl:text> this.editstr += " "; |
|
3121 </xsl:text> |
|
3122 <xsl:text> this.update(); |
|
3123 </xsl:text> |
|
3124 <xsl:text> } |
|
3125 </xsl:text> |
|
3126 <xsl:text> |
|
3127 </xsl:text> |
|
3128 <xsl:text> caps = false; |
|
3129 </xsl:text> |
|
3130 <xsl:text> _caps = undefined; |
|
3131 </xsl:text> |
|
3132 <xsl:text> on_CapsLock_click() { |
|
3133 </xsl:text> |
|
3134 <xsl:text> this.caps = !this.caps; |
|
3135 </xsl:text> |
|
3136 <xsl:text> this.update(); |
|
3137 </xsl:text> |
|
3138 <xsl:text> } |
|
3139 </xsl:text> |
|
3140 <xsl:text> |
|
3141 </xsl:text> |
|
3142 <xsl:text> shift = false; |
|
3143 </xsl:text> |
|
3144 <xsl:text> _shift = undefined; |
|
3145 </xsl:text> |
|
3146 <xsl:text> on_Shift_click() { |
|
3147 </xsl:text> |
|
3148 <xsl:text> this.shift = !this.shift; |
|
3149 </xsl:text> |
|
3150 <xsl:text> this.caps = false; |
|
3151 </xsl:text> |
|
3152 <xsl:text> this.update(); |
|
3153 </xsl:text> |
|
3154 <xsl:text> } |
|
3155 </xsl:text> |
|
3156 <xsl:text> editstr = ""; |
|
3157 </xsl:text> |
|
3158 <xsl:text> _editstr = undefined; |
|
3159 </xsl:text> |
|
3160 <xsl:text> result_callback_obj = undefined; |
|
3161 </xsl:text> |
|
3162 <xsl:text> start_edit(info, valuetype, callback_obj, initial,size) { |
|
3163 </xsl:text> |
|
3164 <xsl:text> show_modal.call(this,size); |
|
3165 </xsl:text> |
|
3166 <xsl:text> this.editstr = initial; |
|
3167 </xsl:text> |
|
3168 <xsl:text> this.result_callback_obj = callback_obj; |
|
3169 </xsl:text> |
|
3170 <xsl:text> this.Info_elt.textContent = info; |
|
3171 </xsl:text> |
|
3172 <xsl:text> this.shift = false; |
|
3173 </xsl:text> |
|
3174 <xsl:text> this.caps = false; |
|
3175 </xsl:text> |
|
3176 <xsl:text> this.update(); |
|
3177 </xsl:text> |
|
3178 <xsl:text> } |
|
3179 </xsl:text> |
|
3180 <xsl:text> |
|
3181 </xsl:text> |
|
3182 <xsl:text> update() { |
|
3183 </xsl:text> |
|
3184 <xsl:text> if(this.editstr != this._editstr){ |
|
3185 </xsl:text> |
|
3186 <xsl:text> this._editstr = this.editstr; |
|
3187 </xsl:text> |
|
3188 <xsl:text> this.Value_elt.textContent = this.editstr; |
|
3189 </xsl:text> |
|
3190 <xsl:text> } |
|
3191 </xsl:text> |
|
3192 <xsl:text> if(this.shift != this._shift){ |
|
3193 </xsl:text> |
|
3194 <xsl:text> this._shift = this.shift; |
|
3195 </xsl:text> |
|
3196 <xsl:text> (this.shift?widget_active_activable:widget_inactive_activable)(this.Shift_sub); |
|
3197 </xsl:text> |
|
3198 <xsl:text> } |
|
3199 </xsl:text> |
|
3200 <xsl:text> if(this.caps != this._caps){ |
|
3201 </xsl:text> |
|
3202 <xsl:text> this._caps = this.caps; |
|
3203 </xsl:text> |
|
3204 <xsl:text> (this.caps?widget_active_activable:widget_inactive_activable)(this.CapsLock_sub); |
|
3205 </xsl:text> |
|
3206 <xsl:text> } |
|
3207 </xsl:text> |
|
3208 <xsl:text> } |
|
3209 </xsl:text> |
|
3210 <xsl:text>} |
|
3211 </xsl:text> |
|
3212 </xsl:template> |
|
3213 <xsl:template match="widget[@type='Keypad']" mode="widget_defs"> |
2599 <xsl:param name="hmi_element"/> |
3214 <xsl:param name="hmi_element"/> |
2600 <xsl:call-template name="defs_by_labels"> |
3215 <xsl:call-template name="defs_by_labels"> |
2601 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
3216 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
2602 <xsl:with-param name="labels"> |
3217 <xsl:with-param name="labels"> |
2603 <xsl:text>Esc Enter BackSpace Keys Info Value</xsl:text> |
3218 <xsl:text>Esc Enter BackSpace Keys Info Value</xsl:text> |
2604 </xsl:with-param> |
3219 </xsl:with-param> |
2605 </xsl:call-template> |
3220 </xsl:call-template> |
2606 <xsl:call-template name="defs_by_labels"> |
3221 <xsl:call-template name="defs_by_labels"> |
2607 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
3222 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
2608 <xsl:with-param name="labels"> |
3223 <xsl:with-param name="labels"> |
2609 <xsl:text>Sign Space NumDot</xsl:text> |
3224 <xsl:text>Sign Space NumDot position</xsl:text> |
2610 </xsl:with-param> |
3225 </xsl:with-param> |
2611 <xsl:with-param name="mandatory" select="'no'"/> |
3226 <xsl:with-param name="mandatory" select="'no'"/> |
2612 </xsl:call-template> |
3227 </xsl:call-template> |
2613 <xsl:call-template name="defs_by_labels"> |
3228 <xsl:call-template name="defs_by_labels"> |
2614 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
3229 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
2642 <xsl:text>'].on_</xsl:text> |
3257 <xsl:text>'].on_</xsl:text> |
2643 <xsl:value-of select="."/> |
3258 <xsl:value-of select="."/> |
2644 <xsl:text>_click()"); |
3259 <xsl:text>_click()"); |
2645 </xsl:text> |
3260 </xsl:text> |
2646 </xsl:for-each> |
3261 </xsl:for-each> |
|
3262 <xsl:text> if(this.position_elt){ |
|
3263 </xsl:text> |
|
3264 <xsl:text> this.position_elt.setAttribute("onmousedown", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)"); |
|
3265 </xsl:text> |
|
3266 <xsl:text> this.position_elt.setAttribute("ontouchstart", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)"); |
|
3267 </xsl:text> |
|
3268 <xsl:text> window.addEventListener("mouseup", hmi_widgets[this.element_id].off_position_click.bind(this)); |
|
3269 </xsl:text> |
|
3270 <xsl:text> window.addEventListener("touchend", hmi_widgets[this.element_id].off_position_click.bind(this)); |
|
3271 </xsl:text> |
|
3272 <xsl:text> window.addEventListener("touchcancel", hmi_widgets[this.element_id].off_position_click.bind(this)); |
|
3273 </xsl:text> |
|
3274 <xsl:text> window.addEventListener("mousemove", hmi_widgets[this.element_id].on_move.bind(this)); |
|
3275 </xsl:text> |
|
3276 <xsl:text> window.addEventListener("touchmove", hmi_widgets[this.element_id].on_move.bind(this)); |
|
3277 </xsl:text> |
|
3278 <xsl:text> } |
|
3279 </xsl:text> |
2647 <xsl:text> }, |
3280 <xsl:text> }, |
2648 </xsl:text> |
3281 </xsl:text> |
2649 <xsl:text> on_key_click: function(symbols) { |
3282 <xsl:text> |
2650 </xsl:text> |
|
2651 <xsl:text> var syms = symbols.split(" "); |
|
2652 </xsl:text> |
|
2653 <xsl:text> this.shift |= this.caps; |
|
2654 </xsl:text> |
|
2655 <xsl:text> this.editstr += syms[this.shift?syms.length-1:0]; |
|
2656 </xsl:text> |
|
2657 <xsl:text> this.shift = false; |
|
2658 </xsl:text> |
|
2659 <xsl:text> this.update(); |
|
2660 </xsl:text> |
|
2661 <xsl:text> }, |
|
2662 </xsl:text> |
|
2663 <xsl:text> on_Esc_click: function() { |
|
2664 </xsl:text> |
|
2665 <xsl:text> end_modal.call(this); |
|
2666 </xsl:text> |
|
2667 <xsl:text> }, |
|
2668 </xsl:text> |
|
2669 <xsl:text> on_Enter_click: function() { |
|
2670 </xsl:text> |
|
2671 <xsl:text> end_modal.call(this); |
|
2672 </xsl:text> |
|
2673 <xsl:text> callback_obj = this.result_callback_obj; |
|
2674 </xsl:text> |
|
2675 <xsl:text> callback_obj.edit_callback(this.editstr); |
|
2676 </xsl:text> |
|
2677 <xsl:text> }, |
|
2678 </xsl:text> |
|
2679 <xsl:text> on_BackSpace_click: function() { |
|
2680 </xsl:text> |
|
2681 <xsl:text> this.editstr = this.editstr.slice(0,this.editstr.length-1); |
|
2682 </xsl:text> |
|
2683 <xsl:text> this.update(); |
|
2684 </xsl:text> |
|
2685 <xsl:text> }, |
|
2686 </xsl:text> |
|
2687 <xsl:text> on_Sign_click: function() { |
|
2688 </xsl:text> |
|
2689 <xsl:text> if(this.editstr[0] == "-") |
|
2690 </xsl:text> |
|
2691 <xsl:text> this.editstr = this.editstr.slice(1,this.editstr.length); |
|
2692 </xsl:text> |
|
2693 <xsl:text> else |
|
2694 </xsl:text> |
|
2695 <xsl:text> this.editstr = "-" + this.editstr; |
|
2696 </xsl:text> |
|
2697 <xsl:text> this.update(); |
|
2698 </xsl:text> |
|
2699 <xsl:text> }, |
|
2700 </xsl:text> |
|
2701 <xsl:text> on_NumDot_click: function() { |
|
2702 </xsl:text> |
|
2703 <xsl:text> if(this.editstr.indexOf(".") == "-1"){ |
|
2704 </xsl:text> |
|
2705 <xsl:text> this.editstr += "."; |
|
2706 </xsl:text> |
|
2707 <xsl:text> this.update(); |
|
2708 </xsl:text> |
|
2709 <xsl:text> } |
|
2710 </xsl:text> |
|
2711 <xsl:text> }, |
|
2712 </xsl:text> |
|
2713 <xsl:text> on_Space_click: function() { |
|
2714 </xsl:text> |
|
2715 <xsl:text> this.editstr += " "; |
|
2716 </xsl:text> |
|
2717 <xsl:text> this.update(); |
|
2718 </xsl:text> |
|
2719 <xsl:text> }, |
|
2720 </xsl:text> |
|
2721 <xsl:text> caps: false, |
|
2722 </xsl:text> |
|
2723 <xsl:text> _caps: undefined, |
|
2724 </xsl:text> |
|
2725 <xsl:text> on_CapsLock_click: function() { |
|
2726 </xsl:text> |
|
2727 <xsl:text> this.caps = !this.caps; |
|
2728 </xsl:text> |
|
2729 <xsl:text> this.update(); |
|
2730 </xsl:text> |
|
2731 <xsl:text> }, |
|
2732 </xsl:text> |
|
2733 <xsl:text> shift: false, |
|
2734 </xsl:text> |
|
2735 <xsl:text> _shift: undefined, |
|
2736 </xsl:text> |
|
2737 <xsl:text> on_Shift_click: function() { |
|
2738 </xsl:text> |
|
2739 <xsl:text> this.shift = !this.shift; |
|
2740 </xsl:text> |
|
2741 <xsl:text> this.caps = false; |
|
2742 </xsl:text> |
|
2743 <xsl:text> this.update(); |
|
2744 </xsl:text> |
|
2745 <xsl:text> }, |
|
2746 </xsl:text> |
3283 </xsl:text> |
2747 <xsl:variable name="g" select="$geometry[@Id = $hmi_element/@id]"/> |
3284 <xsl:variable name="g" select="$geometry[@Id = $hmi_element/@id]"/> |
2748 <xsl:text> coordinates: [</xsl:text> |
3285 <xsl:text> coordinates: [</xsl:text> |
2749 <xsl:value-of select="$g/@x"/> |
3286 <xsl:value-of select="$g/@x"/> |
2750 <xsl:text>, </xsl:text> |
3287 <xsl:text>, </xsl:text> |
2751 <xsl:value-of select="$g/@y"/> |
3288 <xsl:value-of select="$g/@y"/> |
2752 <xsl:text>], |
3289 <xsl:text>], |
2753 </xsl:text> |
3290 </xsl:text> |
2754 <xsl:text> editstr: "", |
3291 </xsl:template> |
2755 </xsl:text> |
3292 <xsl:template match="widget[@type='List']" mode="widget_defs"> |
2756 <xsl:text> _editstr: undefined, |
|
2757 </xsl:text> |
|
2758 <xsl:text> result_callback_obj: undefined, |
|
2759 </xsl:text> |
|
2760 <xsl:text> start_edit: function(info, valuetype, callback_obj, initial) { |
|
2761 </xsl:text> |
|
2762 <xsl:text> show_modal.call(this); |
|
2763 </xsl:text> |
|
2764 <xsl:text> this.editstr = initial; |
|
2765 </xsl:text> |
|
2766 <xsl:text> this.result_callback_obj = callback_obj; |
|
2767 </xsl:text> |
|
2768 <xsl:text> this.Info_elt.textContent = info; |
|
2769 </xsl:text> |
|
2770 <xsl:text> this.shift = false; |
|
2771 </xsl:text> |
|
2772 <xsl:text> this.caps = false; |
|
2773 </xsl:text> |
|
2774 <xsl:text> this.update(); |
|
2775 </xsl:text> |
|
2776 <xsl:text> }, |
|
2777 </xsl:text> |
|
2778 <xsl:text> update: function() { |
|
2779 </xsl:text> |
|
2780 <xsl:text> if(this.editstr != this._editstr){ |
|
2781 </xsl:text> |
|
2782 <xsl:text> this._editstr = this.editstr; |
|
2783 </xsl:text> |
|
2784 <xsl:text> this.Value_elt.textContent = this.editstr; |
|
2785 </xsl:text> |
|
2786 <xsl:text> } |
|
2787 </xsl:text> |
|
2788 <xsl:text> if(this.shift != this._shift){ |
|
2789 </xsl:text> |
|
2790 <xsl:text> this._shift = this.shift; |
|
2791 </xsl:text> |
|
2792 <xsl:text> (this.shift?widget_active_activable:widget_inactive_activable)(this.Shift_sub); |
|
2793 </xsl:text> |
|
2794 <xsl:text> } |
|
2795 </xsl:text> |
|
2796 <xsl:text> if(this.caps != this._caps){ |
|
2797 </xsl:text> |
|
2798 <xsl:text> this._caps = this.caps; |
|
2799 </xsl:text> |
|
2800 <xsl:text> (this.caps?widget_active_activable:widget_inactive_activable)(this.CapsLock_sub); |
|
2801 </xsl:text> |
|
2802 <xsl:text> } |
|
2803 </xsl:text> |
|
2804 <xsl:text> }, |
|
2805 </xsl:text> |
|
2806 </xsl:template> |
|
2807 <xsl:template mode="widget_defs" match="widget[@type='List']"> |
|
2808 <xsl:param name="hmi_element"/> |
3293 <xsl:param name="hmi_element"/> |
2809 <xsl:text> items: { |
3294 <xsl:text> items: { |
2810 </xsl:text> |
3295 </xsl:text> |
2811 <xsl:for-each select="$hmi_element/*[@inkscape:label]"> |
3296 <xsl:for-each select="$hmi_element/*[@inkscape:label]"> |
2812 <xsl:text> </xsl:text> |
3297 <xsl:text> </xsl:text> |
2932 </xsl:text> |
3473 </xsl:text> |
2933 </xsl:for-each> |
3474 </xsl:for-each> |
2934 <xsl:text> ], |
3475 <xsl:text> ], |
2935 </xsl:text> |
3476 </xsl:text> |
2936 </xsl:template> |
3477 </xsl:template> |
2937 <xsl:template mode="widget_defs" match="widget[@type='ToggleButton']"> |
3478 <xsl:template match="widget[@type='Slider']" mode="widget_class"> |
|
3479 <xsl:text>class SliderWidget extends Widget{ |
|
3480 </xsl:text> |
|
3481 <xsl:text> frequency = 5; |
|
3482 </xsl:text> |
|
3483 <xsl:text> range = undefined; |
|
3484 </xsl:text> |
|
3485 <xsl:text> fi = undefined; |
|
3486 </xsl:text> |
|
3487 <xsl:text> drag = false; |
|
3488 </xsl:text> |
|
3489 <xsl:text> enTimer = false; |
|
3490 </xsl:text> |
|
3491 <xsl:text> |
|
3492 </xsl:text> |
|
3493 <xsl:text> dispatch(value) { |
|
3494 </xsl:text> |
|
3495 <xsl:text> if(!this.drag){ |
|
3496 </xsl:text> |
|
3497 <xsl:text> if(this.value_elt) |
|
3498 </xsl:text> |
|
3499 <xsl:text> this.value_elt.textContent = String(value); |
|
3500 </xsl:text> |
|
3501 <xsl:text> |
|
3502 </xsl:text> |
|
3503 <xsl:text> this.handle_position(value); |
|
3504 </xsl:text> |
|
3505 <xsl:text> } |
|
3506 </xsl:text> |
|
3507 <xsl:text> } |
|
3508 </xsl:text> |
|
3509 <xsl:text> |
|
3510 </xsl:text> |
|
3511 <xsl:text> handle_position(value){ |
|
3512 </xsl:text> |
|
3513 <xsl:text> let [min,max,start,totallength] = this.range; |
|
3514 </xsl:text> |
|
3515 <xsl:text> let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min))); |
|
3516 </xsl:text> |
|
3517 <xsl:text> let tip = this.range_elt.getPointAtLength(length); |
|
3518 </xsl:text> |
|
3519 <xsl:text> this.handle_elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")"); |
|
3520 </xsl:text> |
|
3521 <xsl:text> } |
|
3522 </xsl:text> |
|
3523 <xsl:text> |
|
3524 </xsl:text> |
|
3525 <xsl:text> on_release(evt) { |
|
3526 </xsl:text> |
|
3527 <xsl:text> if(this.drag){ |
|
3528 </xsl:text> |
|
3529 <xsl:text> this.drag = false; |
|
3530 </xsl:text> |
|
3531 <xsl:text> } |
|
3532 </xsl:text> |
|
3533 <xsl:text> } |
|
3534 </xsl:text> |
|
3535 <xsl:text> |
|
3536 </xsl:text> |
|
3537 <xsl:text> update_position(evt){ |
|
3538 </xsl:text> |
|
3539 <xsl:text> if(this.drag && this.enTimer){ |
|
3540 </xsl:text> |
|
3541 <xsl:text> var html_dist = 0; |
|
3542 </xsl:text> |
|
3543 <xsl:text> var svg_dist = 0; |
|
3544 </xsl:text> |
|
3545 <xsl:text> |
|
3546 </xsl:text> |
|
3547 <xsl:text> //calculate size of widget in html |
|
3548 </xsl:text> |
|
3549 <xsl:text> var range_borders = this.range_elt.getBoundingClientRect(); |
|
3550 </xsl:text> |
|
3551 <xsl:text> var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width ); |
|
3552 </xsl:text> |
|
3553 <xsl:text> var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top]; |
|
3554 </xsl:text> |
|
3555 <xsl:text> |
|
3556 </xsl:text> |
|
3557 <xsl:text> //get range and mouse coordinates |
|
3558 </xsl:text> |
|
3559 <xsl:text> var mouseX = undefined; |
|
3560 </xsl:text> |
|
3561 <xsl:text> var mouseY = undefined; |
|
3562 </xsl:text> |
|
3563 <xsl:text> if (evt.type.startsWith("touch")){ |
|
3564 </xsl:text> |
|
3565 <xsl:text> mouseX = Math.ceil(evt.touches[0].clientX); |
|
3566 </xsl:text> |
|
3567 <xsl:text> mouseY = Math.ceil(evt.touches[0].clientY); |
|
3568 </xsl:text> |
|
3569 <xsl:text> } |
|
3570 </xsl:text> |
|
3571 <xsl:text> else{ |
|
3572 </xsl:text> |
|
3573 <xsl:text> mouseX = evt.pageX; |
|
3574 </xsl:text> |
|
3575 <xsl:text> mouseY = evt.pageY; |
|
3576 </xsl:text> |
|
3577 <xsl:text> } |
|
3578 </xsl:text> |
|
3579 <xsl:text> |
|
3580 </xsl:text> |
|
3581 <xsl:text> //get handle distance from mouse position |
|
3582 </xsl:text> |
|
3583 <xsl:text> if (minX > mouseX && minY < mouseY){ |
|
3584 </xsl:text> |
|
3585 <xsl:text> html_dist = 0; |
|
3586 </xsl:text> |
|
3587 <xsl:text> } |
|
3588 </xsl:text> |
|
3589 <xsl:text> else if (maxX < mouseX && maxY > mouseY){ |
|
3590 </xsl:text> |
|
3591 <xsl:text> html_dist = range_length; |
|
3592 </xsl:text> |
|
3593 <xsl:text> } |
|
3594 </xsl:text> |
|
3595 <xsl:text> else{ |
|
3596 </xsl:text> |
|
3597 <xsl:text> // calculate distace |
|
3598 </xsl:text> |
|
3599 <xsl:text> if(this.fi > 0.7){ |
|
3600 </xsl:text> |
|
3601 <xsl:text> html_dist = (minY - mouseY)/Math.sin(this.fi); |
|
3602 </xsl:text> |
|
3603 <xsl:text> } |
|
3604 </xsl:text> |
|
3605 <xsl:text> else{ |
|
3606 </xsl:text> |
|
3607 <xsl:text> html_dist = (mouseX - minX)/Math.cos(this.fi); |
|
3608 </xsl:text> |
|
3609 <xsl:text> } |
|
3610 </xsl:text> |
|
3611 <xsl:text> |
|
3612 </xsl:text> |
|
3613 <xsl:text> //check if in range |
|
3614 </xsl:text> |
|
3615 <xsl:text> if (html_dist > range_length){ |
|
3616 </xsl:text> |
|
3617 <xsl:text> html_dist = range_length; |
|
3618 </xsl:text> |
|
3619 <xsl:text> } |
|
3620 </xsl:text> |
|
3621 <xsl:text> else if (html_dist < 0){ |
|
3622 </xsl:text> |
|
3623 <xsl:text> html_dist = 0; |
|
3624 </xsl:text> |
|
3625 <xsl:text> } |
|
3626 </xsl:text> |
|
3627 <xsl:text> } |
|
3628 </xsl:text> |
|
3629 <xsl:text> //redraw handle |
|
3630 </xsl:text> |
|
3631 <xsl:text> this.handle_position(svg_dist=(html_dist/range_length)*this.range[1]); |
|
3632 </xsl:text> |
|
3633 <xsl:text> this.value_elt.textContent = String(Math.ceil(svg_dist)); |
|
3634 </xsl:text> |
|
3635 <xsl:text> change_hmi_value(this.indexes[0], "="+Math.ceil(svg_dist)); |
|
3636 </xsl:text> |
|
3637 <xsl:text> //reset timer |
|
3638 </xsl:text> |
|
3639 <xsl:text> this.enTimer = false; |
|
3640 </xsl:text> |
|
3641 <xsl:text> setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100); |
|
3642 </xsl:text> |
|
3643 <xsl:text> } |
|
3644 </xsl:text> |
|
3645 <xsl:text> |
|
3646 </xsl:text> |
|
3647 <xsl:text> } |
|
3648 </xsl:text> |
|
3649 <xsl:text> |
|
3650 </xsl:text> |
|
3651 <xsl:text> on_select(evt){ |
|
3652 </xsl:text> |
|
3653 <xsl:text> this.drag = true; |
|
3654 </xsl:text> |
|
3655 <xsl:text> this.enTimer = true; |
|
3656 </xsl:text> |
|
3657 <xsl:text> this.update_position(evt); |
|
3658 </xsl:text> |
|
3659 <xsl:text> } |
|
3660 </xsl:text> |
|
3661 <xsl:text> |
|
3662 </xsl:text> |
|
3663 <xsl:text> init() { |
|
3664 </xsl:text> |
|
3665 <xsl:text> let min = this.min_elt ? |
|
3666 </xsl:text> |
|
3667 <xsl:text> Number(this.min_elt.textContent) : |
|
3668 </xsl:text> |
|
3669 <xsl:text> this.args.length >= 1 ? this.args[0] : 0; |
|
3670 </xsl:text> |
|
3671 <xsl:text> let max = this.max_elt ? |
|
3672 </xsl:text> |
|
3673 <xsl:text> Number(this.max_elt.textContent) : |
|
3674 </xsl:text> |
|
3675 <xsl:text> this.args.length >= 2 ? this.args[1] : 100; |
|
3676 </xsl:text> |
|
3677 <xsl:text> |
|
3678 </xsl:text> |
|
3679 <xsl:text> this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()]; |
|
3680 </xsl:text> |
|
3681 <xsl:text> let start = this.range_elt.getPointAtLength(0); |
|
3682 </xsl:text> |
|
3683 <xsl:text> let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength()); |
|
3684 </xsl:text> |
|
3685 <xsl:text> this.fi = Math.atan2(start.y-end.y, end.x-start.x); |
|
3686 </xsl:text> |
|
3687 <xsl:text> |
|
3688 </xsl:text> |
|
3689 <xsl:text> |
|
3690 </xsl:text> |
|
3691 <xsl:text> this.handle_elt.addEventListener("touchstart", hmi_widgets[this.element_id].on_select.bind(this)); |
|
3692 </xsl:text> |
|
3693 <xsl:text> this.handle_elt.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this)); |
|
3694 </xsl:text> |
|
3695 <xsl:text> this.element.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this)); |
|
3696 </xsl:text> |
|
3697 <xsl:text> |
|
3698 </xsl:text> |
|
3699 <xsl:text> window.addEventListener("touchmove", hmi_widgets[this.element_id].update_position.bind(this)); |
|
3700 </xsl:text> |
|
3701 <xsl:text> window.addEventListener("mousemove", hmi_widgets[this.element_id].update_position.bind(this)); |
|
3702 </xsl:text> |
|
3703 <xsl:text> |
|
3704 </xsl:text> |
|
3705 <xsl:text> window.addEventListener("mouseup", hmi_widgets[this.element_id].on_release.bind(this)) |
|
3706 </xsl:text> |
|
3707 <xsl:text> window.addEventListener("touchend", hmi_widgets[this.element_id].on_release.bind(this)); |
|
3708 </xsl:text> |
|
3709 <xsl:text> window.addEventListener("touchcancel", hmi_widgets[this.element_id].on_release.bind(this)); |
|
3710 </xsl:text> |
|
3711 <xsl:text> |
|
3712 </xsl:text> |
|
3713 <xsl:text> } |
|
3714 </xsl:text> |
|
3715 <xsl:text>} |
|
3716 </xsl:text> |
|
3717 </xsl:template> |
|
3718 <xsl:template match="widget[@type='Slider']" mode="widget_defs"> |
|
3719 <xsl:param name="hmi_element"/> |
|
3720 <xsl:call-template name="defs_by_labels"> |
|
3721 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
|
3722 <xsl:with-param name="labels"> |
|
3723 <xsl:text>handle range</xsl:text> |
|
3724 </xsl:with-param> |
|
3725 </xsl:call-template> |
|
3726 <xsl:call-template name="defs_by_labels"> |
|
3727 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
|
3728 <xsl:with-param name="labels"> |
|
3729 <xsl:text>value min max</xsl:text> |
|
3730 </xsl:with-param> |
|
3731 <xsl:with-param name="mandatory" select="'no'"/> |
|
3732 </xsl:call-template> |
|
3733 <xsl:text> |
|
3734 </xsl:text> |
|
3735 </xsl:template> |
|
3736 <xsl:template match="widget[@type='Switch']" mode="widget_class"> |
|
3737 <xsl:text>class SwitchWidget extends Widget{ |
|
3738 </xsl:text> |
|
3739 <xsl:text> frequency = 5; |
|
3740 </xsl:text> |
|
3741 <xsl:text> dispatch(value) { |
|
3742 </xsl:text> |
|
3743 <xsl:text> for(let choice of this.choices){ |
|
3744 </xsl:text> |
|
3745 <xsl:text> if(value != choice.value){ |
|
3746 </xsl:text> |
|
3747 <xsl:text> choice.elt.setAttribute("style", "display:none"); |
|
3748 </xsl:text> |
|
3749 <xsl:text> } else { |
|
3750 </xsl:text> |
|
3751 <xsl:text> choice.elt.setAttribute("style", choice.style); |
|
3752 </xsl:text> |
|
3753 <xsl:text> } |
|
3754 </xsl:text> |
|
3755 <xsl:text> } |
|
3756 </xsl:text> |
|
3757 <xsl:text> } |
|
3758 </xsl:text> |
|
3759 <xsl:text>} |
|
3760 </xsl:text> |
|
3761 </xsl:template> |
|
3762 <xsl:template match="widget[@type='Switch']" mode="widget_defs"> |
|
3763 <xsl:param name="hmi_element"/> |
|
3764 <xsl:text> choices: [ |
|
3765 </xsl:text> |
|
3766 <xsl:variable name="regex" select="'^("[^"].*"|\-?[0-9]+|false|true)(#.*)?$'"/> |
|
3767 <xsl:for-each select="$result_svg_ns//*[@id = $hmi_element/@id]//*[regexp:test(@inkscape:label,$regex)]"> |
|
3768 <xsl:variable name="literal" select="regexp:match(@inkscape:label,$regex)[2]"/> |
|
3769 <xsl:text> { |
|
3770 </xsl:text> |
|
3771 <xsl:text> elt:id("</xsl:text> |
|
3772 <xsl:value-of select="@id"/> |
|
3773 <xsl:text>"), |
|
3774 </xsl:text> |
|
3775 <xsl:text> style:"</xsl:text> |
|
3776 <xsl:value-of select="@style"/> |
|
3777 <xsl:text>", |
|
3778 </xsl:text> |
|
3779 <xsl:text> value:</xsl:text> |
|
3780 <xsl:value-of select="$literal"/> |
|
3781 <xsl:text> |
|
3782 </xsl:text> |
|
3783 <xsl:text> }</xsl:text> |
|
3784 <xsl:if test="position()!=last()"> |
|
3785 <xsl:text>,</xsl:text> |
|
3786 </xsl:if> |
|
3787 <xsl:text> |
|
3788 </xsl:text> |
|
3789 </xsl:for-each> |
|
3790 <xsl:text> ], |
|
3791 </xsl:text> |
|
3792 </xsl:template> |
|
3793 <xsl:template match="widget[@type='ToggleButton']" mode="widget_class"> |
|
3794 <xsl:text>class ToggleButtonWidget extends Widget{ |
|
3795 </xsl:text> |
|
3796 <xsl:text> frequency = 5; |
|
3797 </xsl:text> |
|
3798 <xsl:text> state = 0; |
|
3799 </xsl:text> |
|
3800 <xsl:text> active_style = undefined; |
|
3801 </xsl:text> |
|
3802 <xsl:text> inactive_style = undefined; |
|
3803 </xsl:text> |
|
3804 <xsl:text> |
|
3805 </xsl:text> |
|
3806 <xsl:text> dispatch(value) { |
|
3807 </xsl:text> |
|
3808 <xsl:text> this.state = value; |
|
3809 </xsl:text> |
|
3810 <xsl:text> if (this.state) { |
|
3811 </xsl:text> |
|
3812 <xsl:text> this.active_elt.setAttribute("style", this.active_style); |
|
3813 </xsl:text> |
|
3814 <xsl:text> this.inactive_elt.setAttribute("style", "display:none"); |
|
3815 </xsl:text> |
|
3816 <xsl:text> this.state = 0; |
|
3817 </xsl:text> |
|
3818 <xsl:text> } else { |
|
3819 </xsl:text> |
|
3820 <xsl:text> this.inactive_elt.setAttribute("style", this.inactive_style); |
|
3821 </xsl:text> |
|
3822 <xsl:text> this.active_elt.setAttribute("style", "display:none"); |
|
3823 </xsl:text> |
|
3824 <xsl:text> this.state = 1; |
|
3825 </xsl:text> |
|
3826 <xsl:text> } |
|
3827 </xsl:text> |
|
3828 <xsl:text> } |
|
3829 </xsl:text> |
|
3830 <xsl:text> |
|
3831 </xsl:text> |
|
3832 <xsl:text> on_click(evt) { |
|
3833 </xsl:text> |
|
3834 <xsl:text> change_hmi_value(this.indexes[0], "="+this.state); |
|
3835 </xsl:text> |
|
3836 <xsl:text> } |
|
3837 </xsl:text> |
|
3838 <xsl:text> |
|
3839 </xsl:text> |
|
3840 <xsl:text> init() { |
|
3841 </xsl:text> |
|
3842 <xsl:text> this.active_style = this.active_elt.style.cssText; |
|
3843 </xsl:text> |
|
3844 <xsl:text> this.inactive_style = this.inactive_elt.style.cssText; |
|
3845 </xsl:text> |
|
3846 <xsl:text> this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)"); |
|
3847 </xsl:text> |
|
3848 <xsl:text> } |
|
3849 </xsl:text> |
|
3850 <xsl:text>} |
|
3851 </xsl:text> |
|
3852 </xsl:template> |
|
3853 <xsl:template match="widget[@type='ToggleButton']" mode="widget_defs"> |
2938 <xsl:param name="hmi_element"/> |
3854 <xsl:param name="hmi_element"/> |
2939 <xsl:call-template name="defs_by_labels"> |
3855 <xsl:call-template name="defs_by_labels"> |
2940 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
3856 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
2941 <xsl:with-param name="labels"> |
3857 <xsl:with-param name="labels"> |
2942 <xsl:text>active inactive</xsl:text> |
3858 <xsl:text>active inactive</xsl:text> |
2943 </xsl:with-param> |
3859 </xsl:with-param> |
2944 </xsl:call-template> |
3860 </xsl:call-template> |
2945 <xsl:text> frequency: 5, |
3861 <xsl:text> |
2946 </xsl:text> |
|
2947 <xsl:text> state: 0, |
|
2948 </xsl:text> |
|
2949 <xsl:text> dispatch: function(value) { |
|
2950 </xsl:text> |
|
2951 <xsl:text> this.state = value; |
|
2952 </xsl:text> |
|
2953 <xsl:text> if (this.state) { |
|
2954 </xsl:text> |
|
2955 <xsl:text> this.active_elt.setAttribute("style", this.active_style); |
|
2956 </xsl:text> |
|
2957 <xsl:text> this.inactive_elt.setAttribute("style", "display:none"); |
|
2958 </xsl:text> |
|
2959 <xsl:text> this.state = 0; |
|
2960 </xsl:text> |
|
2961 <xsl:text> } else { |
|
2962 </xsl:text> |
|
2963 <xsl:text> this.inactive_elt.setAttribute("style", this.inactive_style); |
|
2964 </xsl:text> |
|
2965 <xsl:text> this.active_elt.setAttribute("style", "display:none"); |
|
2966 </xsl:text> |
|
2967 <xsl:text> this.state = 1; |
|
2968 </xsl:text> |
|
2969 <xsl:text> } |
|
2970 </xsl:text> |
|
2971 <xsl:text> }, |
|
2972 </xsl:text> |
|
2973 <xsl:text> on_click: function(evt) { |
|
2974 </xsl:text> |
|
2975 <xsl:text> this.apply_hmi_value(0, this.state); |
|
2976 </xsl:text> |
|
2977 <xsl:text> }, |
|
2978 </xsl:text> |
|
2979 <xsl:text> active_style: undefined, |
|
2980 </xsl:text> |
|
2981 <xsl:text> inactive_style: undefined, |
|
2982 </xsl:text> |
|
2983 <xsl:text> init: function() { |
|
2984 </xsl:text> |
|
2985 <xsl:text> this.active_style = this.active_elt.style.cssText; |
|
2986 </xsl:text> |
|
2987 <xsl:text> this.inactive_style = this.inactive_elt.style.cssText; |
|
2988 </xsl:text> |
|
2989 <xsl:text> this.element.setAttribute("onclick", "hmi_widgets['</xsl:text> |
|
2990 <xsl:value-of select="$hmi_element/@id"/> |
|
2991 <xsl:text>'].on_click(evt)"); |
|
2992 </xsl:text> |
|
2993 <xsl:text> }, |
|
2994 </xsl:text> |
3862 </xsl:text> |
2995 </xsl:template> |
3863 </xsl:template> |
2996 <xsl:template match="/"> |
3864 <xsl:template match="/"> |
2997 <xsl:comment> |
3865 <xsl:comment> |
2998 <xsl:text>Made with SVGHMI. https://beremiz.org</xsl:text> |
3866 <xsl:text>Made with SVGHMI. https://beremiz.org</xsl:text> |
2999 </xsl:comment> |
3867 </xsl:comment> |
3000 <xsl:comment> |
3868 <xsl:comment> |
3001 <xsl:apply-templates select="document('')/*/debug:*"/> |
3869 <xsl:apply-templates select="document('')/*/debug:*"/> |
3002 </xsl:comment> |
3870 </xsl:comment> |
3003 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> |
3871 <html xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1999/xhtml"> |
3004 <head/> |
3872 <head/> |
3005 <body style="margin:0;overflow:hidden;"> |
3873 <body style="margin:0;overflow:hidden;"> |
3006 <xsl:copy-of select="$result_svg"/> |
3874 <xsl:copy-of select="$result_svg"/> |
3007 <script> |
3875 <script> |
3008 <xsl:text> |
3876 <xsl:text> |