Web_AjaxRGB.ino with a get example?

General
1

I have been playing with the Web_AjaxRGB.ino example. I understand that it uses:
$.post(’/rgb’, { red: ui.value });
to send the red value from the web page to the Photon.

What I would like to know is what if I wanted to get a value from the Photon and put it on website.
might anyone be able to shed some light on this?

I used this example before with another device, but I cant seem to figure out how in the .ino example to send the data back. Below is my index.html file if it helps.

<!DOCTYPE html>
<html lang='en'>

<head>
    <title>IR Temp</title>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1' />
    <link href='https://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css' rel='stylesheet'>
</head>

<body onload='grabData();'>

    <div class='container'>
        <div class='jumbotron'>
            <div class='text-center'>
                <div class='panel panel-primary'>

                    <h1 style='display: inline'>Temperature: <span id='new_val'> </span></h1>

                </div>
            </div>
        </div>



        <!-- javascript -->
        <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
        <script src='https://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js'></script>


        <script>
            function grabData() {
                $.post(document.URL, {
                    gd: 'get_temp'
                }, function(data) {
                    $('#new_val').html(data.AV);
                }, 'json')
                    .always(function() {
                        setTimeout(grabData, 2000);
                    }) // polls every 2 secs
                .fail(function(data) {
                    alert('ERROR: ' + data.responseText);
                });
            }
        </script>
</body>

</html>
2

I’d put the RGB values into a single Particle variable in JSON format… once you have that you can grab the JSON data with a jquery $.getJSON() call like this:

in your Particle program:

snprintf(ledJSON, sizeof(ledJSON), "{\ledColor\":{\"red\":%d,\"green\":%d,\"blue\":%d}}", ledColor.red, ledColor.green, ledColor.blue);

your JavaScript:

function getParticleData()
{
	var requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + ledJSON + "/?access_token=" + accessToken;
	$.getJSON(requestURL, function(myJSON) {
          var rgbValues = JSON.parse(myJSON.result);  // edited for clarity/ease
          console.log(rgbValues);
          // parse your json data and update your HTML document
	});
}

kind-of-thing…

I hope that helps

3 Likes
3

Have a look over here as well:

1 Like
4

Thank you guys for the reply’s. But i think there is a misunderstanding of what I am trying to do (somewhat)
I am hosting the website on the Particle locally, so I am pointing my browser to my devices IP address.

@BulldogLowell, thank you, but I cannot find any information on “snprintf” from here.
https://docs.particle.io/reference/firmware/photon/

I will look into your JavaScript example, to change where it points to, and instead point to my device.
But the reply from the Photon is where I am stuck. it seems your Particle program example is what I am looking for to start formating the response but still not enough for me :wink:

From what I am seeing in the WebSerever.h file. I have:

// output a string stored in program memory, usually one defined
// with the P macro
void printP(const unsigned char *str);

// output raw data stored in program memory
void writeP(const unsigned char *data, size_t length);

5

I hope I understand right then.
You want to have dynamic values in the HTML you will be handing out from the Photon, right?
If so, then that’s perfectly possible too.
You’d just need to create the respective HTML portion in your code - which would not even require AJAX.

You’d just do something like

snprintf(htmlSnippet, sizeof(htmlSnippet), "<h1 style='display: inline'>Temperature: <span id='new_val'>%.1f</span></h1>", yourValue);

After that, you’ll just have to send your page in seperate portions:

  1. first part of static text
  2. dynamic portion
  3. last part of static text
6

Google is your friend regarding snprintf(). Since it is part of the C++ language, and not unique to Particle, no need to put into the docs, I’d guess.

yes, you have to format the jquery properly to be inserted in your C++ code… that means figuring out all that. Doing it dynamically, with C++ driving all of that is a major PITA, IMHO.

Rather than calling back to your Particle device through WebServer, the code above can use Ajax with function calls and utilizes the cloud to get the device data.

I find it WAY easier to simply serve up the HTML/JavaScript/CSS in a page that is dynamically updated using JavaScript/Ajax. This then allows you to utilize the Particle ecosystem rather than deal with all of the page refresh machinations (and dynamically serving up the page on every action).

You can build your webpage completely in your favorite HTML editor and then jam it into your C++ code adding all of the escaping, etc. If you don’t care about readability once you want to insert it into your code, it is even easier.

Here is an example of a recent project I did (am doing, it’s a work in process) for a friend. It should run on your device and you can see that I’m only serving up a page that gets dynamically updated via its own payload and uses the cloud to update based on device attributes. We are monitoring a few sensors and controlling certain settings.

If you want to try to run it, remember to put your device and access tokens in the appropriate spots before running. You can reach the device at twodogsbrewery.local/ or its LAN IP in your browser:

// oops, too big to post!

here is a link to the files if you want to try it out

in here you can see examples of much of what you may want to do. There is a lot in there… If you have any questions, just ask.

1 Like
7

I was unaware that we could use other things from the C++ language. Thought we were stuck with just some of the basics.
Good to know.

I hear what you saying about the sending the data to the cloud. But this is not an option for my application.
I need to do everything locally.
I will look through your docs, thank you!

Currently I am just trying to find how to properly format the response to the query.
If the script query is:

function getParticleData()
{
	var requestURL = "http://192.168.0.4/rgb";
        $.get(requestURL, function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
}

Then what is my response to it in my code is what I am on the hunt for, I.E. .
P(successMsg1) = “HTTP/1.0 200 OK \r {“red”:87}” CRLF;
server.printP(successMsg1);

8

Thanks for your guys help. With some of the things I got from you both, I was able to get it working now.

FWIW, the response that I was looking for was:

server.httpSuccess();
snprintf(ledJSON, sizeof(ledJSON), “{\ledColor”:{“red”:%d,“green”:%d,“blue”:%d}}", ledColor.red, ledColor.green, ledColor.blue);
server.printP(ledJSON);

2 Likes