ControlP5 changing image button to the clicked image without actually clicking it.

Scott06

I have an image button of a piano key, and I have it set to where if it is not clicked, it is white, if it is hovered over it is light grey, and if it is pressed it is medium grey. I would also like to have it change to the medium grey color if a specific key on the keyboard is pressed. How would I do this?

kfrajer

Check these

https://forum.processing.org/one/topic/control-p5-changing-mouseover-color-font-size-font.html
http://www.sojamo.de/libraries/controlP5/examples/use/ControlP5mouseover/ControlP5mouseover.pde

Also click on the button labeled colorC to see a change in the background color of colorA button. It is not a full example of what you want to do but it might come handy.

Kf

import controlP5.*;

ControlP5 cp5;

int myColor = color(255);

int c1,c2;

float n,n1;
Button a1;


void setup() {
  size(400,600);
  noStroke();
  cp5 = new ControlP5(this);

  // create a new button with name 'buttonA'
  a1=cp5.addButton("colorA")
     .setValue(0)
     .setPosition(100,100)
     .setSize(200,19)
     .setId(0)
     ;

  // and add another 2 buttons
  cp5.addButton("colorB")
     .setValue(100)
     .setPosition(100,120)
     .setSize(200,19)
     .setId(1)
     ;

  cp5.addButton("colorC")
     .setPosition(100,140)
     .setSize(200,19)
     .setValue(0)
     .setId(2)
     ;

  PImage[] imgs = {loadImage("button_a.png"),loadImage("button_b.png"),loadImage("button_c.png")};
  cp5.addButton("play")
     .setValue(128)
     .setPosition(140,300)
     .setImages(imgs)
     .updateSize()
     ;

  cp5.addButton("playAgain")
     .setValue(128)
     .setPosition(210,300)
     .setImages(imgs)
     .updateSize()
     ;

}

void draw() {
  background(myColor);
  myColor = lerpColor(c1,c2,n);
  n += (1-n)* 0.1; 
}

public void controlEvent(ControlEvent theEvent) {

  CColor currentCol;
  println(theEvent.getController().getName());
  n = 0;
  currentCol=theEvent.getController().getColor();

  //Next prints: Color A  bg (0,113,0), fg (250,0,0), active (250,250,0), captionlabel (0,0,250), valuelabel (255,255,255)
  println("Color A ",a1.getColor());
  CColor cc=new CColor(color(250,0,0),color(random(70,220),random(70,220),random(70,220)),color(250,250,0),color(0,0,250),color(255));

  if(theEvent.getController().getName().equals("colorC")){    
    ((Button)cp5.get(Button.class,"colorA")).setColor(cc);
  }
}

// function colorA will receive changes from 
// controller with name colorA
public void colorA(int theValue) {
  println("a button event from colorA: "+theValue);
  c1 = c2;
  c2 = color(0,160,100);
}

// function colorB will receive changes from 
// controller with name colorB
public void colorB(int theValue) {
  println("a button event from colorB: "+theValue);
  c1 = c2;
  c2 = color(150,0,0);
}

// function colorC will receive changes from 
// controller with name colorC
public void colorC(int theValue) {
  println("a button event from colorC: "+theValue);
  c1 = c2;
  c2 = color(255,255,0);
}

public void play(int theValue) {
  println("a button event from buttonB: "+theValue);
  c1 = c2;
  c2 = color(0,0,0);
}

Scott06

Thank you for the code. I actually ended up finding a much easier way to do what I wanted to do though by using the image toggle button from the G4P library.