Showing buttons based on a message received by arduino

Processing Electronics (Arduino, etc.)
#1

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.

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 );
}
1 Like
#2

Hi,

Welcome to the community! :wink:

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 :

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;
 // ...
}
1 Like
#3

Processing.org/reference/String_equals_.html

boolean received;

void draw() {
  background(150);

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

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

@GoToLoop

Yes my bad :wink:

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

received = message.equals("ack_on");
1 Like
#5

Although it’s clearer it is unsafe, b/c if it happens message is null it’s gonna throw an NPE error: :warning:
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: :wink:

3 Likes
#6

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.

1 Like
#7

Just a small follow up question .

This is not giving the desired response.

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.

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

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

#8

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.

#9

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

#10

Indeed the boolean primitive datatype can be either true or false:
Processing.org/reference/boolean.html
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
Boolean received; // defaults to null

3 Likes