Farbkanal-Manipulation mit TextField und Button: Unterschied zwischen den Versionen
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); } } } }