Porting MQTT MessageReceived function from Processing to p5

p5.js Libraries
1

Hi. I’m very new to coding.

I’m currently working on an MQTT project that involves an Arduino (Esp32) with sensors sending data (publishing) to an MQTT Broker and Processing picking up that data (subscribing)from the MQTT Broker and using that data to create art.

Initially, it was Arduino to MQTT Broker to Processing. I got that to work.

Now I’m trying to port my Processing code to p5, but I don’t know where to begin as p5 feels a little different compared to Processing. It’s been frustrating.

Here is my Processing code for the MessageReceived function. Works perfectly fine in Processing:

void messageReceived(String topic, byte[] payload) {
  println("new message: " + topic + " - " + new String(payload));
  String recData = new String(payload);
  String[] list = split(recData, ',');
  int plantId = int(list[0]);
  int temperature = int(list[1]);
  int proximity = int(list[2]);
  int humidity = int(list[3]);
  print(' ');
  print(plantId);
  print(' ');
  print(temperature);
  print(' ');
  print(proximity);
  print(' ');
  print(humidity);
  println(' ');

}

I don’t even know how to start with porting that to p5. :confused:
I saw an MQTT p5 sketch that had this in its template:

var socket;


// This function is called each time we receive a message from the MQTT-SocketIO bridge

function messageReceived(msg) {
    print("mqtt message received! ["+msg.topic+"] >>"+msg.payload+"<<")
    
// Do something with the payload...
}

I don’t know how to begin porting from Processing to p5
Any help you can give will be much appreciated!
Sorry, it might be obvious to everyone, but I’m very new to coding.

2

Are you running your broker locally?
My suggestion is first to become familiar with p5js. Usually you will have your core html file where it loads css and js. CSS and JS code can be local files or some online url.

  1. Ensure you have the p5js libraries? Are you working with he DOM? Load p5.dom as well and make sure it is load after p5js
  2. To talk to your broker, you will need some javascript library. Is one provided for you? You will load this library in the same way as a p5js library. Better to load this library at the end of your html
  3. Javascript uses the callbacks. You use these callbacks to access some information that is made available to you. If you run your sketch, my first step would be to print the content of msg to see its full structure. Something like:
function messageReceived(msg) {
    print(msg)
    
// Do something with the payload...
}

You can access this print line output in the browser where you are loading your html. You need to access the developer tools (in Chrome, click the 3 dots > more tools > developer tools) and then activate the Console tab where you can see the log messages.

Other than this, I encourage you to explore some recent youtube videos that shows how to start with javascript development. Daniel Shifman has also some good videos exploring javascript using p5js. I suggest maybe this one just to give you a feeling about js and external online APIs but the concept sort of apply to your API provided to you by the broker software.

This message is a bit basic however I hope it gets you started.

Kf

1 Like