Processing: Variables do no update on correct websocketServerEvent

Question

i'm working on a speech to text + arduino proyect. For that, im using processing with the library https://github.com/alexandrainst/processing_websockets for the speech to text part. So far, it works, i talk and i get printed both as command line and as a text on the canvas the words i speak. The thing is i need to execute a change on a background when the word "zangolotino" is said. And that, does not work.

My code is this

    /*
  Simple WebSocketServer example that can receive voice transcripts from Chrome
  Requires WebSockets Library: https://github.com/alexandrainst/processing_websockets
 */

import websockets.*;
PImage bgEstado;
String palabraClave;
Boolean estado;


WebsocketServer socket;

void setup() {
  socket = new WebsocketServer(this, 1337, "/p5websocket");
  size(600,600);
  palabraClave = "";
  estado = true;
  if(palabraClave == "zangolotino"){
    bgEstado = loadImage("bg1.png");
  } else {
    bgEstado = loadImage("bg2.png");
  }

}

void draw() {
  background(0);
  image(bgEstado, 0, 0);
  text(this.palabraClave, 200, 200);
}
 

void webSocketServerEvent(String msg){
 println(msg);
 palabraClave = msg;
 println(palabraClave);
}

I talk, and "zangolotino" is stored correctly on palabraClave, however the background never changes from bg2.png to bg1.png.

Any insights? Thanks

Answer 1

You're close, but some details are off. Your description of what you want your code to is different from what the code you wrote actually does.

These are a few places to correct:

• if(palabraClave == "zangolotino") won't work as you expect it to. In Processing Java == is different for strings: you need to use palabraClave.equals("zangolotino")
• based on your if/else you load a single image (bg1 or bg2) which means you can't really swap the image later in the websocket event. What you would need to do is load both images. You can use 3 PImage variables: two are actually loaded images, the third one is a reference that points one (bg1) or the other (bg2)
• remember that setup() happens only once when the sketch starts. You will need to use the if condition when you receive a websocket message

Here's your sketch modified to take the above into account (and removing the unused estado variable (which btw can also be boolean Estado)):

import websockets.*;

PImage bgEstado;
PImage bg1, bg2;
Strin palabraClave = "";


WebsocketServer socket;

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

  socket = new WebsocketServer(this, 1337, "/p5websocket");
  
  bg1 = loadImage("bg1.png");
  bg2 = loadImage("bg2.png");

  // point to default bg
  bgEstado = bg2;
}

void draw() {
  background(0);
  image(bgEstado, 0, 0);
  text(palabraClave, 200, 200);
}
 

void webSocketServerEvent(String msg){
 println(msg);
 palabraClave = msg;

 if(msg.equals("zangolotino")){
  bgEstado = bg1;
 }else{
  bgEstado = bg2;
 }
 
}

If it's simpler, you can skip the third variable altogether, since you're holding on to the most recent string received via websockets:

import websockets.*;

PImage bg1, bg2;
Strin palabraClave = "";


WebsocketServer socket;

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

  socket = new WebsocketServer(this, 1337, "/p5websocket");
  
  bg1 = loadImage("bg1.png");
  bg2 = loadImage("bg2.png");
}

void draw() {
  background(0);
  if(palabraClave.equals("zangolotino")){
   image(bg1, 0, 0);
  }else{
   image(bg2, 0, 0);
  }
  text(palabraClave, 200, 200);
}
 

void webSocketServerEvent(String msg){
 println(msg);
 palabraClave = msg;
}