Print result from Particle.function on webpage?

Getting Started
1

I’ve currently got a webpage that has a few buttons on it to register button presses and light up LEDs and such. I have some example code on the page that maps the function result to the console.log, but I also want to be able to parse the result onto the webpage for user feedback after a button is pressed (to know that the Photon actually did something).

I’m using this as a button:

<a class="button" type="button" onclick="functionCall('button', 'buttonpress')">Register button press</a>

And the current code to map it to the console.log:

<script>
	var accessToken = "xxxxxxxxxxxxxxxxxxxx";
	var deviceID = "xxxxxxxxxxxxxxxxxxxx";
	spark.on('login', function(response) {
		console.log(response);
	});

	// callback to be executed by each core
	var callback = function(err, data) {
		if (err) {
			console.log('An error occurred while getting core attrs', err);
		} else {
			console.log('Core attr retrieved successfully', data);
		}
	};
	
	function functionCall(functionName, functionArgument){
		spark.callFunction(deviceID, functionName, functionArgument, callback);  
	}
  
	spark.login({ accessToken: accessToken });
  
</script>

I feel like there has to be a simple way to print the response to the page and NOT hijack the console.log output. Any help?

2

(That looks like some code I’ve written once :see_no_evil:)
Give this a try? (untested)

<div id="outputBox"></div>

and

var outputBox= document.getElementById("outputBox");

var callback = function(err, data) {
  if (err) {
    console.log('An error occurred while getting core attrs', err);
    outputBox.innerHTML = JSON.stringify(err);
  } 
  else {
    console.log('Core attr retrieved successfully', data);   
    outputBox.innerHTML = JSON.stringify(data); // alternatively, use data.NAME_OF_KEY
    // data.return_value will give you the return value.
  }
};
3

Hah, yeah. Your original code worked out for the console.log part no problem. :smile:

This works, but the data doesn’t actually publish any response. I’m not sure if I need to specify a response in my firmware code (I’m assuming that I do), but the console.log replys with something similar to:

Core attr retrieved successfully
Object {id: "260022000b47343432313031", last_app: "", connected: true, return_value: 536959528}
4

Alright, made a small change to the code above, give it another shot.
The problem was that an object was being returned, which you can’t display without doing something with it. Either select the key you’d like to show from the JSON, or make the object a string, and print that.
On the device, you should always have a return value, whatever it may be. It’s useful for passing through different responses :slight_smile:

1 Like
5

So, if the function is Spark.function("button",buttonAction); and i’m using

int buttonAction(String command) {
  if (command=="buttonpress") {
    Spark.publish("Button_Push","Web");
    digitalWrite(led1, HIGH);
    return 1;
  }
}

what am I using for the key, or more specifically, how should I make the object return a string? Forgive my ignorance at JSON/javascript.

6

That should be fine. The whole “make the object a string” is on the receiving (javascript) end, since the cloud actually gives you an object with the response in it. This thing:

{id: "260022000b47343432313031", last_app: "", connected: true, return_value: 536959528}

You can ‘select’ the contents of that by doing data.return_value, where data is the object name, and return_value is one of the keys contained in the object.

The code I posted above should just print out the whole object. Depending on what you need, you can choose either tactic.

7

I thought that I needed to add something else in, because it doesn’t print anything at all into the HTML.

8

Have you got the <div>?

9

Ah, I got it working. Was cleaning up the HTML to post and stripped out some css and a few other js calls.
Something else is preventing it from showing in my code, but I’ll narrow it down. Thanks!

10

While Jordy focuses on the web side I just want to throw in this firmware hint

int buttonAction(String command) {
  if (command=="buttonpress") {
    Spark.publish("Button_Push","Web"); // you might rather set a flag inside here
                                        // and do the publishing in loop()
                                        // and use Particle.publish() as Spark. might get deprecated
    digitalWrite(led1, HIGH);
    return 1;
  }
  return 0; // your fn should ALWAYS return an int, not only on certain conditions
}
1 Like