# Make text that is drawn, editable
**URL:** https://discourse.processing.org/t/make-text-that-is-drawn-editable/15091
**Category:** Libraries
**Created:** [October 31, 2019, 9:16pm UTC](https://discourse.processing.org/t/make-text-that-is-drawn-editable/15091 "2019-10-31T21:16:29Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@cp796](https://discourse.processing.org/u/cp796)
#### Post date: [October 31, 2019, 9:16pm UTC](https://discourse.processing.org/t/make-text-that-is-drawn-editable/15091/1 "2019-10-31T21:16:30Z")
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
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 1, 2019, 2:44am UTC](https://discourse.processing.org/t/make-text-that-is-drawn-editable/15091/2 "2019-11-01T02:44:46Z")
as you already use CP5 try
```auto
/**
* 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);
}
```
---
### Author:  [@cp796](https://discourse.processing.org/u/cp796)
#### Post date: [November 1, 2019, 3:22am UTC](https://discourse.processing.org/t/make-text-that-is-drawn-editable/15091/3 "2019-11-01T03:22:39Z")
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:
```auto
//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);
}
```
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [November 1, 2019, 3:24am UTC](https://discourse.processing.org/t/make-text-that-is-drawn-editable/15091/4 "2019-11-01T03:24:04Z")
please repair all your code posting
use:
```auto
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?
```auto
/* 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;
}
```