542 lines
14 KiB
JavaScript
542 lines
14 KiB
JavaScript
//>>built
|
|
define("dojox/gauges/GlossyCircularGaugeBase", ["dojo/_base/declare","dojo/_base/lang","dojo/_base/connect","dojox/gfx","./AnalogGauge","./AnalogCircleIndicator","./TextIndicator","./GlossyCircularGaugeNeedle"],
|
|
function(declare, lang, connect, gfx, AnalogGauge, AnalogCircleIndicator, TextIndicator, GlossyCircularGaugeNeedle) {
|
|
/*=====
|
|
AnalogGauge = dojox.gauges.AnalogGauge;
|
|
=====*/
|
|
return declare("dojox.gauges.GlossyCircularGaugeBase", [AnalogGauge], {
|
|
// summary:
|
|
// The base class for GlossyCircularGauge and GlossySemiCircularGauge.
|
|
|
|
|
|
//_defaultIndicator : _Indicator
|
|
// the type of default indicator to create
|
|
_defaultIndicator: AnalogCircleIndicator,
|
|
|
|
// _needle: dojox.gauges.GlossyCircularGaugeNeedle
|
|
// the needle of this circular gauge
|
|
_needle: null,
|
|
|
|
// _textIndicator: dojox.gauges.TextIndicator
|
|
// the text displaying the gauge's value
|
|
_textIndicator: null,
|
|
|
|
_textIndicatorAdded: false,
|
|
|
|
// _range: Object
|
|
// the range of this gauge
|
|
_range: null,
|
|
|
|
// value: Number
|
|
// The value of the gauge.
|
|
value: 0,
|
|
|
|
// color: String
|
|
// The main color of the gauge.
|
|
color: 'black',
|
|
|
|
// needleColor: Color
|
|
// The main color of the needle.
|
|
needleColor: '#c4c4c4',
|
|
|
|
// textIndicatorFont: String
|
|
// The font of the text indicator
|
|
textIndicatorFont: "normal normal normal 20pt serif",
|
|
|
|
// textIndicatorVisible: Boolean
|
|
// Indicates if the text indicator is visible
|
|
textIndicatorVisible: true,
|
|
|
|
// textIndicatorColor: Color
|
|
// The color of the text indicator
|
|
textIndicatorColor: '#c4c4c4',
|
|
|
|
// _majorTicksOffset: Number
|
|
// Distance, at design, from gauge's center to major ticks
|
|
_majorTicksOffset: 130,
|
|
|
|
// majorTicksInterval: Number
|
|
// Interval between major ticks
|
|
majorTicksInterval: 10,
|
|
|
|
// _majorTicksLength: Number
|
|
// Major tick size, at design
|
|
_majorTicksLength: 5,
|
|
|
|
// majorTicksColor: Color
|
|
// Color of major tick marks
|
|
majorTicksColor: '#c4c4c4',
|
|
|
|
// majorTicksLabelPlacement: String
|
|
// Placement of major tick labels
|
|
majorTicksLabelPlacement: 'inside',
|
|
|
|
// _minorTicksOffset: Number
|
|
// Distance, at design, from gauge's center to minor ticks
|
|
_minorTicksOffset: 130,
|
|
|
|
// minorTicksInterval: Number
|
|
// Interval between minor ticks
|
|
minorTicksInterval: 5,
|
|
|
|
// _minorTicksLength: Number
|
|
// Minor tick size, at design
|
|
_minorTicksLength: 3,
|
|
|
|
// minorTicksColor: Color
|
|
// Color of minor tick marks
|
|
minorTicksColor: '#c4c4c4',
|
|
|
|
// noChange: Boolean
|
|
// Indicates if the gauge reacts to touch events
|
|
noChange: false,
|
|
|
|
// title: String
|
|
// The title displayed in the needle's tooltip
|
|
title: "",
|
|
|
|
// font: Object
|
|
// The font of the gauge
|
|
font: "normal normal normal 10pt serif",
|
|
|
|
// scalePrecision: Number
|
|
// The precision for the formatting of numbers in the scale (default is 0)
|
|
scalePrecision: 0,
|
|
|
|
// textIndicatorPrecision: Number
|
|
// The precision for the formatting of numbers in the text indicator (default is 0)
|
|
textIndicatorPrecision: 0,
|
|
|
|
_font: null,
|
|
|
|
|
|
constructor: function(){
|
|
this.startAngle = -135;
|
|
this.endAngle = 135;
|
|
this.min = 0;
|
|
this.max = 100;
|
|
},
|
|
|
|
startup: function(){
|
|
// summary:
|
|
// Overrides AnalogGauge.startup
|
|
this.inherited(arguments);
|
|
|
|
//just in case someone calls the startup twice.
|
|
|
|
if (this._needle) return;
|
|
|
|
var scale = Math.min((this.width / this._designWidth), (this.height / this._designHeight));
|
|
this.cx = scale * this._designCx + (this.width - scale * this._designWidth) / 2;
|
|
this.cy = scale * this._designCy + (this.height - scale * this._designHeight) / 2;
|
|
|
|
this._range = {
|
|
low: this.min ? this.min : 0,
|
|
high: this.max ? this.max : 100,
|
|
color: [255, 255, 255, 0]
|
|
};
|
|
this.addRange(this._range);
|
|
|
|
this._majorTicksOffset = this._minorTicksOffset = scale * this._majorTicksOffset;
|
|
this._majorTicksLength = scale * this._majorTicksLength;
|
|
this._minorTicksLength = scale * this._minorTicksLength;
|
|
|
|
// creates and add the major ticks
|
|
this.setMajorTicks({
|
|
fixedPrecision: true,
|
|
precision: this.scalePrecision,
|
|
font: this._font,
|
|
offset: this._majorTicksOffset,
|
|
interval: this.majorTicksInterval,
|
|
length: this._majorTicksLength,
|
|
color: this.majorTicksColor,
|
|
labelPlacement: this.majorTicksLabelPlacement
|
|
});
|
|
|
|
// creates and add the minor ticks
|
|
this.setMinorTicks({
|
|
offset: this._minorTicksOffset,
|
|
interval: this.minorTicksInterval,
|
|
length: this._minorTicksLength,
|
|
color: this.minorTicksColor
|
|
});
|
|
|
|
// creates and adds the needle
|
|
this._needle = new GlossyCircularGaugeNeedle({
|
|
hideValue: true,
|
|
title: this.title,
|
|
noChange: this.noChange,
|
|
color: this.needleColor,
|
|
value: this.value
|
|
});
|
|
this.addIndicator(this._needle);
|
|
|
|
// creates and add the text indicator
|
|
this._textIndicator = new TextIndicator({
|
|
x: scale * this._designTextIndicatorX + (this.width - scale * this._designWidth) / 2,
|
|
y: scale * this._designTextIndicatorY + (this.height - scale * this._designHeight) / 2,
|
|
fixedPrecision: true,
|
|
precision: this.textIndicatorPrecision,
|
|
color: this.textIndicatorColor,
|
|
value: this.value ? this.value : this.min,
|
|
align: "middle",
|
|
font: this._textIndicatorFont
|
|
});
|
|
|
|
if (this.textIndicatorVisible){
|
|
this.addIndicator(this._textIndicator);
|
|
this._textIndicatorAdded = true;
|
|
}
|
|
|
|
// connect needle and text
|
|
connect.connect(this._needle, "valueChanged", lang.hitch(this, function(){
|
|
this.value = this._needle.value;
|
|
this._textIndicator.update(this._needle.value);
|
|
this.onValueChanged();
|
|
}));
|
|
|
|
},
|
|
|
|
|
|
onValueChanged: function(){
|
|
// summary:
|
|
// Invoked when the value of the gauge has changed.
|
|
|
|
},
|
|
|
|
//*******************************************************************************************
|
|
//* Property getters and setters
|
|
//*******************************************************************************************
|
|
|
|
_setColorAttr: function(color){
|
|
// summary:
|
|
// Sets the main color of the gauge
|
|
// color: String
|
|
// The color
|
|
this.color = color ? color : 'black';
|
|
if (this._gaugeBackground && this._gaugeBackground.parent)
|
|
this._gaugeBackground.parent.remove(this._gaugeBackground);
|
|
if (this._foreground && this._foreground.parent)
|
|
this._foreground.parent.remove(this._foreground);
|
|
this._gaugeBackground = null;
|
|
this._foreground = null;
|
|
this.draw();
|
|
},
|
|
|
|
_setNeedleColorAttr: function(color){
|
|
// summary:
|
|
// Sets the main color of the needle
|
|
// color: String
|
|
// The color
|
|
this.needleColor = color;
|
|
if (this._needle){
|
|
this.removeIndicator(this._needle);
|
|
this._needle.color = this.needleColor;
|
|
this._needle.shape = null;
|
|
this.addIndicator(this._needle);
|
|
}
|
|
},
|
|
|
|
_setTextIndicatorColorAttr: function(color){
|
|
// summary:
|
|
// Sets the color of text indicator display the gauge's value
|
|
// color: String
|
|
// The color
|
|
this.textIndicatorColor = color;
|
|
if (this._textIndicator){
|
|
this._textIndicator.color = this.textIndicatorColor;
|
|
this.draw();
|
|
}
|
|
},
|
|
|
|
_setTextIndicatorFontAttr: function(font){
|
|
// summary:
|
|
// Sets the font of the text indicator
|
|
// font: String
|
|
// An string representing the font such as 'normal normal normal 10pt Helvetica,Arial,sans-serif'
|
|
//
|
|
|
|
this.textIndicatorFont = font;
|
|
this._textIndicatorFont = gfx.splitFontString(font);
|
|
if (this._textIndicator){
|
|
this._textIndicator.font = this._textIndicatorFont;
|
|
this.draw();
|
|
}
|
|
},
|
|
|
|
setMajorTicksOffset: function(offset){
|
|
// summary:
|
|
// Sets the distance from gauge's center to major ticks
|
|
this._majorTicksOffset = offset;
|
|
this._setMajorTicksProperty({
|
|
'offset': this._majorTicksOffset
|
|
});
|
|
return this;
|
|
},
|
|
|
|
getMajorTicksOffset: function(){
|
|
// summary:
|
|
// Return the distance from gauge's center to major ticks
|
|
return this._majorTicksOffset;
|
|
},
|
|
|
|
_setMajorTicksIntervalAttr: function(interval){
|
|
// summary:
|
|
// Sets the interval between major ticks
|
|
this.majorTicksInterval = interval;
|
|
this._setMajorTicksProperty({
|
|
'interval': this.majorTicksInterval
|
|
});
|
|
},
|
|
|
|
setMajorTicksLength: function(length){
|
|
// summary:
|
|
// Sets the size of the major ticks.
|
|
this._majorTicksLength = length;
|
|
this._setMajorTicksProperty({
|
|
'length': this._majorTicksLength
|
|
});
|
|
return this;
|
|
},
|
|
|
|
getMajorTicksLength: function(){
|
|
// summary:
|
|
// Returns the size of the major ticks.
|
|
return this._majorTicksLength;
|
|
},
|
|
|
|
_setMajorTicksColorAttr: function(color){
|
|
// summary:
|
|
// Sets the color of the major ticks.
|
|
this.majorTicksColor = color;
|
|
this._setMajorTicksProperty({
|
|
'color': this.majorTicksColor
|
|
});
|
|
},
|
|
|
|
_setMajorTicksLabelPlacementAttr: function(placement){
|
|
// summary:
|
|
// Sets the placement of labels relatively to major ticks.
|
|
// placement: String
|
|
// 'inside' or 'outside'
|
|
this.majorTicksLabelPlacement = placement;
|
|
this._setMajorTicksProperty({
|
|
'labelPlacement': this.majorTicksLabelPlacement
|
|
});
|
|
},
|
|
|
|
_setMajorTicksProperty: function(prop){
|
|
if (this.majorTicks){
|
|
lang.mixin(this.majorTicks, prop);
|
|
this.setMajorTicks(this.majorTicks);
|
|
}
|
|
},
|
|
|
|
setMinorTicksOffset: function(offset){
|
|
// summary:
|
|
// Sets the distance from gauge's center to minor ticks
|
|
this._minorTicksOffset = offset;
|
|
this._setMinorTicksProperty({
|
|
'offset': this._minorTicksOffset
|
|
});
|
|
return this;
|
|
},
|
|
|
|
getMinorTicksOffset: function(){
|
|
// summary:
|
|
// Returns the distance from gauge's center to minor ticks
|
|
return this._minorTicksOffset;
|
|
},
|
|
|
|
_setMinorTicksIntervalAttr: function(interval){
|
|
// summary:
|
|
// Sets the interval between minor ticks
|
|
this.minorTicksInterval = interval;
|
|
this._setMinorTicksProperty({
|
|
'interval': this.minorTicksInterval
|
|
});
|
|
},
|
|
|
|
setMinorTicksLength: function(length){
|
|
// summary:
|
|
// Sets the size of the minor ticks.
|
|
this._minorTicksLength = length;
|
|
this._setMinorTicksProperty({
|
|
'length': this._minorTicksLength
|
|
});
|
|
return this;
|
|
},
|
|
|
|
getMinorTicksLength: function(){
|
|
// summary:
|
|
// Return the size of the minor ticks.
|
|
return this._minorTicksLength;
|
|
},
|
|
|
|
_setMinorTicksColorAttr: function(color){
|
|
// summary:
|
|
// Sets the color of the minor ticks.
|
|
this.minorTicksColor = color;
|
|
this._setMinorTicksProperty({
|
|
'color': this.minorTicksColor
|
|
});
|
|
},
|
|
|
|
_setMinorTicksProperty: function(prop){
|
|
if (this.minorTicks){
|
|
lang.mixin(this.minorTicks, prop);
|
|
this.setMinorTicks(this.minorTicks);
|
|
}
|
|
},
|
|
|
|
_setMinAttr: function(min){
|
|
this.min = min;
|
|
|
|
if (this.majorTicks != null)
|
|
this.setMajorTicks(this.majorTicks);
|
|
if (this.minorTicks != null)
|
|
this.setMinorTicks(this.minorTicks);
|
|
this.draw();
|
|
this._updateNeedle();
|
|
},
|
|
|
|
_setMaxAttr: function(max){
|
|
this.max = max;
|
|
|
|
if (this.majorTicks != null)
|
|
this.setMajorTicks(this.majorTicks);
|
|
if (this.minorTicks != null)
|
|
this.setMinorTicks(this.minorTicks);
|
|
this.draw();
|
|
this._updateNeedle();
|
|
},
|
|
|
|
_setScalePrecisionAttr: function(value){
|
|
// summary:
|
|
// Changes precision of the numbers in the scale of the gauge
|
|
// value: Number
|
|
// The new value
|
|
this.scalePrecision = value;
|
|
this._setMajorTicksProperty({
|
|
'precision': value
|
|
});
|
|
},
|
|
|
|
_setTextIndicatorPrecisionAttr: function(value){
|
|
// summary:
|
|
// Changes precision of the numbers in the text indicator
|
|
// value: Number
|
|
// The new value
|
|
this.textIndicatorPrecision = value;
|
|
this._setMajorTicksProperty({
|
|
'precision': value
|
|
});
|
|
},
|
|
|
|
_setValueAttr: function(value){
|
|
// summary:
|
|
// Changes the value of the gauge
|
|
// value: Number
|
|
// The new value for the gauge.
|
|
|
|
value = Math.min(this.max, value);
|
|
value = Math.max(this.min, value);
|
|
this.value = value;
|
|
if (this._needle){
|
|
// update will not work if noChange is true.
|
|
var noChange = this._needle.noChange;
|
|
this._needle.noChange = false;
|
|
this._needle.update(value);
|
|
this._needle.noChange = noChange;
|
|
}
|
|
},
|
|
|
|
_setNoChangeAttr: function(value){
|
|
// summary:
|
|
// Indicates if the value of the gauge can be changed or not
|
|
// value: boolean
|
|
// true indicates that the gauge's value cannot be changed
|
|
this.noChange = value;
|
|
if (this._needle)
|
|
this._needle.noChange = this.noChange;
|
|
},
|
|
|
|
_setTextIndicatorVisibleAttr: function(value){
|
|
// summary:
|
|
// Changes the visibility of the text indicator displaying the gauge's value.
|
|
// value: boolean
|
|
// true to show the indicator, false to hide.
|
|
|
|
this.textIndicatorVisible = value;
|
|
if (this._textIndicator && this._needle){
|
|
if (this.textIndicatorVisible && !this._textIndicatorAdded){
|
|
this.addIndicator(this._textIndicator);
|
|
this._textIndicatorAdded = true;
|
|
this.moveIndicatorToFront(this._needle);
|
|
|
|
}
|
|
else
|
|
if (!this.textIndicatorVisible && this._textIndicatorAdded){
|
|
this.removeIndicator(this._textIndicator);
|
|
this._textIndicatorAdded = false;
|
|
}
|
|
}
|
|
},
|
|
|
|
_setTitleAttr: function(value){
|
|
// summary:
|
|
// Sets the title displayed by the needle's tooltip .
|
|
// value: String
|
|
// the title
|
|
|
|
this.title = value;
|
|
if (this._needle){
|
|
this._needle.title = this.title;
|
|
}
|
|
},
|
|
|
|
_setOrientationAttr: function(orientation){
|
|
// summary:
|
|
// Sets the orientation of the gauge
|
|
// orientation: String
|
|
// Either "clockwise" or "cclockwise"
|
|
|
|
this.orientation = orientation;
|
|
if (this.majorTicks != null)
|
|
this.setMajorTicks(this.majorTicks);
|
|
if (this.minorTicks != null)
|
|
this.setMinorTicks(this.minorTicks);
|
|
this.draw();
|
|
this._updateNeedle();
|
|
|
|
},
|
|
|
|
_updateNeedle: function(){
|
|
// updates the needle with no animation
|
|
this.value = Math.max(this.min, this.value);
|
|
this.value = Math.min(this.max, this.value);
|
|
|
|
if (this._needle){
|
|
// update will not work if noChange is true.
|
|
var noChange = this._needle.noChange;
|
|
this._needle.noChange = false;
|
|
this._needle.update(this.value, false);
|
|
this._needle.noChange = noChange;
|
|
} // to redraw the needle
|
|
},
|
|
|
|
_setFontAttr: function(font){
|
|
// summary:
|
|
// Sets the font of the gauge
|
|
// font: String
|
|
// An string representing the font such as 'normal normal normal 10pt Helvetica,Arial,sans-serif'
|
|
//
|
|
|
|
this.font = font;
|
|
this._font = gfx.splitFontString(font);
|
|
this._setMajorTicksProperty({
|
|
'font': this._font
|
|
});
|
|
}});
|
|
});
|