You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
537 lines
14 KiB
537 lines
14 KiB
define(["dojo/_base/declare","dojo/_base/lang","dojo/_base/connect","dojox/gfx","./AnalogGauge","./AnalogCircleIndicator","./TextIndicator","./GlossyCircularGaugeNeedle"], |
|
function(declare, lang, connect, gfx, AnalogGauge, AnalogCircleIndicator, TextIndicator, GlossyCircularGaugeNeedle) { |
|
|
|
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 |
|
}); |
|
}}); |
|
});
|
|
|