Can't pass data to web page

Thanks to all of you who helped me in Getting Started. I’ve learned a lot.

I got my project to work with Blynk, but figured a web page might be more robust, so I’ve spent the last two days trying to get a variable passed to a web page and just can’t get it to work. I guess this is really an html/java question. (Two brand new areas to me.)

I have been working through Simon Monk’s “Getting Started . . .” book and got the Project 9 Measuring Light over the Internet to work. Using my Maxbotix EZ on A0 to generate voltages that read out on the dial graph instead of the light sensor in his example. It worked. :grinning: Now I want to actually get my Percent Full variable passed and it just won’t get there.

Here is my sketch with my Particle.variable line pretty much matching his:
// This #include statement was automatically added by the Particle IDE.
#include <Particle.h>

    double emptydepth = 67.0; //Depth of tank in inches

    int maxbotix = A0; // This is the Maxbotix Analog Data out. 

    int analogvalue = 0; // Declaring the integer variable analogvalue, which we will use later to store the value from the Maxbotix.
    int range = 0; //Declaring a variable that will be the calulated range in inches

    int percentfull = 0; //Variable to hold % full

    float Vin = 3.3; // Using 3.3 V from the Battery Shield
    float constant = (3.3 / 4095) / (Vin / 512); // changed from 1024 to 512 for Max EZ
    //NOTE: New WR7060 reads in cm => Vcc/1024 per cm
    int correction = 8; // gap from the sensor to the top of the water in a full tank. Used in the map() function

    // Next we go into the setup function.
    void setup() {

        pinMode(maxbotix,INPUT);  // reading the Maxbotix)
        
        Serial.begin(9600);
        
        **Particle.variable("Full", &percentfull);**
             
    }

    // Next is the loop function...

    void loop() {

         
        analogvalue = analogRead(maxbotix);
        range = analogvalue * constant; 
        
        if (range <= emptydepth) {
        percentfull = map(range, 8, emptydepth, 100, 0);
        }
        // Added to account for screwy readings when targe is very close to sensor
        if (range > emptydepth) { //
            percentfull = 100;
        }
       
      		
    	//Particle.publish("% Full", String(percentfull));
    	Serial.print("% Full = ");
    	Serial.println(percentfull);

      
    }

I added the Serial.print to be sure it was working and it did put out accurate values to the terminal. I also tried it both with and without the Particle.publish() line. With it in, it did show on the console.

One thing that confuses me in his example is he uses “volts” as the variable name to be passed and “volts” as the variable in the Photon sketch. I think once the variable gets passed under its name (in my case “Full”) it can become “percentfull” in the html code by the “percentfull=parseFloat(data.result)” line - no?

Here is the html copied almost verbatim from Monk:

<html>
<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" 

type="text/javascript" charset="utf-8"></script>

<script src="R:/My Documents/Particle/html stuff/justgage-1.2.2/justgage-1.2.2/raphael-

2.1.4.min.js"></script>

<script src="R:/My Documents/Particle/html stuff/justgage-1.2.2/justgage-

1.2.2/justgage.js"></script>

<script>
<!-- Only changes are my values below -->
var accessToken = "My Access Token";
var deviceID = "My Device ID"

<!-- spark or particle ?? Book example worked with spark-->
var url = "https://api.particle.io/v1/devices/" + deviceID + "/Full";

function callback(data, status){
	if (status == "success") {
		<!--volts = parseFloat(data.result);-->
		percentfull = parseFloat(data.result);
		<!--volts = volts.toFixed(2);-->
		percentfull = percentfull.toFixed(0);
		g.refresh(percentfull);
		setTimeout(getReading, 1000);
	}
	else {
		alert("There was a problem");
	}
}
function getReading(){
   	$.get(url, {access_token: accessToken}, callback);
	}
</script>
</head>	

<body>
<div id="gauge" class="200x160px"></div>

<script>
var g = new JustGage({
    id: "gauge",
    value: 0,
    min: 0,
    max: 100,
    title: "% Full"
});
getReading();
</script>

</body>
</html>

When I run it I get the gauge showing, but NaN under it. Also when I run:
"https://api.particle.io/v1/devices/My Device/Full?access_token=My token"
I get: {"cmd":"VarReturn","name":"Full"**_,"result":true,"_**coreInfo":{"last_app":"","last_heard":"2017-04-01T22:32:23.288Z","connected":true,"last_handshake_at":"2017-04-01T22:30:54.824Z","deviceID":"2a0046001247353136383631","product_id":6}}

NaN is “Not a number” (not sure why I’m getting that) and that kind of fits why I’m getting a result of “true” rather than a value, but I just can’t see why his example works and mine doesn’t.

I would really appreciate it if, with your experienced eyes, you could point me in the right direction.

THANK YOU!

Not directly answering your question, but have you seen this awesome tutorial on functions/variables?

Furthermore, you can now use the console to request variables, which is great for testing to make sure the Photon part is alright.

1 Like

Thanks, Moor7. I spent some time with the tutorial you pointed out, but struggled to understand exactly what was going on.

HOWEVER, your mention of seeing the variable in the console was helpful. I knew that, but hadn’t thought to look at it in this case. The good news was, looking at my variable “Full” in the console, I saw it was bool. That explains the behavior of my html script. The bad news is I don’t understand why it is bool :confused: Watching “percentfull” on the serial port it cranks out numbers just fine. I guess I need to do some more digging on particle.variable.

Thanks,

Hmmmm. So the problem was the “&” in front of “percentfull”. I thought that behaved as a pointer to the variable location. Monk used it in his example and it worked fine. Now, I have to figure out why, in my case, it turned “Full” into a bool. :confused::confused:

As per the docs:

“Prior to 0.4.7 firmware, variables were defined with an additional 3rd parameter to specify the data type of the variable. From 0.4.7 onward, the system can infer the type from the actual variable. Additionally, the variable address was passed via the address-of operator (&). With 0.4.7 and newer, this is no longer required.”

Ahh. That explains it. Working through Monk’s examples, I didn’t even think about earlier versions of the firmware.

Thank you very much for your help. I’m on my way (to the next mystery :wink:)

1 Like