diff options
Diffstat (limited to 'js/dojo/dojox/gauges')
22 files changed, 4378 insertions, 0 deletions
diff --git a/js/dojo/dojox/gauges/AnalogArcIndicator.js b/js/dojo/dojox/gauges/AnalogArcIndicator.js new file mode 100644 index 0000000..74745a1 --- /dev/null +++ b/js/dojo/dojox/gauges/AnalogArcIndicator.js @@ -0,0 +1,93 @@ +//>>built +define("dojox/gauges/AnalogArcIndicator", ["dojo/_base/declare","dojo/_base/lang","dojo/_base/connect","dojo/_base/fx","./AnalogIndicatorBase"], +function(declare, lang, connect, fx, AnalogIndicatorBase) { + +/*===== + AnalogIndicatorBase = dojox.gauges.AnalogIndicatorBase; +=====*/ + +return declare("dojox.gauges.AnalogArcIndicator",[AnalogIndicatorBase],{ + + // summary: + // An indicator for the AnalogGauge that draws a segment of arc. + // The segment of arc starts at the start angle of the gauge and ends at the + // angle that corresponds to the value of the indicator. + + _createArc: function(val){ + + // Creating the Arc Path string manually. This is instead of creating new dojox.gfx.Path object + // each time since we really just need the Path string (to use with setShape) and we don't want to + // have to redo the connects, etc. + if(this.shape){ + var startAngle = this._gauge._mod360(this._gauge.startAngle); + var a = this._gauge._getRadians(this._gauge._getAngle(val)); + var sa = this._gauge._getRadians(startAngle); + + if (this._gauge.orientation == 'cclockwise'){ + var tmp = a; + a = sa; + sa = tmp; + } + + var arange; + var big = 0; + if (sa<=a) + arange = a-sa; + else + arange = 2*Math.PI+a-sa; + if(arange>Math.PI){big=1;} + + var cosa = Math.cos(a); + var sina = Math.sin(a); + var cossa = Math.cos(sa); + var sinsa = Math.sin(sa); + var off = this.offset + this.width; + var p = ['M']; + p.push(this._gauge.cx+this.offset*sinsa); + p.push(this._gauge.cy-this.offset*cossa); + p.push('A', this.offset, this.offset, 0, big, 1); + p.push(this._gauge.cx+this.offset*sina); + p.push(this._gauge.cy-this.offset*cosa); + p.push('L'); + p.push(this._gauge.cx+off*sina); + p.push(this._gauge.cy-off*cosa); + p.push('A', off, off, 0, big, 0); + p.push(this._gauge.cx+off*sinsa); + p.push(this._gauge.cy-off*cossa); + p.push('z'); + this.shape.setShape(p.join(' ')); + this.currentValue = val; + } + }, + draw: function(group, /*Boolean?*/ dontAnimate){ + // summary: + // Override of dojox.gauges._Indicator.draw + var v = this.value; + if(v < this._gauge.min){v = this._gauge.min;} + if(v > this._gauge.max){v = this._gauge.max;} + if(this.shape){ + if(dontAnimate){ + this._createArc(v); + }else{ + var anim = new fx.Animation({curve: [this.currentValue, v], duration: this.duration, easing: this.easing}); + connect.connect(anim, "onAnimate", lang.hitch(this, this._createArc)); + anim.play(); + } + }else{ + var color = this.color ? this.color : 'black'; + var strokeColor = this.strokeColor ? this.strokeColor : color; + var stroke = {color: strokeColor, width: 1}; + if(this.color.type && !this.strokeColor){ + stroke.color = this.color.colors[0].color; + } + this.shape = group.createPath().setStroke(stroke).setFill(color); + this._createArc(v); + this.shape.connect("onmouseover", this, this.handleMouseOver); + this.shape.connect("onmouseout", this, this.handleMouseOut); + this.shape.connect("onmousedown", this, this.handleMouseDown); + this.shape.connect("touchstart", this, this.handleTouchStart); + } + } +}); + +}); diff --git a/js/dojo/dojox/gauges/AnalogArrowIndicator.js b/js/dojo/dojox/gauges/AnalogArrowIndicator.js new file mode 100644 index 0000000..6999a4a --- /dev/null +++ b/js/dojo/dojox/gauges/AnalogArrowIndicator.js @@ -0,0 +1,53 @@ +//>>built +define("dojox/gauges/AnalogArrowIndicator", ["dojo/_base/declare","./AnalogIndicatorBase"], +function(declare, AnalogIndicatorBase) { + +/*===== + AnalogIndicatorBase = dojox.gauges.AnalogIndicatorBase; +=====*/ + +return declare("dojox.gauges.AnalogArrowIndicator", [AnalogIndicatorBase],{ + + // summary: + // An indicator for the AnalogGauge that draws an arrow. The arrow is drawn on the angle that corresponds + // to the value of the indicator. + + _getShapes: function(group){ + // summary: + // Override of dojox.gauges.AnalogLineIndicator._getShapes + if(!this._gauge){ + return null; + } + var color = this.color ? this.color : 'black'; + var strokeColor = this.strokeColor ? this.strokeColor : color; + var stroke = { color: strokeColor, width: 1}; + if (this.color.type && !this.strokeColor){ + stroke.color = this.color.colors[0].color; + } + + var x = Math.floor(this.width/2); + var head = this.width * 5; + var odd = (this.width & 1); + var shapes = []; + var points = [{x:-x, y:0}, + {x:-x, y:-this.length+head}, + {x:-2*x, y:-this.length+head}, + {x:0, y:-this.length}, + {x:2*x+odd,y:-this.length+head}, + {x:x+odd, y:-this.length+head}, + {x:x+odd, y:0}, + {x:-x, y:0}]; + shapes[0] = group.createPolyline(points) + .setStroke(stroke) + .setFill(color); + shapes[1] = group.createLine({ x1:-x, y1: 0, x2: -x, y2:-this.length+head }) + .setStroke({color: this.highlight}); + shapes[2] = group.createLine({ x1:-x-3, y1: -this.length+head, x2: 0, y2:-this.length }) + .setStroke({color: this.highlight}); + shapes[3] = group.createCircle({cx: 0, cy: 0, r: this.width}) + .setStroke(stroke) + .setFill(color); + return shapes; + } +}); +});
\ No newline at end of file diff --git a/js/dojo/dojox/gauges/AnalogCircleIndicator.js b/js/dojo/dojox/gauges/AnalogCircleIndicator.js new file mode 100644 index 0000000..12a9da3 --- /dev/null +++ b/js/dojo/dojox/gauges/AnalogCircleIndicator.js @@ -0,0 +1,36 @@ +//>>built +define("dojox/gauges/AnalogCircleIndicator", ["dojo/_base/declare","./AnalogIndicatorBase"], + function(declare, AnalogIndicatorBase) { + +/*===== + AnalogIndicatorBase = dojox.gauges.AnalogIndicatorBase; +=====*/ + +return declare("dojox.gauges.AnalogCircleIndicator", [AnalogIndicatorBase], { + // summary: + // An indicator for the AnalogGauge that draws a circle. The center of the circle is positioned + // on the circular gauge according to the value of the indicator. The circle has for radius the + // length of the indicator. This indicator is mainly used to draw round ticks for the scale. + + + _getShapes: function(group){ + // summary: + // Override of dojox.gauges.AnalogLineIndicator._getShapes + var color = this.color ? this.color : 'black'; + var strokeColor = this.strokeColor ? this.strokeColor : color; + var stroke = { + color: strokeColor, + width: 1 + }; + if (this.color.type && !this.strokeColor){ + stroke.color = this.color.colors[0].color; + } + + return [group.createCircle({ + cx: 0, + cy: -this.offset, + r: this.length + }).setFill(color).setStroke(stroke)]; + } +}); +}); diff --git a/js/dojo/dojox/gauges/AnalogGauge.js b/js/dojo/dojox/gauges/AnalogGauge.js new file mode 100644 index 0000000..2024615 --- /dev/null +++ b/js/dojo/dojox/gauges/AnalogGauge.js @@ -0,0 +1,369 @@ +//>>built +define("dojox/gauges/AnalogGauge", ["dojo/_base/kernel","dojo/_base/declare","dojo/_base/array","dojo/_base/lang","dojo/_base/html","dojo/_base/event", + "dojox/gfx", "./_Gauge","./AnalogLineIndicator", "dojo/dom-geometry"], + function(dojo, declare, arr, lang, html, event, + gfx, Gauge, AnalogLineIndicator, domGeometry) { + +/*===== + Gauge = dojox.gauges._Gauge; +=====*/ + +return declare("dojox.gauges.AnalogGauge",Gauge,{ + // summary: + // a gauge built using the dojox.gfx package. + // + // description: + // using dojo.gfx (and thus either SVG or VML based on what is supported), this widget + // builds a gauge component, used to display numerical data in a familiar format + // + // example: + // | <script type="text/javascript"> + // | require(["dojox/gauges/AnalogGauge"]); + // | </script> + // | + // | <div dojoType="dojox.gauges.AnalogGauge" + // | id="testGauge" + // | width="300" + // | height="200" + // | cx=150 + // | cy=175 + // | radius=125 + // | image="gaugeOverlay.png" + // | imageOverlay="false" + // | imageWidth="280" + // | imageHeight="155" + // | imageX="12" + // | imageY="38"> + // | </div> + + // startAngle: Number + // angle (in degrees) for start of gauge (default is -90) + startAngle: -90, + + // endAngle: Number + // angle (in degrees) for end of gauge (default is 90) + endAngle: 90, + + // cx: Number + // center of gauge x coordinate (default is gauge width / 2) + cx: 0, + + // cy: Number + // center of gauge x coordinate (default is gauge height / 2) + cy: 0, + + // radius: Number + // radius of gauge (default is smaller of cx-25 or cy-25) + radius: 0, + + // orientation: String + // The orientation of the gauge. The value can be 'clockwise' or 'cclockwise' (default is 'clockwise') + orientation: "clockwise", + + // _defaultIndicator: dojox.gauges._Indicator + // override of dojox.gauges._Gauge._defaultIndicator + _defaultIndicator: AnalogLineIndicator, + + startup: function(){ + // handle settings from HTML by making sure all the options are + // converted correctly to numbers and that we calculate defaults + // for cx, cy and radius + // also connects mouse handling events + + if(this.getChildren){ + arr.forEach(this.getChildren(), function(child){ child.startup(); }); + } + + this.startAngle = Number(this.startAngle); + this.endAngle = Number(this.endAngle); + + this.cx = Number(this.cx); + if(!this.cx){this.cx = this.width/2;} + this.cy = Number(this.cy); + if(!this.cy){this.cy = this.height/2;} + this.radius = Number(this.radius); + if(!this.radius){this.radius = Math.min(this.cx,this.cy) - 25;} + + + this.inherited(arguments); + }, + + _getAngle: function(/*Number*/value){ + // summary: + // This is a helper function used to determine the angle that represents + // a given value on the gauge + // value: Number + // A value to be converted to an angle for this gauge. + + var v = Number(value); + var angle; + if (value == null || isNaN(v) || v <= this.min) + angle = this._mod360(this.startAngle); + else + if (v >= this.max) + angle = this._mod360(this.endAngle); + else { + var startAngle = this._mod360(this.startAngle); + var relativeValue = (v - this.min); + if (this.orientation != 'clockwise') + relativeValue = -relativeValue; + + angle = this._mod360(startAngle + this._getAngleRange() * relativeValue / Math.abs(this.min - this.max)); + } + + return angle; + }, + + _getValueForAngle: function(/*Number*/angle){ + // summary: + // This is a helper function used to determine the value represented by a + // given angle on the gauge + // angle: Number + // A angle to be converted to a value for this gauge. + var startAngle = this._mod360(this.startAngle); + var endAngle = this._mod360(this.endAngle); + + if (!this._angleInRange(angle)){ + + var min1 = this._mod360(startAngle - angle); + var min2 = 360 - min1; + var max1 = this._mod360(endAngle - angle); + var max2 = 360 - max1; + if (Math.min(min1, min2) < Math.min(max1, max2)) + return this.min; + else + return this.max; + } + else { + var range = Math.abs(this.max - this.min); + var relativeAngle = this._mod360(this.orientation == 'clockwise' ? + (angle - startAngle): (-angle + startAngle)); + return this.min + range * relativeAngle / this._getAngleRange(); + } + }, + + _getAngleRange: function(){ + // summary: + // This is a helper function that returns the angle range + // from startAngle to endAngle according to orientation. + var range; + var startAngle = this._mod360(this.startAngle); + var endAngle = this._mod360(this.endAngle); + if (startAngle == endAngle) + return 360; + if (this.orientation == 'clockwise'){ + if (endAngle < startAngle) + range = 360 - (startAngle - endAngle); + else + range = endAngle - startAngle; + } + else { + if (endAngle < startAngle) + range = startAngle - endAngle; + else + range = 360 - (endAngle - startAngle); + } + return range; + }, + + _angleInRange: function(value){ + // summary: + // Test if the angle value is in the startAngle/endAngle range + var startAngle = this._mod360(this.startAngle); + var endAngle = this._mod360(this.endAngle); + if (startAngle == endAngle) + return true; + value = this._mod360(value); + if (this.orientation == "clockwise"){ + if (startAngle < endAngle) + return value >= startAngle && value <= endAngle; + else + return !(value > endAngle && value < startAngle); + } + else { + if (startAngle < endAngle) + return !(value > startAngle && value < endAngle); + else + return value >= endAngle && value <= startAngle; + } + }, + + _isScaleCircular: function(){ + // summary: + // internal method to check if the scale is fully circular + return (this._mod360(this.startAngle) == this._mod360(this.endAngle)); + }, + + _mod360:function(v){ + // summary: + // returns the angle between 0 and 360; + while (v>360) v = v - 360; + while (v<0) v = v + 360; + return v; + }, + + _getRadians: function(/*Number*/angle){ + // summary: + // This is a helper function than converts degrees to radians + // angle: Number + // An angle, in degrees, to be converted to radians. + return angle*Math.PI/180; + }, + + _getDegrees: function(/*Number*/radians){ + // summary: + // This is a helper function that converts radians to degrees + // radians: Number + // An angle, in radians, to be converted to degrees. + return radians*180/Math.PI; + }, + + + drawRange: function(/*dojox.gfx.Group*/ group, /*Object*/range){ + // summary: + // This function is used to draw (or redraw) a range + // description: + // Draws a range (colored area on the background of the gauge) + // based on the given arguments. + // group: + // The GFX group where the range must be drawn. + // range: + // A range is a dojox.gauges.Range or an object + // with similar parameters (low, high, hover, etc.). + var path; + if(range.shape){ + range.shape.parent.remove(range.shape); + range.shape = null; + } + var a1, a2; + if((range.low == this.min) && (range.high == this.max) && ((this._mod360(this.endAngle) == this._mod360(this.startAngle)))){ + path = group.createCircle({cx: this.cx, cy: this.cy, r: this.radius}); + }else{ + + + a1 = this._getRadians(this._getAngle(range.low)); + a2 = this._getRadians(this._getAngle(range.high)); + if (this.orientation == 'cclockwise') + { + var a = a2; + a2 = a1; + a1 = a; + } + + var x1=this.cx+this.radius*Math.sin(a1), + y1=this.cy-this.radius*Math.cos(a1), + x2=this.cx+this.radius*Math.sin(a2), + y2=this.cy-this.radius*Math.cos(a2), + big=0 + ; + + var arange; + if (a1<=a2) + arange = a2-a1; + else + arange = 2*Math.PI-a1+a2; + if(arange>Math.PI){big=1;} + + path = group.createPath(); + if(range.size){ + path.moveTo(this.cx+(this.radius-range.size)*Math.sin(a1), + this.cy-(this.radius-range.size)*Math.cos(a1)); + }else{ + path.moveTo(this.cx,this.cy); + } + path.lineTo(x1,y1); + path.arcTo(this.radius,this.radius,0,big,1,x2,y2); + if(range.size){ + path.lineTo(this.cx+(this.radius-range.size)*Math.sin(a2), + this.cy-(this.radius-range.size)*Math.cos(a2)); + path.arcTo((this.radius-range.size),(this.radius-range.size),0,big,0, + this.cx+(this.radius-range.size)*Math.sin(a1), + this.cy-(this.radius-range.size)*Math.cos(a1)); + } + path.closePath(); + } + + if(lang.isArray(range.color) || lang.isString(range.color)){ + path.setStroke({color: range.color}); + path.setFill(range.color); + }else if(range.color.type){ + // Color is a gradient + a1 = this._getRadians(this._getAngle(range.low)); + a2 = this._getRadians(this._getAngle(range.high)); + range.color.x1 = this.cx+(this.radius*Math.sin(a1))/2; + range.color.x2 = this.cx+(this.radius*Math.sin(a2))/2; + range.color.y1 = this.cy-(this.radius*Math.cos(a1))/2; + range.color.y2 = this.cy-(this.radius*Math.cos(a2))/2; + path.setFill(range.color); + path.setStroke({color: range.color.colors[0].color}); + }else if (gfx.svg){ + // We've defined a style rather than an explicit color + path.setStroke({color: "green"}); // Arbitrary color, just have to indicate + path.setFill("green"); // that we want it filled + path.getEventSource().setAttribute("class", range.color.style); + } + + path.connect("onmouseover", lang.hitch(this, this._handleMouseOverRange, range)); + path.connect("onmouseout", lang.hitch(this, this._handleMouseOutRange, range)); + + range.shape = path; + }, + + getRangeUnderMouse: function(/*Object*/e){ + // summary: + // Determines which range the mouse is currently over + // e: Object + // The event object as received by the mouse handling functions below. + var range = null, + pos = domGeometry.getContentBox(this.gaugeContent), + x = e.clientX - pos.x, + y = e.clientY - pos.y, + r = Math.sqrt((y - this.cy)*(y - this.cy) + (x - this.cx)*(x - this.cx)) + ; + if(r < this.radius){ + var angle = this._getDegrees(Math.atan2(y - this.cy, x - this.cx) + Math.PI/2), + //if(angle > this.endAngle){angle = angle - 360;} + value = this._getValueForAngle(angle) + ; + if(this._rangeData){ + for(var i=0; (i<this._rangeData.length) && !range; i++){ + if((Number(this._rangeData[i].low) <= value) && (Number(this._rangeData[i].high) >= value)){ + range = this._rangeData[i]; + } + } + } + } + return range; + }, + + _dragIndicator: function(/*Object*/ widget, /*Object*/ e){ + // summary: + // Handles the dragging of an indicator to the event position, including moving/re-drawing + // get angle for mouse position + this._dragIndicatorAt(widget, e.pageX, e.pageY); + event.stop(e); + }, + + _dragIndicatorAt: function(/*Object*/ widget, x,y){ + // summary: + // Handles the dragging of an indicator to a specific position, including moving/re-drawing + // get angle for mouse position + var pos = domGeometry.position(widget.gaugeContent, true), + xf = x - pos.x, + yf = y - pos.y, + angle = widget._getDegrees(Math.atan2(yf - widget.cy, xf - widget.cx) + Math.PI/2); + + // get value and restrict to our min/max + var value = widget._getValueForAngle(angle); + value = Math.min(Math.max(value, widget.min), widget.max); + // update the indicator + widget._drag.value = widget._drag.currentValue = value; + // callback + widget._drag.onDragMove(widget._drag); + // rotate indicator + widget._drag.draw(this._indicatorsGroup, true); + widget._drag.valueChanged(); + } + +}); +}); diff --git a/js/dojo/dojox/gauges/AnalogIndicatorBase.js b/js/dojo/dojox/gauges/AnalogIndicatorBase.js new file mode 100644 index 0000000..ec886f2 --- /dev/null +++ b/js/dojo/dojox/gauges/AnalogIndicatorBase.js @@ -0,0 +1,201 @@ +//>>built +define("dojox/gauges/AnalogIndicatorBase", ["dojo/_base/lang","dojo/_base/declare","dojo/_base/connect","dojo/_base/fx","dojox/gfx","./_Indicator"], + function(lang, declare, connect, fx, gfx, Indicator) { + +/*===== + Indicator = dojox.gauges._indicator; +=====*/ + +return declare("dojox.gauges.AnalogIndicatorBase",[Indicator],{ + // summary: + // An abstract base class for indicators that can be used in an AnalogGauge. + // + + draw: function(/*dojox.gfx.Group*/ group, /*Boolean?*/ dontAnimate){ + // summary: + // Override of dojox.gauges._Indicator.draw + // group: dojox.gfx.Group + // The GFX group when the indicator must be drawn + // dontAnimate: Boolean + // Indicates if the drawing should not be animated (vs. the default of doing an animation) + if(this.shape){ + this._move(dontAnimate); + }else{ + if(this.text){ + this.text.parent.remove(this.text); + this.text = null; + } + var a = this._gauge._getAngle(Math.min(Math.max(this.value, this._gauge.min), this._gauge.max)); + + this.color = this.color || '#000000'; + this.length = this.length || this._gauge.radius; + this.width = this.width || 1; + this.offset = this.offset || 0; + this.highlight = this.highlight || '#D0D0D0'; + + var shapes = this._getShapes(group, this._gauge, this); + + if (shapes){ + if (shapes.length > 1){ + this.shape = group.createGroup(); + for (var s = 0; s < shapes.length; s++){ + this.shape.add(shapes[s]); + } + } + else + this.shape = shapes[0]; + + this.shape.setTransform([{ + dx: this._gauge.cx, + dy: this._gauge.cy + }, gfx.matrix.rotateg(a)]); + + this.shape.connect("onmouseover", this, this.handleMouseOver); + this.shape.connect("onmouseout", this, this.handleMouseOut); + this.shape.connect("onmousedown", this, this.handleMouseDown); + this.shape.connect("touchstart", this, this.handleTouchStart); +} + if(this.label){ + var direction = this.direction; + if (!direction) direction = 'outside'; + + var len; + if (direction == 'inside') + len=-this.length+this.offset - 5; + else + len=this.length+this.offset + 5; + + var rad=this._gauge._getRadians(90-a); + this._layoutLabel(group, this.label+'', this._gauge.cx, this._gauge.cy,len ,rad , direction); + + } + this.currentValue = this.value; + } + }, + + _layoutLabel:function(group, txt, ox, oy, lrad, angle, labelPlacement){ + // summary: + // Places the label on the side of the tick. + + var font = this.font ? this.font : gfx.defaultFont; + + var box = gfx._base._getTextBox(txt, + { + font: gfx.makeFontString(gfx.makeParameters(gfx.defaultFont,font)) + }); + + var tw = box.w; + var fz = font.size; + var th = gfx.normalizedLength(fz); + + var tfx = ox + Math.cos(angle) * lrad - tw / 2; + var tfy = oy - Math.sin(angle) * lrad - th / 2; + var side; + + var intersections = []; + + // Intersection with top segment + side = tfx; + var ipx = side; + var ipy = -Math.tan(angle) * side + oy + Math.tan(angle) * ox; + // Verify if intersection is on segment + if (ipy >= tfy && ipy <= tfy + th) + intersections.push({ + x: ipx, + y: ipy + }); + + // Intersection with bottom segment + side = tfx + tw; + ipx = side; + ipy = -Math.tan(angle) * side + oy + Math.tan(angle) * ox; + // Verify if intersection is on segment + if (ipy >= tfy && ipy <= tfy + th) intersections.push({ + x: ipx, + y: ipy + }); + + // Intersection with left segment + side = tfy; + ipx = -1 / Math.tan(angle) * side + ox + 1 / Math.tan(angle) * oy; + ipy = side; + // Verify if intersection is on segment + if (ipx >= tfx && ipx <= tfx + tw) + intersections.push({ + x: ipx, + y: ipy + }); + + // Intersection with right segment + side = tfy + th; + ipx = -1 / Math.tan(angle) * side + ox + 1 / Math.tan(angle) * oy; + ipy = side; + // Verify if intersection is on segment + if (ipx >= tfx && ipx <= tfx + tw) + intersections.push({ + x: ipx, + y: ipy + }); + + var dif; + if (labelPlacement == "inside"){ + for (var it = 0; it < intersections.length; it++){ + var ip = intersections[it]; + dif = this._distance(ip.x, ip.y, ox, oy) - lrad; + if (dif >= 0){ + // Place reference intersection point on reference circle + tfx = ox + Math.cos(angle) * (lrad - dif) - tw / 2; + tfy = oy - Math.sin(angle) * (lrad - dif) - th / 2; + break; + } + } + } + else // "outside" placement + { + for (it = 0; it < intersections.length; it++){ + ip = intersections[it]; + dif = this._distance(ip.x, ip.y, ox, oy) - lrad; + if (dif <= 0){ + // Place reference intersection point on reference circle + tfx = ox + Math.cos(angle) * (lrad - dif) - tw / 2; + tfy = oy - Math.sin(angle) * (lrad - dif) - th / 2; + + break; + } + } + } + // since the size computed by getTextBox is too big, + // to lower the problem, we align this to the middle and + // place at the middle of the computed size. + this.text = this._gauge.drawText(group, txt, tfx + tw / 2, tfy + th, 'middle', this.color, this.font); + }, + + _distance: function(x1,y1,x2,y2){ + return Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1)); + }, + + _move: function(/*Boolean?*/ dontAnimate){ + // summary: + // dontAnimate: Boolean + // Indicates if the drawing should not be animated (vs. the default of doing an animation) + var v = Math.min(Math.max(this.value, this._gauge.min), this._gauge.max), + c = this.currentValue + ; + if(dontAnimate){ + var angle = this._gauge._getAngle(v); + this.shape.setTransform([{dx:this._gauge.cx,dy:this._gauge.cy}, gfx.matrix.rotateg(angle)]); + this.currentValue = v; + }else{ + if(c!=v){ + var anim = new fx.Animation({curve: [c, v], duration: this.duration, easing: this.easing}); + connect.connect(anim, "onAnimate", lang.hitch(this, function(step){ + this.shape.setTransform([{dx:this._gauge.cx,dy:this._gauge.cy}, gfx.matrix.rotateg(this._gauge._getAngle(step))]); + + this.currentValue = step; + })); + anim.play(); + } + } + } +}); +});
\ No newline at end of file diff --git a/js/dojo/dojox/gauges/AnalogLineIndicator.js b/js/dojo/dojox/gauges/AnalogLineIndicator.js new file mode 100644 index 0000000..d256812 --- /dev/null +++ b/js/dojo/dojox/gauges/AnalogLineIndicator.js @@ -0,0 +1,30 @@ +//>>built +define("dojox/gauges/AnalogLineIndicator", ["dojo/_base/declare","./AnalogIndicatorBase"], + function(declare, AnalogIndicatorBase) { + +/*===== + AnalogIndicatorBase = dojox.gauges.AnalogIndicatorBase; +=====*/ + +return declare("dojox.gauges.AnalogLineIndicator", [AnalogIndicatorBase], { + // summary: + // An indicator for the AnalogGauge that draws a segment of line that has for length the length of the indicator + // and that starts at an offset from the center of the gauge. The line is drawn on the angle that corresponds + // to the value of the indicator. + + _getShapes: function(/*dojox.gfx.Group*/ group){ + // summary: + // Private function for generating the shapes for this indicator. An indicator that behaves the + // same might override this one and simply replace the shapes (such as ArrowIndicator). + var direction = this.direction; + var length = this.length; + if (direction == 'inside') + length = - length; + + return [group.createLine({x1: 0, y1: -this.offset, x2: 0, y2: -length-this.offset}) + .setStroke({color: this.color, width: this.width})]; + } + +}); + +});
\ No newline at end of file diff --git a/js/dojo/dojox/gauges/AnalogNeedleIndicator.js b/js/dojo/dojox/gauges/AnalogNeedleIndicator.js new file mode 100644 index 0000000..441795e --- /dev/null +++ b/js/dojo/dojox/gauges/AnalogNeedleIndicator.js @@ -0,0 +1,47 @@ +//>>built +define("dojox/gauges/AnalogNeedleIndicator", ["dojo/_base/declare","./AnalogIndicatorBase"], + function(declare, AnalogIndicatorBase) { + +/*===== + AnalogIndicatorBase = dojox.gauges.AnalogIndicatorBase; +=====*/ + +return declare("dojox.gauges.AnalogNeedleIndicator", [AnalogIndicatorBase], { + // summary: + // An indicator for the AnalogGauge that draws a needle. The needle is drawn on the angle that corresponds + // to the value of the indicator. + + _getShapes: function(group){ + // summary: + // Override of dojox.gauges.AnalogLineIndicator._getShapes + if(!this._gauge){ + return null; + } + var x = Math.floor(this.width/2); + var shapes = []; + + var color = this.color ? this.color : 'black'; + var strokeColor = this.strokeColor ? this.strokeColor : color; + var strokeWidth = this.strokeWidth ? this.strokeWidth : 1; + + var stroke = { + color: strokeColor, + width: strokeWidth + }; + + if (color.type && !this.strokeColor){ + stroke.color = color.colors[0].color; + } + + var xy = (Math.sqrt(2) * (x)); + shapes[0] = group.createPath() + .setStroke(stroke).setFill(color) + .moveTo(xy, -xy).arcTo((2*x), (2*x), 0, 0, 0, -xy, -xy) + .lineTo(0, -this.length).closePath(); + shapes[1] = group.createCircle({cx: 0, cy: 0, r: this.width}) + .setStroke(stroke) + .setFill(color); + return shapes; + } +}); +}); diff --git a/js/dojo/dojox/gauges/BarCircleIndicator.js b/js/dojo/dojox/gauges/BarCircleIndicator.js new file mode 100644 index 0000000..21e82b6 --- /dev/null +++ b/js/dojo/dojox/gauges/BarCircleIndicator.js @@ -0,0 +1,46 @@ +//>>built +define("dojox/gauges/BarCircleIndicator", ["dojo/_base/declare","dojox/gfx","./BarLineIndicator"], + function(declare, gfx, BarLineIndicator) { + +/*===== + BarLineIndicator = dojox.gauges.BarLineIndicator; +=====*/ + +return declare("dojox.gauges.BarCircleIndicator", [BarLineIndicator], { + // summary: + // An indicator for the BarGauge that draws a circle at a position that corresponds to the + // indicator value. This indicator is mainly used to draw round ticks for the scale. + + _getShapes: function(group){ + // summary: + // Override of dojox.gauges.BarLineIndicator._getShapes + var color = this.color ? this.color : 'black'; + var strokeColor = this.strokeColor ? this.strokeColor : color; + var stroke = { + color: strokeColor, + width: 1 + }; + if (this.color.type && !this.strokeColor){ + stroke.color = this.color.colors[0].color; + } + var y = this._gauge.dataY + this.offset + this.length / 2; + var v = this.value; + if (v < this._gauge.min){ + v = this._gauge.min; + } + if (v > this._gauge.max){ + v = this._gauge.max; + } + var pos = this._gauge._getPosition(v); + + var shapes = [group.createCircle({ + cx: 0, + cy: y, + r: this.length / 2 + }).setFill(color).setStroke(stroke)]; + + shapes[0].setTransform(gfx.matrix.translate(pos, 0)); + return shapes; + } +}); +});
\ No newline at end of file diff --git a/js/dojo/dojox/gauges/BarGauge.js b/js/dojo/dojox/gauges/BarGauge.js new file mode 100644 index 0000000..9eddd6e --- /dev/null +++ b/js/dojo/dojox/gauges/BarGauge.js @@ -0,0 +1,181 @@ +//>>built +define("dojox/gauges/BarGauge", ["dojo/_base/declare","dojo/_base/lang","dojo/_base/array","dojo/_base/html","dojo/_base/event","dojox/gfx", + "./_Gauge","./BarLineIndicator", "dojo/dom-geometry"], + function(declare, lang, arr, html, event, gfx, Gauge, BarLineIndicator, domGeometry) { + +/*===== + Gauge = dojox.gauges._Gauge; +=====*/ + +return declare("dojox.gauges.BarGauge", Gauge, { + // summary: + // a bar graph built using the dojox.gfx package. + // + // description: + // using dojo.gfx (and thus either SVG or VML based on what is supported), this widget + // builds a bar graph component, used to display numerical data in a familiar format. + // + // usage: + // <script type="text/javascript"> + // require(["dojox/gauges/BarGauge"]); + // </script> + // ... + // <div dojoType="dojox.gauges.BarGauge" + // id="testBarGauge" + // barGaugeHeight="55" + // dataY="25" + // dataHeight="25" + // dataWidth="225"> + // </div> + + // dataX: Number + // x position of data area (default 5) + dataX: 5, + + // dataY: Number + // y position of data area (default 5) + dataY: 5, + + // dataWidth: Number + // width of data area (default is bar graph width - 10) + dataWidth: 0, + + // dataHeight: Number + // height of data area (default is bar graph width - 10) + dataHeight: 0, + + // _defaultIndicator: Object + // override of dojox.gauges._Gauge._defaultIndicator + _defaultIndicator: BarLineIndicator, + + startup: function(){ + // handle settings from HTML by making sure all the options are + // converted correctly to numbers + // + // also connects mouse handling events + + if(this.getChildren){ + arr.forEach(this.getChildren(), function(child){ child.startup(); }); + } + + if(!this.dataWidth){this.dataWidth = this.gaugeWidth - 10;} + if(!this.dataHeight){this.dataHeight = this.gaugeHeight - 10;} + + this.inherited(arguments); + }, + + _getPosition: function(/*Number*/value){ + // summary: + // This is a helper function used to determine the position that represents + // a given value on the bar graph + // value: Number + // A value to be converted to a position for this bar graph. + + return this.dataX + Math.floor((value - this.min)/(this.max - this.min)*this.dataWidth); + }, + + _getValueForPosition: function(/*Number*/pos){ + // summary: + // This is a helper function used to determine the value represented by + // a position on the bar graph + // pos: Number + // A position to be converted to a value. + return (pos - this.dataX)*(this.max - this.min)/this.dataWidth + this.min; + }, + + drawRange: function(/*dojox.gfx.Group*/ group, /*Object*/range){ + // summary: + // This function is used to draw (or redraw) a range + // description: + // Draws a range (colored area on the background of the gauge) + // based on the given arguments. + // group: + // The GFX group where the range must be drawn. + // range: + // A range is either a dojox.gauges.Range or an object + // with similar parameters (low, high, hover, etc.). + if(range.shape){ + range.shape.parent.remove(range.shape); + range.shape = null; + } + + var x1 = this._getPosition(range.low); + var x2 = this._getPosition(range.high); + var path = group.createRect({ + x: x1, + y: this.dataY, + width: x2 - x1, + height: this.dataHeight + }); + if(lang.isArray(range.color) || lang.isString(range.color)){ + path.setStroke({color: range.color}); + path.setFill(range.color); + }else if(range.color.type){ + // Color is a gradient + var y = this.dataY + this.dataHeight/2; + range.color.x1 = x1; + range.color.x2 = x2; + range.color.y1 = y; + range.color.y2 = y; + path.setFill(range.color); + path.setStroke({color: range.color.colors[0].color}); + }else if (gfx.svg){ + // We've defined a style rather than an explicit color + path.setStroke({color: "green"}); // Arbitrary color, just have to indicate + path.setFill("green"); // that we want it filled + path.getEventSource().setAttribute("class", range.color.style); + } + + path.connect("onmouseover", lang.hitch(this, this._handleMouseOverRange, range)); + path.connect("onmouseout", lang.hitch(this, this._handleMouseOutRange, range)); + + range.shape = path; + }, + + getRangeUnderMouse: function(/*Object*/e){ + // summary: + // Determines which range the mouse is currently over + // e: Object + // The event object as received by the mouse handling functions below. + var range = null; + var pos = domGeometry.getContentBox(this.gaugeContent); + var x = e.clientX - pos.x; + var value = this._getValueForPosition(x); + if(this._rangeData){ + for(var i=0; (i<this._rangeData.length) && !range; i++){ + if((Number(this._rangeData[i].low) <= value) && (Number(this._rangeData[i].high) >= value)){ + range = this._rangeData[i]; + } + } + } + return range; + }, + + _dragIndicator: function(/*Object*/widget, /*Object*/ e){ + // summary: + // Handles the dragging of an indicator to the event position, including moving/re-drawing + // get angle for mouse position + this._dragIndicatorAt(widget, e.pageX, e.pageY); + event.stop(e); + }, + + _dragIndicatorAt: function(/*Object*/ widget, x, y){ + + // summary: + // Handles the dragging of an indicator, including moving/re-drawing + // get new value based on mouse position + var pos = domGeometry.position(widget.gaugeContent, true); + var xl = x - pos.x; + var value = widget._getValueForPosition(xl); + if(value < widget.min){value = widget.min;} + if(value > widget.max){value = widget.max;} + // update the indicator + widget._drag.value = value; + // callback + widget._drag.onDragMove(widget._drag); + // redraw/move indicator(s) + widget._drag.draw(this._indicatorsGroup, true); + widget._drag.valueChanged(); + } +}); +}); diff --git a/js/dojo/dojox/gauges/BarIndicator.js b/js/dojo/dojox/gauges/BarIndicator.js new file mode 100644 index 0000000..e79f12d --- /dev/null +++ b/js/dojo/dojox/gauges/BarIndicator.js @@ -0,0 +1,80 @@ +//>>built +define("dojox/gauges/BarIndicator", ["dojo/_base/declare","dojo/_base/fx","dojo/_base/connect","dojo/_base/lang","./BarLineIndicator"], +function(declare, fx, connect, lang, BarLineIndicator) { + +/*===== + BarLineIndicator = dojox.gauges.BarLineIndicator; +=====*/ + +return declare("dojox.gauges.BarIndicator",[BarLineIndicator],{ + + // summary: + // An indicator for the BarGauge that draws a bar corresponding to the indicator value. + + _getShapes: function(group){ + // summary: + // Override of dojox.gauges.BarLineIndicator._getShapes + if(!this._gauge){ + return null; + } + var v = this.value; + if(v < this._gauge.min){v = this._gauge.min;} + if(v > this._gauge.max){v = this._gauge.max;} + var pos = this._gauge._getPosition(v); + if(pos == this.dataX){pos = this.dataX+1;} + var y = this._gauge.dataY + Math.floor((this._gauge.dataHeight - this.width)/2) + this.offset; + + var shapes = []; + shapes[0] = group.createRect({x:this._gauge.dataX, y:y, width:pos - this._gauge.dataX, height:this.width}); + shapes[0].setStroke({color: this.color}); + shapes[0].setFill(this.color); + shapes[1] = group.createLine({ x1:this._gauge.dataX, y1:y, x2:pos, y2:y }); + shapes[1].setStroke({color: this.highlight}); + if(this.highlight2){ + y--; + shapes[2] = group.createLine({ x1:this._gauge.dataX, y1:y, x2:pos, y2:y }); + shapes[2].setStroke({color: this.highlight2}); + } + + return shapes; + }, + _createShapes: function(val){ + // summary: + // Creates a shallow copy of the current shapes while adjusting for the new value + for(var i in this.shape.children){ + i = this.shape.children[i]; + var newShape = {}; + for(var j in i){ + newShape[j] = i[j]; + } + if(i.shape.type == "line"){ + newShape.shape.x2 = val+newShape.shape.x1; + }else if(i.shape.type == "rect"){ + newShape.width = val; + } + i.setShape(newShape); + } + }, + _move: function(/*Boolean?*/ dontAnimate){ + // summary: + // Override of dojox.gauges.BarLineIndicator._move to resize the bar (rather than moving it) + + var c; + var v = this.value ; + if(v < this.min){v = this.min;} + if(v > this.max){v = this.max;} + c = this._gauge._getPosition(this.currentValue); + this.currentValue = v; + v = this._gauge._getPosition(v)-this._gauge.dataX; + if(dontAnimate){ + this._createShapes(v); + }else{ + if(c!=v){ + var anim = new fx.Animation({curve: [c, v], duration: this.duration, easing: this.easing}); + connect.connect(anim, "onAnimate", lang.hitch(this, this._createShapes)); + anim.play(); + } + } + } +}); +}); diff --git a/js/dojo/dojox/gauges/BarLineIndicator.js b/js/dojo/dojox/gauges/BarLineIndicator.js new file mode 100644 index 0000000..9caea55 --- /dev/null +++ b/js/dojo/dojox/gauges/BarLineIndicator.js @@ -0,0 +1,134 @@ +//>>built +define("dojox/gauges/BarLineIndicator", ["dojo/_base/declare","dojo/_base/fx","dojo/_base/connect","dojo/_base/lang", "dojox/gfx", "./_Indicator"], + function(declare, fx, connect, lang, gfx, Indicator) { + +/*===== + Indicator = dojox.gauges._Indicator; +=====*/ + +return declare("dojox.gauges.BarLineIndicator",[Indicator],{ + + // summary: + // An indicator for the BarGauge that draws a segment a line corresponding to the indicator value. + + width: 1, + _getShapes: function(/*dojox.gfx.Group*/ group){ + // summary: + // Private function for generating the shapes for this indicator. An indicator that behaves the + // same might override this one and simply replace the shapes (such as BarIndicator). + if(!this._gauge){ + return null; + } + var v = this.value; + if(v < this._gauge.min){v = this._gauge.min;} + if(v > this._gauge.max){v = this._gauge.max;} + var pos = this._gauge._getPosition(v); + var shapes = []; + if(this.width > 1){ + shapes[0] = group.createRect({ + x:0, + y:this._gauge.dataY + this.offset, + width:this.width, + height:this.length + }); + shapes[0].setStroke({color: this.color}); + shapes[0].setFill(this.color); + shapes[0].setTransform(gfx.matrix.translate(pos,0)); + }else{ + shapes[0] = group.createLine({ + x1:0, + y1:this._gauge.dataY + this.offset, + x2:0, + y2:this._gauge.dataY + this.offset + this.length + }); + shapes[0].setStroke({color: this.color}); + shapes[0].setTransform(gfx.matrix.translate(pos,0)); + } + return shapes; + }, + draw: function(/*dojox.gfx.Group*/group, /*Boolean?*/ dontAnimate){ + // summary: + // Override of dojox.gauges._Indicator.draw + // dontAnimate: Boolean + // Indicates if the drawing should not be animated (vs. the default of doing an animation) + var i; + if (this.shape){ + this._move(dontAnimate); + }else{ + if (this.shape){ + this.shape.parent.remove(this.shape); + this.shape = null; + } + if (this.text){ + this.text.parent.remove(this.text); + this.text = null; + } + + this.color = this.color || '#000000'; + this.length = this.length || this._gauge.dataHeight; + this.width = this.width || 3; + this.offset = this.offset || 0; + this.highlight = this.highlight || '#4D4D4D'; + this.highlight2 = this.highlight2 || '#A3A3A3'; + + var shapes = this._getShapes(group, this._gauge, this); + + if (shapes.length > 1){ + this.shape = group.createGroup(); + for (var s = 0; s < shapes.length; s++){ + this.shape.add(shapes[s]); + } + } else this.shape = shapes[0]; + + if (this.label){ + var v = this.value; + if (v < this._gauge.min){ + v = this._gauge.min; + } + if (v > this._gauge.max){ + v = this._gauge.max; + } + var pos = this._gauge._getPosition(v); + + if (this.direction == 'inside'){ + var font = this.font ? this.font : gfx.defaultFont; + var fz = font.size; + var th = gfx.normalizedLength(fz); + + this.text = this._gauge.drawText(group, '' + this.label, pos, this._gauge.dataY + this.offset + this.length + 5 + th, 'middle', this.color, this.font); + } else this.text = this._gauge.drawText(group, '' + this.label, pos, this._gauge.dataY + this.offset - 5, 'middle', this.color, this.font); + } + + this.shape.connect("onmouseover", this, this.handleMouseOver); + this.shape.connect("onmouseout", this, this.handleMouseOut); + this.shape.connect("onmousedown", this, this.handleMouseDown); + this.shape.connect("touchstart", this, this.handleTouchStart); + this.currentValue = this.value; + } + }, + + _move: function(/*Boolean?*/ dontAnimate){ + // summary: + // Moves this indicator (since it's already been drawn once) + // dontAnimate: Boolean + // Indicates if the drawing should not be animated (vs. the default of doing an animation) + var v = this.value ; + if(v < this._gauge.min){v = this._gauge.min;} + if(v > this._gauge.max){v = this._gauge.max;} + var c = this._gauge._getPosition(this.currentValue); + this.currentValue = v; + v = this._gauge._getPosition(v); + + if(dontAnimate || (c==v)){ + this.shape.setTransform(gfx.matrix.translate(v,0)); + }else{ + var anim = new fx.Animation({curve: [c, v], duration: this.duration, easing: this.easing}); + connect.connect(anim, "onAnimate", lang.hitch(this, function(jump){ + if (this.shape) + this.shape.setTransform(gfx.matrix.translate(jump,0)); + })); + anim.play(); + } + } +}); +});
\ No newline at end of file diff --git a/js/dojo/dojox/gauges/GlossyCircularGauge.js b/js/dojo/dojox/gauges/GlossyCircularGauge.js new file mode 100644 index 0000000..9685f16 --- /dev/null +++ b/js/dojo/dojox/gauges/GlossyCircularGauge.js @@ -0,0 +1,237 @@ +//>>built +define("dojox/gauges/GlossyCircularGauge", ["dojo/_base/declare","dojo/_base/Color","./GlossyCircularGaugeBase"], + function(declare, Color, GlossyCircularGaugeBase) { + +/*===== + GlossyCircularGaugeBase = dojox.gauges.GlossyCircularGaugeBase; +=====*/ + +return declare("dojox.gauges.GlossyCircularGauge", [GlossyCircularGaugeBase], { + // summary: + // Represents a circular gauge with a glossy appearance. + // + // example: + // | <div dojoType="dojox.gauges.GlossyCircularGauge" + // | id="testGauge" + // | width="300" + // | height="300" + // | min="0" + // | max="100" + // | value="0" + // | majorTicksInterval="10" + // | majorTicksColor="#c4c4c4" + // | minorTicksInterval="5" + // | minorTicksColor="#c4c4c4" + // | color="black" + // | needleColor="#c4c4c4" + // | font="normal normal normal 10pt sans-serif" + // | textIndicatorFont="normal normal normal 20pt sans-serif" + // | textIndicatorVisible="true" + // | textIndicatorColor="#c4c4c4" + // | majorTicksLabelPlacement="inside"|"outside" + // | noChange="true" + // | title="title" + // | scalePrecision="0" + // | textIndicatorPrecision="0"> + // | </div> + + _designWidth : 376.25, + _designHeight : 382.5, + _designCx : 187.19173, + _designCy : 187.81589, + _designTextIndicatorX : 187.19173, + _designTextIndicatorY : 267.81589, + + + constructor: function(){ + // summary: + // Creates a new GlossyCircularGauge. + this.startAngle= -135; + this.endAngle= 135; + this.min = 0; + this.max = 100; + }, + + drawBackground: function(group){ + // summary: + // Draws the background of the gauge. + // group: dojox.gfx.Group + // The GFX group where the background must be drawn + + var scale = Math.min((this.width / this._designWidth), (this.height / this._designHeight)); + var transform = { + xx: scale, + xy: 0, + yx: 0, + yy: scale, + dx: (-161) * scale + (this.width - scale * this._designWidth) / 2, + dy: (-263.5) * scale + (this.height - scale * this._designHeight) / 2 + + }; + + var lighterColor1 = Color.blendColors(new Color(this.color), new Color('white'), 0.4 ); + var lighterColor2 = Color.blendColors(new Color(this.color), new Color('white'), 0.8 ); + + + if (this._gaugeBackground){ + this._gaugeBackground.setTransform(transform); + return; + } + this._gaugeBackground = group.createGroup(); + this._gaugeBackground.setTransform(transform); + + this._gaugeBackground.createPath({ + path: "M0 0 C0.028 -82.393 -66.741 -149.207 -149.134 -149.235 C-231.526 -149.264 -298.341 -82.494 -298.369 -0.101 L-298.369 0 C-298.397 82.393 -231.627 149.207 -149.235 149.235 C-66.843 149.264 -0.028 82.494 0 0.102 L0 0 Z" + }).setTransform({ + xx: 1.25, + xy: 0, + yx: 0, + yy: -1.25, + dx: 535.09494, + dy: 452.53442 + }).setFill(this.color); + + this._gaugeBackground.createPath({ + path: "M451.354 450.434 C451.382 374.317 389.698 312.593 313.581 312.566 C237.464 312.54 175.739 374.224 175.713 450.341 L175.713 450.434 C175.688 526.551 237.372 588.275 313.487 588.302 C389.604 588.327 451.329 526.644 451.354 450.527 L451.354 450.434 Z" + }).setTransform({ + xx: 1.25, + xy: 0, + yx: 0, + yy: -1.25, + dx: -43.30358, + dy: 1015.57642 + }).setFill({ + type: "linear", + x1: 175.688, + y1: 312.54001, + x2: 175.688, + y2: 422.85482, + colors: [ + {offset: 0, color: lighterColor1}, + {offset: 1, color: this.color} + ] + }); + + this._gaugeBackground.createPath({ + path: "M451.321 453.375 C449.778 528.175 388.655 588.327 313.491 588.302 C238.359 588.276 177.295 528.135 175.753 453.377 C217.829 442.046 266.246 464.646 315.36 464.646 C364.489 464.646 409.364 442.041 451.321 453.375" + }).setTransform({ + xx: 1.25, + xy: 0, + yx: 0, + yy: -1.25, + dx: -43.30358, + dy: 1015.57642 + }).setFill({ + type: "linear", + x1: 175.75301, + y1: 442.04099, + x2: 175.75301, + y2: 588.32703, + colors: [ + {offset: 0, color: this.color}, + {offset: 1, color: lighterColor2} + ] + }); + + this._gaugeBackground.createPath({ + path: "M0 0 C-1.543 74.8 -62.666 134.952 -137.83 134.927 C-212.962 134.901 -274.026 74.76 -275.568 0.002 C-233.492 -11.329 -185.075 11.271 -135.961 11.271 C-86.832 11.271 -41.957 -11.334 0 0" + }).setTransform({ + xx: 1.25, + xy: 0, + yx: 0, + yy: -1.25, + dx: 520.84441, + dy: 448.85767 + }).setFill([255,255,255,0.12157]); + + }, + + drawForeground: function(group){ + // summary: + // Draws the foreground of the gauge. + // group: dojox.gfx.Group + // The GFX group where the foreground must be drawn + + var scale = Math.min((this.width / this._designWidth), (this.height / this._designHeight)); + var transform = { + xx: scale, + xy: 0, + yx: 0, + yy: scale, + dx: (-160) * scale + (this.width - scale * this._designWidth) / 2, + dy: (-263.5) * scale + (this.height - scale * this._designHeight) / 2 + }; + + var lighterColor1 = Color.blendColors(new Color(this.color), new Color('white'), 0.4 ); + var lighterColor2 = Color.blendColors(new Color(this.color), new Color('white'), 0.8 ); + + if (this._foreground){ + this._foreground.setTransform(transform); + return; + } + this._foreground = group.createGroup(); + this._foreground.setTransform(transform); + + var group1 = this._foreground.createGroup(); + group1.setTransform({ + xx: 1.25, + xy: 0, + yx: 0, + yy: -1.25, + dx: -43.30358, + dy: 1015.57642 + }); + group1.createPath({ + path: "M0 0 C0.004 -12.579 -10.189 -22.779 -22.768 -22.784 C-35.349 -22.788 -45.549 -12.594 -45.553 -0.016 L-45.553 0 C-45.558 12.579 -35.363 22.779 -22.783 22.784 C-10.205 22.788 -0.004 12.594 0 0.015 L0 0 Z" + }).setTransform({ + xx: 1, + xy: 0, + yx: 0, + yy: 1, + dx: 336.31049, + dy: 451.43359 + }).setFill(this.color); + + group1.createPath({ + path: "M333.443 451.434 C333.446 440.438 324.537 431.523 313.541 431.519 C302.546 431.515 293.63 440.425 293.626 451.42 L293.626 451.434 C293.622 462.429 302.532 471.345 313.527 471.349 C324.523 471.353 333.439 462.442 333.443 451.447 L333.443 451.434 Z" + }).setFill({ + type: "linear", + x1: 293.62201, + y1: 431.51501, + x2: 293.62201, + y2: 451.43401, + colors: [ + {offset: 0, color: lighterColor1}, + {offset: 1, color: this.color} + ] + }); + + group1.createPath({ + path: "M333.438 451.858 C333.215 462.663 324.386 471.353 313.528 471.349 C302.675 471.345 293.854 462.658 293.632 451.858 C299.709 450.222 306.702 453.486 313.799 453.486 C320.895 453.486 327.377 450.221 333.438 451.858" + }).setFill({ + type: "linear", + x1: 293.63199, + y1: 450.22101, + x2: 293.63199, + y2: 471.353, + colors: [ + {offset: 0, color: this.color}, + {offset: 1, color: lighterColor2} + ] + }); + + group1.createPath({ + path: "M0 0 C-0.223 10.805 -9.052 19.494 -19.909 19.49 C-30.763 19.486 -39.583 10.799 -39.806 0 C-33.729 -1.636 -26.735 1.628 -19.639 1.628 C-12.543 1.628 -6.061 -1.638 0 0" + }).setTransform({ + xx: 1, + xy: 0, + yx: 0, + yy: 1, + dx: 333.4375, + dy: 451.8584 + }).setFill([255,255,255,0.12157]); + + } + +}); +}); diff --git a/js/dojo/dojox/gauges/GlossyCircularGaugeBase.js b/js/dojo/dojox/gauges/GlossyCircularGaugeBase.js new file mode 100644 index 0000000..60ea5a3 --- /dev/null +++ b/js/dojo/dojox/gauges/GlossyCircularGaugeBase.js @@ -0,0 +1,541 @@ +//>>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 + }); + }}); +}); diff --git a/js/dojo/dojox/gauges/GlossyCircularGaugeNeedle.js b/js/dojo/dojox/gauges/GlossyCircularGaugeNeedle.js new file mode 100644 index 0000000..da9d987 --- /dev/null +++ b/js/dojo/dojox/gauges/GlossyCircularGaugeNeedle.js @@ -0,0 +1,65 @@ +//>>built +define("dojox/gauges/GlossyCircularGaugeNeedle", ["dojo/_base/declare","dojo/_base/Color" ,"./AnalogIndicatorBase"], + function(declare, Color, AnalogIndicatorBase) { + +/*===== + AnalogIndicatorBase = dojox.gauges.AnalogIndicatorBase; +=====*/ + +return declare("dojox.gauges.GlossyCircularGaugeNeedle", [AnalogIndicatorBase], { + // summary: + // The needle for the dojox.gauges.GlossyCircularGauge and + // dojox.gauges.GlossySemiCircularGauge. + // + // description: + // This object defines the needle for the dojox.gauges.GlossyCircularGauge and + // dojox.gauges.GlossySemiCircularGauge. + // Since the needle is created by the gauges class, you do not have to use this class directly. + + + interactionMode: "gauge", + + // color: String + // The color of the indicator. + color: '#c4c4c4', + + _getShapes: function(group){ + // summary: + // Overrides AnalogIndicatorBase._getShapes + + var darkerColor = Color.blendColors(new Color(this.color), new Color('black'), 0.3); + + if (!this._gauge) + return null; + + var shapes = []; + shapes[0] = group.createGroup(); + var scale = Math.min((this._gauge.width / this._gauge._designWidth), (this._gauge.height / this._gauge._designHeight)); + shapes[0].createGroup().setTransform({ + xx: scale, + xy: 0, + yx: 0, + yy: scale, + dx: 0, + dy: 0 + }); + shapes[0].children[0].createPath({ + path: "M357.1429 452.005 L333.0357 465.9233 L333.0357 438.0868 L357.1429 452.005 Z" + }).setTransform({ + xx: 0, + xy: 1, + yx: -6.21481, + yy: 0, + dx: -452.00505, + dy: 2069.75519 + }).setFill(this.color).setStroke({ + color: darkerColor, + width: 1, + style: "Solid", + cap: "butt", + join: 20.0 + }); + return shapes; + } +}); +});
\ No newline at end of file diff --git a/js/dojo/dojox/gauges/GlossyHorizontalGauge.js b/js/dojo/dojox/gauges/GlossyHorizontalGauge.js new file mode 100644 index 0000000..5a7bba6 --- /dev/null +++ b/js/dojo/dojox/gauges/GlossyHorizontalGauge.js @@ -0,0 +1,568 @@ +//>>built +define("dojox/gauges/GlossyHorizontalGauge", ["dojo/_base/declare","dojo/_base/connect","dojo/_base/lang","dojo/_base/Color","dojox/gfx","./BarGauge","./BarCircleIndicator","./GlossyHorizontalGaugeMarker"], + function(declare, connect, lang, Color, gfx, BarGauge, BarCircleIndicator, GlossyHorizontalGaugeMarker) { + + +var NumberUtils + +/*===== + BarGauge = dojox.gauges.BarGauge; +=====*/ + +return declare("dojox.gauges.GlossyHorizontalGauge", [BarGauge], { + // summary: + // Represents an horizontal bar gauge with a glossy appearance. + // + // example: + // | <div dojoType="dojox.gauges.GlossyHorizontalGauge" + // | id="testGauge" + // | width="500" + // | height="100" + // | min="0" + // | max="100" + // | value="0" + // | majorTicksInterval="10" + // | majorTicksColor="#c4c4c4" + // | minorTicksInterval="5" + // | minorTicksColor="#c4c4c4" + // | color="black" + // | markerColor="#c4c4c4" + // | font="normal normal normal 10pt sans-serif" + // | noChange="true" + // | title="title" + // | scalePrecision="0" + // | > + // | </div> + + + // the type of default indicator to create + _defaultIndicator: BarCircleIndicator, + + // color: String + // The main color of the gauge. + color: 'black', + + // needleColor: Color + // The main color of the needle. + markerColor: 'black', + + // majorTicksInterval: Number + // Interval between major ticks + majorTicksInterval: 10, + + // _majorTicksLength: Number + // Major tick size, at design + _majorTicksLength: 10, + + // majorTicksColor: Color + // Color of major tick marks + majorTicksColor: '#c4c4c4', + + // minorTicksInterval: Number + // Interval between minor ticks + minorTicksInterval: 5, + + // _minorTicksLength: Number + // Minor tick size, at design + _minorTicksLength: 6, + + // minorTicksColor: Color + // Color of minor tick marks + minorTicksColor: '#c4c4c4', + + // value: Number + // The value of the gauge. + value: 0, + + // 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, + + _font: null, + + _margin: 2, + _minBorderWidth: 2, + _maxBorderWidth: 6, + _tickLabelOffset: 5, + _designHeight: 100, + + constructor: function(){ + this.min = 0; + this.max = 100; + }, + + startup: function(){ + this.inherited(arguments); + + if (this._gaugeStarted) return; + + this._gaugeStarted = true; + + var scale = this.height / this._designHeight; + + this._minorTicksLength = this._minorTicksLength * scale; + this._majorTicksLength = this._majorTicksLength * scale; + + var font = this._font; + this._computeDataRectangle(); + + // computing scale height + + var th = gfx.normalizedLength(font.size); + var scaleHeight = th + this._tickLabelOffset + Math.max(this._majorTicksLength, this._minorTicksLength); + // indicator in the middle of the gauge + var yOffset = Math.max(0, (this.height - scaleHeight) / 2); + + this.addRange({ + low: this.min ? this.min : 0, + high: this.max ? this.max : 100, + color: [0, 0, 0, 0] + }); + + this.setMajorTicks({ + fixedPrecision: true, + precision: this.scalePrecision, + font: font, + labelPlacement: 'inside', + offset: yOffset - this._majorTicksLength / 2, + interval: this.majorTicksInterval, + length: this._majorTicksLength, + color: this.majorTicksColor + + }); + + this.setMinorTicks({ + labelPlacement: 'inside', + offset: yOffset - this._minorTicksLength / 2, + interval: this.minorTicksInterval, + length: this._minorTicksLength, + color: this.minorTicksColor + + }); + this._needle = new GlossyHorizontalGaugeMarker({ + hideValue: true, + title: this.title, + noChange: this.noChange, + offset: yOffset, + color: this.markerColor, + value: this.value + }); + this.addIndicator(this._needle); + + connect.connect(this._needle, "valueChanged", lang.hitch(this, function(){ + this.value = this._needle.value; + this.onValueChanged(); + })); + }, + + _layoutGauge: function(){ + // summary: + // Layout the gauge elements depending on the various parameters (size, font, tick length..) + + if (!this._gaugeStarted) + return; + + var font = this._font; + this._computeDataRectangle(); + var th = gfx.normalizedLength(font.size); + var scaleHeight = th + this._tickLabelOffset + Math.max(this._majorTicksLength, this._minorTicksLength); + // indicator in the middle of the gauge + var yOffset = Math.max(0, (this.height - scaleHeight) / 2); + + + this._setMajorTicksProperty({ + fixedPrecision: true, + precision: this.scalePrecision, + font: font, + offset: yOffset - this._majorTicksLength / 2, + interval: this.majorTicksInterval, + length: this._majorTicksLength + }); + + this._setMinorTicksProperty({ + offset: yOffset - this._minorTicksLength / 2, + interval: this.minorTicksInterval, + length: this._minorTicksLength + }); + + this.removeIndicator(this._needle); + this._needle.offset = yOffset; + this.addIndicator(this._needle); + }, + + _formatNumber: function(val){ + var NumberUtils = this._getNumberModule(); + if(NumberUtils){ // use internationalization if loaded + return NumberUtils.format(val, { + places: this.scalePrecision + }); + }else{ + return val.toFixed(this.scalePrecision); + } + }, + + _computeDataRectangle: function(){ + // summary: + // Computes the rectangle that defines the data area of the gauge. + + + if (!this._gaugeStarted) + return; + + var font = this._font; + var leftTextMargin = this._getTextWidth(this._formatNumber(this.min), font) / 2; + var rightTextMargin = this._getTextWidth(this._formatNumber(this.max), font) / 2; + var textMargin = Math.max(leftTextMargin, rightTextMargin); + + var margin = this._getBorderWidth() + Math.max(this._majorTicksLength, this._majorTicksLength) / 2 + textMargin; + this.dataHeight = this.height; + this.dataY = 0; + this.dataX = margin + this._margin; + this.dataWidth = Math.max(0, this.width - 2 * this.dataX); + }, + + _getTextWidth: function(s, font){ + return gfx._base._getTextBox(s, { + font: gfx.makeFontString(gfx.makeParameters(gfx.defaultFont, font)) + }).w || + 0; + }, + + _getBorderWidth: function(){ + // summary: + // Computes the width of the border surrounding the gauge + return Math.max(this._minBorderWidth, Math.min(this._maxBorderWidth, this._maxBorderWidth * this.height / this._designHeight)); + }, + + drawBackground: function(group){ + // summary: + // Draws the background of the gauge + // group: dojox.gfx.Group + // The GFX group where the background must be drawn + if (this._gaugeBackground){ + return; + } + + var lighterColor = Color.blendColors(new Color(this.color), new Color('white'), 0.4); + this._gaugeBackground = group.createGroup(); + + var borderWidth = this._getBorderWidth(); + var margin = this._margin; + var w = this.width; + var h = this.height; + var radius = Math.min(h / 4, 23); + this._gaugeBackground.createRect({ + x: margin, + y: margin, + width: Math.max(0, w - 2 * margin), + height: Math.max(0, h - 2 * margin), + r: radius + }).setFill(this.color); + + var left = margin + borderWidth; + var right = w - borderWidth - margin; + var top = margin + borderWidth; + var w2 = w - 2 * borderWidth - 2 * margin; + var h2 = h - 2 * borderWidth - 2 * margin; + if (w2 <= 0 || h2 <= 0) + return; + radius = Math.min(radius, w2 / 2); + radius = Math.min(radius, h2 / 2); + this._gaugeBackground.createRect({ + x: left, + y: top, + width: w2, + height: h2, + r: radius + }).setFill({ + type: "linear", + x1: left, + y1: 0, + x2: left, + y2: h - borderWidth - margin, + colors: [{ + offset: 0, + color: lighterColor + }, { + offset: .2, + color: this.color + }, { + offset: .8, + color: this.color + }, { + offset: 1, + color: lighterColor + }] + }); + + var f = 4 * (Math.sqrt(2) - 1) / 3 * radius; + this._gaugeBackground.createPath({ + path: 'M' + left + ' ' + (top + radius) + + 'C' + + left + + ' ' + + (top + radius - f) + + ' ' + + (left + radius - f) + + ' ' + + top + + ' ' + + (left + radius) + + ' ' + + top + + 'L' + + (right - radius) + + ' ' + + top + + 'C' + + (right - radius + f) + + ' ' + + top + + ' ' + + right + + ' ' + + (top + radius - f) + + ' ' + + right + + ' ' + + (top + radius) + + 'L' + + right + + ' ' + + (top + h / 2) + + 'L' + + left + + ' ' + + (top + h / 3) + + 'Z' + }).setFill({ + type: "linear", + x1: left, + y1: top, + x2: left, + y2: top + this.height / 2, + colors: [{ + offset: 0, + color: lighterColor + }, { + offset: 1, + color: Color.blendColors(new Color(this.color), new Color('white'), 0.2) + }] + }); + }, + + onValueChanged: function(){ + // summary: + // Callback 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); + + this._gaugeBackground = null; + this.draw(); + }, + + _setMarkerColorAttr: function(color){ + // summary: + // Sets the main color of the marker + // color: String + // The color + this.markerColor = color; + if (this._needle){ + this.removeIndicator(this._needle); + this._needle.color = color; + this._needle.shape = null; + this.addIndicator(this._needle); + } + }, + + _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._layoutGauge(); + 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 + }); + }, + + _setMajorTicksProperty: function(prop){ + if (this.majorTicks == null){ + return; + } + lang.mixin(this.majorTicks, prop); + this.setMajorTicks(this.majorTicks); + }, + + _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._layoutGauge(); + return this; + }, + + getMinorTicksLength: function(){ + // summary: + // Gets 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 == null){ + return; + } + lang.mixin(this.minorTicks, prop); + this.setMinorTicks(this.minorTicks); + }, + + _setMinAttr: function(min){ + this.min = min; + this._computeDataRectangle(); + if (this.majorTicks != null) + this.setMajorTicks(this.majorTicks); + if (this.minorTicks != null) + this.setMinorTicks(this.minorTicks); + this.draw(); + }, + + _setMaxAttr: function(max){ + this.max = max; + this._computeDataRectangle(); + if (this.majorTicks != null) + this.setMajorTicks(this.majorTicks); + if (this.minorTicks != null) + this.setMinorTicks(this.minorTicks); + this.draw(); + }, + + _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; + } + }, + + _setScalePrecisionAttr: function(value){ + // summary: + // Changes precision of the numbers in the scale of the gauge + // value: Number + // The new value + this.scalePrecision = value; + this._layoutGauge(); + }, + + _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; + }, + + _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; + } + }, + + _setFontAttr: function(font){ + // summary: + // Sets the font of the gauge + // 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._layoutGauge(); + } +}); +}); + diff --git a/js/dojo/dojox/gauges/GlossyHorizontalGaugeMarker.js b/js/dojo/dojox/gauges/GlossyHorizontalGaugeMarker.js new file mode 100644 index 0000000..fcc0d9d --- /dev/null +++ b/js/dojo/dojox/gauges/GlossyHorizontalGaugeMarker.js @@ -0,0 +1,130 @@ +//>>built +define("dojox/gauges/GlossyHorizontalGaugeMarker", ["dojo/_base/declare","dojo/_base/Color","./BarLineIndicator"], + function(declare, Color, BarLineIndicator) { + +/*===== + BarLineIndicator = dojox.gauges.BarLineIndicator; +=====*/ + +return declare("dojox.gauges.GlossyHorizontalGaugeMarker", [BarLineIndicator], { + // summary: + // The marker for the dojox.gauges.GlossyHorizontalGauge. + // + // description: + // This object defines the marker for the dojox.gauges.GlossyHorizontalGauge. + // Since the needle is created by the gauges class, you do not have to use this class directly. + + // interactionMode : String + // The interactionMode can have two values : "indicator" (the default) or "gauge". + // When the value is "indicator", the user must click on the indicator to change the value. + // When the value is "gauge", the user can click on the gauge to change the indicator value. + // If a gauge contains several indicators with the indicatorMode property set to "gauge", then + // only the first indicator will be moved when clicking the gauge. + interactionMode: "gauge", + + // color: String + // The color of the indicator. + color: 'black', + + _getShapes: function(group){ + // summary: + // Overrides BarLineIndicator._getShapes + + if (!this._gauge){ + return null; + } + var v = this.value; + if (v < this._gauge.min){ + v = this._gauge.min; + } + if (v > this._gauge.max){ + v = this._gauge.max; + } + + var pos = this._gauge._getPosition(v); + var shapes = []; + + var color = new Color(this.color); + color.a = .67; + + var lighterColor = Color.blendColors(color, new Color('white'), 0.4); + + var top = shapes[0] = group.createGroup(); + var scale = this._gauge.height / 100; + scale = Math.max(scale, .5); + scale = Math.min(scale, 1); + + top.setTransform({ + xx: 1, + xy: 0, + yx: 0, + yy: 1, + dx: pos, + dy: 0 + }); + var marker = top.createGroup().setTransform({ + xx: 1, + xy: 0, + yx: 0, + yy: 1, + dx: -scale * 10, + dy: this._gauge.dataY + this.offset + }); + var rescale = marker.createGroup().setTransform({ + xx: scale, + xy: 0, + yx: 0, + yy: scale, + dx: 0, + dy: 0 + }); + + rescale.createRect({ + x: .5, + y: .0, + width: 20, + height: 47, + r: 6 + }).setFill(color).setStroke(lighterColor); + rescale.createPath({ + path: 'M 10.106 41 L 10.106 6 C 10.106 2.687 7.419 0 4.106 0 L 0.372 0 C -0.738 6.567 1.022 15.113 1.022 23.917 C 1.022 32.721 2.022 40.667 0.372 47 L 4.106 47 C 7.419 47 10.106 44.314 10.106 41 Z' + }).setFill(lighterColor).setTransform({ + xx: 1, + xy: 0, + yx: 0, + yy: 1, + dx: 10.306, + dy: 0.009 + }); + rescale.createRect({ + x: 9.5, + y: 1.5, + width: 2, + height: 34, + r: 0.833717 + }).setFill(color).setStroke(this.color); + rescale.createRect({ + x: 9, + y: 0, + width: 3, + height: 34, + r: 6 + }).setFill({ + type: "linear", + x1: 9, + y1: 0, + x2: 9, + y2: 34, + colors: [{ + offset: 0, + color: 'white' + }, { + offset: 1, + color: this.color + }] + }); + return shapes; + } + +}); +});
\ No newline at end of file diff --git a/js/dojo/dojox/gauges/GlossySemiCircularGauge.js b/js/dojo/dojox/gauges/GlossySemiCircularGauge.js new file mode 100644 index 0000000..24dd1ac --- /dev/null +++ b/js/dojo/dojox/gauges/GlossySemiCircularGauge.js @@ -0,0 +1,245 @@ +//>>built +define("dojox/gauges/GlossySemiCircularGauge", ["dojo/_base/declare","dojo/_base/Color","./GlossyCircularGaugeBase"], + function(declare, Color, GlossyCircularGaugeBase) { + +/*===== + GlossyCircularGaugeBase = dojox.gauges.GlossyCircularGaugeBase; +=====*/ + +return declare("dojox.gauges.GlossySemiCircularGauge", [GlossyCircularGaugeBase], { + // summary: + // Represents a semi circular gauge with a glossy appearance. + // + // example: + // | <div dojoType="dojox.gauges.GlossySemiCircularGauge" + // | id="testGauge" + // | width="300" + // | height="300" + // | min="0" + // | max="100" + // | value="0" + // | majorTicksInterval="10" + // | majorTicksColor="#c4c4c4" + // | minorTicksInterval="5" + // | minorTicksColor="#c4c4c4" + // | color="black" + // | needleColor="#c4c4c4" + // | font="normal normal normal 10pt sans-serif" + // | textIndicatorFont="normal normal normal 20pt sans-serif" + // | textIndicatorVisible="true" + // | textIndicatorColor="#c4c4c4" + // | majorTicksLabelPlacement="inside"|"outside" + // | noChange="true" + // | title="title" + // | scalePrecision="0" + // | textIndicatorPrecision="0" + // | > + // | </div> + + + _designWidth: 381.25, + _designHeight: 221.25, + _designCx: 190.6675, + _designCy: 185.87665, + _designTextIndicatorX: 190.6675, + _designTextIndicatorY: 145.87665, + + + constructor: function(){ + // summary: + // Creates a new GlossySemiCircularGauge + this.min = 0; + this.max = 100; + this.startAngle = -91.5; + this.endAngle = 91.5; + }, + + drawBackground: function(group){ + // summary: + // Draws the background of the gauge + // group: dojox.gfx.Group + // The GFX group where the background must be drawn + var lighterColor1 = Color.blendColors(new Color(this.color), new Color('white'), 0.4); + var lighterColor2 = Color.blendColors(new Color(this.color), new Color('white'), 0.8); + + var scale = Math.min((this.width / this._designWidth), (this.height / this._designHeight)); + var transform = { + xx: scale, + xy: 0, + yx: 0, + yy: scale, + dx: -23.33928 * scale + (this.width - scale * this._designWidth) / 2, + dy: -483.30859 * scale + (this.height - scale * this._designHeight) / 2 + }; + + + if (this._gaugeBackground) { + this._gaugeBackground.setTransform(transform); + return; + } + this._gaugeBackground = group.createGroup(); + this._gaugeBackground.setTransform(transform); + this._gaugeBackground.createPath({ + path: "M0 0 C0.023 0.892 0.037 9.147 0.045 15.97 C-0.349 98.05 -67.016 164.455 -149.182 164.427 C-231.347 164.398 -297.969 97.949 -298.307 15.869 C-298.299 9.081 -298.285 0.884 -298.262 -0.006 C-298.119 -5.424 -293.686 -9.742 -288.265 -9.742 L-9.996 -9.742 C-4.574 -9.742 -0.139 -5.42 0 0" + }).setTransform({ + xx: 1.25, + xy: 0, + yx: 0, + yy: -1.25, + dx: 400.74198, + dy: 690.00586 + }).setFill(this.color); + + this._gaugeBackground.createPath({ + path: "M451.297 436.5 C451.333 437.807 451.355 449.118 451.354 450.434 L451.354 450.527 C451.329 526.644 389.604 588.327 313.487 588.302 C237.372 588.275 175.688 526.551 175.713 450.434 C175.713 450.403 175.735 437.776 175.771 436.5 L451.297 436.5 Z" + }).setTransform({ + xx: 1.25, + xy: 0, + yx: 0, + yy: -1.25, + dx: -177.58928, + dy: 1234.05859 + }).setFill({ + type: "linear", + x1: 175.688, + y1: 390.95189, + x2: 175.688, + y2: 474.45676, + colors: [{ + offset: 0, + color: lighterColor1 + }, { + offset: 1, + color: this.color + }] + }); + this._gaugeBackground.createPath({ + path: "M451.321 453.375 C449.778 528.175 388.655 588.327 313.491 588.302 C238.359 588.276 177.295 528.135 175.753 453.377 C217.829 442.046 266.246 464.646 315.36 464.646 C364.489 464.646 409.364 442.041 451.321 453.375" + }).setTransform({ + xx: 1.25, + xy: 0, + yx: 0, + yy: -1.25, + dx: -177.58928, + dy: 1234.05859 + }).setFill({ + type: "linear", + x1: 175.75301, + y1: 442.04099, + x2: 175.75301, + y2: 588.32703, + colors: [{ + offset: 0, + color: this.color + }, { + offset: 1, + color: lighterColor2 + }] + }); + this._gaugeBackground.createPath({ + path: "M0 0 C-1.543 74.8 -62.666 134.952 -137.83 134.927 C-212.962 134.901 -274.026 74.76 -275.568 0.002 C-233.492 -11.329 -185.075 11.271 -135.961 11.271 C-86.832 11.271 -41.957 -11.334 0 0" + }).setTransform({ + xx: 1.25, + xy: 0, + yx: 0, + yy: -1.25, + dx: 386.81123, + dy: 667.59241 + }).setFill([255, 255, 255, 0.12157]); + }, + + + drawForeground: function(group){ + // summary: + // Draws the foreground of the gauge + // group: dojox.gfx.Group + // The GFX group where the foreground must be drawn + var scale = Math.min((this.width / this._designWidth), (this.height / this._designHeight)); + var transform = { + xx: scale, + xy: 0, + yx: 0, + yy: scale, + dx: (-160) * scale + (this.width - scale * this._designWidth) / 2, + dy: (-264.5) * scale + (this.height - scale * this._designHeight) / 2 + }; + + var lighterColor1 = Color.blendColors(new Color(this.color), new Color('white'), 0.4); + var lighterColor2 = Color.blendColors(new Color(this.color), new Color('white'), 0.8); + + if (this._foreground) { + this._foreground.setTransform(transform); + return; + } + this._foreground = group.createGroup(); + this._foreground.setTransform(transform); + + var group1 = this._foreground.createGroup().setTransform({ + xx: 1.25, + xy: 0, + yx: 0, + yy: -1.25, + dx: -43.30358, + dy: 1015.57642 + }); + group1.createPath({ + path: "M0 0 C0.004 -12.579 -10.189 -22.779 -22.768 -22.784 C-35.349 -22.788 -45.549 -12.594 -45.553 -0.016 L-45.553 0 C-45.558 12.579 -35.363 22.779 -22.783 22.784 C-10.205 22.788 -0.004 12.594 0 0.015 L0 0 Z" + }).setTransform({ + xx: 1, + xy: 0, + yx: 0, + yy: 1, + dx: 336.31049, + dy: 451.43359 + }).setFill(this.color); + + group1.createPath({ + path: "M333.443 451.434 C333.446 440.438 324.537 431.523 313.541 431.519 C302.546 431.515 293.63 440.425 293.626 451.42 L293.626 451.434 C293.622 462.429 302.532 471.345 313.527 471.349 C324.523 471.353 333.439 462.442 333.443 451.447 L333.443 451.434 Z" + }).setFill({ + type: "linear", + x1: 293.62201, + y1: 431.51501, + x2: 293.62201, + y2: 451.43401, + colors: [{ + offset: 0, + color: lighterColor1 + }, { + offset: 1, + color: this.color + }] + }); + + group1.createPath({ + path: "M333.438 451.858 C333.215 462.663 324.386 471.353 313.528 471.349 C302.675 471.345 293.854 462.658 293.632 451.858 C299.709 450.222 306.702 453.486 313.799 453.486 C320.895 453.486 327.377 450.221 333.438 451.858" + }).setFill({ + type: "linear", + x1: 293.63199, + y1: 450.22101, + x2: 293.63199, + y2: 471.353, + colors: [{ + offset: 0, + color: this.color + }, { + offset: 1, + color: lighterColor2 + }] + }); + + group1.createPath({ + path: "M0 0 C-0.223 10.805 -9.052 19.494 -19.909 19.49 C-30.763 19.486 -39.583 10.799 -39.806 0 C-33.729 -1.636 -26.735 1.628 -19.639 1.628 C-12.543 1.628 -6.061 -1.638 0 0" + }).setTransform({ + xx: 1, + xy: 0, + yx: 0, + yy: 1, + dx: 333.4375, + dy: 451.8584 + }).setFill([255, 255, 255, 0.12157]); + + } + + +}); +}); diff --git a/js/dojo/dojox/gauges/Range.js b/js/dojo/dojox/gauges/Range.js new file mode 100644 index 0000000..741edcd --- /dev/null +++ b/js/dojo/dojox/gauges/Range.js @@ -0,0 +1,74 @@ +//>>built +define("dojox/gauges/Range", ["dojo/_base/declare","dijit/_Widget"], + function(declare, Widget) { + +/*===== + Widget = dijit._Widget; +=====*/ + +return declare("dojox.gauges.Range", [Widget], { + // summary: + // a range to be used in a _Gauge + // + // description: + // a range widget, which has given properties. drawn by a _Gauge. + // + // example: + // | <script type="text/javascript"> + // | require(["dojox/gauges/AnalogGauge"]); + // | </script> + // | ... + // | <div dojoType="dojox.gauges.AnalogGauge" + // | id="testGauge" + // | width="300" + // | height="200" + // | cx=150 + // | cy=175 + // | radius=125 + // | image="gaugeOverlay.png" + // | imageOverlay="false" + // | imageWidth="280" + // | imageHeight="155" + // | imageX="12" + // | imageY="38"> + // | <div dojoType="dojox.gauges.Range" + // | low=5 + // | high=10 + // | hover="5 - 10" + // | ></div> + // | <div dojoType="dojox.gauges.Range" + // | low=10 + // | high=20 + // | hover="10 - 20" + // | ></div> + // | </div> + + // low: Number + // the low value of the range + low: 0, + + // high: Number + // the high value of the range + high: 0, + + // hover: String + // the text to put in the tooltip for the gauge + hover: '', + + // color: Object + // the color of the range. This must be an object of one of two forms: + // {'color': 'color-name'} + // OR + // (for a gradient:) + // {'type': 'linear', 'colors': [{offset: 0, color:'#C0C0C0'}, {offset: 1, color: '#E0E0E0'}] } + color: null, + + // size: Number + // for a circular gauge (such as an AnalogGauge), this dictates the size of the arc + size: 0, + + startup: function(){ + this.color = this.color ? ( this.color.color || this.color) : 'black'; + } +}); +});
\ No newline at end of file diff --git a/js/dojo/dojox/gauges/TextIndicator.js b/js/dojo/dojox/gauges/TextIndicator.js new file mode 100644 index 0000000..8f4fcb6 --- /dev/null +++ b/js/dojo/dojox/gauges/TextIndicator.js @@ -0,0 +1,79 @@ +//>>built +define("dojox/gauges/TextIndicator", ["dojo/_base/declare","./_Indicator"], + function(declare, Indicator) { + +/*===== + Indicator = dojox.gauges._Indicator; +=====*/ + +return declare("dojox.gauges.TextIndicator", [Indicator], { + // summary: + // A gauge indicator the simply draws its value as text. + + + // x: Number + // The x coordinate of the indicator + x: 0, + + // y: Number + // The y coordinate of the indicator + y: 0, + + // align: String + // The horizontal alignment of the text, the value can be 'middle' (the default), 'left' or 'right' + align: 'middle', + + // fixedPrecision: Boolean + // Indicates that the number is displayed in fixed precision or not (precision is defined by the 'precision' property (default is true). + fixedPrecision: true, + + // precision: Number + // The number of tailing digits to display the value of the indicator when the 'fixedPrecision' property is set to true (default is 0). + precision: 0, + + draw: function(group, /*Boolean?*/ dontAnimate){ + // summary: + // Override of dojox.gauges._Indicator.draw + var v = this.value; + + if (v < this._gauge.min) { + v = this._gauge.min; + } + if (v > this._gauge.max) { + v = this._gauge.max; + } + var txt; + var NumberUtils = this._gauge ? this._gauge._getNumberModule() : null; + if (NumberUtils) { + txt = this.fixedPrecision ? NumberUtils.format(v, { + places: this.precision + }) : NumberUtils.format(v); + } else { + txt = this.fixedPrecision ? v.toFixed(this.precision) : v.toString(); + } + + var x = this.x ? this.x : 0; + var y = this.y ? this.y : 0; + var align = this.align ? this.align : "middle"; + if(!this.shape){ + this.shape = group.createText({ + x: x, + y: y, + text: txt, + align: align + }); + }else{ + this.shape.setShape({ + x: x, + y: y, + text: txt, + align: align + }); + } + this.shape.setFill(this.color); + if (this.font) this.shape.setFont(this.font); + + } + +}); +}); diff --git a/js/dojo/dojox/gauges/_Gauge.css b/js/dojo/dojox/gauges/_Gauge.css new file mode 100644 index 0000000..46dd7fb --- /dev/null +++ b/js/dojo/dojox/gauges/_Gauge.css @@ -0,0 +1,63 @@ +@CHARSET "ISO-8859-1"; + +.dojoxGaugeContent { + font-family: Verdana; + border-width: 1px; + border-style: solid; + border-color: #CCCCCC; +} + +.dojoxGaugeRange1 { + fill: #606060 ; + stroke: #606060 ; +} + +.dojoxGaugeRange2 { + fill: #707070 ; + stroke: #707070 ; +} + +.dojoxGaugeRange3 { + fill: #808080 ; + stroke: #808080 ; +} + +.dojoxGaugeRange4 { + fill: #909090 ; + stroke: #909090 ; +} + +.dojoxGaugeRange5 { + fill: #A0A0A0; + stroke: #A0A0A0; +} + +.dojoxGaugeRange6 { + fill: #B0B0B0; + stroke: #B0B0B0; +} + +.dojoxGaugeRange7 { + fill: #C0C0C0; + stroke: #C0C0C0; +} + +.dojoxGaugeRange8 { + fill: #D0D0D0; + stroke: #D0D0D0; +} + +.dojoxGaugeRange9 { + fill: #E0E0E0; + stroke: #E0E0E0; +} + +.dojoxGaugeRange10 { + fill: #F0F0F0; + stroke: #F0F0F0; +} + +.testing { + fill: blue; + stroke: blue; +} diff --git a/js/dojo/dojox/gauges/_Gauge.js b/js/dojo/dojox/gauges/_Gauge.js new file mode 100644 index 0000000..cb050fe --- /dev/null +++ b/js/dojo/dojox/gauges/_Gauge.js @@ -0,0 +1,845 @@ +//>>built +define("dojox/gauges/_Gauge", ["dojo/_base/declare","dojo/_base/lang","dojo/_base/html","dojo/_base/array","dojo/_base/event", + "dojo/_base/connect","dojo/dom-construct", "dijit/_Widget", "dojox/gfx", "./Range", "dojo/fx/easing"], + function(declare, lang, html, arr, event, connect, dom, Widget, gfx, Range) { + + var _tooltipModule = 0; + var _numberModule = 0; + +/*===== + Widget = dijit._Widget; +=====*/ + +return declare("dojox.gauges._Gauge",[Widget],{ + // summary: + // The abstract base class for gauges. + // + // description: + // using dojo.gfx (and thus either SVG or VML based on what is supported), this widget + // builds a gauge component, used to display numerical data in a familiar format. + // This widget is not to be used alone. it is meant to be subclassed, such as + // dojox.gauges.BarGauge or dojox.gauges.AnalogGauge + + // width: Number + // The width of the gauge (default is 300) + width: 0, + + // height: Number + // The height of the gauge (default is 200) + height: 0, + + // background: Object + // The color of the background. This must be an object of one of two forms: + // {'color': 'color-name'} + // OR + // (for a gradient:) + // {'type': 'linear', 'x1': 0, 'x2': 0, 'y1': 0, 'y2': 200, 'colors': [{offset: 0, color:'#C0C0C0'}, {offset: 1, color: '#E0E0E0'}] } + background: null, + + // image: String + // Background image for gauge (default is no image) + image: null, + + // useRangeStyles: Number + // Indicates whether to use given css classes (dojoxGaugeRangeXX) + // to determine the color (and other style attributes?) of the ranges + // this value should be the number of dojoxGaugeRange classes that are + // defined, starting at dojoxGaugeRange1 (0 indicates falling to default + // hardcoded colors) + useRangeStyles: 0, + + // useTooltip: Boolean + // Indicates whether tooltips should be displayed for ranges, indicators, etc. + useTooltip: true, + + // majorTicks: Object + // An object representing the tick marks that should be added to the gauge. Major tick marks have a text label + // indicating the value. The object can have the following attributes (required are marked with a *): + // - offset: the distance from the 'center' of the gauge. Used differently for Analog vs. Bar + // - width: The width of the mark + // - length: The length of the mark + // - interval: The interval the ticks should be added on + // - color: The color of the mark and text + // - font: an object with any/all of the following parameters: + // {family: "Helvetica", style: "italic", variant: 'small-caps', weight: 'bold', size: "18pt"} + majorTicks: null, + + // minorTicks: Object + // An object of the same format as majorTicks, indicating where the minor (label-less) marks should be placed + // The font parameter is ignored if provided since minor tick marks have no text label. + minorTicks: null, + + // _defaultIndicator: Object + // Should be overridden by any extending classes and used to indicate what the 'default' indicator is. + // This object is used as the indicator when creating tick marks or when an anonymous object is passed into + // addIndicator. + _defaultIndicator: null, + + // defaultColors: Array + // Set of default colors to color ranges with. + defaultColors: [[0x00,0x54,0xAA,1], + [0x44,0x77,0xBB,1], + [0x66,0x99,0xCC,1], + [0x99,0xBB,0xEE,1], + [0x99,0xCC,0xFF,1], + [0xCC,0xEE,0xFF,1], + [0xDD,0xEE,0xFF,1]], + + // min: Number + // The minimum value of the gauge. Normally not set explicitly, as it will be determined by + // the ranges that are added. + min: null, + + // max: Number + // The maximum value of the gauge. Normally not set explicitly, as it will be determined by + // the ranges that are added. + max: null, + + // surface: Object + // The GFX surface that the shapes are drawn on. Can be accessed/used by indicators to draw themselves + surface: null, + + // hideValues: Boolean + // Indicates whether the text boxes showing the value of the indicator (as text + // content) should be hidden or shown. Default is not hidden, aka shown. + hideValues: false, + + // internal data + gaugeContent: undefined, + _backgroundDefault: {color: '#E0E0E0'}, + _rangeData: null, + _indicatorData: null, + _drag: null, + _img: null, + _overOverlay: false, + _lastHover: '', + + startup: function(){ + // handle settings from HTML by making sure all the options are + // converted correctly to numbers and that we calculate defaults + // for cx, cy and radius + if(this.image === null){ + this.image={}; + } + + this.connect(this.gaugeContent, 'onmousedown', this.handleMouseDown); + this.connect(this.gaugeContent, 'onmousemove', this.handleMouseMove); + this.connect(this.gaugeContent, 'onmouseover', this.handleMouseOver); + this.connect(this.gaugeContent, 'onmouseout', this.handleMouseOut); + this.connect(this.gaugeContent, 'touchstart', this.handleTouchStart); + this.connect(this.gaugeContent, 'touchend', this.handleTouchEnd); + this.connect(this.gaugeContent, 'touchmove', this.handleTouchMove); + + if(!lang.isArray(this.ranges)){ this.ranges = []; } + if(!lang.isArray(this.indicators)){ this.indicators = []; } + var ranges = [], indicators = []; + var i; + if(this.hasChildren()){ + var children = this.getChildren(); + for(i=0; i<children.length; i++){ + if(/.*Indicator/.test(children[i].declaredClass)){ + indicators.push(children[i]); + //this.addIndicator(children[i]); + continue; + } + + switch(children[i].declaredClass){ + case Range.prototype.declaredClass: + ranges.push(children[i]); + break; + } + } + this.ranges = this.ranges.concat(ranges); + this.indicators = this.indicators.concat(indicators); + } + if(!this.background){ this.background = this._backgroundDefault; } + this.background = this.background.color || this.background; + if(!this.surface){ this.createSurface(); } + + this.addRanges(this.ranges); + if(this.minorTicks && this.minorTicks.interval){ + this.setMinorTicks(this.minorTicks); + } + if(this.majorTicks && this.majorTicks.interval){ + this.setMajorTicks(this.majorTicks); + } + for(i=0; i<this.indicators.length; i++){ + this.addIndicator(this.indicators[i]); + } + this.inherited(arguments); + }, + + hasChildren: function(){ + // summary: + // Returns true if widget has children, i.e. if this.containerNode contains something. + return this.getChildren().length > 0; // Boolean + }, + + buildRendering: function(){ + // summary: + // Overrides _Widget.buildRendering + var n = this.domNode = this.srcNodeRef ? this.srcNodeRef: dom.create("div"); + this.gaugeContent = dom.create("div", { + className: "dojoxGaugeContent" + }); + this.containerNode = dom.create("div"); + this.mouseNode = dom.create("div"); + while(n.hasChildNodes()){ + this.containerNode.appendChild(n.firstChild); + } + dom.place(this.gaugeContent, n); + dom.place(this.containerNode, n); + dom.place(this.mouseNode, n); + }, + + _setTicks: function(/*Object*/ oldTicks, /*Object*/ newTicks, /*Boolean*/ major){ + // summary: + // internal method used to clear existing tick marks, then add new ones + var i; + if (oldTicks && lang.isArray(oldTicks._ticks)){ + for (i = 0; i < oldTicks._ticks.length; i++){ + this._removeScaleTick(oldTicks._ticks[i]); + } + } + var t = { + length: newTicks.length, + offset: newTicks.offset, + noChange: true + }; + if (newTicks.color){ + t.color = newTicks.color; + } + if (newTicks.font){ + t.font = newTicks.font; + } + if (newTicks.labelPlacement){ + t.direction = newTicks.labelPlacement; + } + newTicks._ticks = []; + for (i=this.min;i<=this.max;i+=newTicks.interval){ + if (i==this.max&&this._isScaleCircular()) continue; // do not draw last tick on fully circular gauges + t.value=i; + if (major){ + var NumberUtils = this._getNumberModule(); + if (NumberUtils){ // use internationalization if loaded + t.label = (newTicks.fixedPrecision && newTicks.precision) ? NumberUtils.format(i, { + places: newTicks.precision + }): NumberUtils.format(i); + }else{ + t.label = (newTicks.fixedPrecision && newTicks.precision) ? i.toFixed(newTicks.precision): i.toString(); + } + } + newTicks._ticks.push(this._addScaleTick(t, major)); + } + return newTicks; + }, + + _isScaleCircular: function(){ + // summary: + // Internal method to check if the scale is fully circular + return false; + }, + + setMinorTicks: function(/*Object*/ ticks){ + // summary: + // Creates and draws the minor tick marks based on the passed object (expecting the same format + // as the minorTicks object documented above) + this.minorTicks = this._setTicks(this.minorTicks, ticks, false); + }, + + setMajorTicks: function(/*Object*/ ticks){ + // summary: + // Creates and draws the major tick marks based on the passed object (expecting the same format + // as the majorTicks object documented above) + this.majorTicks = this._setTicks(this.majorTicks, ticks, true); + }, + + postCreate: function(){ + if(this.hideValues){ + html.style(this.containerNode, "display", "none"); + } + html.style(this.mouseNode, 'width', '0'); + html.style(this.mouseNode, 'height', '0'); + html.style(this.mouseNode, 'position', 'absolute'); + html.style(this.mouseNode, 'z-index', '100'); + + if(this.useTooltip){ + require(["dijit/Tooltip"], dojo.hitch(this, function(Tooltip){ + Tooltip.show('test', this.mouseNode, !this.isLeftToRight()); + Tooltip.hide(this.mouseNode); + })); + } + }, + + _getNumberModule :function() { + // summary: + // Tests is AMD dojo/number is loaded + + if (_numberModule == 0) { + try { + _numberModule = require("dojo/number"); + } + catch (e) { + _numberModule = null; + } + } + return _numberModule; + }, + + createSurface: function(){ + // summary: + // Internal method used by the gauge to create the graphics surface area + this.gaugeContent.style.width = this.width + 'px'; + this.gaugeContent.style.height = this.height + 'px'; + this.surface = gfx.createSurface(this.gaugeContent, this.width, this.height); + + // create several groups where various gauge elements will be created. + this._backgroundGroup = this.surface.createGroup(); + this._rangeGroup = this.surface.createGroup(); + this._minorTicksGroup = this.surface.createGroup(); + this._majorTicksGroup = this.surface.createGroup(); + this._overlayGroup = this.surface.createGroup(); + this._indicatorsGroup = this.surface.createGroup(); + this._foregroundGroup = this.surface.createGroup(); + + this._background = this._backgroundGroup.createRect({x: 0, y: 0, width: this.width, height: this.height }); + this._background.setFill(this.background); + + if(this.image.url){ + var imageGroup = this._backgroundGroup; + if (this.image.overlay) + imageGroup = this._overlayGroup; + + this._img = imageGroup.createImage({width: this.image.width || this.width, height: this.image.height || this.height, src: this.image.url}); + if(this.image.x || this.image.y){ + this._img.setTransform({dx: this.image.x || 0, dy: this.image.y || 0}); + } + } + }, + + draw: function(){ + // summary: + // This function is used to draw (or redraw) the gauge. + // description: + // Draws the gauge by drawing the surface, the ranges, and the indicators. + var i; + if (!this.surface)return; + + this.drawBackground(this._backgroundGroup); + + if(this._rangeData){ + for(i=0; i<this._rangeData.length; i++){ + this.drawRange(this._rangeGroup, this._rangeData[i]); + } + } + + if(this._minorTicksData){ + for(i=0; i<this._minorTicksData.length; i++){ + this._minorTicksData[i].draw(this._minorTicksGroup); + } + } + if(this._majorTicksData){ + for(i=0; i<this._majorTicksData.length; i++){ + this._majorTicksData[i].draw(this._majorTicksGroup); + } + } + + if(this._indicatorData){ + for(i=0; i<this._indicatorData.length; i++){ + this._indicatorData[i].draw(this._indicatorsGroup); + } + } + this.drawForeground(this._foregroundGroup); + }, + + + drawBackground:function(group){ + // summary: + // This function is used to draw (or redraw) the background of the gauge. + // description: + // The method may be used by subclasses to draw (or redraw) the background of the gauge. + + }, + + drawForeground:function(group){ + // summary: + // This function is used to draw (or redraw) the foreground of the gauge. + // description: + // The method may be used by subclasses to draw (or redraw) the foreground of the gauge. + + }, + + setBackground: function(background){ + // summary: + // This method is used to set the background of the gauge after it is created. + // description: + // Sets the background using the given object. Must be the same 'type' of object + // as the original background argument. + // background: Object + // An object in one of the two forms: + // {'color': 'color-name'} + // OR + // (for a gradient:) + // {'type': 'linear', 'colors': [{offset: 0, color:'#C0C0C0'}, {offset: 1, color: '#E0E0E0'}] } + // If background is null or undefined, this will set the fill to this._backgroundDefault + if(!background){ background = this._backgroundDefault; } + this.background = background.color || background; + this._background.setFill(this.background); + }, + + addRange: function(/*Object*/range){ + // summary: + // This method is used to add a range to the gauge. + // description: + // Creates a range (colored area on the background of the gauge) + // based on the given arguments. + // range: Object + // A range is either a dojox.gauges.Range object, or a object + // with similar parameters (low, high, hover, etc.). + this.addRanges([range]); + }, + + addRanges: function(/*Array*/ranges){ + // summary: + // This method is used to add ranges to the gauge. + // description: + // Creates a range (colored area on the background of the gauge) + // based on the given arguments. + // range: Range + // A range is either a dojox.gauges.Range object, or a object + // with similar parameters (low, high, hover, etc.). + if(!this._rangeData){ + this._rangeData = []; + } + var range; + for(var i=0; i<ranges.length; i++){ + range = ranges[i]; + if((this.min === null) || (range.low < this.min)){this.min = range.low;} + if((this.max === null) || (range.high > this.max)){this.max = range.high;} + + if(!range.color){ + var colorIndex = this._rangeData.length % this.defaultColors.length; + if(gfx.svg && this.useRangeStyles > 0){ + colorIndex = (this._rangeData.length % this.useRangeStyles)+1; + range.color = {style: "dojoxGaugeRange"+colorIndex}; + }else{ + colorIndex = this._rangeData.length % this.defaultColors.length; + range.color = this.defaultColors[colorIndex]; + } + } + this._rangeData[this._rangeData.length] = range; + } + this.draw(); + }, + + _addScaleTick: function(/*Object*/indicator, /*Boolean*/ major){ + // summary: + // Adds a scale ticks, that is an indicator. + // description: + // This method adds a tick mark to the gauge + // indicator: dojox.gauges._Indicator + // A dojox.gauges._Indicator or an object with similar parameters + // (value, color, offset, etc.). + + if(!indicator.declaredClass){// !== 'dojox.gauges.Indicator'){ + // We were passed a plain object, need to make an indicator out of it. + indicator = new this._defaultIndicator(indicator); + } + + indicator._gauge = this; + if (major){ + if (!this._majorTicksData){ + this._majorTicksData = []; + } + this._majorTicksData[this._majorTicksData.length] = indicator; + indicator.draw(this._majorTicksGroup); + } else { + if (!this._minorTicksData){ + this._minorTicksData = []; + } + this._minorTicksData[this._minorTicksData.length] = indicator; + indicator.draw(this._minorTicksGroup); + } + return indicator; + }, + + _removeScaleTick: function(/*Object*/indicator){ + // summary: + // Removes the given scale tick from the gauge by calling it's remove function + // and removing it from the local cache. + var i; + if (this._majorTicksData) for (i = 0; i < this._majorTicksData.length; i++){ + if (this._majorTicksData[i] === indicator){ + this._majorTicksData.splice(i, 1); + indicator.remove(); + return; + } + } + if (this._minorTicksData) for (i = 0; i < this._minorTicksData.length; i++){ + if (this._minorTicksData[i] === indicator){ + this._minorTicksData.splice(i, 1); + indicator.remove(); + return; + } + } + }, + + addIndicator: function(/*Object*/indicator){ + // summary: + // This method is used to add an indicator to the gauge. + // description: + // This method adds an indicator, such as a t needle, + // to the gauge. + // indicator: dojox.gauges._Indicator + // A dojox.gauges._Indicator or an object with similar parameters + // (value, color, offset, etc.). + + if(!indicator.declaredClass){// !== 'dojox.gauges.Indicator'){ + // We were passed a plain object, need to make an indicator out of it. + indicator = new this._defaultIndicator(indicator); + } + indicator._gauge = this; + if(!indicator.hideValue){ + this.containerNode.appendChild(indicator.domNode); + } + if(!this._indicatorData){this._indicatorData = [];} + this._indicatorData[this._indicatorData.length] = indicator; + indicator.draw(this._indicatorsGroup); + return indicator; + }, + + removeIndicator: function(/*Object*/indicator){ + // summary: + // Removes the given indicator from the gauge by calling it's remove function + // and removing it from the local cache. + // indicator: dojox.gauges._Indicator + // The indicator to remove. + for(var i=0; i<this._indicatorData.length; i++){ + if(this._indicatorData[i] === indicator){ + this._indicatorData.splice(i, 1); + indicator.remove(); + break; + } + } + }, + + moveIndicatorToFront: function(/*Object*/indicator){ + // summary: + // This function is used to move an indicator the the front (top) + // of the gauge + // indicator: dojox.gauges._Indicator + // A dojox.gauges._Indicator or an object with similar parameters + // (value, color, offset, etc.). + if(indicator.shape) + indicator.shape.moveToFront(); + + }, + + drawText: function(/*dojox.gfx.Group*/ group, /*String*/txt, /*Number*/x, /*Number*/y, /*String?*/align, /*String?*/color, /*Object?*/font){ + // summary: + // This function is used draw text onto the gauge. The text object + // is also returned by the function so that may be removed later + // by calling removeText + // group: dojox.gfx.Group + // The GFX Group where the text will be added. + // txt: String + // The text to be drawn + // x: Number + // The x coordinate at which to place the text + // y: Number + // The y coordinate at which to place the text + // align?: String + // Indicates how to align the text + // Valid value is 'right', otherwise text is left-aligned + // color?: String + // Indicates the color of the text + // font?: Object + // A font object, generally of the following format: + // {family: "Helvetica", style: "italic", variant: 'small-caps', weight: 'bold', size: "18pt"} + + var t = group.createText({x: x, y: y, text: txt, align: align}); + t.setFill(color ? color: 'black'); + if (font) t.setFont(font); + return t; + }, + + removeText:function(/*String*/t){ + // summary: + // Removes a text element from the gauge. + // t: String + // The text to remove. + if (t.parent) + t.parent.remove(t); + }, + + updateTooltip: function(/*String*/txt, /*Event*/ e){ + // summary: + // Updates the tooltip for the gauge to display the given text. + // txt: String + // The text to put in the tooltip. + + if (this.useTooltip) { + require(["dijit/Tooltip"], dojo.hitch(this, function(Tooltip){ + if (this._lastHover != txt) { + if (txt !== '') { + Tooltip.hide(this.mouseNode); + Tooltip.show(txt, this.mouseNode, !this.isLeftToRight()); + } else { + Tooltip.hide(this.mouseNode); + } + this._lastHover = txt; + } + })); + } + }, + + handleMouseOver: function(/*Object*/e){ + // summary: + // This is an internal handler used by the gauge to support + // hover text + // e: Object + // The event object + + if (this.image && this.image.overlay){ + if (e.target == this._img.getEventSource()){ + var hover; + this._overOverlay = true; + var r = this.getRangeUnderMouse(e); + if (r && r.hover){ + hover = r.hover; + } + + if (this.useTooltip && !this._drag){ + if (hover){ + this.updateTooltip(hover, e); + } else { + this.updateTooltip('', e); + } + } + } + } + }, + + handleMouseOut: function(/*Object*/e){ + // summary: + // This is an internal handler used by the gauge to support + // hover text + // e: Object + // The event object + + this._overOverlay = false; + this._hideTooltip(); + }, + + handleMouseMove: function(/*Object*/e){ + // summary: + // This is an internal handler used by the gauge to support using + // the mouse to show the tooltips + // e: Object + // The event object + + if (this.useTooltip) { + if (e) { + html.style(this.mouseNode, 'left', e.pageX + 1 + 'px'); + html.style(this.mouseNode, 'top', e.pageY + 1 + 'px'); + } + if (this._overOverlay) { + var r = this.getRangeUnderMouse(e); + if (r && r.hover) { + this.updateTooltip(r.hover, e); + } else { + this.updateTooltip('', e); + } + } + } + }, + + handleMouseDown: function(e){ + // summary: + // This is an internal handler used by the gauge to support using + // the mouse to move indicators + // e: Object + // The event object + var indicator = this._getInteractiveIndicator(); + if (indicator){ + this._handleMouseDownIndicator(indicator, e); + } + }, + + _handleDragInteractionMouseMove: function(e){ + // summary: + // This is an internal handler used by the gauge to support using + // the mouse to drag an indicator to modify it's value + // e: Object + // The event object + + if(this._drag){ + this._dragIndicator(this, e); + event.stop(e); + } + }, + + _handleDragInteractionMouseUp: function(/*Object*/e){ + // summary: + // This is an internal handler used by the gauge to support using + // the mouse to drag an indicator to modify it's value + // e: Object + // The event object + this._drag = null; + + for (var i = 0 ; i < this._mouseListeners.length; i++){ + connect.disconnect(this._mouseListeners[i]); + } + this._mouseListeners = []; + event.stop(e); + }, + + _handleMouseDownIndicator: function (indicator, e){ + // summary: + // This is an internal handler used by the gauge to support using + // the mouse to drag an indicator to modify it's value + // indicator: _Indicator + // The indicator object + // e:Object + // The event object + + if (!indicator.noChange){ + if (!this._mouseListeners) this._mouseListeners = []; + this._drag = indicator; + this._mouseListeners.push(connect.connect(document, "onmouseup", this, this._handleDragInteractionMouseUp)); + this._mouseListeners.push(connect.connect(document, "onmousemove", this, this._handleDragInteractionMouseMove)); + this._mouseListeners.push(connect.connect(document, "ondragstart", this, event.stop)); + this._mouseListeners.push(connect.connect(document, "onselectstart", this, event.stop)); + this._dragIndicator(this, e); + event.stop(e); + } + }, + + _handleMouseOverIndicator: function (indicator, e){ + // summary: + // This is an internal handler used by the gauge to support using + // the mouse to drag an indicator to modify it's value + // indicator: _Indicator + // The indicator object + // e: Object + // The event object + if (this.useTooltip && !this._drag){ + + if (indicator.hover){ + require(["dijit/Tooltip"], dojo.hitch(this, function(Tooltip){ + html.style(this.mouseNode, 'left', e.pageX + 1 + 'px'); + html.style(this.mouseNode, 'top', e.pageY + 1 + 'px'); + Tooltip.show(indicator.hover, this.mouseNode, !this.isLeftToRight()); + })); + } else { + this.updateTooltip('', e); + } + } + + if (indicator.onDragMove && !indicator.noChange){ + this.gaugeContent.style.cursor = 'pointer'; + } + }, + + _handleMouseOutIndicator: function (indicator, e){ + // summary: + // This is an internal handler used by the gauge to support using + // the mouse to drag an indicator to modify it's value + // indicator: _Indicator + // The indicator object + // e: Object + // The event object + this._hideTooltip(); + this.gaugeContent.style.cursor = 'pointer'; + + }, + + _hideTooltip: function(){ + if (this.useTooltip && this.mouseNode) { + require(["dijit/Tooltip"], dojo.hitch(this, function(Tooltip){ + Tooltip.hide(this.mouseNode); + })); + } + }, + + _handleMouseOutRange: function ( range, e){ + this._hideTooltip(); + }, + + _handleMouseOverRange: function (range, e){ + if (this.useTooltip && !this._drag){ + if (range.hover) { + html.style(this.mouseNode, 'left', e.pageX + 1 + 'px'); + html.style(this.mouseNode, 'top', e.pageY + 1 + 'px'); + require(["dijit/Tooltip"], dojo.hitch(this, function(Tooltip){ + Tooltip.show(range.hover, this.mouseNode, !this.isLeftToRight()); + })); + } else { + this.updateTooltip('', e); + } + } + }, + + handleTouchStartIndicator: function(indicator, e){ + // summary: + // This is an internal handler used by the gauge to support using + // touch events to drag an indicator to modify it's value + // indicator: _Indicator + // The indicator object + // e: Object + // The event object + if (!indicator.noChange){ + this._drag = indicator; + event.stop(e); + } + }, + + handleTouchStart: function(e){ + // summary: + // This is an internal handler used by the gauge to support using + // touch events to drag an indicator to modify it's value + // e: Object + // The touch event object + this._drag = this._getInteractiveIndicator(); + this.handleTouchMove(e); //drag indicator to touch position + }, + + handleTouchEnd: function(e){ + // summary: + // This is an internal handler used by the gauge to support using + // touch events to drag an indicator to modify it's value + // e: Object + // The touch e object + if (this._drag){ + this._drag = null; + event.stop(e); + } + }, + + handleTouchMove: function(e){ + // summary: + // This is an internal handler used by the gauge to support using + // touch events to drag an indicator to modify it's value + // e: Object + // The touch event object + + if (this._drag && !this._drag.noChange){ + var touches = e.touches; + var firstTouch = touches[0]; + this._dragIndicatorAt(this, firstTouch.pageX, firstTouch.pageY); + event.stop(e); + } + }, + + _getInteractiveIndicator: function(){ + for (var i = 0; i < this._indicatorData.length; i++){ + var indicator = this._indicatorData[i]; + if (indicator.interactionMode == "gauge" && !indicator.noChange){ + return indicator; + } + } + return null; + } +}); +}); + diff --git a/js/dojo/dojox/gauges/_Indicator.js b/js/dojo/dojox/gauges/_Indicator.js new file mode 100644 index 0000000..6e614d4 --- /dev/null +++ b/js/dojo/dojox/gauges/_Indicator.js @@ -0,0 +1,261 @@ +//>>built +define("dojox/gauges/_Indicator", ["dojo/_base/lang","dojo/_base/declare","dojo/_base/fx","dojo/_base/html","dojo/_base/connect","dijit/_Widget","dojo/dom-construct", "dojo/dom-class"], +function(lang,declare,fx,html,connect,Widget,dom,domClass) { + +/*===== + Widget = dijit._Widget; +=====*/ + +return declare("dojox.gauges._Indicator",[Widget],{ + // summary: + // An indicator to be used in a gauge + // + // description: + // An indicator widget, which has given properties. drawn by a gauge. + // + // example: + // | <script type="text/javascript"> + // | require(["dojox/gauges/AnalogGauge","dojox/gauges/Indicator"]); + // | </script> + // | ... + // | <div dojoType="dojox.gauges.AnalogGauge" + // | id="testGauge" + // | width="300" + // | height="200" + // | cx=150 + // | cy=175 + // | radius=125 + // | image="gaugeOverlay.png" + // | imageOverlay="false" + // | imageWidth="280" + // | imageHeight="155" + // | imageX="12" + // | imageY="38"> + // | <div dojoType="dojox.gauges.Indicator" + // | value=17 + // | type="arrow" + // | length=135 + // | width=3 + // | hover="Value: 17" + // | onDragMove="handleDragMove"> + // | </div> + // | </div> + + // value: Number + // The value (on the gauge) that this indicator should be placed at + value: 0, + + // type: String + // The type of indicator to draw. Varies by gauge type. Some examples include + // "line", "arrow", and "bar" + type: '', + + // color: String + // The color of the indicator. + color: 'black', + + // strokeColor: String + // The color to stroke the outline of the indicator. + strokeColor: '', + + // label: String + // The text label for the indicator. + label: '', + + // font: Object + // The font for the indicator. The font is enerally in a format similar to: + // {family: "Helvetica", weight: "bold", style: "italic", size: "18pt", rotated: true} + font: {family: "sans-serif", size: "12px"}, + + // length: Number + // The length of the indicator. In the above example, the radius of the AnalogGauge + // is 125, but the length of the indicator is 135, meaning it would project beyond + // the edge of the AnalogGauge + length: 0, + + // width: Number + // The width of the indicator. + width: 0, + + // offset: Number + // The offset of the indicator + offset: 0, + + // hover: String + // The string to put in the tooltip when this indicator is hovered over. + hover: '', + + // front: boolean + // Keep this indicator at the front + front: false, + + // onDragMove: String + // The function to call when this indicator is moved by dragging. + // onDragMove: '', + + // easing: String|Object + // indicates the easing function to be used when animating the of an indicator. + easing: fx._defaultEasing, + + // duration: Number + // indicates how long an animation of the indicator should take + duration: 1000, + + // hideValues: Boolean + // Indicates whether the text boxes showing the value of the indicator (as text + // content) should be hidden or shown. Default is not hidden, aka shown. + hideValue: false, + + // noChange: Boolean + // Indicates whether the indicator's value can be changed. Useful for + // a static target indicator. Default is false (that the value can be changed). + noChange: false, + + // interactionMode: String + // The interactionMode can have two values: "indicator" (the default) or "gauge". + // When the value is "indicator", the user must click on the indicator to change the value. + // When the value is "gauge", the user can click on the gauge to change the indicator value. + // If a gauge contains several indicators with the indicatorMode property set to "gauge", then + // only the first indicator will be moved when clicking the gauge. + interactionMode: "indicator", + + _gauge: null, + + // title: String + // The title of the indicator, to be displayed next to it's input box for the text-representation. + title: "", + + startup: function(){ + if(this.onDragMove){ + this.onDragMove = lang.hitch(this.onDragMove); + } + if (this.strokeColor === ""){ + this.strokeColor = undefined; + } + }, + + postCreate: function(){ + if(this.title === ""){ + html.style(this.domNode, "display", "none"); + } + if(lang.isString(this.easing)){ + this.easing = lang.getObject(this.easing); + } + }, + + buildRendering: function(){ + // summary: + // Overrides _Widget.buildRendering + + var n = this.domNode = this.srcNodeRef ? this.srcNodeRef: dom.create("div"); + domClass.add(n, "dojoxGaugeIndicatorDiv"); + var title = dom.create("label"); + if (this.title) title.innerHTML = this.title + ":"; + dom.place(title, n); + this.valueNode = dom.create("input", { + className: "dojoxGaugeIndicatorInput", + size: 5, + value: this.value + }); + + dom.place(this.valueNode, n); + connect.connect(this.valueNode, "onchange", this, this._update); + }, + + _update: function(){ + // summary: + // A private function, handling the updating of the gauge + + this._updateValue(true); + }, + + _updateValue: function(animate){ + // summary: + // A private function, handling the updating of the gauge + var value = this.valueNode.value; + if(value === ''){ + this.value = null; + }else{ + this.value = Number(value); + this.hover = this.title+': '+value; + } + if(this._gauge){ + this.draw(this._gauge._indicatorsGroup, animate || animate==undefined ? false: true); + this.valueNode.value = this.value; + if((this.title == 'Target' || this.front) && this._gauge.moveIndicator){ + // if re-drawing value, make sure target is still on top + this._gauge.moveIndicatorToFront(this); + } + this.valueChanged(); + } + }, + + valueChanged: function(){ + // summary: + // Invoked every time the value of the indicator changes. + + }, + + update: function(value, animate){ + // summary: + // Updates the value of the indicator, including moving/re-drawing at it's new location and + // updating the text box + if(!this.noChange){ + this.valueNode.value = value; + this._updateValue(animate); + } + }, + + handleMouseOver: function(e){ + // summary: + // Handles mouse-over events in the indicator. + this._gauge._handleMouseOverIndicator(this, e); + }, + + handleMouseOut: function(e){ + // summary: + // Handles mouse-out events in the indicator. + this._gauge._handleMouseOutIndicator(this,e); + this._gauge.gaugeContent.style.cursor = ''; + }, + + handleMouseDown: function(e){ + // summary: + // Handles mouse-down events in the indicator. + this._gauge._handleMouseDownIndicator(this,e); + }, + + handleTouchStart: function(e){ + // summary: + // Handles touch start events in the indicator. + this._gauge.handleTouchStartIndicator(this, e); + }, + + onDragMove: function(){ + // summary: + // Handles updating the text box and the hover text while dragging an indicator + this.value = Math.floor(this.value); + this.valueNode.value = this.value; + this.hover = this.title+': '+this.value; + }, + + draw: function(/* Boolean? */ dontAnimate){ + // summary: + // Performs the initial drawing of the indicator. + // dontAnimate: Boolean + // Indicates if the drawing should not be animated (rather than teh default, to animate) + }, + + remove: function(){ + // summary: + // Removes the indicator's shape from the gauge surface. + if (this.shape) + this.shape.parent.remove(this.shape); + this.shape = null; + if(this.text){ + this.text.parent.remove(this.text); + } + this.text = null; + } +}); +}); |