Hello world! First post. I am trying to get some code working to my liking that I found on the internet. I am in CS1 programming class but I do not know enough about Javascript to fix it. I am determined to finish this however. I would appreciate any help I can get. Here is the code:
<!doctype html>
<html>
<head>
<title>Security/BabyCam Revisited</title>
<style type="text/css">
#container {
/* center the content */
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<img src="/?action=stream" /><br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><br />
<input type="range" min="10" max="170" value="85" step="1" onchange="showValue(this.value)/>
<span id="range">10-170</span>
<script type="text/javascript">
function showValue(newValue)
{
document.getElementById("range").innerHTML=newValue;
}
</script>
<button onclick="servos.move('P', 5)">Left</button>
<button onclick="servos.move('P', -5)">Right</button>
<button onclick="servos.move('T', -5)">Down</button>
<button onclick="servos.move('T', 5)">Up</button>
</div>
</body>
<script>
var servos;
$( document ).ready(function() {
servos = moveServos();
});
function moveServos() {
// Store some settings, adjust to suit
var panPos = 70,
tiltPos = 90,
tiltMax = 170,
tiltMin = 45,
panMax = 170,
panMin = 20;
return {
move:function(servo, adjustment) {
var value;
if(servo == 'P') {
if(!((panPos >= panMax && adjustment > 0) || (panPos <= panMin && adjustment < 0))) {
// Still within allowed range, "schedule" the movement
panPos += adjustment;
}
value = panPos + 'P';
}
else if(servo == 'T') {
if(!((tiltPos >= tiltMax && adjustment > 0) || (tiltPos <= tiltMin && adjustment < 0))) {
// Still within allowed range, "schedule" the movement
tiltPos += adjustment;
}
value = tiltPos + 'T';
}
// Use AJAX to actually move the servo
$.get('http://72.205.240.174:81/servos.rpy?value=' + value);
},
}
}
</script>
</html>
This code has 4 buttons that work the two pan/tilt servos. I want to use a slider for left/right and another slider for up/down and in 1 degree increments rather than 5 degrees. You can see the output at 72.205.240.174:9000/index1.html. I added a slider, but I do not know Javascript enough to hook it into the actions. Once this is over, I will be writing a very clear tutorial on how everyone can make this from scratch like I did for Samba here: http://devestechnet.com/NewTech/PiSamba Thank you!
