Étape 5: Le Code : Web côté
Temps pour un peu de JavaScript, c’est la partie difficile du tutoriel et ici nous nous préparons du côté du contrôleur du code. Si vous êtes nouveau sur JavaScript, vous pouvez simplement entrer votre code d’accès jeton et core et exécutez ce fichier dans un navigateur web, il s’agit d’un programme qui effectue des requêtes de Jason et communique avec le noyau via le cloud d’étincelle.
Et en utilisant AJAX pour faire avancer les choses à temps en arriver direct.
<!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>