# 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:** 1\
**Showing post:** 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 );
}

```

---

_[View the full topic](https://discourse.processing.org/t/showing-buttons-based-on-a-message-received-by-arduino/22235)._