Deve Posted September 1, 2017 Share Posted September 1, 2017 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! Link to comment Share on other sites More sharing options...
justsomeguy Posted September 1, 2017 Share Posted September 1, 2017 You're missing a closing quote on that onchange attribute, you might want to use the load handler to attach that onchange event handler also. Once you get the value of that slider you should be able to use the value to adjust the camera, right? Link to comment Share on other sites More sharing options...
Deve Posted September 2, 2017 Author Share Posted September 2, 2017 I do not know what a load handler even is. I will be glad to give whoever helps me credit in the article (and this site as well). Yes, the idea is to adjust the camera with two sliders. One for pan and one for tilt. I have already written the entire article except for this last problem. Before this it was a Python Twisted CORS error, and now I am down to the last problem. I am at least a year away from enough programming knowledge, so I am hoping someone can step in. Thanks! Link to comment Share on other sites More sharing options...
justsomeguy Posted September 5, 2017 Share Posted September 5, 2017 This is your load handler: $( document ).ready(function() { servos = moveServos(); }); jQuery uses "ready", but that function gets called when the document load event fires, so it is the event handler for the load event. Javascript is largely event-based on web pages, you write functions that respond to specific events, like the page loading, or a button being clicked, or the slider moving. The first step is correcting the missing quote, right now there's a Javascript error because it thinks everything after that is still Javascript code. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now