Make text that is drawn, editable

Processing Libraries
1

So I got the colour wheel from cp5 library, and achieved to display the hexcode with text everytime the colour is changed.

This is the code which make the hex code display:
// “C” is the colour on the colour wheel, so whenever the colour is changed it triggers the value of the colour code to change

println(hex(c, 6));
String hex = hex(c, 6);
textvalue =hex;
textSize(14);
fill(255);
text(textvalue, 105, 328);

However this is drawn text. Now I want to make that text to be editable in order for the users to change the value and get the colour they want. Is there a way I can do that?

Thank you in advance

1 Like
2

as you already use CP5 try

/**
* ControlP5 Textfield
*
* by Andreas Schlegel, 2012
* www.sojamo.de/libraries/controlp5
*
*/

import controlP5.*;
ControlP5 cp5;

String textValue = "#123456";

void setup() {
  size(200,200);
      
  cp5 = new ControlP5(this);
  
  cp5.addTextfield("input")
     .setPosition(20,100)
     .setSize(100,20)
     .setValue(textValue)
     .setFocus(true)
     .setAutoClear(false)
     .setColor(color(255))
     ;
                 
}

void draw() {
  background(200,200,0);
}


public void input(String theText) {  // automatically receives at ENTER results from controller input
  println("a textfield event for controller 'input' : "+theText);
}
1 Like
3

Thank you so much for your reply!

I achieved the first part which was to insert automatically the hex code into the text box.
I have the hex code text in draw in order to update automatically at all times. So when I reference the hex value into the text field I can’t edit it as it updates over and over again with the current value.

Do you have any advice for that? Also do you have any advice, in case eventually I am able to edit the value in the textfield when I press enter to update the hex value with the one I am inserting?

Code I currently have:

//Colour Wheel
import controlP5.*;
ControlP5 cp5;
//Hex Code Mechanism
String textvalue="";
int c = color(100);
void setup() {
  size(1280, 720);
  background(255);

   cp5 = new ControlP5(this);
   
//for Colour Wheel
  cp5 = new ControlP5( this );
  cp5.addColorWheel("c", 20, 80, 220 ).setRGB(color(128, 0, 255));
  noStroke();
}

void draw() {
 cp5.addTextfield("input")

     .setPosition(20,320)

     .setSize(100,20)

     .setValue(hex(c,6))

     .setFocus(true)

     .setAutoClear(false)

     .setColor(color(255))

     ;
//Hex Code Mechanism
  println(hex(c, 6));
  String hex = hex(c, 6);
  textvalue =hex;
  textSize(14);
  fill(255);
  text(textvalue, 105, 328);
}
1 Like
4

please repair all your code posting
use:

</> button from forum editor

looks like
```
type or paste code here
```

why you make the
cp5 declaration inside draw? instead setup?

for what still have a text(); inside draw?

where is your event code??

not sure you wanted to do this?

/* ControlP5 by Andreas Schlegel, 2012 www.sojamo.de/libraries/controlp5 */

import controlP5.*;
ControlP5 cp5;
Textfield tf;
ColorWheel cw;

String textValue = "#123456";
String hexc = "";
color c_cw; //____________________________________________ from color wheel
int r_cw, g_cw, b_cw;
int r_tf, g_tf, b_tf; //__________________________________ from textfield FFFFFF

boolean diagp = true;

void setup() {
  size(400, 400);

  cp5 = new ControlP5(this);

  tf = cp5.addTextfield("input")
    .setPosition(20, 100)
    .setSize(100, 20)
    .setValue(textValue)
    .setFocus(true)
    .setAutoClear(false)
    .setColor(color(255))
    ;

  cw = cp5.addColorWheel("cw", 20, 80, 220 )
    .setRGB(color(128, 0, 255))
    .setPosition(150, 100)
    ;

}

void draw() {
  background(200, 200, 0);
}

public void cw(color c) { //_______________________________________ event code cw
  if ( diagp ) print("event cw color "+c+"  "); //_________________________________ set some globals
  r_cw = (int)red(c);
  g_cw = (int)green(c);
  b_cw = (int)blue(c);
  if ( diagp ) println(r_cw,g_cw,b_cw);
  c_cw = c;
  hexc = hex(c, 6);
  tf.setValue(hexc); //____________________________________________ set textfield
}

public void input(String theText) { // event__ automatically receives at ENTER results from controller input
  if ( diagp ) print("event input text : "+theText+"  ");
  String rs = theText.substring(0,2);
  r_tf = hex2decimal(rs);
  String gs = theText.substring(2,4);
  g_tf = hex2decimal(gs);
  String bs = theText.substring(4,6);
  b_tf = hex2decimal(bs);
  if ( diagp ) println(r_tf,g_tf,b_tf);
  cw.setRGB(color(r_tf,g_tf,b_tf));
}

public int hex2decimal(String s) {
  String digits = "0123456789ABCDEF";
  s = s.toUpperCase();
  int val = 0;
  for (int i = 0; i < s.length(); i++) {
    char c = s.charAt(i);
    int d = digits.indexOf(c);
    val = 16*val + d;
  }
  return val;
}
2 Likes