BabyCam Code Help

Deve · 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!

justsomeguy · 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?

Deve · 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!

justsomeguy · 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.

Sign In

BabyCam Code Help

Recommended Posts

Deve

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

Deve

Link to comment

Share on other sites

justsomeguy

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity