I Want to Add Text on the Button

Murphy · July 17, 2019, 7:56am

Hello my dear friends,
I am adding button for open the led. I want to write text on the Button. I am adding text but I can’t see this. Text is under the Button. I want to see that. I am sharing codes. I want to text “START” and “STOP” on the Button. Thanks for reading…

import processing.serial.*;

Serial myArduinoPort;

float buttonA_x = 103.8;
int buttonA_y = 35;
int buttonA_width = 120;
int buttonA_height = 85;
int buttonA_colorR = 0x25;
int buttonA_colorG = 0x25;
int buttonA_colorB = 0x25;
 
float buttonB_x = 103.8;
int buttonB_y = 130;
int buttonB_width = 120;
int buttonB_height = 85;
int buttonB_colorR = 0x25;
int buttonB_colorG = 0x25;
int buttonB_colorB = 0x25;
 
int defaultColor = 125;
 
boolean buttonA_clicked = false;
boolean buttonB_clicked = false;

int value = 0;
int valueo = 1;
int d = day();    // Values from 1 - 31
int m = month();  // Values from 1 - 12
int y = year();   // 2003, 2004, 2005, etc.
 
void setup() {
  
  size(335, 230);
  background(125, 125, 125);
  
  //Get serial port for Arduino
  String arduinoPort = Serial.list()[0];
  println(arduinoPort);
  myArduinoPort = new Serial(this, arduinoPort, 9600);
  
  fill(0, 0, 0);
  text("LED CONTROL", 119, 20);
  
  fill(0, 0, 0);
  text("/", 286, 220);

  fill(0, 0, 0);
  text("/", 296, 220);
  
  String s = String.valueOf(d);
  text(s, 272, 220);
  s = String.valueOf(m);
  text(s, 290, 220); 
  s = String.valueOf(y);
  text(s, 300, 220);
}
  
void draw() {
   
  if(buttonA_clicked){
    fill(buttonA_colorR, buttonA_colorG, buttonA_colorB);
  }else if(buttonB_clicked){
    fill(buttonB_colorR, buttonB_colorG, buttonB_colorB);
  }
 
  fill(buttonA_colorR, buttonA_colorG, buttonA_colorB);
  rect(buttonA_x, buttonA_y, buttonA_width, buttonA_height);
   
  fill(buttonB_colorR, buttonB_colorG, buttonA_colorB);
  rect(buttonB_x, buttonB_y, buttonB_width, buttonB_height);
}
 
/* The mouseClicked() function is called once after a mouse button 
 * has been pressed and then released.
 */
void mouseClicked(){
  // mouseX = x of mouse click position
  // mouseY = y of mouse click position
   
  if (mouseX >= buttonA_x && mouseX <= buttonA_x + buttonA_width && 
      mouseY >= buttonA_y && mouseY <= buttonA_y + buttonA_height) {
     buttonA_clicked = true;
     
     myArduinoPort.write("H");
   } else {
     buttonA_clicked = false;
   }
    
   if (mouseX >= buttonB_x && mouseX <= buttonB_x + buttonB_width && 
       mouseY >= buttonB_y && mouseY <= buttonB_y + buttonB_height) {
     buttonB_clicked = true;
     
     myArduinoPort.write("L");
   } else {
     buttonB_clicked = false;
   }
}

kll · July 17, 2019, 8:05am

looks like you use

draw without background
the filled rectangle in draw ( 60 times per sec )

but the text() you draw in setup only, so it might be visible
in the very first screen only.

Led System Turn on/off ,
here i give you a working toggle button already, you not like it?

also i recommended there to work in steps, as long your button not works
forget the arduino stuff, 90% of the processing users will avoid your
question when they see this / even the arduino part is not used at all inthere…

Murphy · July 17, 2019, 8:29am

Firstly, Thanks for return my dear Friend,
You didn’t help me. What can I do for add text on the Button? I need help. I want to add text “START” and “STOP” on the Buttons. I don’t know where I add text. I hope so you can help me…

kll · July 17, 2019, 8:38am

-a- you must do the
https://processing.org/reference/text_.html
after the filled rectangle
-b- you should prepare 2 string variables with that 2 texts
-c- you should prepare a 3d. variable ( the one you feed to text(…) )
what you fill with the related of the first 2 string variables, depending on the
status of your toggle button
if button is

OFF text should be START
ON text should be STOP
( that is what i mentioned in my first answer as "reversed SETPOINT " )

-d- the full code i give you already ( and i see your LIKE there, so i expected that you tested it )

Chrisir · July 17, 2019, 10:27am

example

float buttonA_x = 103.8;
int buttonA_y = 35;
int buttonA_width = 120;
int buttonA_height = 85;
int buttonA_colorR = 0x25;
int buttonA_colorG = 0x25;
int buttonA_colorB = 0x25;

float buttonB_x = 103.8;
int buttonB_y = 130;
int buttonB_width = 120;
int buttonB_height = 85;
int buttonB_colorR = 0x25;
int buttonB_colorG = 0x25;
int buttonB_colorB = 0x25;

int defaultColor = 125;

boolean buttonA_clicked = false;
boolean buttonB_clicked = false;

int value = 0;
int valueo = 1;
int d = day();    // Values from 1 - 31
int m = month();  // Values from 1 - 12
int y = year();   // 2003, 2004, 2005, etc.

void setup() {
  size(335, 230);
  background(125);
}

void draw() {

  background(125);

  if (buttonA_clicked) {
    fill(buttonA_colorR, buttonA_colorG, buttonA_colorB);
  } else if (buttonB_clicked) {
    fill(buttonB_colorR, buttonB_colorG, buttonB_colorB);
  }

  fill(buttonA_colorR, buttonA_colorG, buttonA_colorB);
  rect(buttonA_x, buttonA_y, buttonA_width, buttonA_height);

  fill(buttonB_colorR, buttonB_colorG, buttonA_colorB);
  rect(buttonB_x, buttonB_y, buttonB_width, buttonB_height);

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

  fill(255); 

  fill(0, 0, 0);
  text("LED CONTROL", 119, 20);

  //fill(0, 0, 0);
  text("/", 286, 220);

  //fill(0, 0, 0);
  text("/", 296, 220);

  String s = String.valueOf(d);
  text(s, 272, 220);
  s = String.valueOf(m);
  text(s, 290, 220); 
  s = String.valueOf(y);
  text(s, 300, 220);

  fill(255); 
  if (buttonB_clicked) 
    text("Hello1", buttonB_x+10, buttonB_y+20);

  fill(255); 
  if (buttonA_clicked) 
    text("Hello2", buttonA_x+10, buttonA_y+20);
}// func 

/* The mouseClicked() function is called once after a mouse button 
 * has been pressed and then released.
 */
void mouseClicked() {
  // mouseX = x of mouse click position
  // mouseY = y of mouse click position

  if (mouseX >= buttonA_x && mouseX <= buttonA_x + buttonA_width && 
    mouseY >= buttonA_y && mouseY <= buttonA_y + buttonA_height) {
    buttonA_clicked = true;
  } else {
    buttonA_clicked = false;
  }

  if (mouseX >= buttonB_x && mouseX <= buttonB_x + buttonB_width && 
    mouseY >= buttonB_y && mouseY <= buttonB_y + buttonB_height) {
    buttonB_clicked = true;
  } else {
    buttonB_clicked = false;
  }
}

Murphy · July 17, 2019, 2:41pm

Firstly, Thanks for return my dear Friend,
The answer I’m looking for is great at this but I want to stay stable on the Button. It should show me everytime. I don’t want to click and see text. I want to see text everytime.

Chrisir · July 17, 2019, 2:46pm




float buttonA_x = 103.8;
int buttonA_y = 35;
int buttonA_width = 120;
int buttonA_height = 85;
int buttonA_colorR = 0x25;
int buttonA_colorG = 0x25;
int buttonA_colorB = 0x25;

float buttonB_x = 103.8;
int buttonB_y = 130;
int buttonB_width = 120;
int buttonB_height = 85;
int buttonB_colorR = 0x25;
int buttonB_colorG = 0x25;
int buttonB_colorB = 0x25;

int defaultColor = 125;

boolean buttonA_clicked = false;
boolean buttonB_clicked = false;

int value = 0;
int valueo = 1;
int d = day();    // Values from 1 - 31
int m = month();  // Values from 1 - 12
int y = year();   // 2003, 2004, 2005, etc.

void setup() {
  size(335, 230);
  background(125);
}

void draw() {

  background(125);

  if (buttonA_clicked) {
    fill(buttonA_colorR, buttonA_colorG, buttonA_colorB);
  } else if (buttonB_clicked) {
    fill(buttonB_colorR, buttonB_colorG, buttonB_colorB);
  }

  fill(buttonA_colorR, buttonA_colorG, buttonA_colorB);
  rect(buttonA_x, buttonA_y, buttonA_width, buttonA_height);

  fill(buttonB_colorR, buttonB_colorG, buttonA_colorB);
  rect(buttonB_x, buttonB_y, buttonB_width, buttonB_height);

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

  fill(255); 

  fill(0, 0, 0);
  text("LED CONTROL", 119, 20);

  //fill(0, 0, 0);
  text("/", 286, 220);

  //fill(0, 0, 0);
  text("/", 296, 220);

  String s = String.valueOf(d);
  text(s, 272, 220);
  s = String.valueOf(m);
  text(s, 290, 220); 
  s = String.valueOf(y);
  text(s, 300, 220);

  textAlign(CENTER, CENTER); 
  fill(255);
  text("START", 
    buttonA_x+buttonA_width/2, buttonA_y+buttonA_height/2);

  fill(255); 
  text("STOP", 
    buttonB_x+buttonB_width/2, buttonB_y+buttonB_height/2);

  // reset 
  textAlign(LEFT);
}// func 

/* The mouseClicked() function is called once after a mouse button 
 * has been pressed and then released.
 */
void mouseClicked() {
  // mouseX = x of mouse click position
  // mouseY = y of mouse click position

  if (mouseX >= buttonA_x && mouseX <= buttonA_x + buttonA_width && 
    mouseY >= buttonA_y && mouseY <= buttonA_y + buttonA_height) {
    buttonA_clicked = true;
  } else {
    buttonA_clicked = false;
  }

  if (mouseX >= buttonB_x && mouseX <= buttonB_x + buttonB_width && 
    mouseY >= buttonB_y && mouseY <= buttonB_y + buttonB_height) {
    buttonB_clicked = true;
  } else {
    buttonB_clicked = false;
  }
}
//

Murphy · July 17, 2019, 2:49pm

You are awesome Buddy, Thanks for everything

Topic		Replies	Views
Led System Turn on/off Electronics (Arduino, etc.)	2	1010	July 12, 2019
Storing all incoming data and button not working Electronics (Arduino, etc.)	8	988	January 9, 2021
I added Buttons for Fan On/Off on Processing Electronics (Arduino, etc.)	24	1949	July 26, 2019
Use 2 leds and 2 buttons using arduino and processing Electronics (Arduino, etc.)	2	1127	June 19, 2018
How to show a string on the screen? Electronics (Arduino, etc.)	2	597	June 4, 2019

I Want to Add Text on the Button

Related Topics