servo/index.php at master · Sirus10/servo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
<title>Simple Domotique Webcam control</title>
<!-- *****************************************
# This script will control 2 servo horizontal and vertical
# Site    : http://domotique.web2diz.net/
# Detail  : http://domotique.web2diz.net/?p=468
#
# Source  : https://github.com/Sirus10/servo
# License : CC BY-SA 4.0
#
# This script use the ServoBlaster interface
# See source here :
# https://github.com/richardghirst/PiBits/tree/master/ServoBlaster
#
#
/*******************************************-->
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
 input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}
</style>

<script type="text/javascript">
// update here the value for initial value
var v_init=50;
var h_init=50;
var auto_v;
var auto_h;


// Reset the servos to initial value
function reset_position(){
clearInterval(auto_v);
clearInterval(auto_h);
	$("#ver").val(h_init);
	$("#hor").val(v_init);
	update_position();
}

// This is to enable automatic move for horizontal
function auto_change_h(more_or_less) {
clearInterval(auto_h);
	auto_h = setInterval(function () {
		 var value = document.getElementById('hor').value;

		 if(more_or_less=='more')  value++;
		 else      value--;
		$("#hor").val(value);
		update_position();
		if (value <= 0 || value >= 100) clearInterval(auto_h);
	}, 500);
}
// This is to enable automatic move for vertical
function auto_change_v(more_or_less) {
clearInterval(auto_v);
	auto_v = setInterval(function () {
		 var value = document.getElementById('ver').value;
		 if(more_or_less=='more')  value++;
		 else      value--;
		$("#ver").val(value);
		update_position();
		if (value <= 15 || value >= 85) clearInterval(auto_v);
	}, 500);
}

// Call the action.oho script when the move will be ordered
function update_position(){
	h=document.getElementById('hor').value;
	v=document.getElementById('ver').value;
	jQuery.get('./action.php?h='+h+'&v='+v);
}
</script>
</head>

<body>

<!-- Horizontal : -->
 <button onclick="auto_change_h('less');"> - </button>
 <input type="range" id="hor" min="0" max="100" oninput="update_position();" />
 <button onclick="auto_change_h('more');"> + </button>
<!-- Vertical :   -->
 <button onclick="auto_change_v('less');"> - </button>
 <input type="range" id="ver" min="15" max="85" oninput="update_position();"  orient="vertical"  />
 <button onclick="auto_change_v('more');"> + </button>


 <br>
 <br>

<button onclick="clearInterval(auto_v);clearInterval(auto_h); "> Stop </button>

<button onclick="reset_position();"> Reset </button>


<small>Read more at <a href="http://domotique.web2diz.net/?p=468">Domotic and stupid geek stuff</a><small>
</body>
</html>