How to embed a PI Vision Display in a Web Page

Blog Post created by gchermont on May 16, 2018



Have you ever thought of embedding a PI Vision Display in an Web Application?


Let's say you have an Web Application to insert data into PI and you want to monitor the data in real time through the application itself.


You can easily do it by using an HTML iFrame tag within your application and embedding a PI Vision Display.


An <a> tag can be used to link the desired display and the <iframe> tag will show it whenever the link is clicked. You will be able to navigate through the displays normally within the frame.


In the example below I created a simple HTML page with links for 2 different PI Vision Displays.


        <title>Demos PI Vision</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="style.css">
        <div class="data-entry">
            <div class="input-fields">        
                <h2 class="title">Manual Data Entry</h2>
                <form action="#" method="post">
                    <input type="text" id="ival" class="form-control" placeholder="value...">                    
                    <input type="datetime-local" id="itime" class="form-control" placeholder="Time...">
                    <button class="btn btn-primary">Insert!</button>    
        <div class="menu">
            <a href="https://latam-energy/PIVision/#/Displays/96/Demo-Wind---Turbina?mode=kiosk" target="PIVisionFrame" class="btn td"><h4>Turbines</h4></a>
            <a href="https://latam-energy/PIVision/#/Displays/82/Power-T-D---Transformer?mode=kiosk" target="PIVisionFrame" class="btn td"><h4>Transformers</h4></a>
        <iframe height="75.5%" width="100%" name="PIVisionFrame" ></iframe>


In this code we have the form as the Web Application on the upper left corner of the page and the frame with the PI Vision Display on the bottom side.


The result of this page is shown below.



Hope you find this useful!