Send data from webpage to Particle: Best methods?

Hello all! I’m trying to make a new webapp for my particle core (it’s old, I also have a photon).
The concept is simple: have a publicly (or multi-user) webpage where banks of LED matrices can be controlled.
I’m still working on the frontend interface, but I’ve wired up my LED PWM controller and LEDs, and I can control via the particle console.

The variables I need to control are: Matrix to select, x coordinate, y coordinate, and brightness. All are datatype int (of varying length, the matrix selector is uint8, the matrix coords at uint16, and the brightness is uint8).

I used the beginner’s guide for a basic HTML page to control these variables: works!
I found on the forums a few neat examples for controlling hardware via web, but, being wary of having my API token in plaintext HTML, I starting using the PHP proxy by wgbartely found here.

All of this works great! But - I feel a bit limited by using the Particle.function interface; it only takes a single string in, and I’m working on getting a multi-command string (for all 4 variables at once) by building the String in javascript and tokenizing it on the firmware side. This feels a bit clunky, at best. I need this webpage to operate flawlessly for whom I’m building it for, so robustness is key.

Options I’m considering, but need help deciding on:
1.) Continue on with JS commands to Particle.functions, with the PHP proxy.
2.) Have my webserver call a Particle.function() that generates a webhook which requests the data (not very RESTful for the webserver - what if the state of the 4 variables is changed before the webhook request comes in?)
3.) Use the Particle JS API somehow (I really haven’t investigate this option - need advice!)

There’s so many great posts and code examples on this forum, so any comment on strategy is great.

Thanks!

Have you looked at using MQTT? MQTT is a Publish-subscribe model. Think of MQTT as something similar to email as in it is a disconnected model (the parties don’t need to be connected to each other or even online in order to receive messages. They’ll receive messages when they come online, next.

Essentially, your web page publishes (sends) messages to an MQTT broker (free to use brokers are available on the internet, such as iot.eclipse.org). These messages can be either binary data or any arbitrary string data. These messages are published to a “topic” (a topic is similar to, say an email address).

Your Photon subscribes to the “topic”. So when your web pages publishes a messages to a topic your Photon is subscribed to, the Photon receives this message. And now your Photon can react to this message in whatever way it desires.

There is an MQTT library for the Photon in the Library with examples. For MQTT in a browser, there is a JavaScript library published by the Eclipse Paho Project project.

With MQTT you could also have Photons talking to each other (via the broker of course). And because publish-subscribe is a 1 to many, that is a topic can have multiple subscribers and thus when you publish a messages to a topic, the message can be received by multiple subscribers one published message can be received by multiple subscribers you could potentially have multiple photons react to a message from your browser app, or to messages from a Photon. Your Photon can be a publisher as well as a subscriber.

3 Likes

@shiv Great explanation!

3 Likes

If you don’t need the added complexity of MQTT, Particle publish/subscribe does the same thing, although your subscribers has to be online when the message is published to receive it.

Depending on what the requirements are, I’m pretty sure that a single Particle function should suffice just fine. You can add the parameters to a JSON format, or make a delimited string and parse that on the device.

How you deal with the accesstoken depends on the use case. You can have the user log in with his/her Particle account to use the interface, which also makes it dynamic by preventing the hard-coding of credentials. In that case you might not even need the proxy.

2 Likes

Thanks for the tips, everyone!
For using Particle’s native Pub/Sub:
How would one generate an event for the particle to subscribe to from a personal webserver?

It is for this reason I’m leaning towards MQTT, or just a particle function called from a JS script on a webpage (thru the php proxy).
I’m experimenting with MQTT now. I have mosquitto installed and configured properly on my webserver, and by all possible methods, it seems to be working to external tests. However, my Core refuses to find ANY mosquitto servers.
Maybe someone can help me trouble shoot here.

Here’s my sketch (basic test essentially copied from the example; all the LED functions are all commented out for now). No matter what I do, I get the debugging message I added–“Couldn’t connect to MQTT”–every single time, regardless of what server address I use, external, local, IP or FQDN.
What’s going on here? I’ve configured my wifi router to pass port 1883 TCP and UDP to the core.

#include <MQTT.h>
#include "Particle.h"  

void callback(char* topic, byte* payload, unsigned int length);

byte server[]= {192,168,001,012};
MQTT client("test.mosquitto.org", 1883, callback);

void setup() {
    
    Serial.begin(9600);
    
     // connect to the server
    client.connect("sparkclient");
    
    if (client.isConnected()) {
        client.publish("hello/world","hello from SPARK");
        // client.subscribe("hello/world");
    }else{
        Serial.println("Couldn't connect to MQTT!");
    } 
  }

void loop() {
        if (client.isConnected()){
            client.loop();
        }
        }

void callback(char* topic, byte* payload, unsigned int length) {
    char p[length + 1];
    memcpy(p, payload, length);
    p[length] = NULL;

    Serial.println(p);
    delay(200);
}

Update: Tried using the EXACT example from the library included in the WebIDE - the big difference is no include of Particle.h and no Serial usage whatsoever - I saw in another thread that serial usage makes MQTT unstable.

I’m watching a specific topic on test.moqsuitto.org and I can see messages printed to it from other things like various linux machine I administer around the world but it doesn’t receive messages from my Core.

Oh no!

If I understand the question right, the docs might provide the answer :wink:
https://docs.particle.io/reference/api/#publish-an-event

1 Like