PI Vision Extensibility: Creating Custom Symbols

NEW - Become familiar with the PI Vision Extensibility Framework; a powerful model that enables you to write custom symbols and tool panes for use in PI Vision displays

About this course

This course is designed for developers who are interested in creating custom symbols for PI Vision. The PI Vision Extensibility Framework is a powerful model that enables you to write custom symbols and tool panes for use in PI Vision displays, including unique or industry-specific ways of visualizing PI data. Throughout our exercises, we will learn how to register a symbol, hook into the built-in symbol events, update the symbol’s view, and create a configuration pane.

By the end of the course, you will be able to...

  • Describe the file structure of a PI Vision symbol
  • Describe the 3 layers that make up a PI Vision symbol
  • Describe how a PI Vision symbol retrieves data from the PI Vision server
  • Create and register a PI Vision custom symbol
  • Hook into the PI Vision symbol data updates and display the data to the user
  • Create a configuration pane for your custom symbol.

Audience

This course is best suited for developers or PI System administrators comfortable with web development that would like to extend their existing PI Vision installation to include additional custom symbols.

Level: Intermediate

Study time: 16 hours

Course Access: Unlimited access. The only exception is the Training Cloud Environment for which you have 30 day access. After those 30 days you can purchase additional access with one of the two options below:

Prerequisites

  • Comfortable working with web technologies such as HTML, CSS, and JavaScript.
  • Basic AngularJS and jQuery knowledge is useful, but not required for completing this course.
  • Basic PI Server and PI Vision knowledge is useful, but not required for completing this course.
  • A computer that can access our YouTube content.

This Course Includes...

  • Videos, discussion opportunities and quizzes to help you learn the material
  • A Cloud Environment accessible for 30 days and configured to complete all the exercises in the course
  • A sharable certificate of completion

Further Information

  • This is a self-paced course. Any questions or assistance needed about the material can be asked in this course's space in the OSIsoft PI Square community
  • When you complete the examination at the end of the course, you will receive a certificate of completion which can be shared and directly posted on LinkedIn.
  • For more information about our Online Courses please visit our FAQ page

You can audit the full video lecture content right now on the OSIsoft Learning YouTube Channel

Curriculum

  • Getting Started
  • Key Course Information
  • Course Grading Scheme
  • How to Navigate This Course
  • Offline Course Videos for Blocked YouTube Users
  • Course Workbook
  • Course Presentation
  • Training Cloud Environments
  • Cloud Environments Introduction
  • Cloud Environments Instructions
  • Launch Cloud Environment
  • Lesson 1 - Overview of this course
  • Introduction (1:29)
  • [POLL] Who's from what industry
  • [DISCUSSION] Introductions
  • Environment (1:20)
  • Before we get Started (1:47)
  • Lesson 2 - Create and Load Symbol
  • Parts of a PI Vision Symbol (4:05)
  • Creating the Implementation Layer (7:05)
  • Creating the Presentation Layer (1:14)
  • Testing the Symbol (1:53)
  • [EXERCISE] Create and Test Symbol
  • [SOLUTION] Create and Test Symbol
  • Questions on this part of the course?
  • Lesson 3 - Update Symbol with Data
  • Data Shapes (3:00)
  • [EXERCISE] Define a Data Shape for the Symbol
  • [SOLUTION] Define a Data Shape for the Symbol
  • Data Updates (3:05)
  • Init Callback Functions
  • [EXERCISE] Implement the Data Update Listener Callback Function
  • [SOLUTION] Implement the Data Update Listener Callback Function
  • Working with the DOM (1:00)
  • [EXERCISE] Rotate the Arrow HTML Element Based on Data Updates
  • [SOLUTION] Rotate the Arrow HTML Element Based on Data Updates
  • Questions on this part of the course?
  • Lesson 4 - Show Value Timestamp and Label
  • Using the Symbol’s Scope (1:18)
  • [EXERCISE] Get Value and Timestamp
  • [SOLUTION] Get Value and Timestamp
  • [EXERCISE] Get Label and Units
  • [SOLUTION] Get Label and Units
  • AngularJS Data Binding (1:31)
  • [EXERCISE] Display Value, Timestamp, Label, and Units
  • [SOLUTION] Display Value, Timestamp, Label, and Units
  • Questions on this part of the course?
  • Lesson 5 - Create a Configuration Pane
  • Configuration Layer (1:56)
  • [EXERCISE] Create a Configuration Pane
  • [SOLUTION] Create a Configuration Pane
  • Questions on this part of the course?
  • Lesson 6 - Add Styles to Symbol and Configuration Pane
  • CSS Files (1:24)
  • [EXERCISE] Add Styles to Presentation and Configuration Layer
  • [SOLUTION] Add Styles to Presentation and Configuration Layer
  • Questions on this part of the course?
  • Course Evaluation
  • Final Exam
  • Final Exam

About this course

This course is designed for developers who are interested in creating custom symbols for PI Vision. The PI Vision Extensibility Framework is a powerful model that enables you to write custom symbols and tool panes for use in PI Vision displays, including unique or industry-specific ways of visualizing PI data. Throughout our exercises, we will learn how to register a symbol, hook into the built-in symbol events, update the symbol’s view, and create a configuration pane.

By the end of the course, you will be able to...

  • Describe the file structure of a PI Vision symbol
  • Describe the 3 layers that make up a PI Vision symbol
  • Describe how a PI Vision symbol retrieves data from the PI Vision server
  • Create and register a PI Vision custom symbol
  • Hook into the PI Vision symbol data updates and display the data to the user
  • Create a configuration pane for your custom symbol.

Audience

This course is best suited for developers or PI System administrators comfortable with web development that would like to extend their existing PI Vision installation to include additional custom symbols.

Level: Intermediate

Study time: 16 hours

Course Access: Unlimited access. The only exception is the Training Cloud Environment for which you have 30 day access. After those 30 days you can purchase additional access with one of the two options below:

Prerequisites

  • Comfortable working with web technologies such as HTML, CSS, and JavaScript.
  • Basic AngularJS and jQuery knowledge is useful, but not required for completing this course.
  • Basic PI Server and PI Vision knowledge is useful, but not required for completing this course.
  • A computer that can access our YouTube content.

This Course Includes...

  • Videos, discussion opportunities and quizzes to help you learn the material
  • A Cloud Environment accessible for 30 days and configured to complete all the exercises in the course
  • A sharable certificate of completion

Further Information

  • This is a self-paced course. Any questions or assistance needed about the material can be asked in this course's space in the OSIsoft PI Square community
  • When you complete the examination at the end of the course, you will receive a certificate of completion which can be shared and directly posted on LinkedIn.
  • For more information about our Online Courses please visit our FAQ page

You can audit the full video lecture content right now on the OSIsoft Learning YouTube Channel

Curriculum

  • Getting Started
  • Key Course Information
  • Course Grading Scheme
  • How to Navigate This Course
  • Offline Course Videos for Blocked YouTube Users
  • Course Workbook
  • Course Presentation
  • Training Cloud Environments
  • Cloud Environments Introduction
  • Cloud Environments Instructions
  • Launch Cloud Environment
  • Lesson 1 - Overview of this course
  • Introduction (1:29)
  • [POLL] Who's from what industry
  • [DISCUSSION] Introductions
  • Environment (1:20)
  • Before we get Started (1:47)
  • Lesson 2 - Create and Load Symbol
  • Parts of a PI Vision Symbol (4:05)
  • Creating the Implementation Layer (7:05)
  • Creating the Presentation Layer (1:14)
  • Testing the Symbol (1:53)
  • [EXERCISE] Create and Test Symbol
  • [SOLUTION] Create and Test Symbol
  • Questions on this part of the course?
  • Lesson 3 - Update Symbol with Data
  • Data Shapes (3:00)
  • [EXERCISE] Define a Data Shape for the Symbol
  • [SOLUTION] Define a Data Shape for the Symbol
  • Data Updates (3:05)
  • Init Callback Functions
  • [EXERCISE] Implement the Data Update Listener Callback Function
  • [SOLUTION] Implement the Data Update Listener Callback Function
  • Working with the DOM (1:00)
  • [EXERCISE] Rotate the Arrow HTML Element Based on Data Updates
  • [SOLUTION] Rotate the Arrow HTML Element Based on Data Updates
  • Questions on this part of the course?
  • Lesson 4 - Show Value Timestamp and Label
  • Using the Symbol’s Scope (1:18)
  • [EXERCISE] Get Value and Timestamp
  • [SOLUTION] Get Value and Timestamp
  • [EXERCISE] Get Label and Units
  • [SOLUTION] Get Label and Units
  • AngularJS Data Binding (1:31)
  • [EXERCISE] Display Value, Timestamp, Label, and Units
  • [SOLUTION] Display Value, Timestamp, Label, and Units
  • Questions on this part of the course?
  • Lesson 5 - Create a Configuration Pane
  • Configuration Layer (1:56)
  • [EXERCISE] Create a Configuration Pane
  • [SOLUTION] Create a Configuration Pane
  • Questions on this part of the course?
  • Lesson 6 - Add Styles to Symbol and Configuration Pane
  • CSS Files (1:24)
  • [EXERCISE] Add Styles to Presentation and Configuration Layer
  • [SOLUTION] Add Styles to Presentation and Configuration Layer
  • Questions on this part of the course?
  • Course Evaluation
  • Final Exam
  • Final Exam