# Showing buttons based on a message received by arduino

**URL:** <https://discourse.processing.org/t/showing-buttons-based-on-a-message-received-by-arduino/22235>\
**Category:** Electronics (Arduino, etc.)\
**Created:** [June 29, 2020, 4:33am UTC](https://discourse.processing.org/t/showing-buttons-based-on-a-message-received-by-arduino/22235 "2020-06-29T04:33:58Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![mohitSingh](https://avatars.discourse-cdn.com/v4/letter/m/85f322/32.png) [@mohitSingh](https://discourse.processing.org/u/mohitSingh)\
**Post date:** [June 29, 2020, 4:33am UTC](https://discourse.processing.org/t/showing-buttons-based-on-a-message-received-by-arduino/22235/1 "2020-06-29T04:33:58Z")

</div>

Hi,

This is my first or second processing code and I am findind it a bit difficult to wrap my head around processing.  
I am trying to make a simple GUI, where I send a UDP packet to my arduino and receive an acknowledgement back.

I just want to show an image of an Green LED when I receive the ack for ON command.  
And image of Red LED when I receive ack for OFF command.  
Now, When I try adding this in draw as a conditional statement it doesn’t show anything.  
I even tried to put the image function in my packet receive function but still the image doesn’t show up.

I am not sure if I am doing it correctly, if anyone can go through my code and suggest me the correct way to achieve this I would be very thankful.

```auto
import controlP5.*; //import ControlP5 library
import hypermedia.net.*;
UDP udp;  
ControlP5 cp5; 
PImage led_red, led_green;
PFont font;
String message;

void setup() { 
  size(300, 300);                          
  cp5 = new ControlP5(this);
  font = createFont("calibri light bold", 20);   
  led_red = loadImage("red.png");
  led_green = loadImage("green.png");
  udp = new UDP(this, 6124);
  udp.listen(true);

// Add the buttons to GUI
  cp5.addButton("ON") //The button
    .setPosition(115, 60) //x and y coordinates of upper left corner of button
    .setSize(70, 50) //(width, height)
    ;
  cp5.addButton("OFF") //The button
    .setPosition(115, 120) //x and y coordinates of upper left corner of button
    .setSize(70, 50) //(width, height)
    ;

}

void draw() { //Same as loop in arduino

  background(150, 150, 150);
  textFont(font); 
  text("IO CONTROLLER", 70, 30);  
}

void ON() {

  send("ON");
}

void OFF() {

  send("OFF");
}

void receive( byte[] data, String ip, int port ) { // <-- extended handler

  data = subset(data, 0, data.length);
  message = new String( data );

  if (message=="ack_on")
  {
    //circle(45, 90, 12);
    image(led_green, 50, 50);
  }
  println( "receive: \""+message+"\" from "+ip+" on port "+port );
}

void send(String message) {

  //String message = "ON"; // the message to send
  String ip = "localhost"; // the remote IP address
  int port = 6123; // the destination port

  udp.send( message, ip, port );
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [June 29, 2020, 7:30am UTC](https://discourse.processing.org/t/showing-buttons-based-on-a-message-received-by-arduino/22235/2 "2020-06-29T07:30:17Z")

</div>

Hi,

Welcome to the community! 😉

Remember that the draw function is being executed roughly 60 times per second. And each time, you are drawing a grey background (btw you could write it like this : `background(150);` by just giving the white value).

Drawing a background is equivalent to clearing the entire screen. So if you display your image inside of your `receive` function, it’s going to display that image on a single frame then next frame, you are going to clear your screen so the image disappear.

Just keep track of a boolean value `received` that is first set to false then whenever you receive a positive answer, put that variable to true. Then display your images in draw accordingly :

```auto
void draw(){
  background(150);
  
  if(received){
    image(led_green, 50, 50);
  }else{
    image(led_red, 50, 50);
  }
}

void receive(...){
  // ...
  if(message == "ack_on") received = true;
  if(message == "ack_off") received = false;
 // ...
}

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 29, 2020, 10:20am UTC](https://discourse.processing.org/t/showing-buttons-based-on-a-message-received-by-arduino/22235/3 "2020-06-29T10:20:20Z")

</div>

> [@josephh](#):
>
> `if(message == "ack_on") received = true;`

> **[equals() / Reference](https://processing.org/reference/String_equals_.html)**
>
> Compares two strings to see if they are the same. This method is necessary because it's not possible to compare strings using the equality operator (==). Returns true if the strings are the sam…

```auto
boolean received;

void draw() {
  background(150);

  if (received) {
    // ...
  }
}

void receive(...) {
  received = "ack_on".equals(message);
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [June 29, 2020, 10:56am UTC](https://discourse.processing.org/t/showing-buttons-based-on-a-message-received-by-arduino/22235/4 "2020-06-29T10:56:10Z")

</div>

@GoToLoop

Yes my bad 😉

We could also write (which is probably more clear) :

```auto
received = message.equals("ack_on");

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 29, 2020, 11:06am UTC](https://discourse.processing.org/t/showing-buttons-based-on-a-message-received-by-arduino/22235/5 "2020-06-29T11:06:54Z")

</div>

> [@josephh](#):
>
> `received = message.equals("ack_on");`

Although it’s clearer it is unsafe, b/c if it happens _message_ is `null` it’s gonna `throw` an NPE error: ⚠  
[Docs.Oracle.com/en/java/javase/11/docs/api/java.base/java/lang/NullPointerException.html](http://Docs.Oracle.com/en/java/javase/11/docs/api/java.base/java/lang/NullPointerException.html)

While `received = "ack_on".equals(message);` is Exception-free b/c a literal String is never `null` & method **equals()** accepts a passed `null` argument: 😉

---

<div class="post-metadata">

**Author:** ![mohitSingh](https://avatars.discourse-cdn.com/v4/letter/m/85f322/32.png) [@mohitSingh](https://discourse.processing.org/u/mohitSingh)\
**Post date:** [June 29, 2020, 2:06pm UTC](https://discourse.processing.org/t/showing-buttons-based-on-a-message-received-by-arduino/22235/6 "2020-06-29T14:06:28Z")

</div>

Hi again,  
Thanks all for the help. I understood what I was doing wrong by all the messages. Thanks again. This is a wonderful community.

---

<div class="post-metadata">

**Author:** ![mohitSingh](https://avatars.discourse-cdn.com/v4/letter/m/85f322/32.png) [@mohitSingh](https://discourse.processing.org/u/mohitSingh)\
**Post date:** [June 29, 2020, 3:17pm UTC](https://discourse.processing.org/t/showing-buttons-based-on-a-message-received-by-arduino/22235/7 "2020-06-29T15:17:55Z")

</div>

Just a small follow up question .

This is not giving the desired response.

```auto
void receive( byte[] data, String ip, int port ) {  
  data = subset(data, 0, data.length);
  message = new String( data );
if(message == "ack_on") received = 1;
  if(message == "ack_off") received = 0;
}

```

But this is working as I wanted. What is the difference between the two? It should have been same in my opinion.

```auto
void receive( byte[] data, String ip, int port ) {  
  data = subset(data, 0, data.length);
  message = new String( data );
received = "ack_on".equals(message);
}

```

I will put the full code again just for clarity. The commented portion is the not working portion. I had to modify my code a bit to make it look a bit decent

```auto
import controlP5.*; //import ControlP5 library
import hypermedia.net.*;
UDP udp;  
ControlP5 cp5; 
PImage led_red, led_green, led_white;
PFont font;
String message;
int received = 2;
Boolean breceived;

void setup() { 
  size(300, 300);    

  cp5 = new ControlP5(this);
  font = createFont("Ubuntu Mono Bold", 15);   
  led_red = loadImage("red.png");
  led_green = loadImage("green.png");
  led_white = loadImage("white.png");
  udp = new UDP(this, 6124);
  udp.listen(true);

  // Add the buttons to GUI
  cp5.addButton("ON") //The button
    .setPosition(50, 60) //x and y coordinates of upper left corner of button
    .setSize(70, 50) //(width, height)
    ;
  cp5.addButton("OFF") //The button
    .setPosition(50, 120) //x and y coordinates of upper left corner of button
    .setSize(70, 50) //(width, height)
    ;
}

void draw() { //Same as loop in arduino

  background(150, 150, 150);
  textFont(font); 
  text("Remote Control Interface", 70, 30);  
  image(led_white, 140, 60);
  image(led_white, 140, 120);
  if (received == 1) {
    image(led_green, 140, 60);
    text("Ack for ON", 186, 88);
  }
  if (received == 0) {
    image(led_red, 140, 120);
    text("Ack for OFF", 186, 148);
  }
}

void ON() {

  send("ON");
}

void OFF() {

  send("OFF");
}

void receive( byte[] data, String ip, int port ) { // <-- extended handler

  data = subset(data, 0, data.length);
  message = new String( data );

  //if (message == "ack_on") received = 1;
  //if (message == "ack_off") received = 0;
  breceived = "ack_on".equals(message);
  if(breceived) received =1;
  else if(!breceived) received =0;
  println( "receive: \""+message+"\" from "+ip+" on port "+port );
}

void send(String message) {

  //String message = "ON"; // the message to send
  String ip = "localhost"; // the remote IP address
  int port = 6123; // the destination port

  udp.send( message, ip, port );
}

```

![ack](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/811371f182c426af6609aeaf21db44dc2cd4ab26.png)

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [June 29, 2020, 11:16pm UTC](https://discourse.processing.org/t/showing-buttons-based-on-a-message-received-by-arduino/22235/8 "2020-06-29T23:16:09Z")

</div>

> [@mohitSingh](#):
>
> ```auto
> if(message == "ack_on") received = 1;
> if(message == "ack_off") received = 0;
> 
> ```

It is because here, you are putting `0` or `1` inside the received variable but what we want is to use booleans (`true` or `false`) as String.equals(…) returns also a boolean value.

---

<div class="post-metadata">

**Author:** ![mohitSingh](https://avatars.discourse-cdn.com/v4/letter/m/85f322/32.png) [@mohitSingh](https://discourse.processing.org/u/mohitSingh)\
**Post date:** [June 30, 2020, 1:12am UTC](https://discourse.processing.org/t/showing-buttons-based-on-a-message-received-by-arduino/22235/9 "2020-06-30T01:12:26Z")

</div>

Actually I made received as INT for this case as i wanted tri-state variable for this because I wanted nothing to be shown when i have not received ack for either ON or OFF.

So i had set initially received as 2.  
So when it is 2 neither green or red symbols show up.  
When i get ack\_on, symbol for ON shows up, when I get ack\_off, symbol for OFF shows up

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 30, 2020, 8:24am UTC](https://discourse.processing.org/t/showing-buttons-based-on-a-message-received-by-arduino/22235/10 "2020-06-30T08:24:16Z")

</div>

> [@mohitSingh](#):
>
> … as I wanted a tri-state variable…

Indeed the `boolean` primitive datatype can be either `true` or `false`:

> **[boolean / Reference](https://processing.org/reference/boolean.html)**
>
> Datatype for the Boolean values true and false. It is common to use boolean values with control statements to determine the flow of a program. The first time a variable is written…

`boolean received; // defaults to false`

For a 3rd state you can use a Boolean type instead, which can be `null` in addition to `true` or `false`:  
[Docs.Oracle.com/en/java/javase/11/docs/api/java.base/java/lang/Boolean.html](http://Docs.Oracle.com/en/java/javase/11/docs/api/java.base/java/lang/Boolean.html)  
`Boolean received; // defaults to null`