Styra en Servo via Internet (5 / 6 steg)
Steg 5: Koden: webb-sida
Tid för lite JavaScript, detta är den hårda delen av handledningen och här får vi den registeransvarige sidan av koden redo. Om du är ny till JavaScript, kan du bara ange din åtkomst-token och core id och köra filen i en webbläsare, detta är ett program som fungerar Jason förfrågningar och kommunicerar till kärnan via gnista molnet.
Och använder AJAX för att få saker att hända levande tid.
<! DOCTYPE HTML >
<< span class = "hljs-titel" > html >< / span >
<< span class = "hljs-titel" > 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-titel" > skript >< / span >
<< span class = "hljs-titel" > kropp >< / span >
<< span class = "hljs-titel" > P >< / span > anger Servo Position: << span class = "hljs-titel" > br >< / span ><< span class = "hljs-titel" > br >< / span >
<< span class = "hljs-titel" > input type = "range" namn = "degBox" id = "degBoxId" min = "0" max = "180" steg = "1" värde = "90" lista = "myData" onchange="setValue(this)" >< / span >
<!--detta lägger skalstrecken i intervallet men gör inte i Safari ->
<< span class = "hljs-titel" > datalist-id = "myData" >< / span >
<< span class = "hljs-titel" > alternativet värdet = "0" >< / span >
<< span class = "hljs-titel" > alternativet värdet = "30" >< / span >
<< span class = "hljs-titel" > alternativet värdet = "60" >< / span >
<< span class = "hljs-titel" > alternativet värdet = "90" >< / span >
<< span class = "hljs-titel" > alternativet värdet = "120" >< / span >
<< span class = "hljs-titel" > alternativet värdet = "150" >< / span >
<< span class = "hljs-titel" > alternativet värdet = "180" >< / span >
< / < span class = "hljs-titel" > datalist >< / span >
<< span class = "hljs-titel" > br >< / span ><< span class = "hljs-titel" > br >< / span >
<< span class = "hljs-titel" > knapp-id = "minusbutton" onclick="fineAdjust(-5)" >< / span > ⇐-5 ° < / < span class = "hljs-titel" > knappen >< / span >
<< span class = "hljs-titel" > knapp-id = "plusbutton" onclick="fineAdjust(+5)" >< / span > + 5 ° ⇒ < / < span class = "hljs-titel" > knappen >< / span >
<< span class = "hljs-titel" > br >< / span ><< span class = "hljs-titel" > br >< / span >
<< span class = "hljs-titel" > P >< / span > aktuella Position: << span class = "hljs-titel" > span-id = "curPos" >< / span >< / < span class = "hljs-titel" > span >< / span ><< span class = "hljs-titel" > br >< / span >
<< span class = "hljs-titel" > script type = "text/javascript" >< / span >
< span class = "hljs-sökord" style = "font-weight: bold;" > var deviceID = "<< enhets-id >>";
var accessToken = "<< åtkomsttoken >>";
var setFunc = "setpos";
var getFunc = "getpos";
window.setInterval (< span class = "hljs-sökord" style = "font-weight: bold;" > function() < / span > {
requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + getFunc + "/? access_token =" + accessToken;
$.getJSON (requestURL, < span class = "hljs-sökord" 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-sökord" style = "font-weight: bold;" > fungerar setValue(obj) < / span > {
var newValue = document.getElementById('degBoxId').value;
sparkSetPos(newValue);
}
< span class = "hljs-sökord" style = "font-weight: bold;" > fungerar fineAdjust(value) < / span > {
var currentValue = parseInt(document.getElementById('curPos').innerHTML);
var SättVärde = värde + currentValue;
sparkSetPos(setValue);
document.getElementById("degBoxId").value = SättVärde;
}
< span class = "hljs-sökord" style = "font-weight: bold;" > fungerar sparkSetPos(newValue) < / span > {
var requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + setFunc + "/";
$.post (requestURL, {params: newValue, access_token: accessToken});
}
< / span >< / < span class = "hljs-titel" > skript >< / span >
< / < span class = "hljs-titel" > kropp >< / span >
< / < span class = "hljs-titel" > html >< / span >< br >