"Special" calculator with pages

Aleksei_Varpunen

Hi! I'm quite new on processing but I think I can manage the basics. So my idea was to make a calculator that has text fields where you can choose presets and fields that take number input. Second feature would be it having different pages with information and more fields. I believe you get the idea better from pictures I made in a hurry.

I think I will be able to make the other components for this one if these two are resolved, if not I'll be crying here more :D there is some quite simple math going on behind these fields and I might want to make it an option to see them. And yeah, it's for Space Engineers.

Thanks in advance!

jeremydouglass

You may be interested in using the tab control group feature of a Processing GUI library. For example, see the Tab feature of ControlP5.

• http://www.sojamo.de/libraries/controlP5/
• http://www.sojamo.de/libraries/controlP5/examples/controllers/ControlP5tab/ControlP5tab.pde

Chrisir

No Problem

kfrajer

Relevant: https://forum.processing.org/two/discussion/21335/animation-on-tabs#latest

Kf

Chrisir

I guess it's much better to use a library, because you got drop down fields, text input fields and so on for free...

but here is a version without any library

boolean isPressed = false;
Button[] buttons;
int currentPage = 0;

// ----------------------------------------------

void setup() {

  size(520, 588);
  smooth();
  textLeading(20);

  buttons = new Button[3];
  int index = 0;
  String[] names = {"General", "Power", "Cargo"};
  int unit = 60;

  for (int x = 0; x < 3; x++) {
    buttons[index++] = new Button(x*unit+6, 3, unit, 
      color(111), color(200), 
      x, 
      names[x]);
  }
}

void draw() {
  background(255);

  // show and manage general layout: ---------
  fill(255, 0, 0); 
  rect(0, 3+18, width, 3); 

  for (Button but : buttons) {
    but.update();
    but.display();
  }

  if (!isPressed && keyPressed) {
    isPressed = true;
  }
  if (!keyPressed) {
    isPressed = false;
  }

  // show currect page:    -----------
  switch(currentPage) {
  case 0:
    text("Preset", 110, 200);
    break;

  case 1:
    text("Reactor", 110, 200);
    break;

  case 2:
    text("Cargo", 110, 200);
    break;

  default:
    println("unknown currentPage "+ currentPage);
    exit();
    break;
  }//switch
  //
} //func 

// ---------------------------------------------------------

void mousePressed() {
  for (Button but : buttons) {
    but.press();
    if (but.pressed) {
      currentPage=but.index;
      break; // Other buttons won't be pressed, just stop here
    }
  }
}

void mouseReleased() {
  for (Button but : buttons) {
    but.release();
  }
}

//__________________________________________________//

class Button {

  int x, y; // The x- and y-coordinates
  int size; // Dimension (width and height)

  color baseGray; // Default gray value
  color activeGray; // Value when selected

  boolean over = false; // True when the mouse is over
  boolean pressed = false; // True when the mouse is over and pressed
  int index;
  String text; 

  // constructor 
  Button(int xp, int yp, 
    int s, 
    color b, 
    color p, 
    int index_, 
    String text_) {

    x = xp;
    y = yp;

    size = s;

    baseGray = b;
    activeGray = p;

    index=index_;

    text=text_;
  } // constructor 

  // Updates the over field every frame
  void update() {
    if (mouseX >= x &&
      mouseX <= x + size &&
      mouseY >= y && 
      mouseY <= y + size ) {
      over = true;
    } else {
      over = false;
    }
  }

  boolean press() {
    if (over) {
      pressed = true;
      return true;
    } else {
      return false;
    }
  }

  void release() {
    pressed = false; // Set to false when the mouse is released
  }

  void display() {
    if (index==currentPage) {
      fill(activeGray);
    } else {
      fill(baseGray);
    }
    stroke(255);
    rect(x, y, size, 18, 
      18, 18, 0, 0);
    fill (0); 
    text(text, x+5, y+14);
  }
} //class
//