Knob Class for Processing 2.0

I just finished a knob class (library) for processing. The idea is simple... The need of using a knob on my sketches using a simple class and interact with my microcontrollers. The goal is to have a class that can be used in a very simple way.

The video shows how to use a knob class and a designer tool for getting the final geometry of a knob.

The knob class is useful to create sophisticated GUIs using Processing, a graphical java based programming environment.



Using in conjunction with the button class (previous article) we can create GUIs to interact with, showing values from variables, that we can read from microcontrollers like arduino. We'll show in the next article how to do it.

Also we can use a knob for change values to modify other widgets or for dim a led or change the brightness of a LCD connected to a arduino... uses are circumscribed to the imagination and needs.

Meanwhile, it is worth to understand the basics of the library (class).

The following example uses the knob class to change the background color of the window created in processing, using 3 knobs each one handling a component of a RGB tuple.


(1) ADknob rcolor, gcolor, bcolor;
int r,g,b;
(2) void activateMouseWheel()
{
 addMouseWheelListener(new java.awt.event.MouseWheelListener() 
 { 
   public void mouseWheelMoved(java.awt.event.MouseWheelEvent evt) 
   { 
     mouseWheel(evt.getWheelRotation());
   }
 });
}
(3) void setup()
{
   size(500,200);
   smooth();
   rcolor = new ADknob("R",100,100,45,255,0.0,1.0,4.0,20.0,34.0,19.0,34.0,15,7,53.0,20,19,10,-6,14,5,9,14,7,23,false,11,0);
   rcolor.setKnobPosition(234);
   rcolor.setColors(#D30606,0,-1,0,0,0,0,-11574371,-327681);
   gcolor = new ADknob("G",250,100,45,255,0.0,1.0,4.0,20.0,34.0,19.0,34.0,15,7,53.0,20,19,10,-6,14,5,9,14,7,23,false,11,0);
   gcolor.setKnobPosition(202);
   gcolor.setColors(#0FA705,0,-1,0,0,0,0,-11574371,-327681);
   bcolor = new ADknob("B",400,100,45,255,0.0,1.0,4.0,20.0,34.0,19.0,34.0,15,7,53.0,20,19,10,-6,14,5,9,14,7,23,false,11,0);
   bcolor.setKnobPosition(111);
   bcolor.setColors(#050EA7,0,-1,0,0,0,0,-11574371,-327681);
   activateMouseWheel();
}
(4) void draw()
{
  background(color(r,g,b));
  r=(int )rcolor.update();
  g=(int )gcolor.update();
  b=(int )bcolor.update();
}
(5) void mouseDragged()
{
  rcolor.change();
  gcolor.change();
  bcolor.change();
}
(6) void mouseWheel(int delta)
{  
  rcolor.changeKnobPositionWithWheel(delta);
  gcolor.changeKnobPositionWithWheel(delta);
  bcolor.changeKnobPositionWithWheel(delta);
}

(1) Object Creation
  1.1 We start creating one object for red, green and blue component of the RGB tuple
  1.2 And three integer variables for storing the knob values.

(2) The function activateMouseWheel
  2.1 Enable us to activate a listener for the mouse's wheel.

(3) Inside the setup function
  3.1 We define the windows with size() function
  3.2 We instantiate each knob with the parameters obtained from the knob tool
  3.3 We also set the value of the knob. This is necessary for setting an initial (r,g,b) background
  3.4 Finally we call for the activation of the mouse wheel

(4) Inside the draw() function
  4.1 We change the background using the variables r,g,b
  4.2 These values are obtained from the knob.update() function, which is in charge of return
        the value and draw the knob itself

(5) The mouseDragged() function
  5.1 Enable us to call the change() method of each knob while the mouse is dragged over the knob
  5.2 This function is also responsible of redrawing the knob on the screen

(6) the function mouseWheel()
  6.1 It is called by the listener of the mouse using the increment or decrement of the wheel mouse
  6.2 Inside we call the changeKnobPositionWithWheel() method for updating the knob

The structure of the code is very simple as I will describe next:

(1) Create the knob Object
(2) Instantiate the knob with the parameters obtained from the tool inside the setup() function
(3) Get the knob value and use it inside draw() function
(4) Create a mouseDragged() function to call the change of the knob if we drag the mouse over
(5) Create a mouseWheel() function to call changeKnobPositionWithWheel() when we use the wheel

Interaction:

The knob can be used dragging the mouse over it or using the mouse wheel or the keyboard.

(1) Mouse Wheel
  1.1 The wheel is used to increment or decrement in one step at a time
  1.2 Shift+wheel increments or decrements the knob at totalSteps/10 ratio
  1.3 Ctrl+wheel increments or decrements the knob at totalSteps/4 ratio

(2) Keyboard

  2.1 LEFT || DOWN decrements the knob at totalSteps/10 ratio

  2.2 RIGHT || UP increments  the knob at totalSteps/10 ratio

Look at the video to see more details about the class and the tool and download the source to essays different examples.

Download: knob class
Download: button class
Download: color example
Download: Designer tool