This example shows a basic dial control using Sean's original bitmap backgrounds. The dial is controlled by moving the knob.
Note: The background image is actually attached to the .dial-element because the
.wheel-element is smaller than the .dial-element to allow for a smaller turn
radius of the .knob-element
The progress bar below the dial is update by attaching an update-event listener to #example1.
The actual sizing for all examples on this page is achieved using bootstrap's grid and aspect ratio utils.
This example's dial is not locked to a range of angles like the first example. You can spin the dial beyond 360 degrees and the angle will start with 0 again.
The example uses the debug option, which simply activates some default styling for the dial and knob.
In the <code>-block below the dial, a dump of
the event listeners e.detail is displayed. Observe how the rotation and angle values
differ.
While in the examples above, options.mode is set to knob, in this example it's
set to wheel. This means you can manipulate the dial by touching it anywhere.
Note: when the mode is set to wheel, div.foreground is appended to the .dial-element
to prevent unexpected behaviour when moving the pointer from .knob to .wheel
etc
To make the whole project a little more useful, here's an example of how to two-way-bind an input to the dial.
The input is passed as options.input to the constructor. Set
options.roundInputValue to false to receive the raw angle value.
Note: if you want to update the input's value programmatically, rather use the yourJogDialInstance.set-method,
which will update the input's value in turn.
Since all relevant state is exposed as data-attributes and css-variables on the instance's element, it's
trivial to use the angle css-var and rotate the .knob according to the
current angle of the dial.
wheelSnapWhen the wheelSnap-option is set to true, the control will orient itself to
position where the interaction was started, i.e. clicked or touched.
Pseudo-elements and data-attributes can be used to display the state of the instance. This works only
with element passed to the JogDial-constructor, not any of the descendents.
Note: options.roundStateValues was used to get a rounded degree value.
Interactive styles can be applied by using standard hover pseudo classes and the data-*-pressed-attribute.
fig. 0: .wheel and .knob have individual hover pseudo classes
and .knob also uses the pressed-attribute when it is being manipulated.
Note how the .wheel loses its outline when the hover reaches the .knob.
The dial uses options.mode = 'knob'.
fig. 1: .wheel and .knob state's are styled by using a hover
pseudo class on the main .dial. Both receive a different style when the pointer is pressed
on the .knob.
The .wheel keeps its styling even when the pointer hovers over the .knob.
The dial uses options.mode = 'knob'.
fig. 2: Identical to fig. 1.
The difference is that pressed is applied by clicking anywhere on the dial.
Individual hover/pressed styles for .wheel and .knob are not possible due to the .foreground-div
capturing all pointer input.
This is caused by the dial using options.mode = 'wheel'.
fig. 3: Only the .knob has distinct hover/pressed style, but the states are triggered
by pointing/clicking anywhere on the dial. Again, this is due to the fact that the dial uses options.mode = 'wheel'.