Yes, great, but how do I get it on a web page?

Hi all, I have been reading through the documentation (Cloud API, Firmware, Annotated examples sections) but there’s still a big piece of the jigsaw missing for me personally. I guess this is one of those areas of knowledge I am a beginner in, because I feels like everyone else talks about it like everybody knows it and it doesn’t need explaining. I can write basic HTML and even a little simple javascript (e.g for validating values entered on a web form).

Lets take the “Measuring the Temperature” example. I get the circuit, the firmware code, exposing the variable etc. All that is pretty familiar territory to someone with Adruino experience. But then it goes on:

The API request will look something like this:

GET /v1/devices/{DEVICE_ID}/temperature

# EXAMPLE REQUEST IN TERMINAL
# Core ID is 0123456789abcdef01234567
# Your access token is 1234123412341234123412341234123412341234
curl -G https://api.spark.io/v1/devices/0123456789abcdef01234567/temperature \
  -d access_token=1234123412341234123412341234123412341234

This is where I lose the plot somewhat. I understand those will somehow allow me to see the value of the variable. I guess that “curl” command could be entered on a command line? Unix? Windows? The GET command must be an HTTP style request that gets sent to an HTTP server once the connection has been established, I imagine?

But… how do I get the values to appear on a web page that is accessible from anywhere (not just over my LAN)?

Are there any examples I can read?

(I got my Tracking number yesterday, so not long now…)

Thanks!

Paul

Hi Paul,

Sending commands to your core via curl means it is accessible from anywhere. You can send it from unix, or windows, or a browser plugin, or a phone app, or you can get more advanced and send the commands from your favorite programming language. You don’t have to be on your local network, that’s the main advantage of the cloud!

Here’s a few examples.
From windows:

From mac terminal/unix:
Just type the curl … command in terminal.

From a browser extension:
See BDub’s excellent summary here

If you want to build a web page that’s permanently displaying data from your core, you could quite simply modify a few of the examples listed on the forum (BDub has one, look through his old posts). There’s a fair bit more learning to go down that road though.

Hi Andrew, thanks for the response and encouragement.

I have just installed curl on my PC (Ubuntu) with:

sudo apt-get install curl

Now I can curl a web address, e.g. www.bbc.co.uk. It looks like I am getting back the entire html code from the page. So now I will be able to use that to see the value of my “temperature” variable (once my core is running)?

BDub’s thread largely goes over my head, I’m afraid. The original/question post shows some Wiring code, I’m fine with that, but the poster then says “the response I get is…”. Well, response to what exactly? Typing a curl command?

What I would like to know how to do is be able to view the “temperature” or whatever variables I expose in my firmware in a simple web page. I may want to see the values when I don’t have access to a command line or the authority to install any extensions to the web browser available. Is this possible?

I’m looking through BDub’s old posts, but I’m not seeing much I understand. Could you do me a favour and point me at the good example?

Thanks in advance for your patience!

Hi @PaulRB,

This is a great question with a lot of correct answers. It sounds like you’re asking about server-side examples that use the cloud api and display something on a website you’re running. It really depends on what environments you’re comfortable with and what languages / tools you want to use, and if you want your code to run in the browser, or on the server.

Here are a few examples for sending HTTP requests from various languages and platforms:
(David, why didn’t you include “X” my favorite language? Please feel free to add it here if it’s missing!)

Pick a server side language here:

If your server is running Windows:
PHP, .Net, Java

If your server is running Linux:
PHP, Python, Node.js, Ruby

If your code is running in the browser:
jQuery / javascript

Ruby: http://www.rubyinside.com/nethttp-cheat-sheet-2940.html

PHP: http://www.php.net/manual/en/httprequest.send.php

Java: http://www.mkyong.com/java/how-to-send-http-request-getpost-in-java/

Python: http://docs.python.org/2/library/httplib.html

Node.js: http://nodejs.org/api/http.html#http_http_request_options_callback

.Net: http://stackoverflow.com/questions/4015324/http-request-with-post

jQuery: http://api.jquery.com/jquery.post/

We’ll try to put together some standalone web examples as well to help people just getting started in web development. Sometimes just knowing which language / key words to search for makes a huge difference, so I hope this helps. I think this would be a great thread for everyone getting started in web development!

Hi Dave, thanks for all those links. I am now spoiled for choice, with no means of evaluating my options (that will be my fault, not yours!).

Well, as I mentioned earlier, I have done a little javascript. Never come across jQuery before though. I have also dabbled in python, but not related to web applications.

Sounds like the name for the enormous hole in my knowledge is indeed “web development”, as you say.

OK, so lets say I want to run my code in the browser and use javascript. That sounds like it should be a widely available option.

I will start having a look into javascript, but what other “keywords” should I look out for?

I found this snippet of javascript:

function httpGet(theUrl)

{
var xmlHttp = null;

xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send( null );
return xmlHttp.responseText;

}

(I’m not impressed with the “Preformatted Text” button on this forum - look what a mess it made of the above. Don’t seem to be able to control where it thinks the code begins and ends…)

Anyway, that looks hopeful. Would I give it “https://api.spark.io/v1/devices/{DEVICE_ID}/temperature” as the url? Where would the access token go?

Then it would be a matter of using string manipulation functions to extract the value from the returned string I think.

Just commenting on this for now… I felt the same way… at first. What you have to do is PASTE your code in first… highlight it ALL… then press CTRL+K (or the preformatted text button). Try that :wink:

Like this?

var xmlHttp = null;

function GetCustomerInfo()
{
var CustomerNumber = document.getElementById( “TextBoxCustomerNumber” ).value;
var Url = “GetCustomerInfoAsJson.aspx?number=” + CustomerNumber;

xmlHttp = new XMLHttpRequest(); 
xmlHttp.onreadystatechange = ProcessRequest;
xmlHttp.open( "GET", Url, true );
xmlHttp.send( null );

}

function ProcessRequest()
{
if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 )
{
if ( xmlHttp.responseText == “Not found” )
{
document.getElementById( “TextBoxCustomerName” ).value = “Not found”;
document.getElementById( “TextBoxCustomerAddress” ).value = “”;
}
else
{
var info = eval ( “(” + xmlHttp.responseText + “)” );

        // No parsing necessary with JSON!        
        document.getElementById( "TextBoxCustomerName"    ).value = info.jsonData[ 0 ].cmname;
        document.getElementById( "TextBoxCustomerAddress" ).value = info.jsonData[ 0 ].cmaddr1;
    }                    
}

}

…no, it still made a mess of it!

Anyway, that code gives me some useful snippets also. Like extracting values from the JSON-thingy response by name rather than having to use “index/instr”, “left/right/mid” etc. Rather neat.

var xmlHttp = null;

function GetCustomerInfo() {
  var CustomerNumber = document.getElementById("TextBoxCustomerNumber").value;
  var Url = "GetCustomerInfoAsJson.aspx?number=" + CustomerNumber;

  xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = ProcessRequest;
  xmlHttp.open("GET", Url, true);
  xmlHttp.send(null);
}

function ProcessRequest() {
  if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
    if (xmlHttp.responseText == "Not found") {
      document.getElementById("TextBoxCustomerName").value = "Not found";
      document.getElementById("TextBoxCustomerAddress").value = "";
    } else {
      var info = eval("(" + xmlHttp.responseText + ")");

      // No parsing necessary with JSON!        
      document.getElementById("TextBoxCustomerName").value = info.jsonData[0].cmname;
      document.getElementById("TextBoxCustomerAddress").value = info.jsonData[0].cmaddr1;
    }
  }
}

Copy it from here: http://pastebin.com/raw.php?i=eYYuTMgE

Then paste it into a new post.

Then press CTRL+A and then CTRL+K and it should look just like mine above :slight_smile:
(btw a 2 space tab would work best with our limited space on the forum)

I previously reformatted it with http://jsbeautifier.org/ selecting 2 space tab

If you want a nice little web app to play with your functions and variables (variables are currently broken on this app though) try jflasher’s Spark Helper app:
http://jflasher.github.io/spark-helper/

I made a trimmed down version of this with just buttons that’s easy to set up in the index.html file:

I just got a sweet new version created last night with variables that work, and can help you generate custom feedback messages. I’ll upload it soon.

Thanks @BDub. I’ll try that next time. Seems very complex way of pasting a bit of code into a post though, Its so easy on the Arduino Forum, the Picaxe Forum…

So, am I getting warm yet?

What about my questions about the URL and the access token?

The above example does not seem to have a domain at the start of the url. Perhaps that is OK if the request is for the same domain as the page itself?

Hi @PaulRB,

If you’re just getting started with JavaScript, I’d recommend not doing raw XMLHttpRequest’s, jQuery and other libraries wrap a lot of the weird stuff for you. A basic jQuery example would be:

$.ajax({
  type: "POST",
  url: "https://api.spark.io/devices/v1/your_core_id/your_function_name,
  data: {
	access_token: "your_access_token",
	arg: "your_arguments"
  },
  success: function() { console.log("Success!"); } ,
  dataType: "json"
});
1 Like

Thanks @Dave, but did you mean to say “I’d recommend not doing raw XMLHttpRequests” ?

Question: if I use this jQuery library, does a package have to be installed on each device that needs to access the web page? Would that make it unusable if I didn’t have the authority to install the library on a device? What if there was no version of the library available for a particular device? Are these considerations actually a problem with javascript libraries? Excuse my ignorance again please!

Ah, Yup sorry, typo!

Typically when you’re running javascript in a browser, the browser is loading code from a website directly. jQuery is a library written in javascript (as opposed to a plugin like flash, silverlight, etc). It’s as simple as including a reference to their library with something like this in your page before your javascript:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Here’s my Remote Spark example web app with functions and variables:

It uses the simple jQuery POST and GET requests that Dave mentioned above.

If I were you I would just run the example locally in your browser and play around with the code first. Then when you get to the point you have something you like, find a place to host the files. For many years I’ve hosted websites for myself and family, so I have FTP access to put files up there whenever I want. I haven’t really looked around for free sites lately, but I’m sure some people will have suggestions. I should have a couple myself so I’ll probably go look and see what’s out there today in the way of simple web hosts.

I didn’t see a question about the access_token, but if you are wondering where you can find it…

And the core ID:

It may seem overwhelming at first, but just experiment with one thing at a time and slowly start stacking all of your knowledge together until you have created a masterpiece! We are here to help :smile: and with patience we’ll get through it together!

3 Likes

Thanks again @BDub. My question was where to give the access token when when sending a GET request, rather than where to find the code itself.

I can see where the token goes in @Dave’s jQuery example, but not where it goes in the basic javascript examples I found. As using the jQuery library does not seem to give rise to the issues I was concerned about earlier, I guess I’ll try that using your utility as an example as you suggest.

Paul