Eugene Lee

PI Vision Default Display Appearance

Blog Post created by Eugene Lee Employee on Oct 21, 2019

Hi everyone,

 

Recently, there was a comment on one of my other blogs about how to create a template or modify PI Vision in such a way that every time a user creates a new display it is created with a default background color and with a watermark image.

 

Today, I will present a way today to do both of them. Take note that these customizations might not carry over on version upgrades.

 

Watermark

First, to add a watermark to your display, search for the file

 

C:\Program Files\PIPC\PIVision\Views\Home\_DisplayArea.cshtml

 

in your PI Vision installation directory. Open it up and add the following markup code

 

<style type="text/css" scoped>
#watermark{
color:blue;
font-size:120px;
transform:rotate(300deg);
-webkit-transform:rotate(300deg);
position:absolute;
z-index:0;
min-height:0%;
min-width:0%;
}
div{
z-index:0;
}
</style>
<p id="watermark">Eugene Confidential</p>

 

underneath this line

<div class="c-drop-container" id="zoom-here" style="transform: matrix(1, 0, 0, 1, 0, 0); transform-origin: 0px 0px;">

 

This will produce the following watermark on the display.

 

 

Background Color

And now, to change the default display background color, search for the file

 

C:\Program Files\PIPC\PIVision\Content\css\theme.base-colors.css

 

Search for ".t-display-container" and edit the CSS background-color to that which you want. For example,

 

 

.t-display-container {
background-color: #7624b5; }

 

The resulting default display will become

 

 

Conclusion

You can see that with a bit of HTML and CSS modification, you can customize your PI Vision installation to perform the way you want. Many other customizations are possible. Please feel free to post in the comments below on how you would like to customize your default display and the PI Developers community can chip in with ideas on how to implement them.

 

I hope you learnt something useful!

Outcomes