Thank you so much for this tutorial! I am having some trouble and hope you can help:
I am using chrome on a mac. It’s a basic tutorial and you’ve done a great job explaining so I’m sure it’s something silly I have copied the code from my SC and webpage editor directly.
So, I first wired up everything according to your picture. To test my configuration I first ran the test code from here: http://community.spark.io/t/servo-h-library-included-with-arduino-solved/1209/12
It worked fine. Here is the test code copied directly from my Spark Build page (I changed the pin to A0 so I didn’t have to move any wires):
Servo myservo; // create servo object to control a servo
// a maximum of eight servo objects can be created
int pos = 0; // variable to store the servo position
void setup()
{
myservo.attach(A0); // attaches the servo on pin A0 to the servo object
}
void loop()
{
for(pos = 0; pos < 180; pos += 1) // goes from 0 degrees to 180 degrees
{ // in steps of 1 degree
myservo.write(pos); // tell servo to go to position in variable 'pos'
delay(10); // waits 15ms for the servo to reach the position
}
for(pos = 180; pos>=1; pos-=1) // goes from 180 degrees to 0 degrees
{
myservo.write(pos); // tell servo to go to position in variable 'pos'
delay(10); // waits 15ms for the servo to reach the position
}
}
Like I said that code works fine and the servo moves like it should.
So then I flashed the SC with the actual tutorial code:
Servo myservo; // create servo object to control a servo
int pos = 0; // variable to store the servo position
void setup()
{
myservo.attach(A0); // attaches the servo on the A0 pin to the servo object
Spark.function("setpos", setPosition);
Spark.variable("getpos", &pos, INT);
}
void loop()
{
}
int setPosition(String posValue) {
pos = posValue.toInt();
myservo.write(pos);
return 0;
}
And then created a webpage with my token and device name filled in (not on here, of course- I put in fake ones):
<!DOCTYPE HTML>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<body>
<P>Set Servo Position:<br><br>
<input type="range" name="degBox" id="degBoxId" min="0" max="180" step="1" value="90" list="myData" onchange="setValue(this)">
<!-- This adds the tick marks to the range but does not in Safari -->
<datalist id="myData">
<option value="0">
<option value="30">
<option value="60">
<option value="90">
<option value="120">
<option value="150">
<option value="180">
</datalist>
<br><br>
<button id="minusbutton" onclick="fineAdjust(-5)">⇐ -5 °</button>
<button id="plusbutton" onclick="fineAdjust(+5)">+5 ° ⇒</button>
<br><br>
<P>Current Position: <span id="curPos"></span><br>
<script type="text/javascript">
var deviceID = "HARRY_POTTER";
var accessToken = "hg45ghg45hg5hg45hg45hg45hg54hg5hg";
var setFunc = "setpos";
var getFunc = "getpos";
window.setInterval(function() {
requestURL = "https://api.spark.io/v1/devices/" + deviceID + "/" + getFunc + "/?access_token=" + accessToken;
$.getJSON(requestURL, function(json) {
document.getElementById("curPos").innerHTML = json.result + "°";
document.getElementById("curPos").style.fontSize = "28px";
document.getElementById("degBoxId").value = parseInt(json.result);
});
}, 1000);
function setValue(obj) {
var newValue = document.getElementById('degBoxId').value;
sparkSetPos(newValue);
}
function fineAdjust(value) {
var currentValue = parseInt(document.getElementById('curPos').innerHTML);
var setValue = value + currentValue;
sparkSetPos(setValue);
document.getElementById("degBoxId").value = setValue;
}
function sparkSetPos(newValue) {
var requestURL = "https://api.spark.io/v1/devices/" +deviceID + "/" + setFunc + "/";
$.post( requestURL, { params: newValue, access_token: accessToken });
}
</script>
</body>
</html>
And I refreshed and re-flashed and saved several times and no luck. Any ideas at all? I also noticed on the webpage that the “Current Position” isin’t showing- not sure if that helps or not? Here is a screenshot of the webpage:
Thanks again for the tut and any suggestions appreciated