Question
Customizing Progress Gauge
I am using the progress gauge extension on Thingworx and right now it can only take in one value. I have studied the javascript code of the progress gauge and I have roughly understood it. However, I am still unsure on how to start in terms of writing code in progressgauge.ide.js and progressgauge.runtime.js so that the gauge can take in multiple values and show multiple colors based on those values. I have attached the javascript codes for reference as well. Any help will be greatly appreciated! An example of what I want at the end is shown below.
TW.IDE.Widgets.progressgauge = function () {
this.widgetIconUrl = function() {
return "../Common/extensions/ProgressGauge_ExtensionPackage/ui/progressgauge/progressgauge.ide.png";
};
this.widgetProperties = function () {
return {
'name': 'Progress Gauge',
'description': 'A rotary progress gauge',
'category': ['Data', 'Charts'],
'iconImage': 'progressgauge.ide.png',
'defaultBindingTargetProperty': 'Data',
'properties': {
'Data': {
'description': 'Data source',
'isBindingTarget': true,
'baseType': 'NUMBER',
'warnIfNotBoundAsTarget': true
},
'MinValue': {
'description': 'Minimum value for the gauge',
'isBindingTarget': true,
'baseType': 'NUMBER',
'defaultValue': 0
},
'MaxValue': {
'description': 'Maximum value for the gauge',
'isBindingTarget': true,
'baseType': 'NUMBER',
'defaultValue': 100
},
'ProgressFormatter': {
'description': 'Styling rules for the progress display',
'baseType': 'STATEFORMATTING',
'baseTypeInfotableProperty': 'Data'
},
'ValueFormatter': {
'description': 'Styling rules for the value display',
'baseType': 'STATEFORMATTING',
'baseTypeInfotableProperty': 'Data'
},
'GaugeStyle': {
'description': 'Style for gauge background',
'baseType': 'STYLEDEFINITION',
'defaultValue': 'DefaultProgressGaugeStyle'
},
'GaugeFaceStyle': {
'description': 'Style for gauge face',
'baseType': 'STYLEDEFINITION',
'defaultValue': 'DefaultProgressGaugeFaceStyle'
},
'ProgressStyle': {
'description': 'Style for progress bar',
'baseType': 'STYLEDEFINITION',
'defaultValue': 'DefaultProgressGaugeIndicatorStyle'
},
'ValueStyle': {
'description': 'Style for value display',
'baseType': 'STYLEDEFINITION',
'defaultValue': 'DefaultProgressGaugeIndicatorStyle'
},
'ValueDigits': {
'description': 'Number of digits for value display',
'baseType': 'NUMBER',
'defaultValue': 3
},
'ValueDecimals': {
'description': 'Number of decimals for value display',
'baseType': 'NUMBER',
'defaultValue': 0
},
'ReferenceAngle': {
'description': 'Angle that controls the gauge orientation (degrees)',
'baseType': 'NUMBER',
'defaultValue': 0
},
'Aperture': {
'description': 'Angle that controls the gauge size (degrees)',
'baseType': 'NUMBER',
'defaultValue': 360
},
'GaugeBorder': {
'description': 'Width of the outside gauge border (pixels)',
'baseType': 'NUMBER',
'defaultValue': 20
},
'RingWidth': {
'description': 'Width/thickness of the progress indicator ring (pixels)',
'baseType': 'NUMBER',
'defaultValue': 10
},
'Width': {
'description': 'Widget width',
'defaultValue': 200
},
'Height': {
'description': 'Widget height',
'defaultValue': 200
}
}
};
};
this.renderHtml = function () {
var html = '';
html += '<div class="widget-content widget-progressgauge"><table height="100%" width="100%"><tr><td valign="middle" align="center"><span>Progress Gauge</span></td></tr></table></div>';
return html;
};
this.afterRender = function() {
var domElementId = this.jqElementId;
var widgetElement = this.jqElement;
var formatResult = TW.getStyleFromStyleDefinition(this.getProperty('GaugeStyle'));
var cssGaugeBorder = TW.getStyleCssBorderFromStyle(formatResult);
var resource = TW.IDE.getMashupResource();
var widgetStyles = '#' + domElementId + ' table {'+ cssGaugeBorder +'}';
resource.styles.append(widgetStyles);
}
this.afterAddBindingSource = function (bindingInfo) {
if (bindingInfo['targetProperty'] === 'Data') {
this.resetPropertyToDefaultValue('ValueFormatter');
}
};
this.beforeSetProperty = function (name, value) {
if (name === 'MinValue') {
if (value >= this.getProperty('MaxValue')) {
return 'MinValue must be less than MaxValue';
}
}
if (name === 'Aperture') {
if (value < 45 || value > 360) {
return 'Aperture must be between 45 and 360';
}
}
if (name === 'ReferenceAngle') {
if (value < 0 || value > 360) {
return 'Reference Angle must be between 0 and 360';
}
}
if (name === 'MaxValue') {
if (value <= this.getProperty('MinValue')) {
return 'MinValue must be less than MaxValue';
}
}
};
};
PS: I will post the runtime code once someone replies as this message is too long.