"Special" calculator with pages

edited December 2017 in How To...

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.

SE1-01 SE2-01 SE3-01

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!

Tagged:

Answers

  • edited December 2017

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

  • No Problem

  • 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
    //
    
Sign In or Register to comment.