Reading Spark Variables with Your Own HTML File


#41

Hi @Moors7,

I have cross checked the ID and Token value and they are correct. Should i need to install jquery or Ajax or any other software?
I have checked it on chrome and firefox too.

Thanks.


#42
<html>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

The above line loads jquery.min.js from Google.

What browser are you using? You need to use a modern browser like Chrome or Firefox and not IE.

What I would do is fire up the debugging console in the browser and see if I could see any errors.


#43

Hi bko,

I’m having trouble with this as well.

Here’s the code for the .ino file:

// -----------------
// Read temperature
// -----------------

// Create a variable that will store the temperature value
int temperature = 0;

void setup()
{
  // Register a Spark variable here
  Spark.variable("temperature", &temperature, INT);

  // Connect the temperature sensor to A7 and configure it
  // to be an input
  pinMode(A7, INPUT);
}

void loop()
{
  // Keep reading the temperature so when we make an API
  // call to read its value, we have the latest one
  temperature = analogRead(A7);
}

Here’s the HTML file:

<!DOCTYPE HTML>
<html>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<body>
    <span id="temp"></span><br>
    <span id="tstamp"></span><br>

    <button id="connectbutton" onclick="start()">Read Temp</button>

    <script type="text/javascript">

    function start(objButton) {

        document.getElementById("temp").innerHTML = "Waiting for data...";
        document.getElementById("tstamp").innerHTML ="";
        var deviceID = "put_my_device_id_here";
        var accessToken = "put_my_access_token_here";
        var varName = "temperature";

        requestURL = "https://api.particle.io/v1/devices" + deviceID + "/" + varName + "/?access_token=" + accessToken;
        $.getJSON(requestURL, function(json) {
                 document.getElementById("temp").innerHTML = json.result + "&deg; F";
                 document.getElementById("temp").style.fontSize = "28px";
                 document.getElementById("tstamp").innerHTML = json.coreInfo.last_heard;
                 });
    }
    </script>
</body>
</html>

Any help would be tremendously appreciated. When I inspect in chrome the error I’m getting is Failed to load resource: the server responded with a status of 404 (Not Found).


#44

Hi @tallman2525

I cut and pasted your exact HTML into and it worked for me after I changed these two lines:

        var deviceID = "put_my_device_id_here";
        var accessToken = "put_my_access_token_here";

to have the correct info for my device and access token (which you can find in the web IDE Build Button menus among other places).

You could also make sure you can load the AJAX library here

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

which should appear as a block of text if you load this in a browser window.


#45

5 posts were merged into an existing topic: Peristaltic Doser - Doser set amount over 24hr period


Peristaltic Doser - Doser set amount over 24hr period
#46

Hey there @Herner I am a UI designer myself and very interested in displaying live graphs. Which solution did you use for creating the graph in your interface? Can you share some more insight?

Cheers!
John


Peristaltic Doser - Doser set amount over 24hr period
#47

@bko
this is a great tutorial!

I adapted this for a dimmer and a relay and thought I’d share the test HTML and JavaScript I adapted from your code:

<!DOCTYPE HTML>
<html>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" ></script>
<body>
    <P>Set Dimmer Level:<br><br>
    <input type="range" name="degBox" id="fadeBoxID" min="0" max="100" step="1" value="0" list="myData" onchange="setValue(this)">
    <datalist id="myData">
       <option value="0">
       <option value="10">
       <option value="20">
       <option value="30">
       <option value="40">
       <option value="50">
       <option value="60">
       <option value="70">
       <option value="80">
       <option value="90">
       <option value="100">
    </datalist>
    <br><br>
    <button id="minusbutton" onclick="fineAdjust(-10)">-10%</button>
    <button id="plusbutton"  onclick="fineAdjust(+10)">+10%</button>
    <br><br>
    <P>Current Dim Level: <span id="curPos"></span><br>
    <br><br>
    <h2>Relay Device</h2>
    <p><input type="radio" id="relayRadio1" value="0" onclick="toggleParticlePower(relayID, relayPowerFunction, this.value)" name="relay" /> Off
    <input type="radio" id="relayRadio2" value="1" onclick="toggleParticlePower(relayID, relayPowerFunction, this.value)" name="relay"/> On
    </p>
    <p>Current Relay State: <span id="relayState"></span><br></p>


    <script type="text/javascript">

    $.ajaxSetup({
      timeout: 5*1000
    });

    var accessToken = "yourAccessTokenHere";
    // relayTV
    var relayID    = "yourDeviceID";
    var relayVariable = "Power";
    var relayPowerFunction = "Power";
    // Kitchen Dimmer
    var deviceID    = "yourDeviceID";
    var setFunc = "setDimLevel";
    var getFunc = "currentLevel";

    setInterval(function()
    {
      // Ajax call to Kitchen Dimmer
      requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + getFunc + "/?access_token=" + accessToken;
      $.getJSON(requestURL, function(json) {
                 document.getElementById("curPos").innerHTML = json.result + "%";
                 document.getElementById("curPos").style.fontSize = "28px";
                 document.getElementById("fadeBoxID").value = json.result;
             });
      // Ajax call to relayTV
      myURL = "https://api.spark.io/v1/devices/" + relayID + "/" + relayVariable + "/?access_token=" + accessToken;
      $.getJSON(myURL, function(data) {
               var returnValue = (parseInt(data.result)? "On" : "Off");
               document.getElementById("relayState").innerHTML = returnValue;
               document.getElementById("relayState").style.fontSize = "28px";
               $('#relayRadio1').attr('checked', !parseInt(data.result));
               $('#relayRadio2').attr('checked', parseInt(data.result));
               });
    }, 1000);

    function setValue(obj)
    {
      var newValue = document.getElementById('fadeBoxID').value;
      particleSetDimVal(newValue);
    }

    function fineAdjust(value)
    {
      var currentValue = parseInt(document.getElementById('curPos').innerHTML);
      var setValue = value + Math.round(currentValue / 10) * 10;  // increment and decriment along the 10's
      particleSetDimVal(setValue);
      document.getElementById("fadeBoxID").value = setValue;
    }

    function particleSetDimVal(newValue) {
    var requestURL = "https://api.spark.io/v1/devices/" +deviceID + "/" + setFunc + "/";
      $.post( requestURL, { params: newValue, access_token: accessToken });
    }

    function toggleParticlePower(particleDeviceID, particleFunction, newValue)
    {
      var requestURL = "https://api.spark.io/v1/devices/" + particleDeviceID + "/" + particleFunction + "/";
      $.post( requestURL, { params: newValue, access_token: accessToken });
    }

    </script>
</body>
</html>

I made them a little prettier in my UI, though :blush:


#48

Hi bko –

I’m interested in using my Dropbox account as a secure location for my Photon’s access token, but I’m not sure how to go about it. Could you elaborate on the process you use, or point me towards any resources to accomplish this. I’ve done some research but can’t seem to find a straightforward solution.

Really appreciate your tutorials. Thanks much.


#49

I’d say he means to put the html file containing the page (including the access token) on your dropbox and then you can open that html from there, wherever you are and on whichever machine.


#50

Hi @dmack

You just put the HTML file with your code including your access token into a folder on your Dropbox. Then from any computer or phone that you use Dropbox on, you can open the HTML file is a browser and use it as a web page.

I see that @ScruffR types faster than I do today!


#51

Hello bko

When I run this code locally (file on my hard drive directly) I have no issue, the variable updates post haste! But when I run the very same code on my github.io hosted page it sits waiting forever…

I’m super new to the web page get post javascript etc… Any direction you can point me?

Thank you,
rjones


#52

Unfortunately I don’t know much about github.io pages. I read some of the doc and it does not seem like there are any limitations that could cause what you are seeing, but it is hard to know. It certainly is not meant for this type of page.

In any event, a page like will not keep your access token secure and probably should not be used! I would look for a hosting solution that allows for PHP so you can keep your token secret or at least rewrite the code to ask for username/password and only store a temporary token in javascript.

I generally avoid these issues and run the page locally, usually from Dropbox so I can have it available on multiple computers & devices I am using.


#53

So it was an SSL thing apparently. The github.io hosted pages are https and it was seeing the initial AJAX “call” (?) as an unsecured script trying to run on a secured page. I changed the http to https just as a longshot and it works fine now. I’m pretty new to the web side of things.

src=“https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” type=“text/javascript” charset=“utf-8”>

Thanks!
rjones


Variables into HTML table not working
#54

10 posts were split to a new topic: Variables into HTML table not working