2015 OSIsoft TechCon. Bring element relative features of your PI PB displays to PI Coresight

Transcription

1 2015 OSIsoft TechCon Bring element relative features of your PI PB displays to PI Coresight 1 P a g e

2

3 Table of Contents Contents Table of Contents... 1 Introduction... 2 Setup... 2 Searching in PI Coresight... 4 Display Search... 4 Implementing Display Search and Selection... 4 Element search Implementing Element Search and Selection Database search Implementing Database Search Bonus Material Add a selector to choose which work shift to show Change call that retrieves display list Display multiple PI ProcessBook displays on the same page Create ad hoc PI Coresight displays Something else OSIsoft Virtual Learning Environment P a g e

4 2015 TechCon Session Introduction In this lab, we will create a web page, where we will explore the Element Relative features of PI ProcessBook displays in PI Coresight. This will be done through URL parameters supported by PI Coresight. For a complete list of the parameters supported by PI Coresight please refer to the PI Coresight 2014 Installation and Administration Guide, which is located in the PI Coresight installation folder (C:\Program Files\PIPC\Coresight). Setup The web page we are creating will be located in the PI Coresight installation folder (C:\Program Files\PIPC\Coresight). The name of the page will be erd.html and all of the files it references, like JavaScript and cascading style sheets files, will be located in the erd subfolder. There is an additional folder, inside the erd folder, named 3rdparty. This 3rdparty folder contains open source files needed to complete the lab. This lab will be assuming that you are using Komodo Edit 8.5 ( as your text editor, although any text editor will do. The lab is also assuming Google Chrome ( will be your default web browser. Chrome has an embedded debugger that will be using as well. You can access it by pressing the F12 key. A convention used in this lab for code additions is that within a code snippet, the bolded text is to be appended to the work in progress files, code not in bold should already be there. To begin, 1. Open the lab file zip, located on the desktop of your machine, and copy the contents of the Initial folder into your PI Coresight installation folder, C:\Program Files\PIPC\Coresight. 2. After copying the files, open a browser and navigate to You should see our initial web page, which looks something like this: 2 P a g e

5 The zip file also contains a folder named Final. This folder is the completed version of this lab for your reference. The web page has two parts: The left pane, which will contain the search and navigation features. This pane is divided in three sections: o The display search input o The display selection o The AF element tree control The right pane that shows the display. The main component in this area is an HTML iframe where the display is shown. The src property of the iframe is set to the PI Coresight URL needed to show a particular display using a selected Current Element. The format of a URL used to open a PI ProcessBook display is composed of the following: o AnElement&hidetoolbar&redirect=false this is the URL of a ProcessBookDisplay CurrentElement=FullPathToAnElement&hidetoolbar: URL parameter that specifies the current element applied to the display hidetoolbar: URL parameter to hide the Coresight s app toolbar redirect=false: URL parameter to avoid redirecting to the mobile site when the browser windows size decreases 3 P a g e

6 2015 TechCon Session The format of a PI ProcessBook display URL (like consists of: The path to the PI Coresight server. In this case: A modifier to request a particular PI ProcessBook display: /#/PBDisplays/20004 where is the unique ID of the display The parameters, as shown in the picture above, modify what is displayed in the iframe. The first parameter is the CurrentElement, which gives context to an Element Relative PI ProcessBook display. The second parameter is used to hide the PI Coresight app toolbar (this is mostly used in read-only scenarios like in this lab). Other URL parameters, such as StartTime and EndTime, are not used in this lab. If you are interested in learning more about additional URL parameters, please refer to the PI Coresight 2014 Installation and Administration Guide, which is located in the PI Coresight installation folder (C:\Program Files\PIPC\Coresight). Searching in PI Coresight Searches in PI Coresight are can be accomplished by making REST calls to various client applications, such as PI Coresight and the PI Web API. Below is an overview of how the calls will be used in this lab. Display Search We ll be using PI Coresight s search service to search for displays. You can access PI Coresight s search service with the following URL: The components of this URL are: The Coresight server path: The location of the search service: /services/search A parameter with the search query: query=lab* This will search for anything that starts with the word lab. Other parameters that can be set in the URL are includepi, includemetadata, includedisplays, and includeaf. Each of these parameters can have values of yes or no. Implementing Display Search and Selection 1. Launch Komodo Edit and open erd.html, C:\Program Files\PIPC\Coresight\erd.html. 2. In erd.html, find the HTML paragraph tag (<P>) with the text TODO: add display search and remove it. 3. Uncomment the input HTML sections as below. To uncomment out HTML, remove the <!-- from the beginning and --> from the end. <input id="displaysearchmask" placeholder='search for Display' /> <input id="displaysearchnow" type="image" src="erd/3rdparty/sbicon.png" class="icon" /> 4. Open erd.js in Komodo Edit, C:\Program Files\PIPC\Coresight\erd\erd.js. 4 P a g e

7 5. Find the comment // TODO: hook up display search text input and button. Here we will be adding calls to allow searching for a display. We want to be able to search both when the icon is pressed and when enter is pressed. To do so, add the following JavaScript code: $("#displaysearchnow").click(function () { loaddisplays(); $("#displaysearchmask").keypress(function (data) { if (data.keycode === 13) { loaddisplays(); } 6. Next, find the HTML paragraph tag with the text TODO: add display selection and remove it. 7. Uncomment the select HTML section as below. <select class="select-menu" id="displaymenu"> <option value="">select a display</option> </select> 8. In erd.js, near the bottom of the file, find the function loaddisplays. In this function we will create an Ajax call to the PI Coresight search service to find displays. 9. First remove the TODO commend and define a variable containing the address of the PI Coresight search service var url = " + this.document.domain + "/Coresight/services/search"; 10. Next we will define a variable to hold the value that we are searching for var query = $("#displaysearchmask").val() + "*"; 11. The last step, before the actual Ajax call, is to create an object containing the options we will be using in our Ajax call var options = { "query": query, "includepi": "No", "includemetadata": "No", "includedisplays": "Yes", "includeaf": "No" }; 5 P a g e

8 2015 TechCon Session 12. Next create the actual Ajax call. We will be using a jquery helper function, getjson, to make our Ajax call. The parameters to getjson are the Url and the options to send to the server. getjson returns a promise object on which we will handle the done and fail resolutions. $.getjson(url, options).done(function(data) { }).fail(function(data) { console.log( "error" ); 13. On the success condition (the done resolution), we want to create HTML option elements to add to the displaymenu select element created above. To do this, loop through each item in the data collection that is returned to the done function using data.foreach $.getjson(url, options).done(function(data) { data.foreach(function (item) { }).fail(function(data) { console.log( "error" ); 14. We only want to handle PI ProcessBook displays for this lab, so only allow displays that have a StorageType of 1. $.getjson(url, options).done(function(data) { data.foreach(function (item) { if (item.storagetype === 1) { } }).fail(function(data) { console.log( "error" ); 15. The final step of the loading of displays is to create an HTML option tag for each display, with its display id. To do this, first we create a jquery variable at the top of the function to hold the displaymenu var $menuselector = $("#displaymenu"); 6 P a g e

9 16. Next we add an option for each display inside of the StorageType if statement. So far the loaddisplay function looks like this function loaddisplays() { var $menuselector = $("#displaymenu"); var url = " var query = $("#displaysearchmask").val() + "*"; var options = { "query": query, "includepi": "No", "includemetadata": "No", "includedisplays": "Yes", "includeaf": "No" }; $.getjson(url, options).done(function(data) { data.foreach(function (item) { if (item.storagetype == 1) { $menuselector.append("<option value='" + item.displayid + "'>" + item.displayname + "</option>"); } }) }.fail(function(data) { console.log( "error" ); 7 P a g e

10 2015 TechCon Session 17. The last bit of housekeeping in the loaddisplays function is to set up a variable that will handle automatically selecting the first display in the list and show the display. Here is the final version of loaddisplays: function loaddisplays() { var $menuselector = $("#displaymenu"); var url = " var query = $("#displaysearchmask").val() + "*"; var options = { "query": query, "includepi": "No", "includemetadata": "No", "includedisplays": "Yes", "includeaf": "No" }; $.getjson(url, options).done(function(data) { var firstitem = true; $menuselector.empty(); data.foreach(function (item) { if (item.storagetype == 1) { $menuselector.append("<option value='" + item.displayid + "'>" + item.displayname + "</option>"); } }) } if (firstitem) {.fail(function(data) { } selecteddisplayid = item.displayid; firstitem = false; setupdisplay(); console.log( "error" ); 8 P a g e

11 18. The last step is to hook up a change event handler to the displaymenu. This can be done under the TODO: hook up change event handler for display menu comment $("#displaymenu").change(function () { selecteddisplayid = this.value; setupdisplay(); 19. You should now be able to change the display shown in the iframe. Save both erd.html and erd.js and reload Enter * as the search mask and verify the dropdown list has both Lab01 and Welcome displays and that the proper display is loaded when it is selected. 9 P a g e

12 2015 TechCon Session Element search We ll be using PI Web API to get the AF elements used to populate our tree control. PI Web API is a RESTful PI System access layer that provides a cross-platform programmatic interface to the PI System (see for full API help). An example of the call is: &count=5 The components of this URL are: The path to PI Web API search: The children element search part: /children?parent=af:\\pisrv1\lab&fields=name;haschildren&count=5 o /children indicates a children search call o Parent=parentPath is query parameter that specifies the parent of the elements to retrieve. In this example, the parent is the string representing the Lab database in the PISRV1 server, af:\\pisrv1\lab o Fields=field1;field2;field3 is a semicolon delimited list of fields on the matched elements that we want to retrieve o Count=n is the maximum number of results to be returned Implementing Element Search and Selection 1. In erd.html, find the HTML paragraph with the text TODO: add current element navigation and selection and remove it. 2. Uncomment the div below <div class="current-element"> </div> <p class="pane-text">select a current element:</p> <div class="treediv" id="tree"></div> 3. In erd.js, find the comment labeled // TODO: add search url and parameters. 4. Here we want to enter in the PI Web API Url to use for searching along with the parameters we will use when making the search call, as below. var searchurl = " + this.document.domain + "/piwebapi/search/children?parent=af%3a"; var searchparams = "&fields=name;haschildren&count=1000"; 10 P a g e

13 Database search We ll be using PI Web API to get the list of databases. The call to get the sources (AF databases and PI servers) that are accessible is: Implementing Database Search 1. In erd.js, find the comment TODO: Initialize the AF elements tree. 2. Here we will be setting the databaseurl that is need in order to query for all of the available elements. var databasesurl = " + this.domain + "/piwebapi/search/sources"; 3. Below this variable is the Ajax call used to fill in the AF hierarchy in the tree view.the Ajax call has already been implemented, along with the code to fill in the tree view. 4. From here, you should now be able to search for a display, Lab01, and switch the current element of that display by selecting different check boxes in the tree view. 11 P a g e

14 2015 TechCon Session Bonus Material 1. Add a selector to choose which work shift to show Each work shift would be associated with a start and end time. Hint: you can modify the loaddisplay method to add the StatTime and EndTime URL parameters 2. Change call that retrieves display list Instead of using the PI Coresight search call to retrieve the list of displays, use the same call that is used by PI Coresight on its homepage. Hint: Use Chrome Developer tools to determine the call (/services/repository?storagetype=processbookdisplay.) 3. Display multiple PI ProcessBook displays on the same page Consider combining with other parts of this lab. For example, add selectors above each display to choose which display to show and/or which shift to use. 4. Create ad hoc PI Coresight displays Search for data items and then create an ad hoc PI Coresight display that shows a trend of that data Hint: look at Creating a new temporary display with particular data items in the Admin guide (C:\Program Files\PIPC\Coresight\ PI Coresight 2014 Installation and Administration Guide.pdf) 5. Something else If you have other good ideas for additional exercises, let us know. We might be able to use them in future labs. OSIsoft Virtual Learning Environment The OSIsoft Virtual Environment provides you with virtual machines where you can complete the exercises contained in this workbook. After you launch the Virtual Learning Environment, connect to PISRV1 with the credentials: pischool\student01, student. The environment contains the following machines: PISRV1: a windows server that runs the PI System and that contains all the software and configuration necessary to perform the exercises on this workbook. This is the machine you need to connect to. This machine cannot be accessed from the outside except by rdp, however, from inside the machine, you can access Coresight and other applications with the url: (i.e. PIDC: a domain controller that provides network and authentication functions. The system will create these machines for you upon request and this process may take between 5 to 10 minutes. During that time you can start reading the workbook to understand what you will be doing in the machine. 12 P a g e

15 After you launch the virtual learning environment your session will run for up to 8 hours, after which your session will be deleted. You can save your work by using a cloud storage solution like onedrive or box. From the virtual learning environment you can access any of these cloud solutions and upload the files you are interested in saving. System requirements: the Virtual Learning Environment is composed of virtual machines hosted on Microsoft Azure that you can access remotely. In order to access these virtual machines you need a Remote Desktop Protocol (RDP) Client and you will also need to be able to access the domain cloudapp.net where the machines are hosted. A typical connection string has the form cloudservicename.cloudapp.net:xxxxx, where the cloud service name is specific to a group of virtual machines and xxxxx is a port in the range Therefore users connecting to Azure virtual machines must be allowed to connect to the domain *.cloudapp.net throughout the port range If you cannot connect, check your company firewall policies and ensure that you can connect to this domain on the required ports. 13 P a g e