((newbie)) looking for help with CP5 text field

RaeLavande

Hi all! Am a visual artist who knows only very little about coding but is trying to create some code to go with an art piece. The main ideal of the program I'm making is that the user can input text, click submit, and the program will generate a fortune/ritual/poem for them . It doesn't matter what the text entered really is because the poems are generated randomly. I'm using the TextField from ControlP5 to allow user keyboard input but can't seem to be getting it to work properly. When I try to type into it, it only works if I click it a few times, and I need to click it so it will refresh and show what has been written. What am I doing wrong? I would also like it to only appear on the first page (page0), so it is not on screen at the same time as the poem, and haven't been able to figure out how to do that. These seem like they would be relatively easy things to do and yet i'm lost! :,,( help! Thanks! x

import controlP5.*;
ControlP5 cp5;

String textValue = "";
String [] firstWords = {
  "Go to the arcade", "Go to a bar where beers are 1$","Go to your local swimming pool"
  ,"Go to your local swimming pool", "Stand in your mother's kitchen", "Go outside your front door"
  , "Go to your local graveyard", "Go to the supermarket", "Go to the park", 
"Go thirty-five steps north of your house", "Go stand near the statue of an important historical figure",
"Stay on a bus for its entire route", "Go to the library", "Go to a dinner party", "Go to your local diner" };

String [] secondWords = {
  "Wear a blue raincoat", "Wear your favorite pair of shoes","Wear a hat someone would wear to church",
"Tie your shoes in a double knot","Eat a good breakfast", "Check the weather","Leave as early as possible",
"Leave as late as possible", "Wash your hair", "Put on someone else's perfume", "Braid your hair", "Apply some blush on one cheek",
"Wear a disguise"};

String [] thirdWords = {
  "On your way, take a picture of the three first things you see that are red, send these pictures to", 
"On your way, take two flowers from a passing garden, place them on",
"On your way, look avidly for any small change until you find some, place it on",
"On your way, draw two detailed illustrations of passers-by. These can be done on restaurant napkins or receipts you find on the ground. Give them to",
"On your way, find a waiting room where people are waiting. Sit with them. Imagine what each person’s three favorite things to do are. Leave when you have finished imagining all the people’s lives. Take a brochure, and give it to",
};

String [] fourthWords = {
  "a man you’ve quietly followed for exactly ten minutes and fourty-threee seconds",
"the river","a friend you haven’t talked to in a while","the person you have most recently eaten dinner with",
"the gravestone of someone who looked like they might have they might have locked themselves out of their house more than once",
"a bus that runs from north to south and goes through downtown", "The gravestone of someone who seems friendly",
"the gravestone of someone who looked like they wrote three unpopular books on personal finance", "the gravestone of someone who looks like they have never seen a black bear except for in other people's travel photographs",
"a mailbox twenty houses down from yours", "a mailbox next to your house", "a mailbox of a house you lived in a while ago", 
"the mailbox of a house you lived in a while ago", "a woman who vaguely reminds you of the aunt that you don’t like",
"a woman who vaguely reminds you of your favorite aunt",
"a bus that runs of east to west and goes through downtown",
"a small mound of dirt",
"a mountain",
"the top of your head",
"the top of your friend's head",
"a couple who look very in love",
"a small angry dog"};

String [] fifthWords = {
  "elegantly", "with the attitude of someone who is very wealthy","slowly","with passion",
"dreamily", "with your eyes closed", "gracefully", "angrily", "with your fists clenched", "without looking"};

String [] sixthWords = { "One you have arrived, try and make eye contact with everyone in the room", "Once you have arrived, try not to make eye contact with anyone in the room",
"Once you have arrived, find a person with grey hair. Take something you have in your pocket, or is on the ground, or that you have bought in a convenience store, and ask them if they have dropped it."

};

PFont Arial;
PImage img;
String url1, url2;

final static int MAX = 2, GAP = 50, DIM = 120, RAD = DIM >> 1;
int page, cx, cy;

Button back, submit;

void setup() {
  size(1000, 700);
  background(255);
  Arial = createFont("Arial",24);

  frameRate(200);
  noLoop();
  smooth();

  rectMode(CORNER);
  ellipseMode(CENTER);
  textAlign(CENTER, CENTER);

  stroke(0);
  strokeWeight(1);

  cx = width  >> 1;
  cy = height >> 1;

back = new Button("BACK", 70, height - Button.H - GAP);
submit = new Button("SUBMIT", width - Button.W - GAP, height - Button.H - GAP);
img = loadImage("magic82ball.jpg");

   cp5 = new ControlP5(this);
  cp5.addTextfield("input")
    .setPosition(400, 375)
    .setSize(200, 40)
    .setInputFilter(ControlP5.STRING);
}


void draw() {
  background(255);
  textFont(Arial,10);
  textSize(0020);
  fill(Button.TXTC);

  textSize(015);
  if (page > 0)     back.display();
  if (page < 1)   submit.display();

  method("page" + page); 

}

void mousePressed() {
  if      (page > 0   && back.hasClicked())   --page;
  else if (page < 1 && submit.hasClicked())   ++page;

  redraw();
}

void page0() {
  image(img, 375, 50);
  text("stop worrying about the future", 500, cy);
}
void page1() {
  fill(0);
  String word1 = firstWords[int(random(firstWords.length))];
  String word2 = secondWords[int(random(secondWords.length))];
  String word3 = thirdWords[int(random(thirdWords.length))];
  String word4 = fourthWords[int(random(fourthWords.length))];
  String word5 = fifthWords[int(random(fifthWords.length))];

  text(word1,100,0, 300, 300); 
  text(word2,100,50, 300, 300);
  text(word3,100,150, 300, 300);
  text(word4,100,250, 300, 300);
  text(word5,100,300, 300, 300); 


  String output = firstWords[int(random(firstWords.length))] + " " + secondWords[int(random(secondWords.length))];


  println (output);
}

void pageSelector() {
  switch(page) {
  case 0: 
    page0();
    break;

  case 1: 
    page1();
    break;

  }
}

class Button {
  final static int W = 60, H = 40;
  final static color BTNC = 225, TXTC = 0;

  final String label;
  final short x, y, xW, yH;

  Button(String txt, int xx, int yy) {
    label = txt;

    x = (short) xx;
    y = (short) yy;

    xW = (short) (xx + W);
    yH = (short) (yy + H);
  }

  void display() {
    fill(255);
    rect(x, y, W, H);

    fill(0);
    text(label, x + W/2, y + H/2);
  }

  boolean hasClicked() {
    return mouseX > x & mouseX < xW & mouseY > y & mouseY < yH;
  }
}

jdlrios

remove noLoop() from your setup()

kfrajer

Related to your second question, to hide your textField, you add this to the proper part of your code

cp5.hide();

To show it (undo your last step), use:

cp5.show();

This works only when you associated your textField to cp5, an instance of a controlP5 object.

Kf

RaeLavande

Both of those things worked! Thank you so much! xx