AnsweredAssumed Answered

PI World Lab 2020 - Rotating Arrow

Question asked by joao.lages on Apr 17, 2020
Latest reply on Apr 20, 2020 by joao.lages

Hello,

 

I'm following the PI Vision Custom Symbol lab from PI World 2020 Lab.
On exercise 2, we are asked to rotate the symbol based on the data received. However, I'm not able to rotate the symbol even though I can access the value on the dataUpdate method.

I checked it via debugger and I was able to see the data coming through, elem.find(".svg-arrow") returns undefined everytime. I even tried with the solution code and nothing!

 

Would someone be able to help me understand what's going wrong?

sym-arrow.js:

 

(function (PV) {
'use strict';

function symbolVis() { }
PV.deriveVisualizationFromBase(symbolVis);

var definition = {
typeName: 'Arrow',
datasourceBehavior: PV.Extensibility.Enums.DatasourceBehaviors.Single,
iconUrl: 'scripts/app/editor/symbols/ext/icons/sym-arrow.png',
getDefaultConfig: function () {
return {
Height: 80,
Width: 80,
DataShape: 'Gauge',
ValueScale: false,
ValueScaleSettings: {
MinType: 2,
MinValue: 0,
MaxType: 2,
MaxValue: 360
},
}
},
visObjectType: symbolVis
}

symbolVis.prototype.init = function (scope, elem) {

this.onDataUpdate = onDataUpdate;
scope.Value = '';
scope.Timestamp = '';
scope.Label = '';
scope.Units = '';
function onDataUpdate(newData) {
if (!newData) {
return;
}

var degrees = 360 * newData.Indicator / 100;

var svgArrow = elem.find('.svg-arrow')[0];
svgArrow.setAttribute('transform', 'rotate(' + degrees + ' 35 35)');

scope.Value = newData.Value;
scope.Timestamp = newData.Time;
}
}

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

sym-arrow-template.html:

<svg width="95%" height="95%" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">
<path style="fill:green;" d="m27.5,
34.94239l7.5,
-23.9424l7.5,
23.9424l-3.75,
0l0,
24.05761l-7.5,
0l0,
-24.05761l-3.75,
0z" class="svg-arrow" />
</svg>

Thanks in advance!

Outcomes