Reading Spark Variables with Your Own HTML File

Tutorials
21

Sorry, I was not clear in my question. I have a simple html file based on your post about servo control showing temperature. I would like to add the current time to the web page. In my sketch, am using Serial.print(Time.timeStr());.

This works in the serial monitor.

What do i need to put into the html file to display Time.timeStr?

This is what I am using now.

requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + varName + "/?access_token=" + accessToken;
        $.getJSON(requestURL, function(json) {
         document.getElementById("temp").innerHTML = json.result + "° F";
         document.getElementById("temp").style.fontSize = "28px";
	 document.getElementById("time").innerHTML = json.coreInfo.last_heard;
	 document.getElementById("connected").innerHTML = json.coreInfo.connected;
22

Would this be of any help: http://www.w3schools.com/js/js_dates.asp ?

1 Like
23

You would need to send the time as a string variable from your code to your web page, but I don't think that is really what you are trying to do.

Instead do you just want to format last_heard into you timezone? There is javascript for doing that at the link that @Moors7 kindly provided.

1 Like
24

Great job @bko I am new to spark but your simple method of showing how to expose the variables for the web means I will have some sweet user interfaces done in short order. Thanks for taking the time to share. I will share my own tutorial once I have completed my ā€˜web thermostatā€™ :slight_smile:

2 Likes
25

@bko I took your concept and built on it a bit. I am not using a button I am instead polling for data. I found that if I polled faster then 1 minute the data was VERY unreliable lots of 408 errors as the API just crapped out. That is a bit unfortunate since 1 minute data updates is a bit slow for my tastes.

I am monitoring all kinds of ā€˜neat stuffā€™ but not displaying most of it currently.

My project is a spark core thermostat with built in live weather data and graphing. Nowhere near done my next step is to send commands BACK to the spark ( not sure how to do that just yet pointers welcome ).

Here is a screenshot of the working system on my smart phone, all data you see is live.

3 Likes
26

Hi @Herner

You might try Spark.publish() for updates at upto one per second. I can get variable to work at about one read per second.

For control, you can to use Spark functions which take a String and return an int usually meaning success or failure.

1 Like
27

Thanks I will read up on publish. Right now it seems even when I am doing a 1minute interval on api reads it still will not update every time without fail. More ā€˜tinkeringā€™ to be done :smile:

28

@Herner, Iā€™m trying to get a thermostat for my garage heater together. You phone interface is very nicely laid out! What are you using to build the app? Are you planning on sharing code publicly? Iā€™ve got a working 2 car garage door monitor/controller working with functions, maybe I can help?

29

I am using HTML5 to build it all and will likely share with the community ALL of the code since I have received such great help here myself. I saw your garage door opener and was thinking I need to do that for my house :smile:

30

Lets say you want to monitor data that you want to poll and still be respectful of our cloud neighbors by not polling so frequently, but need to be able to retrieve that data monitored during the time your not ā€œactivelyā€ looking at it.

For instance a flow sensor monitoring water over time. I may not need to look at it every 10 seconds, but when I DO look at it, I may want that accurate(ish) data.

Is it possible to ā€œstoreā€ that real-time data collected and then poll it in periodically?

Iā€™m very new to this so please forgive me if Im not being clear.

31

There are several services on the internet who can do just that for you. They can poll, log, and visualize your data. Google App Scripts has been used for this, although itā€™s being slightly problematic lately. Ubidots also seems to be a popular option. Atomiot is a solution designed by one of our forum members, and works nicely with the Spark ecosystem, definitely check that out.
Try searching the forums for the solutions Iā€™ve mentioned above and Iā€™m sure plenty of options will pop up. Should you require any further help, please do let us know, and weā€™ll see what we can do to help you out.

32

i just came across this thread and Iā€™m looking forward to working through this, but I had a question on the safety issue which hasnā€™t been covered much here, other than to avoid it. If we just have our photon sitting on the internet and monitoring a temperature or recording whether a motor is running (my application) etc. Is there really an issue with someone getting access to your data? I understand that theoretically we shouldnā€™t allow people to get to our data, but in reality Iā€™m not sure I see the issue in this situation. Does anyone have a thought???

33

Hi @ewarner77

It is not so much your data that you need to be worried about and indeed many folks use Particle.publish() to put data out of the cloud on the public channel. Similarly a public dashboard that read your deviceā€™s variables and show them would be fine.

The problem is that your access token is like your username/password and can be used to reprogram or do other things to your Particle devices. You should protect that access token like you would a username/password. If a token is compromised, it can be cancelled, but the problems are best avoided.

So this example does not try to hide that token since you cannot easily do that in a short HTML example where someone could ā€œView Sourceā€ on your web page, but there are lots of good ways to keep it secure including a PHP setup on a web server or a more sophisticated app that creates a new throw-away token when you log in.

34

Alternatively, you can also use the login from the JavaScript library :smile:

1 Like
35

Hi BKO -
Thanks so much for getting back to me. I appreciate your helping to explain the issues. Iā€™m trying to just get a basic system setup and looking at all the options for doing that. From what you are saying here it sounds like if I donā€™t expose the access token then I should be OK. And the example you have here just has the access token hardcoded into the html. I understand that can be a bit more cumbersome to deal with for a simple example like this. I will chase that down with the information you have already put into this (thanks again!).

As a different approach, do you know if there is a simple way to grab the data that the photons put out in variables (or with the publish command) using visual studio? Iā€™m much more comfortable programming in visual studio and have many programs that I have put together in visual basic. Iā€™m wanting to learn all the different systems, but when you are learning 6 things at once it is often easier if you can be comfortable with at least one of the steps :slight_smile:

Again I appreciate your help!

36

I am assuming you mean writing in Visual C using the Visual Studio IDE here. Yes, any programming language and IDE that can do HTTPS web requests can access the Particle cloud. The cloud just provides a RESTful interface to send and get data--you can access that interface via the provided URL scheme from any kind of program you care to write.

For some programming languages and environments, like NodeJS, there is a Particle-supplied library that makes that super easy, but it is not too hard in any language.

37

Hi @bko,

I am a newbie to HTML programming.I am trying to read a particle variable with HTML file as shown in the tutorial. When i run the HTML file, just the waiting for data is being displayed. And there is nothing again. I checked on api.particle.io and the variable value is being displayed correctly.

Here are the HTML and .ino files.

.ino:

int temp;
void setup() {
Particle.variable("temp",&temp,INT);
}
void loop()
{
  String i="3";
 temp=3;
 Particle.publish("event",i);
  delay(500);   
}

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 = "<<deviceid_mine>>";
        var accessToken = "<<accesstoken_mine>>";
        var varName = "temp";

        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>

Thank you

38

Hi @g_kumar

A couple of things look like problems in your code:

  • You are calling Particle.publish() every 500ms while the publishing rate limit is one per second with a burst of up to four allowed as long as you average one per second. After four publishes, you code will become bogged down by the rate limiting.

  • You donā€™t show the part of the HTML that holds the variable data that has the IDā€™s of ā€œtempā€ and ā€œtstampā€. Those are required since the start() function looks for those exact element names to update.
    @moors7: these disappeared due to lack of formatting, just fixed that.

  • You know that you have to replace the <<deviceid_mine>> and <<accesstoken_mine>> with the actual hex values special for you. You can get these in the web IDE among many other places.

What happens if you run the tutorial as written? Does that work for you?

39

Hi @bko,

Regarding the suggestions,
1.) Yes, i am putting the access token and device ID values in var deviceID and var accessToken.
2.) I am not able to understand what your suggestion 2 is.ā€œYou donā€™t show the part of the HTML that holds the variable data that has the IDā€™s of ā€œtempā€ and ā€œtstampā€. Those are required since the start() function looks for those exact element names to update.ā€
3) I have changed the code to call Partile.publish every 2 secs and even then the result is same.

I have checked the particle.api and these are the returend JSON values

{
  "cmd": "VarReturn",
  "name": "temp",
  "result": 3,
  "coreInfo": {
    "last_app": "",
    "last_heard": "2015-11-25T18:02:57.873Z",
    "connected": true,
    "last_handshake_at": "2015-11-25T17:58:01.609Z",
    "deviceID": "XXXXXXXXXXXXXXX",
    "product_id": 6
  }
}

Everything seems to be fine from Particle Photon side. I dont know why im not able to map json.result.
The webpage output is

.

Its not displaying the data further.
Thanks,

40

Coincidentally, Iā€™ve also got a device with a temp variable. I copied your code, entered my own Accesstoken and DeviceID and it works flawlessly. Are you sure youā€™re replacing them correctly? They should look something like:

var deviceID = "50ff6c061234567896580487";
var accessToken = "72922955de86ac1234567894e49e7e0cc403c090";
1 Like