Mobile App Mockup

Benötigte Files

Diese Dateien müssen in den data-Folder des Processing Sketches kopiert werden

• http://guelden.info/oebb1.png
• http://guelden.info/oebb2.png
• http://guelden.info/oebb3.png
• http://guelden.info/oebb4.png

Code zum selbst Ausprobieren

Screen[] screen = new Screen[25];

int activeScreenId = 0;

void setup() {
  size(485,746);
  background(220);
  screen[0] = new Screen(0,"oebb1.png");
  screen[1] = new Screen(1,"oebb2.png");
  screen[2] = new Screen(1,"oebb3.png");
  screen[3] = new Screen(1,"oebb4.png");
  screen[0].addButton("Zu 1", 1, 0,550,width,60,30,1);
  screen[0].addButton("Zu 1", 2, 0,screen[0].button[0].getHeight()+12+550,width,60,30,1);
  screen[1].addButton("Zu 3", 3, 88,0,400,100,30,2);
  screen[2].addButton("Zu 4", 4, 161,0,320,100,30,3);
  screen[0].makeTransparant(true);
  screen[1].makeTransparant(true);
  screen[2].makeTransparant(true);
  screen[3].addTextField("Ort", 1, 54,8,370,37,20);
}

void draw() {
  background(220);
  
  int[] buttonState = new int[25];
  String[] textFieldContent = new String[25];
  if (screen[activeScreenId] != null) {
    screen[activeScreenId].showScreen();
    buttonState = screen[activeScreenId].checkButtons();
    textFieldContent = screen[activeScreenId].getTextFieldContents();
  }
  for (int i=0; i<25; i++) {
    if (buttonState[i] >= 0) {
      activeScreenId = buttonState[i];
    }
  }
}


// Helferfunktionen. Werden von TextField benötigt
void mouseClicked() {
   println(mouseX+ " --- " + mouseY); 
   screen[activeScreenId].checkFocus();
}

void keyTyped() {
  screen[activeScreenId].tKeyTyped();
}

// ==================================================================
// ==================== KLASSENDEFINITIONEN =========================
// ==================================================================
// Diese Klassendefinitionen sind einfach in ein neues Sketch zu kopieren

// =======================KLASSE SCREEN===============================
class Screen {
  private int screenId = 0;
  private PImage img = null;
  public Button[] button = new Button[25];
  private int[] buttonState = new int[25];
  private int buttonCounter = 0;
  public TextField[] textField = new TextField[25];
  private String[] textFieldContent = new String[25];
  private int textFieldCounter = 0;
  
  Screen(int s) {
    screenId = s;
    for (int i=0; i<25; i++) {
      buttonState[i] = -1;
      textFieldContent[i] = "";
    }
  }
  
  Screen(int s, String img_) {
    screenId = s;
    img = loadImage(img_);
    img.resize(width, height);
    for (int i=0; i<25; i++) {
      buttonState[i] = -1;
      textFieldContent[i] = "";
    }
  }
  
  // Zeigt den Screen an
  public void showScreen() {
    if (img!=null) {
      image(img, 0,0);
    } else {
      textSize(20);
      textAlign(CENTER, CENTER);
      text(screenId, width/2, height/2);
    }
  }
  
  int[] getButtonStates(){
    return checkButtons(); 
  }
  
  String[] getTextFieldContents(){
    return checkTextFields();
  }
  
  // Überdeckt den Screen
  public void hideScreen() {
    background(120);
  }
  
  public void makeTransparant(boolean t) {
    for (int i=0; i<buttonCounter; i++) {
      button[i].makeTransparant(t);
    }
  }
  
  public void addButton(String l, int i, int x, int y, int w, int h, int ts, int s) {
    if (buttonCounter<25) {
      button[buttonCounter] = new Button(l, i, x, y, w, h, ts, s);
      buttonCounter++;
    }
  }
  
  public void addTextField(String l, int i, int x, int y, int w, int h, int ts) {
    if (textFieldCounter<25) {
      textField[textFieldCounter] = new TextField(l, i, x, y, w, h, ts);
      textFieldCounter++;
    }
  }  
  
  public int[] checkButtons() {
    for (int i=0; i<buttonCounter; i++) {
      buttonState[i] = button[i].showAndCheckButton();
    }
      return buttonState;
  }
  
  public String[] checkTextFields() {
    for (int i=0; i<textFieldCounter; i++) {
      textFieldContent[i] = textField[i].showAndcheckTextField();
    }
    return textFieldContent;
  }
  
  public void checkFocus() {
    for (int i=0; i<textFieldCounter; i++) {
      textField[i].checkFocus();
    }
  }
  
  public void tKeyTyped() {
    for (int i=0; i<textFieldCounter; i++) {
      textField[i].tKeyTyped();
    }
  }
}


// ===================KLASSE BUTTON=================================
class Button {

  // Interne Variablen der Klasse. Man könnte auch das Schlüsselwort 'private' voranstellen
  String label;
  int id;
  int xPos, yPos, width_, height_;
  int textSize_;
  int nextScreen;
  boolean buttonIsTransparant = false;

  // Constructor 
  Button(String l, int i, int x, int y, int w, int h, int ts, int s) {
    label = l; // Beschriftung des Knopfes
    id = i; // Eine eindeutige ID für den Knopf
    xPos = x; // Für die Positionierung und Dimensionierung des Knopfes
    yPos = y; 
    width_ = w; 
    height_ = h;
    textSize_ = ts;
    nextScreen = s; // Zu welchem Screen führt der Button?
  }

  int showAndCheckButton() {
    int r = -1;
    push();
    if ((mouseX>=xPos) && (mouseX<=xPos+width_) && (mouseY>=yPos) && (mouseY<=yPos+height_)) {
      strokeWeight(1);
      stroke(204, 102, 0);
      fill(255);
      if (mousePressed) {
        r = nextScreen;
        fill(120);
      }
    } else {
      strokeWeight(1);
      stroke(0, 0, 0);
      fill(255);
    }  
    if (!buttonIsTransparant) {
      rect(xPos, yPos, width_, height_);
      fill(0);
      textAlign(CENTER, CENTER);
      textSize(textSize_);
      text(label, xPos+width_/2, yPos+height_/2); 
    }
    pop();
    return r;
  }
  
  int getWidth() {
    return width_;
  }
  
  int getHeight() {
    return height_;
  }
  
  void makeTransparant(boolean t) {
    buttonIsTransparant = t;
  }
  
  void setLabel(String l) {
    label = l;
  }
}


// ====================KLASSE TEXTFIELD================================
class TextField {

  // Interne Variablen der Klasse. Man könnte auch das Schlüsselwort 'private' voranstellen
  String text_;
  int id;
  int xPos, yPos, width_, height_;
  int textSize_;
  boolean isFocussed = false;
  int lim = 10;

  // Constructor 
  TextField(String t, int i, int x, int y, int w, int h, int ts) {
    text_ = t; // Beschriftung des Knopfes
    id = i; // Eine eindeutige ID für den Knopf
    xPos = x; // Für die Positionierung und Dimensionierung des Knopfes
    yPos = y; 
    width_ = w; 
    height_ = h;
    textSize_ = ts;
  }

  String showAndcheckTextField() {
    push();
    if ((mouseX>=xPos) && (mouseX<=xPos+width_) && (mouseY>=yPos) && (mouseY<=yPos+height_)) {
      strokeWeight(1);
      stroke(204, 102, 0);
      fill(255);
    } else {
      strokeWeight(1);
      stroke(0, 0, 0);
      fill(255);
    }  
    if (isFocussed) {
      strokeWeight(2);
      stroke(204, 102, 0);
    }
    rect(xPos, yPos, width_, height_);
    fill(0);
    textAlign(CENTER, CENTER);
    textSize(textSize_);
    text(text_, xPos+width_/2, yPos+height_/2); 
    pop();
    return text_;
  }
  
  int getWidth() {
    return width_;
  }
  
  int getHeight() {
    return height_;
  }
  
  void setText(String t) {
    text_ = t;
  }
  
  void setLimit(int l) {
    lim = l;
  }
 
  String getText() {
    return text_;
  }
  
  /* https : // forum.processing.org/two/discussion/20882/very-basic-question-how-to-create-an-input-text-box#latest
 * forum.processing.org/two/discussion/423/ */
  boolean checkFocus() {
    isFocussed = mouseX > xPos & mouseX < xPos+width_ & mouseY > yPos & mouseY < yPos+height_;  
    return isFocussed;
  }
  
  void tKeyTyped() {
    if (isFocussed) {
      char k = key;
      if (k == ESC) {
        // println("esc 2");
        //state=stateNormal; 
        key=0;
        return;
      } 
      if (k == CODED) {
        return;
      }
   
      final int len = text_.length();
   
      if (k == BACKSPACE) {
        text_ = text_.substring(0, max(0, len-1));
      } else if (len >= lim) {
        return;
      } else if (k == ENTER || k == RETURN) {
        // this ends the entering 
        println("RET ");
        //state  = stateNormal; // close input box 
        //result = text_;
      } else if (k == TAB & len < lim-3) {
        text_ += "    ";
      } else if (k == DELETE) {
        text_ = "";
      } else if (k >= ' ') {
        text_ += str(k);
      }
    }
  }
 
 /*
  void tKeyPressed() {
    if (key == ESC) {
      println("esc 3");
      //state=stateNormal;
      key=0;
    }
    if (key != CODED)  return;
    final int k = keyCode;
    final int len = text_.length();
    if (k == LEFT){ 
      text_ = text_.substring(0, max(0, len-1));
    } else if (k == RIGHT & len < lim-3) {
      text_ += "    ";
    } 
    println(text_);
  }*/
}