How do I create custom symbols in PI Vision?

PI Vision extensibility allows you to build custom visualization components using HTML, CSS, and JavaScript.

Symbol Structure

A PI Vision custom symbol consists of:

• sym-<name>.js — symbol definition and logic
• sym-<name>-template.html — HTML template
• sym-<name>-config.html — configuration panel (optional)

Basic Symbol Example

// sym-simplegauge.js
(function (PV) {
    function symbolVis() { }
    PV.deriveVisualizationFromBase(symbolVis);

    symbolVis.prototype.init = function (scope, elem) {
        this.onDataUpdate = function (data) {
            if (data && data.Value) {
                scope.value = data.Value;
                scope.timestamp = data.Time;
            }
        };
    };

    var definition = {
        typeName: 'simplegauge',
        displayName: 'Simple Gauge',
        datasourceBehavior: PV.Extensibility.Enums.DatasourceBehaviors.Single,
        getDefaultConfig: function () {
            return {
                Height: 200,
                Width: 200,
                MinValue: 0,
                MaxValue: 100
            };
        },
        visObjectType: symbolVis
    };

    PV.symbolCatalog.register(definition);
})(window.PIVisualization);

<!-- sym-simplegauge-template.html -->
<div class="simple-gauge">
    <div class="value">{{value | number:2}}</div>
    <div class="timestamp">{{timestamp}}</div>
</div>

Deployment

1. Place symbol files in %PIHOME64%\PIVision\Scripts\app\editor\symbols\ext\.
2. Restart the PI Vision web application pool in IIS.
3. The symbol appears in PI Vision's symbol palette.

Tips

• Use the PI Vision extensibility guide from AVEVA documentation.
• Test in a development PI Vision instance first.
• Custom symbols survive PI Vision upgrades (they're in the ext folder).
• For complex visualizations, consider using D3.js or Chart.js inside your symbol.