Cp5 Knob: how to use an image?

Processing Libraries
1

hey everybody,

I have a problem i can’t seem to solve: I want to use an image instead of the standard Knob-layout.
It works fine with buttons, toggles, … but not with knobs?
Anyone got any idea what I’m doing wrong?
Here’s (part of) my code:

import controlP5.*;
ControlP5 cp5;

PImage turnKnob;


void setup() {
  size(860, 582);
  cp5 = new ControlP5(this); 

  PImage[] turnKnob = {loadImage("turnKnob_small.png"),loadImage("turnKnob_small.png"),loadImage("turnKnob_small.png")}; 
  
  cp5.addKnob("dial")
  .setPosition(200,50)
  .setImages(turnKnob)
  .updateSize()
  ;

}

Thx in advance,
Koen

2

I could be wrong but I think that turnKnob is declared wrong.
It should be declared like this: PImage turnKnob[] = new PImage[2];
And assigned like this:

turnKnob[0] = loadImage(“turnKnob_small.png”);
turnKnob[1] = loadImage(“turnKnob_small.png”);
turnKnob[2] = loadImage(“turnKnob_small.png”);
3

Thx madscientist for answering,

_ PImage[] imgAqua = {loadImage(“buttonAquaOver.png”), loadImage(“buttonAqua.png”), buttonActive};_
works just fine, and - I’ve tried - your solution changes nothing.
Nothing wrong with the declaration.
But thanks for your time!

Anyone got an idea?
Thx

4

Not sure if this feature works with knob. I tried and I couldn’t get it to work. I suggest you open a ticket in ControlP5’s repo. The library has limited documentation and and can see, if you want to explore this further, to dig into the source code. Or you could check other resources, like G4P library. Do you want to display the image and the slider control as well?

Something I notice in the code below is that setImage()/setImages() doesn’t play well along with updateSize().
Kf

 cp5.addKnob("dial")
    .setPosition(200, 50)
    //.setImage(img)
    //.setSize(250,250)
    .setRadius(100)
    .setImage(img)
    .setColorForeground(color(255,140))
    .setColorBackground(color(0, 160, 100,120))
    //.updateSize()
    ;