Farbkanal-Manipulation mit TextField und Button: Unterschied zwischen den Versionen

Aus DDSWiki
Wechseln zu: Navigation, Suche
Zeile 1: Zeile 1:
 
{{#ev:youtube|https://youtu.be/XE2OmNhO1E8}}
 
{{#ev:youtube|https://youtu.be/XE2OmNhO1E8}}
 +
 +
= Code zum selbst Ausprobieren =
 +
<pre>
 +
TextField tf;
 +
Button upButton;
 +
Button downButton;
 +
int r = 150;
 +
 +
void setup() {
 +
  size(400,400);
 +
  tf = new TextField("150", 1, width/2, height/2, 30, 30, 12);
 +
  tf.setLimit(3);
 +
  upButton = new Button("UP", 2, width/2, (height/2)-tf.getHeight()-10, 30, 30, 12, 0);
 +
  downButton = new Button("DN", 3, width/2, (height/2)+tf.getHeight()+10, 30, 30, 12, 0); 
 +
  background(r, 0, 0);
 +
}
 +
 +
void draw() {
 +
  background(r,0,0);
 +
  String text_ = tf.showAndcheckTextField(); // Textfeld anzeigen und auslesen
 +
  if (text_.length()>0) {
 +
    r = Integer.valueOf(text_);
 +
    if (r>255) {
 +
      r = 255;
 +
    }
 +
  }
 +
  int u = upButton.showAndCheckButton();  // Knopf anzeigen und Status auslesen
 +
  if (u != -1) {
 +
    r = r+1;
 +
    if (r>255) {
 +
      r = 255;
 +
    }
 +
    tf.setText(Integer.toString(r));
 +
  }
 +
  int d = downButton.showAndCheckButton();  // Knopf anzeigen und Status auslesen
 +
  if (d != -1) {
 +
    r = r-1;
 +
    if (r<0) {
 +
      r = 0;
 +
    }
 +
    tf.setText(Integer.toString(r));
 +
  } 
 +
}
 +
 +
// Helferfunktionen für die Textfield Klasse
 +
// Diese beiden Funktionen werden immer benötigt, wenn man mit unserer
 +
// TextField Klasse arbeiten möchte
 +
void keyTyped() {
 +
  tf.tKeyTyped();
 +
}
 +
 +
void mouseClicked() {
 +
  tf.checkFocus();
 +
}
 +
 +
 +
 +
// ==================================================================
 +
// ==================== 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 showAndCheckScreen() {
 +
    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;
 +
    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);
 +
    }
 +
    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() {
 +
    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);
 +
    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_;
 +
  }
 +
 
 +
  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);
 +
      }
 +
    }
 +
  }
 +
}
 +
</pre>

Version vom 24. März 2020, 22:32 Uhr

Code zum selbst Ausprobieren

TextField tf;
Button upButton;
Button downButton;
int r = 150;

void setup() {
  size(400,400);
  tf = new TextField("150", 1, width/2, height/2, 30, 30, 12);
  tf.setLimit(3);
  upButton = new Button("UP", 2, width/2, (height/2)-tf.getHeight()-10, 30, 30, 12, 0);
  downButton = new Button("DN", 3, width/2, (height/2)+tf.getHeight()+10, 30, 30, 12, 0);  
  background(r, 0, 0);
}

void draw() {
  background(r,0,0);
  String text_ = tf.showAndcheckTextField(); // Textfeld anzeigen und auslesen
  if (text_.length()>0) {
    r = Integer.valueOf(text_);
    if (r>255) {
      r = 255;
    }
  }
  int u = upButton.showAndCheckButton();  // Knopf anzeigen und Status auslesen
  if (u != -1) {
    r = r+1;
    if (r>255) {
      r = 255;
    }
    tf.setText(Integer.toString(r));
  }
  int d = downButton.showAndCheckButton();   // Knopf anzeigen und Status auslesen
  if (d != -1) {
    r = r-1;
    if (r<0) {
      r = 0;
    }
    tf.setText(Integer.toString(r));
  }  
}

// Helferfunktionen für die Textfield Klasse
// Diese beiden Funktionen werden immer benötigt, wenn man mit unserer
// TextField Klasse arbeiten möchte
void keyTyped() {
  tf.tKeyTyped();
}

void mouseClicked() {
  tf.checkFocus();
}



// ==================================================================
// ==================== 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 showAndCheckScreen() {
    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;
    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); 
    }
    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() {
    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); 
    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_;
  }
  
  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);
      }
    }
  }
}