Mercurial Mercurial > beremiz / comparison
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
svghmi/gen_index_xhtml.xslt
changeset 3517 dacf329abdd9
parent 3510 0d7f9c555ae2
child 3521 4345b3c9b9de
equal deleted inserted replaced
3516:d3cf85a3c282 3517:dacf329abdd9 
     1 <?xml version="1.0"?>
 
     1 <?xml version="1.0"?>
 
     2 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:exsl="http://exslt.org/common" xmlns:regexp="http://exslt.org/regular-expressions" xmlns:str="http://exslt.org/strings" xmlns:func="http://exslt.org/functions" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:debug="debug" xmlns:preamble="preamble" xmlns:declarations="declarations" xmlns:definitions="definitions" xmlns:epilogue="epilogue" xmlns:ns="beremiz" version="1.0" extension-element-prefixes="ns func exsl regexp str dyn" exclude-result-prefixes="ns func exsl regexp str dyn debug preamble epilogue declarations definitions">
 
     2 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:exsl="http://exslt.org/common" xmlns:regexp="http://exslt.org/regular-expressions" xmlns:str="http://exslt.org/strings" xmlns:func="http://exslt.org/functions" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:debug="debug" xmlns:preamble="preamble" xmlns:declarations="declarations" xmlns:definitions="definitions" xmlns:epilogue="epilogue" xmlns:cssdefs="cssdefs" xmlns:ns="beremiz" version="1.0" extension-element-prefixes="ns func exsl regexp str dyn" exclude-result-prefixes="ns func exsl regexp str dyn debug preamble epilogue declarations definitions">
 
     3   <xsl:output cdata-section-elements="xhtml:script" method="xml"/>
 
     3   <xsl:output cdata-section-elements="xhtml:script" method="xml"/>
 
     4   <xsl:variable name="svg" select="/svg:svg"/>
 
     4   <xsl:variable name="svg" select="/svg:svg"/>
 
     5   <xsl:variable name="hmi_elements" select="//svg:*[starts-with(@inkscape:label, 'HMI:')]"/>
 
     5   <xsl:variable name="hmi_elements" select="//svg:*[starts-with(@inkscape:label, 'HMI:')]"/>
 
     6   <xsl:param name="instance_name"/>
 
     6   <xsl:param name="instance_name"/>
 
     7   <xsl:variable name="hmitree" select="ns:GetHMITree()"/>
 
     7   <xsl:variable name="hmitree" select="ns:GetHMITree()"/>
 
  5440 </xsl:text>
 
  5440 </xsl:text>
 
  5441     <xsl:text>                   support path pointing to local variable whom value 
  5441     <xsl:text>                   support path pointing to local variable whom value 
  5442 </xsl:text>
 
  5442 </xsl:text>
 
  5443     <xsl:text>                   would be an HMI_TREE index and then jump to a relative page not hard-coded in advance */
 
  5443     <xsl:text>                   would be an HMI_TREE index and then jump to a relative page not hard-coded in advance */
 
  5444 </xsl:text>
 
  5444 </xsl:text>
 
  5445     <xsl:text>
 
       
  5446 </xsl:text>
 
       
  5447     <xsl:text>                if(!that.disabled) {
 
  5445     <xsl:text>                if(!that.disabled) {
 
  5448 </xsl:text>
 
  5446 </xsl:text>
 
  5449     <xsl:text>                    const index = that.indexes.length &gt; 0 ? that.indexes[0] + that.offset : undefined;
 
  5447     <xsl:text>                    const index = that.indexes.length &gt; 0 ? that.indexes[0] + that.offset : undefined;
 
  5450 </xsl:text>
 
  5448 </xsl:text>
 
  5451     <xsl:text>                    switch_page(name, index);
 
  5449     <xsl:text>                    fading_page_switch(name, index);
 
  5452 </xsl:text>
 
  5450 </xsl:text>
 
  5453     <xsl:text>                }
 
  5451     <xsl:text>                }
 
  5454 </xsl:text>
 
  5452 </xsl:text>
 
  5455     <xsl:text>            }
 
  5453     <xsl:text>            }
 
  5456 </xsl:text>
 
  5454 </xsl:text>
 
  5577           <xsl:text>")</xsl:text>
 
  5575           <xsl:text>")</xsl:text>
 
  5578         </xsl:message>
 
  5576         </xsl:message>
 
  5579       </xsl:if>
 
  5577       </xsl:if>
 
  5580     </xsl:if>
 
  5578     </xsl:if>
 
  5581   </xsl:template>
 
  5579   </xsl:template>
 
       
  5580   <cssdefs:jump/>
 
       
  5581   <xsl:template match="cssdefs:jump">
 
       
  5582     <xsl:text>
 
       
  5583 </xsl:text>
 
       
  5584     <xsl:text>/* </xsl:text>
 
       
  5585     <xsl:value-of select="local-name()"/>
 
       
  5586     <xsl:text> */
 
       
  5587 </xsl:text>
 
       
  5588     <xsl:text>
 
       
  5589 </xsl:text>
 
       
  5590     <xsl:text>.fade-out-page {
 
       
  5591 </xsl:text>
 
       
  5592     <xsl:text>    animation: fadeOut 0.6s both;
 
       
  5593 </xsl:text>
 
       
  5594     <xsl:text>}
 
       
  5595 </xsl:text>
 
       
  5596     <xsl:text>
 
       
  5597 </xsl:text>
 
       
  5598     <xsl:text>@keyframes fadeOut {
 
       
  5599 </xsl:text>
 
       
  5600     <xsl:text>    0% { opacity: 1; }
 
       
  5601 </xsl:text>
 
       
  5602     <xsl:text>    100% { opacity: 0; }
 
       
  5603 </xsl:text>
 
       
  5604     <xsl:text>}
 
       
  5605 </xsl:text>
 
       
  5606     <xsl:text>
 
       
  5607 </xsl:text>
 
       
  5608     <xsl:text>
 
       
  5609 </xsl:text>
 
       
  5610   </xsl:template>
 
  5582   <declarations:jump/>
 
  5611   <declarations:jump/>
 
  5583   <xsl:template match="declarations:jump">
 
  5612   <xsl:template match="declarations:jump">
 
  5584     <xsl:text>
 
  5613     <xsl:text>
 
  5585 </xsl:text>
 
  5614 </xsl:text>
 
  5586     <xsl:text>/* </xsl:text>
 
  5615     <xsl:text>/* </xsl:text>
 
  7588     <xsl:text>SwitchWidget</xsl:text>
 
  7617     <xsl:text>SwitchWidget</xsl:text>
 
  7589     <xsl:text> extends Widget{
 
  7618     <xsl:text> extends Widget{
 
  7590 </xsl:text>
 
  7619 </xsl:text>
 
  7591     <xsl:text>    frequency = 5;
 
  7620     <xsl:text>    frequency = 5;
 
  7592 </xsl:text>
 
  7621 </xsl:text>
 
       
  7622     <xsl:text>    current_value = undefined;
 
       
  7623 </xsl:text>
 
       
  7624     <xsl:text>
 
       
  7625 </xsl:text>
 
       
  7626     <xsl:text>    init(){
 
       
  7627 </xsl:text>
 
       
  7628     <xsl:text>        this.animate();
 
       
  7629 </xsl:text>
 
       
  7630     <xsl:text>    }
 
       
  7631 </xsl:text>
 
       
  7632     <xsl:text>
 
       
  7633 </xsl:text>
 
  7593     <xsl:text>    dispatch(value) {
 
  7634     <xsl:text>    dispatch(value) {
 
  7594 </xsl:text>
 
  7635 </xsl:text>
 
       
  7636     <xsl:text>        this.current_value = value;
 
       
  7637 </xsl:text>
 
       
  7638     <xsl:text>        this.request_animate();
 
       
  7639 </xsl:text>
 
       
  7640     <xsl:text>    }
 
       
  7641 </xsl:text>
 
       
  7642     <xsl:text>
 
       
  7643 </xsl:text>
 
       
  7644     <xsl:text>    animate(){
 
       
  7645 </xsl:text>
 
  7595     <xsl:text>        for(let choice of this.choices){
 
  7646     <xsl:text>        for(let choice of this.choices){
 
  7596 </xsl:text>
 
  7647 </xsl:text>
 
  7597     <xsl:text>            if(value != choice.value){
 
  7648     <xsl:text>            if(this.current_value != choice.value){
 
  7598 </xsl:text>
 
  7649 </xsl:text>
 
  7599     <xsl:text>                choice.elt.setAttribute("style", "display:none");
 
  7650     <xsl:text>                if(choice.parent == undefined){
 
       
  7651 </xsl:text>
 
       
  7652     <xsl:text>                    choice.parent = choice.elt.parentElement;
 
       
  7653 </xsl:text>
 
       
  7654     <xsl:text>                    choice.parent.removeChild(choice.elt);
 
       
  7655 </xsl:text>
 
       
  7656     <xsl:text>                }
 
  7600 </xsl:text>
 
  7657 </xsl:text>
 
  7601     <xsl:text>            } else {
 
  7658     <xsl:text>            } else {
 
  7602 </xsl:text>
 
  7659 </xsl:text>
 
  7603     <xsl:text>                choice.elt.setAttribute("style", choice.style);
 
  7660     <xsl:text>                if(choice.parent != undefined){
 
       
  7661 </xsl:text>
 
       
  7662     <xsl:text>                    choice.parent.appendChild(choice.elt);
 
       
  7663 </xsl:text>
 
       
  7664     <xsl:text>                    choice.parent = undefined;
 
       
  7665 </xsl:text>
 
       
  7666     <xsl:text>                }
 
  7604 </xsl:text>
 
  7667 </xsl:text>
 
  7605     <xsl:text>            }
 
  7668     <xsl:text>            }
 
  7606 </xsl:text>
 
  7669 </xsl:text>
 
  7607     <xsl:text>        }
 
  7670     <xsl:text>        }
 
  7608 </xsl:text>
 
  7671 </xsl:text>
 
  7625 </xsl:text>
 
  7688 </xsl:text>
 
  7626       <xsl:text>            elt:id("</xsl:text>
 
  7689       <xsl:text>            elt:id("</xsl:text>
 
  7627       <xsl:value-of select="@id"/>
 
  7690       <xsl:value-of select="@id"/>
 
  7628       <xsl:text>"),
 
  7691       <xsl:text>"),
 
  7629 </xsl:text>
 
  7692 </xsl:text>
 
  7630       <xsl:text>            style:"</xsl:text>
 
  7693       <xsl:text>            parent:undefined,
 
  7631       <xsl:value-of select="@style"/>
 
       
  7632       <xsl:text>",
 
       
  7633 </xsl:text>
 
  7694 </xsl:text>
 
  7634       <xsl:text>            value:</xsl:text>
 
  7695       <xsl:text>            value:</xsl:text>
 
  7635       <xsl:value-of select="$literal"/>
 
  7696       <xsl:value-of select="$literal"/>
 
  7636       <xsl:text>
 
  7697       <xsl:text>
 
  7637 </xsl:text>
 
  7698 </xsl:text>
 
  9177     </xsl:comment>
 
  9238     </xsl:comment>
 
  9178     <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 
  9239     <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 
  9179       <head>
 
  9240       <head>
 
  9180         <style type="text/css" media="screen">
 
  9241         <style type="text/css" media="screen">
 
  9181           <xsl:value-of select="ns:GetFonts()"/>
 
  9242           <xsl:value-of select="ns:GetFonts()"/>
 
       
  9243           <xsl:apply-templates select="document('')/*/cssdefs:*"/>
 
  9182         </style>
 
  9244         </style>
 
  9183       </head>
 
  9245       </head>
 
  9184       <body style="margin:0;overflow:hidden;user-select:none;touch-action:none;">
 
  9246       <body style="margin:0;overflow:hidden;user-select:none;touch-action:none;">
 
  9185         <xsl:copy-of select="$result_svg"/>
 
  9247         <xsl:copy-of select="$result_svg"/>
 
  9186         <script>
 
  9248         <script>
 
 10612 </xsl:text>
 
 10674 </xsl:text>
 
 10613           <xsl:text>}
 
 10675           <xsl:text>}
 
 10614 </xsl:text>
 
 10676 </xsl:text>
 
 10615           <xsl:text>
 
 10677           <xsl:text>
 
 10616 </xsl:text>
 
 10678 </xsl:text>
 
       
 10679           <xsl:text>
 
       
 10680 </xsl:text>
 
       
 10681           <xsl:text>var page_fading_in_progress = false;
 
       
 10682 </xsl:text>
 
       
 10683           <xsl:text>function fading_page_switch(...args){
 
       
 10684 </xsl:text>
 
       
 10685           <xsl:text>    svg_root.classList.add("fade-out-page");
 
       
 10686 </xsl:text>
 
       
 10687           <xsl:text>    page_fading_in_progress = true;
 
       
 10688 </xsl:text>
 
       
 10689           <xsl:text>
 
       
 10690 </xsl:text>
 
       
 10691           <xsl:text>    setTimeout(function(){
 
       
 10692 </xsl:text>
 
       
 10693           <xsl:text>        switch_page(...args);
 
       
 10694 </xsl:text>
 
       
 10695           <xsl:text>    },1);
 
       
 10696 </xsl:text>
 
       
 10697           <xsl:text>}
 
       
 10698 </xsl:text>
 
       
 10699           <xsl:text>document.body.style.backgroundColor = "black";
 
       
 10700 </xsl:text>
 
       
 10701           <xsl:text>
 
       
 10702 </xsl:text>
 
 10617           <xsl:text>// subscribe to per instance current page hmi variable
 
 10703           <xsl:text>// subscribe to per instance current page hmi variable
 
 10618 </xsl:text>
 
 10704 </xsl:text>
 
 10619           <xsl:text>// PLC must prefix page name with "!" for page switch to happen
 
 10705           <xsl:text>// PLC must prefix page name with "!" for page switch to happen
 
 10620 </xsl:text>
 
 10706 </xsl:text>
 
 10621           <xsl:text>subscribers(current_page_var_index).add({
 
 10707           <xsl:text>subscribers(current_page_var_index).add({
 
 10626 </xsl:text>
 
 10712 </xsl:text>
 
 10627           <xsl:text>    new_hmi_value: function(index, value, oldval) {
 
 10713           <xsl:text>    new_hmi_value: function(index, value, oldval) {
 
 10628 </xsl:text>
 
 10714 </xsl:text>
 
 10629           <xsl:text>        if(value.startsWith("!"))
 
 10715           <xsl:text>        if(value.startsWith("!"))
 
 10630 </xsl:text>
 
 10716 </xsl:text>
 
 10631           <xsl:text>            switch_page(value.slice(1));
 
 10717           <xsl:text>            fading_page_switch(value.slice(1));
 
 10632 </xsl:text>
 
 10718 </xsl:text>
 
 10633           <xsl:text>    }
 
 10719           <xsl:text>    }
 
 10634 </xsl:text>
 
 10720 </xsl:text>
 
 10635           <xsl:text>});
 
 10721           <xsl:text>});
 
 10636 </xsl:text>
 
 10722 </xsl:text>
 
 11211           <xsl:text>    }
 
 11297           <xsl:text>    }
 
 11212 </xsl:text>
 
 11298 </xsl:text>
 
 11213           <xsl:text>
 
 11299           <xsl:text>
 
 11214 </xsl:text>
 
 11300 </xsl:text>
 
 11215           <xsl:text>    svg_root.setAttribute('viewBox',new_desc.bbox.join(" "));
 
 11301           <xsl:text>    svg_root.setAttribute('viewBox',new_desc.bbox.join(" "));
 
       
 11302 </xsl:text>
 
       
 11303           <xsl:text>    if(page_fading_in_progress)
 
       
 11304 </xsl:text>
 
       
 11305           <xsl:text>        svg_root.classList.remove("fade-out-page");
 
       
 11306 </xsl:text>
 
       
 11307           <xsl:text>        page_fading_in_progress = false;
 
 11216 </xsl:text>
 
 11308 </xsl:text>
 
 11217           <xsl:text>    current_visible_page = page_name;
 
 11309           <xsl:text>    current_visible_page = page_name;
 
 11218 </xsl:text>
 
 11310 </xsl:text>
 
 11219           <xsl:text>};
 
 11311           <xsl:text>};
 
 11220 </xsl:text>
 
 11312 </xsl:text>
beremiz