Backspace processing

ginadal

Hello,

I want to create a divided screen, which in the left part the user can create a typing input. I've done it, however, I have problems with the backspace as I do not know what is wrong.

int y = 0;
int x = 0;

float viewportTwoX;
float viewportTwoY;

float viewportWidth;
float viewportHeight;

String letters = "";

void setup() {
  size(768, 768);
  viewportTwoX = width/2;
  viewportTwoY = 0;
  viewportWidth = width/2;
  viewportHeight = height;

  ima = loadImage ("a.png");
  imb = loadImage ("b.png");

}

void draw() {
  background(0);
  drawViewportOne();
  drawViewportTwo();
}

void drawViewportOne() {
  fill(0);
  noStroke();
  rect(0, 0, viewportWidth, viewportHeight);
  fill(255);
  float cursorPosition = textWidth(letters);
  line(cursorPosition, 0, cursorPosition, 100);
  text(letters, 0, 50);
}

void keyPressed() {
  if (key == BACKSPACE) {
    if (letters.length() > 368) {
      letters = letters.substring(0, letters.length()-1);
    }
  } else if (textWidth(letters+key) < width) {
    letters = letters + key;
  }
}

how can I fix it?

jeremydouglass

What do you expect the backspace to do? What is it doing instead?

ginadal

I want to delete a letter and it does nothing

jeremydouglass

@ginadal -- read your code! It says:

if (letters.length() > 368) {
  letters = letters.substring(0, letters.length()-1);
}

So, do you only want your backspace to work if the length of the letters is > 368 characters? It isn't working because you told it not to.

It seems like you were trying to add code for line wrapping and got a bit confused. Start with this, then work your way back up:

void keyPressed() {
  if (key == BACKSPACE) {
    if(letters.length() > 0){
      letters = letters.substring(0, letters.length()-1);
    }
  } else {
    letters = letters + key;
  }
}

ginadal

Thank you @jeremudouglass. It works now. Also, can you help me with another issue? I want that when it arrives at the end of the writing part (as my canvas is divided into two parts), the text follows the next line, as Word does.

How can I do that?

jeremydouglass

Well, earlier you were trying to check the string length. Maybe instead you can check the graphic width of the text -- textWidth() -- then add a "line break" to the string of the width is too long.

Line break is either '\r\n' or '\r' or '\n'.

For example (untested):

void keyPressed() {
  if (key == BACKSPACE) {
    if(letters.length() > 0){
      letters = letters.substring(0, letters.length()-1);
    }
  } else {
    letters = letters + key;
  }

  // add a line break if needed
      if(textWidth(letters) > width/2){
         letters = letters.substring(0,letters.length()-2);
         letters = letters + '\r\n' + key;
      }
}

ginadal

@jeremydouglass, thank you for your help. I had to type '\r' + '\n' as '\r\n' was an error.

Chrisir

@ginadal

ginadal, could you post your entire code please?

ginadal

Hi here is my code, however, the second part it's wrong. I posted a month ago the second part, asking for help. But, because I don't have the knowledge to modify, I don't understand very well the steps that people gave me.

PImage  ima, imb;
        int y = 0;
        int x = 0;

        float viewportTwoX;
        float viewportTwoY;

        float viewportWidth;
        float viewportHeight;

        String letters = "";

        void setup() {
          size(768, 768);
          viewportTwoX = width/2;
          viewportTwoY = 0;
          viewportWidth = width/2;
          viewportHeight = height;

          ima = loadImage ("a.png");
          imb = loadImage ("b.png");

        }

        void draw() {
          background(0);
          drawViewportOne();
          drawViewportTwo();
        }

        void drawViewportOne() {
          fill(100);
          noStroke();
          rect(0, 0, viewportWidth, viewportHeight);
          fill(255);
          float cursorPosition = textWidth(letters);
          line(cursorPosition, 0, cursorPosition, 100);
          text(letters, 0, 50);
        }

        void keyPressed() {
          if (key == BACKSPACE) {
            if(letters.length() > 0){
              letters = letters.substring(0, letters.length()-1);
            }
          } else {
            letters = letters + key;
          }

           if(textWidth(letters) > width/2){
                 letters = letters.substring(0,letters.length()-2);
                 letters = letters + '\r' + '\n' + key;
              }
        }


        void drawViewportTwo() {
          translate(viewportTwoX, viewportTwoY); 

          fill(255);
          noStroke();
          rect(0, 0, viewportWidth, viewportHeight);
          fill(0);


         if (keyPressed && (key == 'a')) {
            image(ima, x, y, 40, 10);
        upxandy();

          }
          if (keyPressed && (key == 'b')) {
            image(imb, x, y, 40, 10);
        upxandy();

          }
        } 

        void upxandy() {
            x = x + 40;
            if (x > 768) {
              x = 0;
              y = y +10;
         }
        }

        void keyReleased() {

          if (keyPressed && (key == 'a')) {
            image(ima, x, y, 40, 10);
        upxandy();

          }
          if (keyPressed && (key == 'b')) {
            image(imb, x, y, 40, 10);
        upxandy();

          }
        }

jeremydouglass

This is @ginadel 's related post:

https://forum.processing.org/two/discussion/18577/how-to-split-the-screen-in-two-one-typography-other-images#latest

ginadal

thanks @jeremydouglass !

Chrisir

thank you, ginadal!