API Preview tool | The Dojo Toolkit

Namespaces

dijit

dojo

dojox

▼

◀

▶

Crude API Browser

dojox/widget/AnalogGauge.js

Provides:
- dojox.widget.AnalogGauge
Requires:
- dojox.gfx in common
- dojox.widget.gauge._Gauge in common
dojox.widget.gauge.AnalogLineIndicator
- type
```
Function
```
- chains:
  - dojox.widget.gauge._Indicator: (prototype)
  - dojox.widget.gauge._Indicator: (call)
- summary
dojox.widget.gauge.AnalogLineIndicator._getShapes
- type
```
Function
```
- source: [view]
    return [this._gauge.surface.createLine({x1: 0, y1: -this.offset,
               x2: 0, y2: -this.length-this.offset})
       .setStroke({color: this.color, width: this.width})];
- 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).
```
dojox.widget.gauge.AnalogLineIndicator.draw
- type
```
Function
```
- parameters:
  - dontAnimate: (typeof Boolean)
```
Indicates if the drawing should not be animated (vs. the default of doing an animation)
```
- source: [view]
    if(this.shapes){
     this._move(dontAnimate);
    }else{
     if(this.text){
      this._gauge.surface.rawNode.removeChild(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';
  
     this.shapes = this._getShapes(this._gauge, this);
  
     if(this.shapes){
      for(var s = 0; s < this.shapes.length; s++){
       this.shapes[s].setTransform([{dx:this._gauge.cx,dy:this._gauge.cy}, dojox.gfx.matrix.rotateg(a)]);
       if(this.hover){
        this.shapes[s].getEventSource().setAttribute('hover',this.hover);
       }
       if(this.onDragMove && !this.noChange){
        //TODO
        this._gauge.connect(this.shapes[s].getEventSource(), 'onmousedown', this._gauge.handleMouseDown);
        this.shapes[s].getEventSource().style.cursor = 'pointer';
       }
      }
     }
  
     if(this.label){
      var len=this.length+this.offset,
       rad=this._gauge._getRadians(a),
       x=this._gauge.cx+(len+5)*Math.sin(rad),
       y=this._gauge.cy-(len+5)*Math.cos(rad),
       align = 'start',
       aa = Math.abs(a)
      ;
      if(a <= -10){align = 'end';}
      if(aa < 10){align='middle';}
      var vAlign = 'bottom';
      if(aa > 90){vAlign = 'top';}
      this.text = this._gauge.drawText(''+this.label, x, y, align, vAlign, this.color, this.font);
     }
     this.currentValue = this.value;
    }
- summary
```
Override of dojox.widget.gauge._Indicator.draw
```
dojox.widget.gauge.AnalogLineIndicator._move
- type
```
Function
```
- parameters:
  - dontAnimate: (typeof Boolean)
```
Indicates if the drawing should not be animated (vs. the default of doing an animation)
```
- source: [view]
    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);
     for(var i in this.shapes){
      this.shapes[i].setTransform([{dx:this._gauge.cx,dy:this._gauge.cy}, dojox.gfx.matrix.rotateg(angle)]);
      if(this.hover){
       this.shapes[i].getEventSource().setAttribute('hover',this.hover);
      }
     }
    }else{
     if(c!=v){
      var anim = new dojo.Animation({curve: [c, v], duration: this.duration, easing: this.easing});
      dojo.connect(anim, "onAnimate", dojo.hitch(this, function(step){
       for(var i in this.shapes){
        this.shapes[i].setTransform([{dx:this._gauge.cx,dy:this._gauge.cy}, dojox.gfx.matrix.rotateg(this._gauge._getAngle(step))]);
        if(this.hover){
         this.shapes[i].getEventSource().setAttribute('hover',this.hover);
        }
       }
       this.currentValue = step;
      }));
      anim.play();
     }
    }
- summary
```
Moves this indicator (since it's already been drawn once)
```
dojox.widget.gauge.AnalogLineIndicator.text
- summary
dojox.widget.gauge.AnalogLineIndicator.color
- summary
dojox.widget.gauge.AnalogLineIndicator.length
- summary
dojox.widget.gauge.AnalogLineIndicator.width
- summary
dojox.widget.gauge.AnalogLineIndicator.offset
- summary
dojox.widget.gauge.AnalogLineIndicator.highlight
- summary
dojox.widget.gauge.AnalogLineIndicator.shapes
- summary
dojox.widget.gauge.AnalogLineIndicator.currentValue
- summary

dojox.widget.AnalogGauge

type
```
Function
```
chains:
- dojox.widget.gauge._Gauge: (prototype)
- dojox.widget.gauge._Gauge: (call)

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

usage:
<script type="text/javascript">
dojo.require("dojox.widget.AnalogGauge");
dojo.require("dijit.util.parser");
</script>
...
<div	dojoType="dojox.widget.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>

dojox.widget.AnalogGauge.startAngle

type
```
Number
```

summary

angle (in degrees) for start of gauge (default is -90)

dojox.widget.AnalogGauge.endAngle

type
```
Number
```

summary

angle (in degrees) for end of gauge (default is 90)

dojox.widget.AnalogGauge.cx

type
```
Number
```

summary

center of gauge x coordinate (default is gauge width / 2)

dojox.widget.AnalogGauge.cy

type
```
Number
```

summary

center of gauge x coordinate (default is gauge height / 2)

dojox.widget.AnalogGauge.radius

type
```
Number
```

summary

radius of gauge (default is smaller of cx-25 or cy-25)

dojox.widget.AnalogGauge._defaultIndicator
- type
```
override
```
- summary
```
of dojox.widget._Gauge._defaultIndicator
```
dojox.widget.AnalogGauge.startup
- type
```
Function
```
- source: [view]
  dojo.provide("dojox.widget.AnalogGauge");
  
  dojo.require("dojox.gfx");
  dojo.require("dojox.widget.gauge._Gauge");
  
  dojo.experimental("dojox.widget.AnalogGauge");
  
  dojo.declare("dojox.widget.gauge.AnalogLineIndicator",[dojox.widget.gauge._Indicator],{
  _getShapes: function(){
    // 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).
    return [this._gauge.surface.createLine({x1: 0, y1: -this.offset,
               x2: 0, y2: -this.length-this.offset})
       .setStroke({color: this.color, width: this.width})];
  },
  draw: function(/*Boolean?*/ dontAnimate){
    // summary:
    //  Override of dojox.widget.gauge._Indicator.draw
    // dontAnimate: Boolean
    //  Indicates if the drawing should not be animated (vs. the default of doing an animation)
    if(this.shapes){
     this._move(dontAnimate);
    }else{
     if(this.text){
      this._gauge.surface.rawNode.removeChild(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';
  
     this.shapes = this._getShapes(this._gauge, this);
  
     if(this.shapes){
      for(var s = 0; s < this.shapes.length; s++){
       this.shapes[s].setTransform([{dx:this._gauge.cx,dy:this._gauge.cy}, dojox.gfx.matrix.rotateg(a)]);
       if(this.hover){
        this.shapes[s].getEventSource().setAttribute('hover',this.hover);
       }
       if(this.onDragMove && !this.noChange){
        //TODO
        this._gauge.connect(this.shapes[s].getEventSource(), 'onmousedown', this._gauge.handleMouseDown);
        this.shapes[s].getEventSource().style.cursor = 'pointer';
       }
      }
     }
  
     if(this.label){
      var len=this.length+this.offset,
       rad=this._gauge._getRadians(a),
       x=this._gauge.cx+(len+5)*Math.sin(rad),
       y=this._gauge.cy-(len+5)*Math.cos(rad),
       align = 'start',
       aa = Math.abs(a)
      ;
      if(a <= -10){align = 'end';}
      if(aa < 10){align='middle';}
      var vAlign = 'bottom';
      if(aa > 90){vAlign = 'top';}
      this.text = this._gauge.drawText(''+this.label, x, y, align, vAlign, this.color, this.font);
     }
     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 = Math.min(Math.max(this.value, this._gauge.min), this._gauge.max),
     c = this.currentValue
    ;
    if(dontAnimate){
     var angle = this._gauge._getAngle(v);
     for(var i in this.shapes){
      this.shapes[i].setTransform([{dx:this._gauge.cx,dy:this._gauge.cy}, dojox.gfx.matrix.rotateg(angle)]);
      if(this.hover){
       this.shapes[i].getEventSource().setAttribute('hover',this.hover);
      }
     }
    }else{
     if(c!=v){
      var anim = new dojo.Animation({curve: [c, v], duration: this.duration, easing: this.easing});
      dojo.connect(anim, "onAnimate", dojo.hitch(this, function(step){
       for(var i in this.shapes){
        this.shapes[i].setTransform([{dx:this._gauge.cx,dy:this._gauge.cy}, dojox.gfx.matrix.rotateg(this._gauge._getAngle(step))]);
        if(this.hover){
         this.shapes[i].getEventSource().setAttribute('hover',this.hover);
        }
       }
       this.currentValue = step;
      }));
      anim.play();
     }
    }
  }
  });
  dojo.declare("dojox.widget.AnalogGauge",dojox.widget.gauge._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
  //
  // usage:
  //
  //  ...
  //   //    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">
  //
  
  // 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,
  
  // _defaultIndicator: override of dojox.widget._Gauge._defaultIndicator
  _defaultIndicator: dojox.widget.gauge.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){
     dojo.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._oppositeMiddle = (this.startAngle+this.endAngle)/2+180;
  
    this.inherited(arguments);

summary

dojox.widget.AnalogGauge._getAngle

type
```
Function
```

parameters:

value: (typeof Number)

A value to be converted to an angle for this gauage.

source: [view]
return (value - this.min)/(this.max - this.min)*(this.endAngle - this.startAngle) + this.startAngle;

summary

This is a helper function used to determine the angle that represents
a given value on the gauge

dojox.widget.AnalogGauge._getValueForAngle

type
```
Function
```

parameters:

angle: (typeof Number)

A angle to be converted to a value for this gauge.

source: [view]
if(angle > this._oppositeMiddle){ angle -= 360; }
return (angle - this.startAngle)*(this.max - this.min)/(this.endAngle - this.startAngle) + this.min;

summary

This is a helper function used to determie the value represented by a
given angle on the gauge

dojox.widget.AnalogGauge._getRadians

type
```
Function
```

parameters:

angle: (typeof Number)

An angle, in degrees, to be converted to radians.

source: [view]
return angle*Math.PI/180;

summary

This is a helper function than converts degrees to radians

dojox.widget.AnalogGauge._getDegrees

type
```
Function
```

parameters:

radians: (typeof Number)

An angle, in radians, to be converted to degrees.

source: [view]
return radians*180/Math.PI;

summary

This is a helper function that converts radians to degrees

dojox.widget.AnalogGauge.draw

type
```
Function
```
source: [view]
  var i;
  if(this._rangeData){
   for(i=0; i    this.drawRange(this._rangeData[i]);
   }
   if(this._img && this.image.overlay){
    this._img.moveToFront();
   }
  }
  if(this._indicatorData){
   for(i=0; i    this._indicatorData[i].draw();
   }
  }

summary

This function is used to draw (or redraw) the gauge.

description

Draws the gauge by drawing the surface, the ranges, and the indicators.

dojox.widget.AnalogGauge.drawRange

type
```
Function
```

parameters:

range: (typeof Object)

A range is a dojox.widget.gauge.Range or an object
with similar parameters (low, high, hover, etc.).

source: [view]
  var path;
  if(range.shape){
   this.surface.remove(range.shape);
   range.shape = null;
  }
  var a1, a2;
  if((range.low == this.min) && (range.high == this.max) && ((this.endAngle - this.startAngle) == 360)){
   path = this.surface.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));
   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
   ;
   if((a2-a1)>Math.PI){big=1;}

   path = this.surface.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(dojo.isArray(range.color) || dojo.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{
   // 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);
  }
  if(range.hover){
   path.getEventSource().setAttribute('hover',range.hover);
  }
  range.shape = path;

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.

dojox.widget.AnalogGauge.getRangeUnderMouse

type
```
Function
```

parameters:

event: (typeof Object)

The event object as received by the mouse handling functions below.

source: [view]
  var range = null,
   pos = dojo.coords(this.gaugeContent),
   x = event.clientX - pos.x,
   y = event.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     if((Number(this._rangeData[i].low) <= value) && (Number(this._rangeData[i].high) >= value)){
      range = this._rangeData[i];
     }
    }
   }
  }
  return range;

summary

Determines which range the mouse is currently over

dojox.widget.AnalogGauge._dragIndicator

type
```
Function
```
parameters:
- widget: (typeof Object)
- event: (typeof Object)
source: [view]
  var pos = dojo.coords(widget.gaugeContent),
   x = event.clientX - pos.x,
   y = event.clientY - pos.y,
   angle = widget._getDegrees(Math.atan2(y - widget.cy, x - widget.cx) + Math.PI/2),
  //if(angle > widget.endAngle){angle = angle - 360;}
  // get value and restrict to our min/max
   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(true);
  dojo.stopEvent(event);

summary

Handles the dragging of an indicator, including moving/re-drawing
get angle for mouse position

dojox.widget.AnalogGauge._oppositeMiddle

summary

dojox.widget

type
```
Object
```
summary

dojox

type
```
Object
```
summary

dojox/widget/AnalogGauge.js

Provides:

Requires:

dojox.widget.gauge.AnalogLineIndicator

dojox.widget.gauge.AnalogLineIndicator._getShapes

dojox.widget.gauge.AnalogLineIndicator.draw

dojox.widget.gauge.AnalogLineIndicator._move

dojox.widget.gauge.AnalogLineIndicator.text

dojox.widget.gauge.AnalogLineIndicator.color

dojox.widget.gauge.AnalogLineIndicator.length

dojox.widget.gauge.AnalogLineIndicator.width

dojox.widget.gauge.AnalogLineIndicator.offset

dojox.widget.gauge.AnalogLineIndicator.highlight

dojox.widget.gauge.AnalogLineIndicator.shapes

dojox.widget.gauge.AnalogLineIndicator.currentValue

dojox.widget.AnalogGauge

dojox.widget.AnalogGauge.startAngle

dojox.widget.AnalogGauge.endAngle

dojox.widget.AnalogGauge.cx

dojox.widget.AnalogGauge.cy

dojox.widget.AnalogGauge.radius

dojox.widget.AnalogGauge._defaultIndicator

dojox.widget.AnalogGauge.startup

dojox.widget.AnalogGauge._getAngle

dojox.widget.AnalogGauge._getValueForAngle

dojox.widget.AnalogGauge._getRadians

dojox.widget.AnalogGauge._getDegrees

dojox.widget.AnalogGauge.draw

dojox.widget.AnalogGauge.drawRange

dojox.widget.AnalogGauge.getRangeUnderMouse

dojox.widget.AnalogGauge._dragIndicator

dojox.widget.AnalogGauge._oppositeMiddle

dojox.widget

dojox