Stap 5: De Code: Web kant
Tijd voor een beetje van JavaScript, dit het harde deel van de tutorial is en hier we de kant van de controller van de code klaar krijgen. Als u nieuw bij JavaScript bent, kunt u gewoon uw access token en core-id opgeven en voer dit bestand in een webbrowser, dit is een programma dat voert Jason aanvragen en communiceert met de kern via de cloud vonk.
En met behulp van AJAX om dingen te gebeuren levende tijd.
<!DOCTYPE HTML> <<span class="hljs-title">html></span> <<span class="hljs-title">script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></span></<span class="hljs-title">script></span> <<span class="hljs-title">body></span> <<span class="hljs-title">P></span>Set Servo Position:<<span class="hljs-title">br></span><<span class="hljs-title">br></span> <<span class="hljs-title">input type="range" name="degBox" id="degBoxId" min="0" max="180" step="1" value="90" list="myData" onchange="setValue(this)"></span> <!-- This adds the tick marks to the range but does not in Safari --> <<span class="hljs-title">datalist id="myData"></span> <<span class="hljs-title">option value="0"></span> <<span class="hljs-title">option value="30"></span> <<span class="hljs-title">option value="60"></span> <<span class="hljs-title">option value="90"></span> <<span class="hljs-title">option value="120"></span> <<span class="hljs-title">option value="150"></span> <<span class="hljs-title">option value="180"></span> </<span class="hljs-title">datalist></span> <<span class="hljs-title">br></span><<span class="hljs-title">br></span> <<span class="hljs-title">button id="minusbutton" onclick="fineAdjust(-5)"></span>⇐ -5 °</<span class="hljs-title">button></span> <<span class="hljs-title">button id="plusbutton" onclick="fineAdjust(+5)"></span>+5 ° ⇒</<span class="hljs-title">button></span> <<span class="hljs-title">br></span><<span class="hljs-title">br></span> <<span class="hljs-title">P></span>Current Position: <<span class="hljs-title">span id="curPos"></span></<span class="hljs-title">span></span><<span class="hljs-title">br></span> <<span class="hljs-title">script type="text/javascript"></span> <span class="hljs-keyword" style="font-weight: bold;">var deviceID = "<< device id >>"; var accessToken = "<< access token >>"; var setFunc = "setpos"; var getFunc = "getpos"; window.setInterval(<span class="hljs-keyword" style="font-weight: bold;">function() </span>{ requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + getFunc + "/?access_token=" + accessToken; $.getJSON(requestURL, <span class="hljs-keyword" style="font-weight: bold;">function(json) </span>{ document.getElementById("curPos").innerHTML = json.result + "°"; document.getElementById("curPos").style.fontSize = "28px"; document.getElementById("degBoxId").value = parseInt(json.result); }); }, 1000); <span class="hljs-keyword" style="font-weight: bold;">function setValue(obj) </span>{ var newValue = document.getElementById('degBoxId').value; sparkSetPos(newValue); } <span class="hljs-keyword" style="font-weight: bold;">function fineAdjust(value) </span>{ var currentValue = parseInt(document.getElementById('curPos').innerHTML); var setValue = value + currentValue; sparkSetPos(setValue); document.getElementById("degBoxId").value = setValue; } <span class="hljs-keyword" style="font-weight: bold;">function sparkSetPos(newValue) </span>{ var requestURL = "https://api.spark.io/v1/devices/" +deviceID + "/" + setFunc + "/"; $.post( requestURL, { params: newValue, access_token: accessToken }); } </span></<span class="hljs-title">script></span> </<span class="hljs-title">body></span> </<span class="hljs-title">html></span><br>