Skip to content
This repository has been archived by the owner on Nov 1, 2021. It is now read-only.

RotKnob Element Interface

janesconference edited this page Dec 8, 2011 · 2 revisions

The RotKnob Element is a control knob with a single value that ranges from 0 to 1.
A RotKnob can be controlled by the user clicking on it and dragging it up and down. A single image (representing the rotating part of the knob) is rotated around its center accordingly to the knob's state and displayed.
The Knob interface is defined in RotKnob.js.

Constructor

RotKnob.prototype.getready = function (args) // {Object}

Constructor arguments (args).

Other than the Graphical Element Interface constructor parameters, Knob has some unique parameters:

  • sensitivity {Int} : sensitivity parameter for the knob, or how much dragging affects change in the internal value of the knob.
  • image {Object} : an image, that will be rotated around its center accordingly to the knob's state.
  • initAngValue {Int} : defines the initial (0) angular offset of the image, in degrees.
  • moveDirection {String: ['anticlockwise' | 'clockwise']} : defines if the knob rotates clockwise or anticlockwise, in relation to the mouse movement (default is clockwise: when the knob is dragged upwards, the knob rotates clockwise).
  • startAngValue, stopAngValue {Int, Int} : by default, the knob makes a 360° arc from its lowest (0) value to the highest (1). Setting these values (in degrees), you can reduce / expand this arc.
  • angSteps {Int} : the number of discrete steps of the knob. If not set, the steps are infinite (i.e. the knob can assume all the values in the range 0..1).

Properties and slot

  • values.knobvalue {Int} : The internal state of the knob. It ranges from 0 to 1.
  • values.realknobvalue {Int} : The "real" value of the knob, as if angular, steps and offset adjustments were not applied (used internally to calculate the amount of rotation).
  • defaultSlot {String = 'knobvalue'} : The default slot of RotKnob is the 'knobvalue' slot.

Methods

_getRotateAmount()

Knob.prototype._getRotateAmount = function ()

This method calculates the amount of rotation that has to be applied to the image to display the knob's current knobvalue state.