palfrey/controls.html

## controls.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--skip-->
        <title>Dalek Controls</title>

        <script type="text/javascript" src="controls.js"></script>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>

        <script src="//cdn.jsdelivr.net/sparkjs/0.4.1/spark.min.js"></script>

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <style>
            .bordered {
                border:1px solid black;
                display: inline-block;
            }
            video {
                margin-top: 4px; /* weird additional padding */
            }
        </style>
    </head>
    <body onload="sparkSetup();">
        <!--hide-->
        <div class="container-fluid">
            <!-- Main Content -->
            <h1>Dalek Chat</h1>
            <div class="row">
                <div class="col-md-6" id="dalekControls">
                    <div class="alert alert-danger" role="alert" id="spark-failure">Can't connect to the Dalek controls, so none of these buttons will do anything</div>
                    <div class="alert alert-warning" role="alert" id="spark-connecting">Connecting to Dalek controls (nothing below here will work until this is done)</div>
                    <button class="btn btn-default" type="submit" id="forward"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></button>
                    <button class="btn btn-default" type="submit" id="backwards"><span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span></button>
                    <button class="btn btn-default" type="submit" id="left"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span></button>
                    <button class="btn btn-default" type="submit" id="right"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></button>
                    <button class="btn btn-default" type="submit" id="allstop">All Stop</button>
                </div>
            </div>
        </div>
        <!--show-->
    </body>
</html>

## controls.js
"use strict";

function sparkSetup() {
  $("#spark-failure").hide();
  $("#spark-connecting").show();

    var token = 'SPARK_TOKEN_FROM_TOKENS_PY';
    var dalekRemote = "SPARK_CORE_ID";
    var relays = [];
    spark.on('login', function() {
        console.log("Logged in to Spark")
        spark.getDevice(dalekRemote, function(err, device) {
            console.log(device);
            $("#spark-connecting").hide();
            if (!device.connected) {
              $("#spark-failure").show();
            }
            var on = function(i) {
              console.log("D" + i + ",HIGH");
              device.callFunction('digitalwrite', 'D' + i +',HIGH');
            };
            var off = function(i) {
              console.log("D" + i + ",LOW");
              device.callFunction('digitalwrite', 'D' + i + ',LOW');
            };
            // 1 - forward left
            // 0 - forward right
            // 2 - backwards right
            // 3 - backwards left

            $('#forward').mousedown(function() {
                on(0);
                on(1);
            }).mouseup(function() {
                off(0);
                off(1);
            });
            $('#backwards').mousedown(function() {
                on(2);
                on(3);
            }).mouseup(function() {
                off(2);
                off(3);
            });
            $('#left').mousedown(function() {
                on(1);
                on(3);
            }).mouseup(function() {
                off(1);
                off(3);
            });
            $('#right').mousedown(function() {
                on(0);
                on(2);
            }).mouseup(function() {
                off(0);
                off(2);
            });
            $('#allstop').click(function() {
                for (var i=0;i<4;i++) {
                    off(i);
                }
            })
        });
    });
    spark.login({ accessToken: token });
}

## tokens.py
import requests

payload = {"grant_type": "password", "username": "YOUR_USERNAME", "password": "YOUR_PASSWORD", "expires_at": "never"}
result = requests.post("https://api.spark.io/oauth/token",auth=("spark", "spark"), data = payload)
print result.json()["access_token"]
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--skip-->
	<title>Dalek Controls</title>

	<script type="text/javascript" src="controls.js"></script>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
	<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>

	<script src="//cdn.jsdelivr.net/sparkjs/0.4.1/spark.min.js"></script>

	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<style>
	.bordered {
	border:1px solid black;
	display: inline-block;
	}
	video {
	margin-top: 4px; /* weird additional padding */
	}
	</style>
	</head>
	<body onload="sparkSetup();">
	<!--hide-->
	<div class="container-fluid">
	<!-- Main Content -->
	<h1>Dalek Chat</h1>
	<div class="row">
	<div class="col-md-6" id="dalekControls">
	<div class="alert alert-danger" role="alert" id="spark-failure">Can't connect to the Dalek controls, so none of these buttons will do anything</div>
	<div class="alert alert-warning" role="alert" id="spark-connecting">Connecting to Dalek controls (nothing below here will work until this is done)</div>
	<button class="btn btn-default" type="submit" id="forward"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></button>
	<button class="btn btn-default" type="submit" id="backwards"><span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span></button>
	<button class="btn btn-default" type="submit" id="left"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span></button>
	<button class="btn btn-default" type="submit" id="right"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></button>
	<button class="btn btn-default" type="submit" id="allstop">All Stop</button>
	</div>
	</div>
	</div>
	<!--show-->
	</body>
	</html>
	"use strict";

	function sparkSetup() {
	$("#spark-failure").hide();
	$("#spark-connecting").show();

	var token = 'SPARK_TOKEN_FROM_TOKENS_PY';
	var dalekRemote = "SPARK_CORE_ID";
	var relays = [];
	spark.on('login', function() {
	console.log("Logged in to Spark")
	spark.getDevice(dalekRemote, function(err, device) {
	console.log(device);
	$("#spark-connecting").hide();
	if (!device.connected) {
	$("#spark-failure").show();
	}
	var on = function(i) {
	console.log("D" + i + ",HIGH");
	device.callFunction('digitalwrite', 'D' + i +',HIGH');
	};
	var off = function(i) {
	console.log("D" + i + ",LOW");
	device.callFunction('digitalwrite', 'D' + i + ',LOW');
	};
	// 1 - forward left
	// 0 - forward right
	// 2 - backwards right
	// 3 - backwards left

	$('#forward').mousedown(function() {
	on(0);
	on(1);
	}).mouseup(function() {
	off(0);
	off(1);
	});
	$('#backwards').mousedown(function() {
	on(2);
	on(3);
	}).mouseup(function() {
	off(2);
	off(3);
	});
	$('#left').mousedown(function() {
	on(1);
	on(3);
	}).mouseup(function() {
	off(1);
	off(3);
	});
	$('#right').mousedown(function() {
	on(0);
	on(2);
	}).mouseup(function() {
	off(0);
	off(2);
	});
	$('#allstop').click(function() {
	for (var i=0;i<4;i++) {
	off(i);
	}
	})
	});
	});
	spark.login({ accessToken: token });
	}
	import requests

	payload = {"grant_type": "password", "username": "YOUR_USERNAME", "password": "YOUR_PASSWORD", "expires_at": "never"}
	result = requests.post("https://api.spark.io/oauth/token",auth=("spark", "spark"), data = payload)
	print result.json()["access_token"]