Paso 5: El código: Web lado
Tiempo para un poco de JavaScript, esta es la parte dura del tutorial y aquí nos preparamos la parte de control del código. Si eres nuevo en JavaScript, sólo puede introducir su id de símbolo (token) y núcleo de acceso y ejecutar este archivo en un navegador web, este es un programa que realiza las peticiones de Jason y se comunica con el núcleo a través de la nube de chispas.
Y el uso de AJAX para que las cosas a tiempo suceden vivo.
<!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>
