Здесь показаны различия между двумя версиями данной страницы.
— |
motion_html [2019/06/24 20:29] (текущий) |
||
---|---|---|---|
Строка 1: | Строка 1: | ||
+ | <code> | ||
+ | <!doctype html> | ||
+ | <html> | ||
+ | <head> | ||
+ | <title>Make Use Of DIY Security Camera</title> | ||
+ | <style type="text/css"> | ||
+ | #container { | ||
+ | /* center the content */ | ||
+ | margin: 0 auto; | ||
+ | text-align: center; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id="container"> | ||
+ | <img src="http://192.168.221.120:8081" /> | ||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><br /> | ||
+ | <button onclick="servos.move('P', 10)">Left</button> | ||
+ | <button onclick="servos.move('P', -10)">Right</button> | ||
+ | <button onclick="servos.move('T', -10)">Up</button> | ||
+ | <button onclick="servos.move('T', 10)">Down</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 servos | ||
+ | $.get('http://PI_IP_ADDRESS/servos.rpy?value=' + value); | ||
+ | }, | ||
+ | } | ||
+ | } | ||
+ | </script> | ||
+ | </html> | ||
+ | <code> |