Skip to main content

Knob

Namespace: Wisej.Web.Ext.jQueryKnob

Assembly: Wisej.Web.Ext.jQueryKnob (4.1.0.0)

Represents a touchable dial control based on jQuery Knob (jQuery-Knob).

public class Knob : Widget

The user changes the Value by dragging the dial, scrolling the mouse wheel or typing in the input field displayed in the center (see ShowInput). The dial is always round and sized to the smaller of Width and Height; the arc is drawn using the ForeColor over the BackColor.

Example:

Creating a volume knob that spans 270 degrees:

var knob = new Knob
{
    Size = new Size(150, 150),
    MinValue = 0,
    MaxValue = 11,
    Value = 5,
    AngleArc = 270,
    AngleOffset = 225,
    LineCapStyle = LineCapType.Round,
    ForeColor = Color.OrangeRed
};
knob.ValueChanged += (s, e) => SetVolume(knob.Value);
this.Controls.Add(knob);

Constructors​

Instance member Knob()​

Initializes a new instance of the Knob control.

Properties​

Instance member AngleArc​

Int32: Returns or sets the arc size in degrees. (Default: 10)

The value is clamped between 0 and 360. The range from MinValue to MaxValue is mapped to this arc, starting at AngleOffset. The default is 360 (full circle).

Example:

Drawing a half-circle gauge opened at the bottom:

this.knob1.AngleArc = 180;
this.knob1.AngleOffset = 270; // start from the left (9 o'clock).

Instance member AngleOffset​

Int32: Returns or sets the starting angle in degrees. (Default: 10)

The angle is measured clockwise from the top of the dial (12 o'clock) and is clamped between 0 and 360. The default is 0.

Instance member CursorSize​

Int32: Returns or sets the size of the cursor. (Default: 30)

Applies only when KnobType is Cursor. The cursor arc extends CursorSize / 100 radians on each side of the value position. The default is 30.

Example:

Displaying a narrow cursor instead of a filled gauge:

this.knob1.KnobType = KnobType.Cursor;
this.knob1.CursorSize = 10;

Instance member DisplayPrevious​

Boolean: Returns or sets whether the previous value is displayed while the user drags the knob. (Default: False)

When set to true, the arc of the previous value is drawn with a lighter color while the user is changing the value.

Instance member ForeColor​

Color: Returns or sets the color of the gauge arc and of the text in the input field. (Default: Color [SkyBlue])

The default is SkyBlue. The unfilled part of the dial uses the BackColor.

Instance member InitScript​

String: Returns the initialization script that creates the knob on the client.

The script is built from the embedded startup.js resource and the current property values. The setter is ignored.

Instance member KnobType​

KnobType: Returns or sets the type of knob. (Default: Gauge)

Gauge fills the arc from the start angle to the value; Cursor draws only a cursor at the value position, sized using CursorSize.

Instance member LineCapStyle​

LineCapType: Returns or sets the style of the ends of the gauge arc. (Default: Butt)

Butt draws square ends; Round draws rounded ends.

Instance member MaxValue​

Int32: Returns or sets the maximum value. (Default: 100)

The default is 100.

Instance member MinValue​

Int32: Returns or sets the minimum value. (Default: 0)

The default is 0.

Instance member Packages​

List<Package>: Returns the list of packages (jQuery and jQuery Knob) loaded on the client before the knob is created.

Instance member ReadOnly​

Boolean: Returns or sets whether the knob is read-only. (Default: False)

When set to true, the value of the knob cannot be changed by the user; it can still be changed by setting the Value property.

Instance member ShowInput​

Boolean: Returns or sets whether the input field showing the value is displayed in the center of the dial. (Default: True)

The user can also type a new value in the input field, unless ReadOnly is true. The field uses the Font of the control.

Instance member Step​

Int32: Returns or sets the step size. (Default: 1)

The value changes by multiples of this amount when the user drags the knob or uses the mouse wheel. The default is 1.

Instance member Thickness​

Int32: Returns or sets the thickness of the gauge as a percentage of the radius of the dial. (Default: 24)

The value is clamped between 1 and 100. A value of 100 fills the whole dial. The default is 24.

Example:

Drawing a thin ring:

this.knob1.Thickness = 10; // 10% of the radius.

Instance member Value​

Int32: Returns or sets the current value of the knob. (Default: 0)

The value should be between MinValue and MaxValue; it is not validated on the server. When the user changes the value, this property is updated and ValueChanged is fired continuously while the knob is dragged. Setting this property from code also causes the client to fire ValueChanged back to the server.

Example:

Setting the value and reading it back when the user changes it:

this.knob1.Value = 42;

private void knob1_ValueChanged(object sender, EventArgs e)
{
    this.labelTemperature.Text = this.knob1.Value + " °C";
}

Methods​

Protected member OnValueChanged(e)​

Fires the ValueChanged event.

ParameterTypeDescription
eEventArgs

Protected member OnWidgetEvent(e)​

Handles events fired by the widget.

ParameterTypeDescription
eWidgetEventArgs

Events​

Instance member ValueChanged​

EventHandler Fired when the user changes the value of the knob.

Implements​

NameDescription
IUserData
IBindableComponent
IDropTarget
IWisejComponent
IWisejControl
IWisejHandler
IWisejSerializable