13 Replies Latest reply on Sep 17, 2013 2:40 PM by torsteins

    Executing Javascript inside PI Graphic SVG

    buse

      Hi,

       

      When exporting a ProcessBook display to an SVG file, a Javascript fuction gets generated by default:

       
      <script language="JavaScript" type="text/javascript">    
          function SVG_doc_loaded(evt)
         {
           var parentDoc = evt.getTarget().getOwnerDocument();
           var elem = parentDoc.createElement("Ready");
           evt.getTarget().appendChild(elem);
          }
      </script>
      

       This function gets called in the onLoad event.

       

      I have added some basic code to change some attributes inside the SVG file, and it works with no problem when I open the SVG file in a browser, but looks like the code does not execute when I run the SVG in the PI Graphic Web Part in SharePoint.

       

      I need help understanding how the web part works and if executing javascript code on page load ( or from event handlers ) is even possible.

       

      Thank you!!

       

       

       

       

       

       

        • Re: Executing Javascript inside PI Graphic SVG
          dmcginnis

          That javascript is generate by the Processbook SVG addin to support PI ICE, the predecessor to PI WebParts. The PI Graphic web part removes it from the SVG document so it will not get executed.

            • Re: Executing Javascript inside PI Graphic SVG
              bbernard

              Based on what Dan said, you can see why adding code to the SVG_doc_loaded function will not be useful.  However, I wonder if you might be able to add an onLoad event handler dynamically by applying an XSL Transform to the source SVG file via the PI Graphic web part's XSL Transform property.

                • Re: Executing Javascript inside PI Graphic SVG
                  jlakumb

                  This is a longstanding enhancement request for PI WebParts documented in PLI 9252OSI8.

                   

                  techsupport.osisoft.com/.../issues.aspx

                   

                  Another workaround might be to use an event handler such as OnClick rather than OnLoad.

                    • Re: Executing Javascript inside PI Graphic SVG
                      dmcginnis

                      The onload attribute and javascript are removed before applying the XSL. So it should be possible to add an onload event handler using XSL transform.

                      • Re: Executing Javascript inside PI Graphic SVG
                        buse

                        Thank you guys!

                         

                        I did try the onClick event handler, but it does not seem to work...

                         

                        Here is what I am trying to do:

                         

                        I have a multistate symbol that gets the value from AF and changes color based on a red-yellow-green basis. This represents a compressor unit KPI. We want the user to be able to click on the box and be redirected to a pre-built Coresight screen that shows data related to that particular KPI. Depending on the type of unit, we could have from 12 to 16 of these KPIs and we are planning to monitor about 300 of these units. We are trying to use Element Relative ProcessBook SVGs so we need to dinamically get the ID of the Coresight screen and redirect the user. We have this ID available from AF.

                         

                        Here is the multistate rectangle, which I have encapsulated into a anchor tag. I also added the onClick event handler on the polygon node:

                         
                        <a id="Anchor1" xlink:href="Placeholder URL">
                             <polygon id="Rectangle1" points="124,201 680,201 680,516 124,516" fill="#00FF00" stroke="#000000" stroke-width="3px" PB:FillColor="#0000FF" PB:IsMultiState="True" PB:Type="2" PB:LineStyle="0" onclick="CoresightRedirect(evt);">
                                  <PB:MultiState id="Rectangle1_MS" BlinkBadData="0" ColorBadData="none" CurrentState="3" PBD:PtTagName="e.state_bhp" TagName="E.State_BHP" PtTagValue="3" ServerName="SVG MODULE CONTEXT" StateCount="4">
                                       <PB:MSState id="Rectangle1_MSS1" Blink="0" Color="#808080" LowerValue="-1" UpperValue="0"/>
                                       <PB:MSState id="Rectangle1_MSS2" Blink="0" Color="#FF0000" LowerValue="0" UpperValue="1"/>
                                       <PB:MSState id="Rectangle1_MSS3" Blink="0" Color="#FFFF00" LowerValue="1" UpperValue="2"/>
                                       <PB:MSState id="Rectangle1_MSS4" Blink="0" Color="#00FF00" LowerValue="2" UpperValue="3"/>
                                  </PB:MultiState>
                             </polygon>
                        </a>
                        

                         Here is the the Coresight Screen ID for this context:

                         
                        <g id="Value2" fill="#000000" stroke="none" font-family="Arial" font-size="33.3333320087857" PB:DisplayPointName="9" PB:DisplayTimeStamp="9" PB:HorzAlign="0" PB:ShowUOM="False" PB:IsMultiState="False" PB:NumberFormat="General" PB:CanonicalNumberFormat="General" PB:TagInfoType="2" PBD:PtTagName="e.state_bhp|coresightdisplay_id" PB:PersistString="" PB:PtTagStatus="0" PB:PtTagTime="12/31/1969 7:00:00 PM" PB:PtTagValue="1807" PB:Type="7" PB:Visible="True" PB:Scripting="True">
                                  <rect id="Value2_pbTextBoundingRectEl" x="153" y="619" width="85" height="42" fill="#FFFFFF" stroke-width="0">
                                  </rect>
                                  <text id="Value2_pbTextEl" x="196" y="650" fill="#000000" stroke="none" font-family="Arial" font-size="33.3333320087857" text-anchor="middle" PBD:Property="value">1807</text>
                        </g>
                        

                         And finally this is the javascript inside the SVG file:

                         
                        <script language="JavaScript" type="text/javascript"> 
                                  function CoresightRedirect(evt)
                                  {
                                       var parentDoc = evt.getTarget().getOwnerDocument();
                                       var coresightScreenID = parentDoc.getElementById("Value2").getAttribute("PB:PtTagValue")
                                       var coresightScreenURL = "http://vwnchawbpis01/Coresight/#/Displays/" + coresightScreenID;
                                       parentDoc.getElementById("Anchor1").setAttribute("xlink:href", coresightScreenURL)
                                  }
                        </script>
                        

                         It works if I open the file in a browser but it does not inside the web part. Looks like all javascript gets removed. I also tried to put this exact same code in a content editor web part, but no effect.

                         

                        I will do some research on the XSL Transform suggestion, I am not familiar with that, so any examples or pointers would be very helpful.

                         

                        Thank you!

                          • Re: Executing Javascript inside PI Graphic SVG
                            mhamel

                            @Ionut: The javascript function must be included from the XSL Transform (.xslt file) otherwise the PI Graphics processing remove any javascript to avoid breaking the execution. I have added an example of what might look like your .xslt file.I haven't verified if there is any remaining Script block after the process. Otherwise if the node is gone you can force to add a new < script > block with the following:

                             

                             

                             
                            <xsl:element name="script"> ... </xsl:element>
                            

                             

                             

                            Example:

                             

                             

                             

                             5531.sc1.png

                             

                            I suggest you take a look at this KB article from Microsoft.

                              • Re: Executing Javascript inside PI Graphic SVG
                                buse

                                Thank you Mathieu!

                                 

                                I was able to transform the SVG with XSL but the script does not seem to execute in the web part in SharePoint. I am using an XSL Processor to test it and the modified file looks like it should work, so I am not sure what I am doing wrong..

                                 

                                I read the KB you suggested and I was not sure if I have to encapsulate the script in the <xsl:comment> block because in the modified file it does get commented out :) so I tried both with and without the <xsl:comment> tag but no success.

                                 

                                Here is the code:

                                 

                                Original SVG file:

                                 
                                <?xml version="1.0" encoding="UTF-8"?>
                                
                                     <svg 
                                               height="100%" 
                                               viewBox="0 0 2331 1172" 
                                               width="100%" 
                                               fill="#C0C0C0" 
                                               image-rendering="optimizeSpeed" 
                                               preserveAspectRatio = "none"
                                               PB:pid="" 
                                               xlink:xid="" 
                                               xmlns:svg="OSI_SVG_20090601" 
                                               xmlns:xlink="http://www.w3.org/1999/xlink" 
                                               xmlns:PB="urn:osisoft-com-pb" 
                                               xmlns:PBI="urn:osisoft-com-interface" 
                                               xmlns:PBD="urn:osisoft-com-data" 
                                               xmlns:xsi="http://www.w3.org/1999/XMLSchema/instance">
                                               
                                               
                                               <defs><PBD:TagUses tag="e.elementpath" PB:BO="PWSPIEventsBO.cBOEvents">
                                                         <PBI:Symbol name="Value1" PB:Type="7"/>
                                                    </PBD:TagUses><PBD:TagUses tag="e.state_bhp" PB:BO="PWSPIEventsBO.cBOEvents">
                                                         <PBI:Symbol name="Rectangle1_MS" PB:Type="2" PB:Parent="Rectangle1"/>
                                                    </PBD:TagUses><PBD:TagUses tag="e.state_bhp|coresightdisplay_id" PB:BO="PWSPIEventsBO.cBOEvents">
                                                         <PBI:Symbol name="Value2" PB:Type="7"/>
                                                    </PBD:TagUses>
                                               </defs>
                                               
                                               <rect x="0" y="0" width="2331" height="1172" PB:DocMajorVersionNum="3" PB:DocMinorVersionNum="26" PB:DocGroup="1" PB:wnHeight="498" PB:wnWidth="910" PB:wnState="0" PB:Zoom="100" PB:LocalID="1033" PB:DisplayServerTimeZone="True" PB:Type="55" PB:NamedValues="ERD.DockWindowVisible,True ERD.Context1,\\VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\TCO\Asset%20Group%2011\FlatTop\Unit3 ERD.Context1.PersistString,206%20{9895150E-085D-4fcb-A16D-5EF5D2527196}%202\{61a8b94c-bb64-4242-9dc6-6c9db94c12e6}\Elements[{9b1cecdd-f91c-4eee-a32d-f559a5f843a1}]*VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\TCO\Asset%20Group%2011\FlatTop\Unit3 ERD.Context2,\\VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\CGT\Asset%20Group%2015\Hartsville\Unit307 ERD.Context2.PersistString,211%20{9895150E-085D-4fcb-A16D-5EF5D2527196}%202\{61a8b94c-bb64-4242-9dc6-6c9db94c12e6}\Elements[{43692b1d-c9a3-4715-a538-439de0457ba7}]*VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\CGT\Asset%20Group%2015\Hartsville\Unit307 ERD.Context,\\VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\TCO\Asset%20Group%2011\FlatTop\Unit3 ERD.Context.PersistString,206%20{9895150E-085D-4fcb-A16D-5EF5D2527196}%202\{61a8b94c-bb64-4242-9dc6-6c9db94c12e6}\Elements[{9b1cecdd-f91c-4eee-a32d-f559a5f843a1}]*VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\TCO\Asset%20Group%2011\FlatTop\Unit3 ERD.LastSearch.PISystem,\\VWNCHAAPPIAFS01 ERD.LastSearch.Database,\\VWNCHAAPPIAFS01\EnterpriseAnalytics ERD.LastSearch.RootElementString, ERD.LastSearch.IncludeSubElements,True ERD.LastSearch.ElementName, ERD.LastSearch.Category, ERD.LastSearch.ElementTemplate,Unit_Turbine_Solar_Taurus ERD.LastSearch.AFElementType,-1 ERD.LastSearch.MaximumQueryCount,1000">
                                               </rect>
                                               
                                               <PB:Dataset id="AF2_DS" PB:Type="57" PB:Context="2" PB:Description="" PB:RefreshInterval="10000" PB:Stepped="False" PB:DSType="3" PB:DSVisible="True">
                                                    <PB:DSDatapoint id="\\VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\TCO\Asset Group 11\FlatTop\Unit3|State_BHP_DP"/>
                                                    <PB:DSDatapoint id="\\VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\TCO\Asset Group 11\FlatTop\Unit3|State_BHP|CoresightDisplay_ID_DP"/>
                                               </PB:Dataset>
                                               
                                               <PB:Dataset id="E_DS_DS" PB:Type="57" PB:Context="2" PB:Description="" PB:RefreshInterval="5000" PB:Stepped="False" PB:DSType="3" PB:DSVisible="False">
                                                    <PB:DSDatapoint id="ElementPath_DP"/>
                                               </PB:Dataset>
                                               
                                               <PB:Dataset id="MODULEDB_DS" PB:Type="57" PB:Context="2" PB:Description="" PB:RefreshInterval="5000" PB:Stepped="False" PB:DSType="3" PB:DSVisible="False">
                                               </PB:Dataset>
                                               
                                               
                                               <a id="Anchor1" xlink:href="Placeholder URL">
                                               <polygon id="Rectangle1" points="124,201 680,201 680,516 124,516" fill="#00FF00" stroke="#000000" stroke-width="3px" PB:FillColor="#0000FF" PB:IsMultiState="True" PB:Type="2" PB:LineStyle="0" onclick="CoresightRedirect(evt)" >
                                                    <PB:MultiState id="Rectangle1_MS" BlinkBadData="0" ColorBadData="none" CurrentState="3" PBD:PtTagName="e.state_bhp" TagName="E.State_BHP" PtTagValue="3" ServerName="SVG MODULE CONTEXT" StateCount="4">
                                                         <PB:MSState id="Rectangle1_MSS1" Blink="0" Color="#808080" LowerValue="-1" UpperValue="0"/>
                                                         <PB:MSState id="Rectangle1_MSS2" Blink="0" Color="#FF0000" LowerValue="0" UpperValue="1"/>
                                                         <PB:MSState id="Rectangle1_MSS3" Blink="0" Color="#FFFF00" LowerValue="1" UpperValue="2"/>
                                                         <PB:MSState id="Rectangle1_MSS4" Blink="0" Color="#00FF00" LowerValue="2" UpperValue="3"/>
                                                    </PB:MultiState>
                                               </polygon>
                                               </a>
                                               
                                               
                                               <g id="Value1" fill="#000000" stroke="none" font-family="Arial" font-size="33.3333320087857" PB:DisplayPointName="9" PB:DisplayTimeStamp="9" PB:HorzAlign="0" PB:ShowUOM="False" PB:IsMultiState="False" PB:NumberFormat="General" PB:CanonicalNumberFormat="General" PB:TagInfoType="2" PBD:PtTagName="e.elementpath" PB:PersistString="" PB:PtTagStatus="0" PB:PtTagTime="4/9/2013 2:58:30 PM" PB:PtTagValue="\\VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\TCO\Asset Group 11\FlatTop\Unit3" PB:Type="7" PB:Visible="True" PB:Scripting="True">
                                                    <rect id="Value1_pbTextBoundingRectEl" x="98" y="106" width="1329" height="42" fill="#FFFFFF" stroke-width="0">
                                                    </rect>
                                                    <text id="Value1_pbTextEl" x="762" y="138" fill="#000000" stroke="none" font-family="Arial" font-size="33.3333320087857" text-anchor="middle" PBD:Property="value">\\VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\TCO\Asset Group 11\FlatTop\Unit3</text>
                                               </g>
                                               
                                               
                                               <g id="Value2" fill="#000000" stroke="none" font-family="Arial" font-size="33.3333320087857" PB:DisplayPointName="9" PB:DisplayTimeStamp="9" PB:HorzAlign="0" PB:ShowUOM="False" PB:IsMultiState="False" PB:NumberFormat="General" PB:CanonicalNumberFormat="General" PB:TagInfoType="2" PBD:PtTagName="e.state_bhp|coresightdisplay_id" PB:PersistString="" PB:PtTagStatus="0" PB:PtTagTime="12/31/1969 7:00:00 PM" PB:PtTagValue="1807" PB:Type="7" PB:Visible="True" PB:Scripting="True">
                                                    <rect id="Value2_pbTextBoundingRectEl" x="153" y="619" width="85" height="42" fill="#FFFFFF" stroke-width="0">
                                                    </rect>
                                                    <text id="Value2_pbTextEl" x="196" y="650" fill="#000000" stroke="none" font-family="Arial" font-size="33.3333320087857" text-anchor="middle" PBD:Property="value">1807</text>
                                               </g>
                                               
                                               
                                          
                                          </svg>
                                

                                 The XSLT file :

                                 
                                <?xml version="1.0" encoding="utf-8"?>
                                <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
                                
                                
                                     <xsl:output method="xml" indent="yes" />
                                
                                     
                                     <xsl:template match="@*|node()">
                                          <xsl:copy>
                                               <xsl:apply-templates select="@*|node()"/>
                                          </xsl:copy>
                                     </xsl:template>
                                     
                                     
                                     <xsl:template match="svg">
                                
                                          <xsl:copy>
                                               <xsl:copy-of select="@*"/>
                                               <xsl:apply-templates/>
                                               <xsl:element name="script">
                                
                                                    <xsl:attribute name="LANGUAGE">Javascript</xsl:attribute>
                                                    <xsl:attribute name="DEFER">TRUE</xsl:attribute>
                                                    <xsl:comment>
                                                         <![CDATA[
                                                              function CoresightRedirect(evt)
                                                              {
                                                                   var parentDoc = evt.getTarget().getOwnerDocument();
                                                                   var coresightScreenID = parentDoc.getElementById("Value2").getAttribute("PB:PtTagValue");
                                                                   var coresightScreenURL = "http://vwnchawbpis01/Coresight/#/Displays/" + coresightScreenID;
                                                                   parentDoc.getElementById("Anchor1").setAttribute("xlink:href",coresightScreenURL);
                                                              }
                                                         ]]>
                                                    
                                                    </xsl:comment>
                                               </xsl:element>
                                          </xsl:copy>
                                     </xsl:template>
                                
                                     
                                     
                                     
                                </xsl:stylesheet>
                                

                                 This is the SVG after transformation:

                                 
                                <?xml version='1.0' ?>
                                <svg viewBox="0 0 2331 1172" image-rendering="optimizeSpeed" xmlns:svg="OSI_SVG_20090601" xmlns:PBI="urn:osisoft-com-interface" width="100%" fill="#C0C0C0" preserveAspectRatio="none" xmlns:PB="urn:osisoft-com-pb" xmlns:PBD="urn:osisoft-com-data" xlink:xid="" PB:pid="" height="100%" xmlns:xsi="http://www.w3.org/1999/XMLSchema/instance" xmlns:xlink="http://www.w3.org/1999/xlink">
                                               
                                               
                                               
                                  <defs>
                                    <PBD:TagUses tag="e.elementpath" PB:BO="PWSPIEventsBO.cBOEvents">
                                                         
                                      <PBI:Symbol name="Value1" PB:Type="7"/>
                                                    
                                    </PBD:TagUses>
                                    <PBD:TagUses tag="e.state_bhp" PB:BO="PWSPIEventsBO.cBOEvents">
                                                         
                                      <PBI:Symbol name="Rectangle1_MS" PB:Type="2" PB:Parent="Rectangle1"/>
                                                    
                                    </PBD:TagUses>
                                    <PBD:TagUses tag="e.state_bhp|coresightdisplay_id" PB:BO="PWSPIEventsBO.cBOEvents">
                                                         
                                      <PBI:Symbol name="Value2" PB:Type="7"/>
                                                    
                                    </PBD:TagUses>
                                               
                                  </defs>
                                               
                                               
                                  <rect PB:NamedValues="ERD.DockWindowVisible,True ERD.Context1,\\VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\TCO\Asset%20Group%2011\FlatTop\Unit3 ERD.Context1.PersistString,206%20{9895150E-085D-4fcb-A16D-5EF5D2527196}%202\{61a8b94c-bb64-4242-9dc6-6c9db94c12e6}\Elements[{9b1cecdd-f91c-4eee-a32d-f559a5f843a1}]*VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\TCO\Asset%20Group%2011\FlatTop\Unit3 ERD.Context2,\\VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\CGT\Asset%20Group%2015\Hartsville\Unit307 ERD.Context2.PersistString,211%20{9895150E-085D-4fcb-A16D-5EF5D2527196}%202\{61a8b94c-bb64-4242-9dc6-6c9db94c12e6}\Elements[{43692b1d-c9a3-4715-a538-439de0457ba7}]*VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\CGT\Asset%20Group%2015\Hartsville\Unit307 ERD.Context,\\VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\TCO\Asset%20Group%2011\FlatTop\Unit3 ERD.Context.PersistString,206%20{9895150E-085D-4fcb-A16D-5EF5D2527196}%202\{61a8b94c-bb64-4242-9dc6-6c9db94c12e6}\Elements[{9b1cecdd-f91c-4eee-a32d-f559a5f843a1}]*VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\TCO\Asset%20Group%2011\FlatTop\Unit3 ERD.LastSearch.PISystem,\\VWNCHAAPPIAFS01 ERD.LastSearch.Database,\\VWNCHAAPPIAFS01\EnterpriseAnalytics ERD.LastSearch.RootElementString, ERD.LastSearch.IncludeSubElements,True ERD.LastSearch.ElementName, ERD.LastSearch.Category, ERD.LastSearch.ElementTemplate,Unit_Turbine_Solar_Taurus ERD.LastSearch.AFElementType,-1 ERD.LastSearch.MaximumQueryCount,1000" PB:Zoom="100" PB:wnState="0" PB:LocalID="1033" width="2331" PB:wnHeight="498" PB:Type="55" PB:wnWidth="910" PB:DocMinorVersionNum="26" height="1172" PB:DocMajorVersionNum="3" PB:DocGroup="1" y="0" x="0" PB:DisplayServerTimeZone="True">
                                               
                                  </rect>
                                               
                                               
                                  <PB:Dataset PB:Description="" id="AF2_DS" PB:Stepped="False" PB:RefreshInterval="10000" PB:DSType="3" PB:DSVisible="True" PB:Context="2" PB:Type="57">
                                                    
                                    <PB:DSDatapoint id="\\VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\TCO\Asset Group 11\FlatTop\Unit3|State_BHP_DP"/>
                                                    
                                    <PB:DSDatapoint id="\\VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\TCO\Asset Group 11\FlatTop\Unit3|State_BHP|CoresightDisplay_ID_DP"/>
                                               
                                  </PB:Dataset>
                                               
                                               
                                  <PB:Dataset PB:Description="" id="E_DS_DS" PB:Stepped="False" PB:RefreshInterval="5000" PB:DSType="3" PB:DSVisible="False" PB:Context="2" PB:Type="57">
                                                    
                                    <PB:DSDatapoint id="ElementPath_DP"/>
                                               
                                  </PB:Dataset>
                                               
                                               
                                  <PB:Dataset PB:Description="" id="MODULEDB_DS" PB:Stepped="False" PB:RefreshInterval="5000" PB:DSType="3" PB:DSVisible="False" PB:Context="2" PB:Type="57">
                                               
                                  </PB:Dataset>
                                               
                                               
                                               
                                  <a id="Anchor1" xlink:href="Placeholder URL">
                                               
                                    <polygon id="Rectangle1" points="124,201 680,201 680,516 124,516" fill="#00FF00" stroke="#000000" stroke-width="3px" PB:FillColor="#0000FF" PB:IsMultiState="True" PB:Type="2" PB:LineStyle="0" onclick="CoresightRedirect(evt)">
                                                    
                                      <PB:MultiState id="Rectangle1_MS" BlinkBadData="0" ColorBadData="none" CurrentState="3" PBD:PtTagName="e.state_bhp" TagName="E.State_BHP" PtTagValue="3" ServerName="SVG MODULE CONTEXT" StateCount="4">
                                                         
                                        <PB:MSState id="Rectangle1_MSS1" Blink="0" Color="#808080" LowerValue="-1" UpperValue="0"/>
                                                         
                                        <PB:MSState id="Rectangle1_MSS2" Blink="0" Color="#FF0000" LowerValue="0" UpperValue="1"/>
                                                         
                                        <PB:MSState id="Rectangle1_MSS3" Blink="0" Color="#FFFF00" LowerValue="1" UpperValue="2"/>
                                                         
                                        <PB:MSState id="Rectangle1_MSS4" Blink="0" Color="#00FF00" LowerValue="2" UpperValue="3"/>
                                                    
                                      </PB:MultiState>
                                               
                                    </polygon>
                                               
                                  </a>
                                               
                                               
                                               
                                  <g PB:NumberFormat="General" PBD:PtTagName="e.elementpath" PB:IsMultiState="False" fill="#000000" PB:Visible="True" PB:PtTagStatus="0" PB:Type="7" PB:HorzAlign="0" PB:CanonicalNumberFormat="General" PB:ShowUOM="False" PB:DisplayPointName="9" id="Value1" stroke="none" PB:TagInfoType="2" PB:PersistString="" font-size="33.3333320087857" PB:Scripting="True" PB:PtTagTime="4/9/2013 2:58:30 PM" font-family="Arial" PB:DisplayTimeStamp="9" PB:PtTagValue="\\VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\TCO\Asset Group 11\FlatTop\Unit3">
                                                    
                                    <rect id="Value1_pbTextBoundingRectEl" x="98" y="106" width="1329" height="42" fill="#FFFFFF" stroke-width="0">
                                                    
                                    </rect>
                                                    
                                    <text id="Value1_pbTextEl" x="762" y="138" fill="#000000" stroke="none" font-family="Arial" font-size="33.3333320087857" text-anchor="middle" PBD:Property="value">\\VWNCHAAPPIAFS01\EnterpriseAnalytics\NGTS\TCO\Asset Group 11\FlatTop\Unit3</text>
                                               
                                  </g>
                                               
                                               
                                               
                                  <g PB:NumberFormat="General" PBD:PtTagName="e.state_bhp|coresightdisplay_id" PB:IsMultiState="False" fill="#000000" PB:Visible="True" PB:PtTagStatus="0" PB:Type="7" PB:HorzAlign="0" PB:CanonicalNumberFormat="General" PB:ShowUOM="False" PB:DisplayPointName="9" id="Value2" stroke="none" PB:TagInfoType="2" PB:PersistString="" font-size="33.3333320087857" PB:Scripting="True" PB:PtTagTime="12/31/1969 7:00:00 PM" font-family="Arial" PB:DisplayTimeStamp="9" PB:PtTagValue="1807">
                                                    
                                    <rect id="Value2_pbTextBoundingRectEl" x="153" y="619" width="85" height="42" fill="#FFFFFF" stroke-width="0">
                                                    
                                    </rect>
                                                    
                                    <text id="Value2_pbTextEl" x="196" y="650" fill="#000000" stroke="none" font-family="Arial" font-size="33.3333320087857" text-anchor="middle" PBD:Property="value">1807</text>
                                               
                                  </g>
                                               
                                               
                                          
                                          
                                  <script DEFER="TRUE" LANGUAGE="Javascript">
                                    <!--
                                                         
                                                              function CoresightRedirect(evt)
                                                              {
                                                                   var parentDoc = evt.getTarget().getOwnerDocument();
                                                                   var coresightScreenID = parentDoc.getElementById("Value2").getAttribute("PB:PtTagValue");
                                                                   var coresightScreenURL = "http://vwnchawbpis01/Coresight/#/Displays/" + coresightScreenID;
                                                                   parentDoc.getElementById("Anchor1").setAttribute("xlink:href",coresightScreenURL);
                                                              }
                                                         
                                                    
                                                    -->
                                  </script>
                                </svg>
                                

                                 As you can see the script gets commented out if I use the <xsl:comment>.

                                 

                                When I am not using the <xsl:comment> tags, the modified SVG looks good and the script executes when I open the file in a browser but not in the web part. 

                                 

                                 

                                 

                                 

                                  • Re: Executing Javascript inside PI Graphic SVG
                                    bbernard

                                    In order to know for sure if the script inserted via XSL is not making it into the SVG in the PI Graphic, we need to look at the cached SVG file, which can be found in a temporary folder on the web server.  Generally, the SVGCache is located under C:\Program Files\PIPC\PI Data Services\temp\SVGCache.  Under that folder, there are subfolders for each user and then folders that mimic the components of the source svg file path.  So for example, if you were logged on as "user1" and you were accessing a file named MySVGFile.svg, which was located at "http://myserver/shared documents", the full path to the cached file on the server would be: C:\Program Files\PIPC\PI Data Services\temp\SVGCache\user1\http\myserver\shared documents\MySVGFile.svg.

                                     

                                    If you see the intended script in the cached version of this file, then you know that the XSLT is working.

                                     

                                    There is a problem with the approach shown above, however:  All of the "PB:" namespace elements and attributes are removed from the SVG to produce a more streamlined file to load into the viewer in PI Graphic.  This is done prior to applying any custom XSL Transforms.  So even if the script is getting inserted correctly, it will fail.  You can look at the content in the cached SVG file to see what elements and attributes are still present when the SVG is loaded into the web part.

                                      • Re: Executing Javascript inside PI Graphic SVG
                                        Bannikov

                                        As I have understood from this thread, there's no way to incapsulate custom JavaScript code in SVG file to obtain some more flexibility. Is it right? Or maybe we have some 'story of success' from anybody?

                                          • Re: Executing Javascript inside PI Graphic SVG
                                            pkaiser

                                            Yes, you can use the XSLT transformation feature of the PI Graphic web part to insert javascript into your SVG file. Here is a simple example. First is the source of an SVG file created in ProcessBook, that just has a rectangle on the display. That rectangle is represented in the SVG as a polygon element with the id "Rectangle1":

                                             

                                             

                                             
                                            <?xml version="1.0" encoding="UTF-8"?>
                                            <svg height="100%" viewBox="0 0 1251 945" width="100%" fill="#C0C0C0" image-rendering="optimizeSpeed" onload="SVG_doc_loaded(evt);" PB:pid="" xlink:xid="" xmlns:svg="OSI_SVG_20090601" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:PB="urn:osisoft-com-pb" xmlns:PBI="urn:osisoft-com-interface" xmlns:PBD="urn:osisoft-com-data" xmlns:xsi="http://www.w3.org/1999/XMLSchema/instance">
                                                 <defs></defs>
                                                 <rect x="0" y="0" width="1251" height="945" PB:DocMajorVersionNum="3" PB:DocMinorVersionNum="26" PB:DocGroup="1" PB:wnHeight="417" PB:wnWidth="510" PB:wnState="0" PB:Zoom="100" PB:LocalID="1033" PB:DisplayServerTimeZone="True" PB:Type="55">
                                                 </rect>
                                                 <PB:Dataset id="AF2_DS" PB:Type="57" PB:Context="2" PB:Description="" PB:RefreshInterval="10000" PB:Stepped="False" PB:DSType="3" PB:DSVisible="True">
                                                 </PB:Dataset>
                                                 <PB:Dataset id="E_DS_DS" PB:Type="57" PB:Context="2" PB:Description="" PB:RefreshInterval="5000" PB:Stepped="False" PB:DSType="3" PB:DSVisible="False">
                                                 </PB:Dataset>
                                                 <PB:Dataset id="MODULEDB_DS" PB:Type="57" PB:Context="2" PB:Description="" PB:RefreshInterval="5000" PB:Stepped="False" PB:DSType="3" PB:DSVisible="False">
                                                 </PB:Dataset>
                                                 <polygon id="Rectangle1" points="225,220 981,220 981,736 225,736" fill="#0000FF" stroke="#FFFFFF" stroke-width="3px" PB:IsMultiState="False" PB:Type="2" PB:LineStyle="0">
                                                 </polygon>
                                                 <script language="JavaScript" type="text/javascript"> 
                                                    
                                                    function SVG_doc_loaded(evt)
                                                 {
                                                     var parentDoc = evt.getTarget().getOwnerDocument();
                                                     var elem = parentDoc.createElement("Ready");
                                                     evt.getTarget().appendChild(elem);
                                            
                                                    }</script>
                                            </svg>
                                            

                                             

                                             

                                            Now here is a simple XSLT file that adds an "onclick" attribute to every polygon with a simple javascript "alert" method invocation:

                                             

                                             

                                             
                                            <?xml version="1.0" encoding="UTF-8"?>
                                            <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:PB="urn:osisoft-com-pb" xmlns:PBI="urn:osisoft-com-interface" xmlns:PBD="urn:osisoft-com-data">
                                                 <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
                                                 
                                                 <!-- All content that is not a polygon is just copied directly to output -->
                                                 <xsl:template match="*|@*|comment()|processing-instruction()|text()">
                                                      <xsl:copy>
                                                           <xsl:apply-templates select="*|@*|comment()|processing-instruction()|text()"/>
                                                      </xsl:copy>
                                                 </xsl:template>
                                                 
                                                 <!-- For any polygon, add an onclick attribute that invokes the javascript alert method -->
                                                 <xsl:template match="polygon">
                                                <xsl:copy>
                                                  <xsl:apply-templates select="*|@*|comment()|processing-instruction()|text()"/>
                                                  <xsl:attribute name="onclick">javascript:alert('Hello');</xsl:attribute>
                                                </xsl:copy>
                                              </xsl:template>
                                            </xsl:stylesheet>
                                            

                                             

                                              • Re: Executing Javascript inside PI Graphic SVG
                                                torsteins

                                                Hello Paul Kaiser,

                                                 

                                                I'm trying to implement your example, but I end up getting the following error:

                                                 

                                                [9/13/2013 5:56:41 PM] Error loading <PATH> <p>SVG File Created with Addin Version 3.26<p>Trying to apply XSL transform.<p>Error : Error loading "OSIsoft.PresentationServices.Properties.RtFilePath"Error : The remote server returned an error: (404) Not Found.

                                                 

                                                Any ideas as to what is wrong? The XSLT file is located at the defined path, which is the same as the SVG.

                                                 

                                                Best Regards

                                                  • Re: Executing Javascript inside PI Graphic SVG
                                                    mhamel

                                                    @Torstein: Have you validated if you could read the .xsl file required for this operation from your shared document location? I suspect with the message here that the file cannot be retrieved correctly.

                                                      • Re: Executing Javascript inside PI Graphic SVG
                                                        torsteins

                                                        @Mathieu Hamel: The issue was caused by a problematic DNS server, and I got around it by using the IP directly. Thank you for the nudge in the right direction.

                                                         

                                                        By the way, is there a way to use XSLT transform to for example change the position of a symbol based on an input value?

                                                         

                                                        I've also tried to find some Osisoft documentation describing the possiblities and limitations of the XSLT transform with PI Graphics, but so far I've only seen very vague descriptions.

                                                         

                                                        Best Regards