We are about to switch to a new forum software. Until then we have removed the registration on this forum.
Hi, I am working on a GUI where the user navigates with the 'wasd' and arrow keys, but does not use the mouse. I'd like to have a text box that the user can input integers into via the keyboard. However, I am having trouble using controlP5's textfield feature, as it seems the only way I can change between having a textfield selected versus not-selected is by clicking inside or outside of the textfield itself using the mouse. But, as stated, I need to be able to do this with the arrow/wasd keys, not the mouse...
As it stands, the part of my code that has to do with this problem looks like this. Feel free to copy/paste it into your own processing and run it to get a look at what I'm talking about. I am trying to get it so that, when and only when the selector is on row t (the textbox row) is the user able to type integers into the textbox:
import controlP5.*;
ControlP5 cp5;
String textValue = "";
PFont font = createFont("arial",20);
int windowX = 1300; // X dimension size of the GUI window
int windowY = windowX * 18/29; // Y dimension size of the GUI window
String selectedslider; // is a 1-letter string that tells the interface what row it is on
// The rows of the interface are, in order:
// row g
// row r
// row w
// row p
// row u
// row t
int gslider_y;
int rslider_y;
int wslider_y;
int pslider_y;
int uslider_y;
int tbox_x=windowX * 34/40; // X & Y for row t:
int tbox_y=windowY * 14/20;
int selectedslider_y; // Y coordinate of the currently-selected row
int keypress_timer; // tells the interface that a key has recently been pressed
int slider_button_diam=windowX * 1/60;
color panelcolor;
void setup() {
cp5 = new ControlP5(this);
cp5.addTextfield("input")
.setPosition(tbox_x-slider_button_diam * 30/80,tbox_y-slider_button_diam)
.setSize(windowX * 1/10,40)
.setFont(font)
.setFocus(false)
.setColor(color(255,0,0))
.setInputFilter(ControlP5.INTEGER);
selectedslider_y=windowY * 2/20;
selectedslider="g";
size(1300, 807, P2D);
smooth(8);
frameRate(60);
textAlign(LEFT);
shapeMode(CENTER);
rectMode(CENTER);
imageMode(CENTER);
panelcolor=color(250,250,255);
gslider_y=windowY * 2/20;
rslider_y=windowY * 4/20;
wslider_y=windowY * 6/20;
pslider_y=windowY * 8/20;
uslider_y=windowY * 10/20;
tbox_x=windowX * 34/40;
tbox_y=windowY * 14/20;
}
void keyPressed() {
keypress_timer=0;
if ((key=='s')|(keyCode==DOWN)) {
if (keypress_timer<=1) {
if (selectedslider=="g") {
selectedslider="r";
}
else if (selectedslider=="r") {
selectedslider="w";
}
else if (selectedslider=="w") {
selectedslider="p";
}
else if (selectedslider=="p") {
selectedslider="u";
}
else if (selectedslider=="u") {
selectedslider="t";
}
else if (selectedslider=="t") {
selectedslider="g";
}
}
}
if (((key=='w')|(keyCode==UP))) {
if (keypress_timer<=1) {
if (selectedslider=="g") {
selectedslider="t";
}
else if (selectedslider=="r") {
selectedslider="g";
}
else if (selectedslider=="w") {
selectedslider="r";
}
else if (selectedslider=="p") {
selectedslider="w";
}
else if (selectedslider=="u") {
selectedslider="p";
}
else if (selectedslider=="t") {
selectedslider="u";
}
}
}
}
void draw() {
if (keypress_timer<10) {
keypress_timer ++;
}
if (selectedslider=="g") {
if (selectedslider_y<gslider_y) {
selectedslider_y=selectedslider_y + abs(selectedslider_y-gslider_y) * 1/2;
}
else if (selectedslider_y>gslider_y) {
selectedslider_y=selectedslider_y - abs(selectedslider_y-gslider_y) * 1/2;
}
}
else if (selectedslider=="r") {
if (selectedslider_y<rslider_y) {
selectedslider_y=selectedslider_y + abs(selectedslider_y-rslider_y) * 1/2;
}
else if (selectedslider_y>rslider_y) {
selectedslider_y=selectedslider_y - abs(selectedslider_y-rslider_y) * 1/2;
}
}
else if (selectedslider=="w") {
if (selectedslider_y<wslider_y) {
selectedslider_y=selectedslider_y + abs(selectedslider_y-wslider_y) * 1/2;
}
else if (selectedslider_y>wslider_y) {
selectedslider_y=selectedslider_y - abs(selectedslider_y-wslider_y) * 1/2;
}
}
else if (selectedslider=="p") {
if (selectedslider_y<pslider_y) {
selectedslider_y=selectedslider_y + abs(selectedslider_y-pslider_y) * 1/2;
}
else if (selectedslider_y>pslider_y) {
selectedslider_y=selectedslider_y - abs(selectedslider_y-pslider_y) * 1/2;
}
}
else if (selectedslider=="u") {
if (selectedslider_y<uslider_y) {
selectedslider_y=selectedslider_y + abs(selectedslider_y-uslider_y) * 1/2;
}
else if (selectedslider_y>uslider_y) {
selectedslider_y=selectedslider_y - abs(selectedslider_y-uslider_y) * 1/2;
}
}
else if (selectedslider=="t") {
if (selectedslider_y<tbox_y) {
selectedslider_y=selectedslider_y + abs(selectedslider_y-tbox_y) * 1/2;
}
else if (selectedslider_y>tbox_y) {
selectedslider_y=selectedslider_y - abs(selectedslider_y-tbox_y) * 1/2;
}
}
// Display SELECTION ICON
fill(panelcolor);
stroke(panelcolor);
rect(windowX * 265/320, windowY * 1/2, slider_button_diam * 400/400, windowY);
stroke(90,230,255);
fill(90,230,255);
ellipse(windowX * 265/320, selectedslider_y, slider_button_diam * 400/400, slider_button_diam * 400/400);
}
public void clear() {
cp5.get(Textfield.class,"textValue").clear();
}
void controlEvent(ControlEvent theEvent) {
if(theEvent.isAssignableFrom(Textfield.class)) {
println("controlEvent: accessing a string from controller '"
+theEvent.getName()+"': "
+theEvent.getStringValue()
);
}
}
public void input(String theText) {
// automatically receives results from controller input
println("a textfield event for controller 'input' : "+theText);
}
Answers
You can do this with setFocus(), just like you headline suggests.