Здесь показаны различия между двумя версиями данной страницы.
| — |
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> | ||