This plugin provides images with capabilities of a knob. It works with Sencha Touch 2 and above.
This is a plugin that can be added to an image class of sencha touch 2 and above. This provides various functionality of a rotating knob. There are currently 3 modes the knob will work.
Go to the demo page to see it in action.
Continous
Here the knob will rotate a whole 360 degree angle.
Sectors
Here the 360 degree will be divided into a number of sectors. So the knob will only snap to middle of the sector.
Arc
We can specify and arc range in degree's and an offset angle. In this mode, the knob will only rotate in the specified arc range.
knobValue
{Number} knobValue The value set for the knob.
When the sectorCount is 360, knobValue can be between 0 and 360.
When sectorCount is less than 360, the knob value must be between 1 and the sectorCount.
sectorCount
{Number} sectorCount Number of sectors the circle should be divided into.
The default is 360.
The value must be 0 > x <= 360.
sectorThreshold
{Number} sectorThreshold This specifies a range in which the knob should snap to the nearest sector point.
The default is 10.
So if 45 is a sector point, the knob will snap when it reaches an angle between 35 and 55.
arcAngle
{Number} arcAngle The arc range in degree in which the knob will rotate.
The value must be 0 > x < 360.
arcOffset
{Number} arcOffset This spectifies the offset in whoch the arc should begin.
Default value is 0.
The value must be 0 > x < 360.
turn
This event will fire for the image the plugin is attached to.
Parameters
* angle
Angle at which the knob is rotated to.
0 starts from the top and move's in clockwise direction.
* value
Value of the knob.
For continous mode, the value will be the same as the angle.
For sectors mode, the value will be the sector number at which the knob is currently at.
For arc, mode, the value will be between 0, and the arcAngle.
For continous mode
{
xtype:'img',
src:'images/arrow.png',
width:128,
height:128,
centered:true,
plugins:[
{
xclass:'Ext.plugin.Knob'
}
],
listeners:{
turn:function(angle,value){
}
}
}
For sectors mode,
{
xtype:'img',
src:'images/arrow.png',
width:128,
height:128,
centered:true,
plugins:[
{
xclass:'Ext.plugin.Knob',
sectorCount:12
}
],
listeners:{
turn:function(angle,value){
}
}
}
For arc mode,
{
xtype:'img',
src:'images/arrow.png',
width:128,
height:128,
centered:true,
plugins:[
{
xclass:'Ext.plugin.Knob',
arcAngle:270,
arcOffset:45
}
],
listeners:{
turn:function(angle,value){
}
}
}
1.0
1.1