Does anyone know how to rotate 90º a Textfield in ControlP5?

Processing Libraries
#1

This seems a simple question, but I’m not able to solve the issue.
It is possible to rotate the controlP5 controllers? I need it exactly 90º CCW. But I’m unable to find the solution.
Possible options:

  1. Use a rotate native controlP5 properties: it seems it does not exist.
  2. Rotating the camera. By rotating the camera the target is lost and the selection of the different textfieds is not possible.
  3. Paint the controlP5 inside a Pgraphics, canvas, or similar and rotate it, but I can not figure out how.
  4. Rotate the final window?

I’m programming an interface that should to be rotated 90º because the final display will be rotated as well. The same display has to play some content that is already created with that purpose, so I can not rotate the output through the graphic card.

Any help, will be more than welcomed

#2 


float a = HALF_PI;

pushMatrix();
translate (x,y); 
rotate(a); // a = HALF_PI;
text.......0,0);  // or text field with 0,0
popMatrix();

Hey and welcome to our forum!

Great to have you here!

#3

I imagine controlP5 registers its own draw() method and and will be drawn after your draw() loop (at this line).

In that case, override handleDraw(), rewriting it so that handleMethods("draw"); is called before draw();. You’ll then have the option to rotate/translate the CP5 elements separately to what’s drawn in your draw() method.

Or, if you’re going with 4. Rotate the final window, maybe copying the source for handleDraw() and adding rotating the whole canvas after handleMethods("draw"); would be enough.

You may have to overwrite to mouseX and mouseY with a logical position that adjusts for the rotation, so you can still interact properly with the rotated CP5 elements.

#4

Chrir thanks for the response, yes it’s one possible solution if I decide to build the GUI myself.

1 Like
#5

Micycle, thanks for your answer. Finally, I’ve figured out how to implement the rotation using controlP5 functions. That’s where I am. The issue now is I can not select the text field because the mouse coordinates seem different in the controlP5 environment. Anyway, I’m starting to realize is going to be easier to rotate the desktop and modify previously created. :sweat_smile:

import controlP5.*;

ControlP5 cp5;

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

  cp5 = new ControlP5(this);
  cp5.getPointer().set(200, 200);
  cp5.setAutoDraw(false); 
  cp5.addTextfield("input");

}

void draw() {

  background(0);
  fill(255);
  pushMatrix();
  translate(200, 200);
  rotate(radians(90));
  cp5.draw();
  popMatrix();
  
}
#6

I’ve got a almost complete gui sketch you can make use of if you want, it’s large though you could add a method or a class initializer to do the rotation. It isn’t as fully featured as g4p or control p5 and currently is pc only, but it includes menus tabs windows sliders and buttons.

How to rotate the buttons in Processing
#7

Paulgoux thanks so much for the offering. However I had some issues with the touch screen rotation too, so I decided to keep all the GUI in the regular position.

#8

Gui library is almost done.

Currently just the menus work, but I shall hopefully finish the rest of the stuff by the end of next week, I shall look into adding the functionality you are after as soon as I can.