Teaching Through Technology

Introduction

HTTP is a protocol that enables communications between clients and servers by setting up a request-response protocol between a client and server.

A web browser can be a client, and an application on a computer that hosts a web site could be a server. If this is the case the browser submits an HTTP request to the server; then the server returns a response to the client. The response contains status information about the request and may also contain the requested content.

HTTP Request Methods

GET - Requests data from a specified resource
POST - Submits data to be processed to a specified resource

The GET Method

When you use get, you send a query string in the URL (exposing your names/values:

/test/demo_form.asp?name1=value1&name2=value2

From w3schools:

GET requests can be cached
GET requests remain in the browser history
GET requests can be bookmarked
GET requests have length restrictions
GET requests should be used only to retrieve data

Web Pages

Local html page

You can poll data from a local web page (you don't want it to be public because then you would expose your ID and access token.

Tutorials derived from bko

Create a web page:

<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 What you want to read</button>

    <script type="text/javascript">

    function start(objButton) {

        document.getElementById("temp").innerHTML = "Waiting for data...";
        document.getElementById("tstamp").innerHTML ="";
        var deviceID = "Your Device ID";
        var accessToken = "Your ACCESS TOKENtype of data bpm, °, etc (optional)";
                 document.getElementById("temp").style.fontSize = "28px";
                 document.getElementById("tstamp").innerHTML = json.coreInfo.last_heard;
                 });
    }
    </script>
</body>
</html>

Save locally
Preview the page.

Here is an example of how to control a servo motor attached to a core from a web page:

Here is the core code:

Servo myservo;  // create servo object to control a servo

int pos = 0;    // variable to store the servo position

void setup(){
  myservo.attach(A0);  // attaches the servo on the A0 pin to the servo object
  Spark.function("setpos", setPosition);
  Spark.variable("getpos", &pos, INT);
}

void loop(){

}

int setPosition(String posValue) {
    pos = posValue.toInt();
    myservo.write(pos);
    return 0;
}

Here is a web page. Remember to run it locally!!!

    <html>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<body>
    <P>Set Servo Position:<br><br>
    <input type="range" name="degBox" id="degBoxId" min="0" max="180" step="1" value="90" list="myData" onchange="setValue(this)">
    <!-- This adds the tick marks to the range but does not in Safari -->
    <datalist id="myData">
       <option value="0">
       <option value="30">
       <option value="60">
       <option value="90">
       <option value="120">
       <option value="150">
       <option value="180">
    </datalist>
    <br><br>
    <button id="minusbutton" onclick="fineAdjust(-5)">⇐ -5 °</button>
    <button id="plusbutton"  onclick="fineAdjust(+5)">+5 ° ⇒</button>
    <br><br>
    <P>Current Position: <span id="curPos"></span><br>

    <script type="text/javascript">
      var deviceID    = " device id ";
      var accessToken = " access token ";
      var setFunc = "setpos";
      var getFunc = "getpos";

      window.setInterval(function() {
        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("degBoxId").value = parseInt(json.result);
                 });
      }, 1000);

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

      function fineAdjust(value) {
        var currentValue = parseInt(document.getElementById('curPos').innerHTML);
        var setValue = value + currentValue;
        sparkSetPos(setValue);
        document.getElementById("degBoxId").value = setValue;
      }

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

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

Save and test

Using publish()

This allows you to monitor up time. Here is the ino code:

 // publishme.ino -- Spark Publishing Example 
unsigned long lastTime = 0UL;
char publishString[40];

void setup() {
}

void loop() {
    unsigned long now = millis();
    //Every 15 seconds publish uptime
    if (now-lastTime>15000UL) {
        lastTime = now;
        // now is in milliseconds
        unsigned nowSec = now/1000UL;
        unsigned sec = nowSec%60;
        unsigned min = (nowSec%3600)/60;
        unsigned hours = (nowSec%86400)/3600;
        sprintf(publishString,"%u:%u:%u",hours,min,sec);
        Spark.publish("Uptime",publishString);
    }
}

Here is the htm code:

    <!DOCTYPE HTML>
<html>
<body>
    <span id="uptime"></span><br>
    <span id="tstamp"></span>

    <br><br>
    <button onclick="start()">Connect</button>

    <script type="text/javascript">
    function start() {

        document.getElementById("uptime").innerHTML = "Waiting for data...";
        var deviceID = "YOUR DEVICE ID";
        var accessToken = "YOUR ACCESS TOKEN";
        var eventSource = new EventSource("https://api.spark.io/v1/devices/" + deviceID + "/events/?access_token=" + accessToken);

        eventSource.addEventListener('open', function(e) {
            console.log("Opened!"); },false);

        eventSource.addEventListener('error', function(e) {
            console.log("Errored!"); },false);

        eventSource.addEventListener('Uptime', function(e) {
            var parsedData = JSON.parse(e.data);
            var tempSpan = document.getElementById("uptime");
            var tsSpan   = document.getElementById("tstamp");
            tempSpan.innerHTML = "Core: " + parsedData.coreid + " uptime: " + parsedData.data + " (h:m:s)";
            tempSpan.style.fontSize = "28px";
            tsSpan.innerHTML = "At timestamp " + parsedData.published_at;
            tsSpan.style.fontSize = "9px";
        }, false);
    }
    </script>
</body>
</html>

Navigation

Introduction

The GET Method

Graphing

Web Pages

Local html page

Using publish()

Getting Help

Spark Core API

Built in Libraries

Servo

RGB

HTTP Server on the Core