-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
76 lines (72 loc) · 2.71 KB
/
index.html
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
<!doctype html>
<!--
A simple demo of a PID control loop I created to demonstrate the concept to my co-workers.
Copyright (C) 2015 Eliott Wiener
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<meta charset="utf8"/>
<html lang="en">
<head>
<title>PID Control Demo</title>
<link rel="stylesheet" href="style.css" type="text/css" media="all"/>
<script src="pid.js" type="text/javascript"></script>
</head>
<body>
<header>
<div id="description-container">
<article id="description">
<p>
This is a sandbox application where you can play with a
basic, manually-tuned
<a href="https://en.wikipedia.org/wiki/PID_controller">PID control loop</a>.
The goal of this control loop is to keep the red circle
as close as possible to the mouse pointer.
In other words,
the <b>setpoint</b> is defined as the mouse pointer's position,
and the <b>error</b> is defined as the (directed) distance between the red circle and the mouse pointer.
By tuning the PID gain coefficients,
the red circle's ability to follow the pointer can be enhanced.
Additionally, you can tune the frequency at which the control loop runs.
Charts of the X-axis error and Y-axis error are provided to help visualize the control loop's effectiveness.
</p>
<p>
<a href="https://github.com/eliottwiener/pidcontroldemo">
Source code available on GitHub
</a>
</p>
</article>
</div>
<form id="controls">
<div class="control">
<label>Proportional gain:</label>
<input type="number" id="proportional_box" step=".001" required />
</div>
<div class="control">
<label>Integral gain:</label>
<input type="number" id="integral_box" step=".001" required />
</div>
<div class="control">
<label>Derivative gain:</label>
<input type="number" id="derivative_box" step=".001" required />
</div>
<div class="control">
<label>Control loop frequency (Hz):</label>
<input type="number" id="frequency_box" required />
</div>
<div class="control">
<input id="submit" type="submit" value="Update parameters" />
</div>
</form>
</header>
<canvas id="cnvs"></canvas>
</body>
</html>