elmowned

app.js

$(function() {
	$('#online').hide();
	spark.login({accessToken: "99999999999"});
});


$('#logger').text('Logging in.');
	spark.on('login', function(err, body) {
	console.log('API call completed on Login event:', body);	
	getDevice();
});

function getDevice(){
	$('#logger').text('Finding device.');
	console.log('Finding device.');
	spark.getDevice('20001e000747343339373536', function(err, device) {
		console.log(device);
		$('#logger').text('');
		if(device.connected){
			$('#spark-login').hide();
			$('#offline').hide();
			$('#online').show();
		}
	});
}

/*
 sparkLogin(function(data) {
   // Your code here

 });
 */

 function send(){
  $('#logger').text('Sending..');
  spark.getDevice('20001e000747343339373536', function(err, device) {

 	    if (err) {
 	      console.log('An error occurred:', err);
	  $('#logger').text(err);
 	    } else {
 	  	  device.callFunction('digitalwrite', 'D0:HIGH', function(err, data) {
 	  	    if (err) {
 	  	      console.log('An error occurred:', err);
 			  $('#logger').text(err);
 	  	    } else {
 	  	      console.log('Function called succesfully:', data);
 		  	  device.callFunction('digitalwrite', 'D0:LOW', function(err, data) {
 		  	    if (err) {
 		  	      console.log('An error occurred:', err);
 				  $('#logger').text(err);
 		  	    } else {
 		  	      console.log('Function called succesfully:', data);
 				  $('#logger').text('');
 		  	    }
			
 		  	  });
 	  	    }
 	  	  });
 	    }


  });
 }

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Zap RCE</title>

    <!-- Bootstrap -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link rel="shortcut icon" href="/favicon.ico">
	
	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

<script type="text/javascript" src="//cdn.jsdelivr.net/sparkjs/1/spark.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="app.js"></script>
  </head>
  <body>
<div class="container-fluid">
<h1>Elmowned</H1>
<div id="spark-login"></div>

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
		<div style="pull-right">
			<span id="offline" class="glyphicon glyphicon-remove" style="color: #d9534f" aria-hidden="true">Offline</span>
			<span id="online" class="glyphicon glyphicon-ok" style="color: #5cb85c" aria-hidden="true">Online</span>
		</div>
      <a onclick="send()" href="#" style="btn btn-default"><img src="elmo.jpg"></a>
      <div class="caption">
		  <p id="logger">loading</p>
	  </div>
    </div>
  </div>
</div>

</div>

  </html>