jQueryKnob
The jQueryKnob extension component uses the amazing jQueryKnob widget to create a Wisej.NET Real Time dial control that allows the user to rotate the dial to change its value or to type the value in the middle editor. The component allows you to set the value, range, line style, colors and more.
Code Example
Wisej.Web.Ext.jQueryKnob.Knob knob = new Wisej.Web.Ext.jQueryKnob.Knob();
knob.MinValue = 10;
knob.MaxValue = 20;
knob.Value = 15;
knob.KnobType = Wisej.Web.Ext.jQueryKnob.KnobType.Gauge;
knob.LineCapStyle = Wisej.Web.Ext.jQueryKnob.LineCapType.Butt;
this.Controls.Add(knob);
This code snippet creates a knob that looks like this:
MinValue and MaxValue do exactly what you'd expect: they set the minimum and maximum value of the knob. Value sets the value on the knob. Because 15 is halfway between 10 and 20, the circle is half completed. KnobType of Gauge has the circle fill from the start to the Value. (The other option for KnobType is Cursor which has a smaller portion of the circle filled that moves towards the end of the circle as the value increases). LineCapStyle of Butt has a flat end. (The other option, Round, has a semicircular end).
How to Use
The jQueryKnob extension can be added to a Wisej.NET project using NuGet Package Manager.
You can define Step, MinValue and MaxValue and ShowInput to configure the jQueryKnob.
Set up the type with KnobType and the skin with LineCapStyle.