Back to Parent 

<!DOCTYPE HTML>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
  
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
  
    
<body>
    <h1>
    Force Music
</h1>

<p> Here's a song: </p>
<audio id="audio1" controls autoplay>
    <source src="forcemusic/media/song.m4a" type="audio/x-aac" />
    <source src="forcemusic/media/song.mp3" type="audio/mpeg" />
    <source src="forcemusic/media/song.ogg" type="audio/ogg" />
    <p> Your browser does not support the HTML5 audio feature. </p>
</audio>


    
    <h3>Light Levels from Photo Resistor / Photo Cell</h3> <br><br>
	<p>Reads every 5 seconds </p>
    <br><br>
	
	<p>
	  <label for="amountL">Light Levels:</label>
	  <br/>
	  <span id="amountL" ></span>
	</p>

    <br><br>
	
	
	<hr/>
</br>
	
    <h3>Force Levels from FSR </h3> <br><br>
	<p>Reads every 1 seconds </p>
    <br><br>
	
	<p>
	  <label for="amountF">Force Levels:</label>
	  <br/>
	  <span id="amountF" ></span>
	</p>

    <br><br>
	
	
	<hr/>
</br>

	<em>Device ID: </em><input type="text" id="deviceIDInput" onKeyUp="return handleDeviceIDChange()" ></input>
	<br/>
	<em>Access Token: </em><input type="text" id="accessTokenInput" onKeyUp="return handleAccessTokenChange()" ></input>
	<br/>



    <script type="text/javascript">
      var deviceID    = "<< device id >>";
      var accessToken = "<< access token >>";
	  
      var getL = "light";
	  $( document ).ready(function() {
	      $("#deviceIDInput").val(  deviceID );
	      $("#accessTokenInput").val(  accessToken );
	  });
	  
	  
	  window.setInterval(function() {
	          requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + getL + "/?access_token=" + accessToken;
	          $.getJSON(requestURL, function(json) {
	                   document.getElementById("amountL").innerHTML = json.result + " ";
	                   document.getElementById("amountL").style.fontSize = "28px";
                  
                   
				   });
	        }, 5000);
       
        
        var getF = "Force";
	  $( document ).ready(function() {
	      $("#deviceIDInput").val(  deviceID );
	      $("#accessTokenInput").val(  accessToken );
	  });
	  
	  
	  window.setInterval(function() {
	          requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + getF + "/?access_token=" + accessToken;
	          $.getJSON(requestURL, function(json) {
	                   document.getElementById("amountF").innerHTML = json.result + " ";
	                   document.getElementById("amountF").style.fontSize = "28px";
                  
                  if(json.result > 1500){
                            audio1.play();
                        }
                  
				   });
	        }, 1000);
        
	  function handleDeviceIDChange(){
		  deviceID = $("#deviceIDInput").val().trim();
		  return ;
	  }
	  function handleAccessTokenChange(){
		  accessToken = $("#accessTokenInput").val().trim();
		  return ;
	  }
     
    </script>


</body>
</html>
Click to Expand
Content Rating

Is this a good/useful/informative piece of content to include in the project? Have your say!

0