-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
240 lines (177 loc) · 8.9 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
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Control Systems Toolbox Javascript library tests</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<!-- Base libraries for math -->
<script src="lib/math.min.js" type="text/javascript"></script>
<script src="lib/jmat.min.js" type="text/javascript"></script>
<!-- UI library: UIkit -->
<script src="lib/uikit.min.js" type="text/javascript"></script>
<script src="lib/uikit-icons.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/uikit.min.css">
<!-- jQuery -->
<script src="lib/jquery-3.4.1.min.js" type="text/javascript"></script>
<!-- Additional facilities -->
<script src="lib/misc-math.js" type="text/javascript"></script>
<!-- 2D visualization libraries: D3.js v3 and v4 and functionPlot. -->
<!-- TODO: should load only one d3.js script -->
<script src="lib/d3.v3.min.js" type="text/javascript"></script>
<script src="lib/function-plot.js" type="text/javascript"></script>
<script type="text/javascript">window.d3v3 = d3; window.d3 = null;</script>
<script src="lib/d3.v4.min.js" type="text/javascript"></script>
<script type="text/javascript">window.d3v4 = d3;</script>
<script src="lib/d3-simple-slider.min.js" type="text/javascript"></script>
<!-- Math typesetting: KaTeX -->
<script src="katex/katex.min.js" type="text/javascript"></script>
<script src="katex/auto-render.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="katex/katex.min.css">
<!-- WebGL visualization library: MathBox2 -->
<script src="lib/mathbox-bundle.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/mathbox.css">
<!-- Control Systems Toolbox library -->
<script src="lib/control-toolbox.js" type="text/javascript"></script>
<!-- Plotting library -->
<script src="lib/cst-graphics.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/cst-graphics.css">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="main">
<h2>Control Systems Toolbox for JavaScript</h2>
<p>Below is a test page for the CST library. Some things are currently only showing up in console (F12), so check that out.</p>
<h3>Linear system simulation</h3>
<p>We have the following state space model.</p>
<div class="matrix-sys">
</div>
<p>Which we shall simulate and display the second output next:</p>
<script type="text/javascript">
var A = [
[-0.3115, -0.0217, -0.0082],
[-0.0217, -1.6174, 0.5179],
[-0.0082, 0.5179, -0.5199]
];
var B = [
[1.101],
[1.544],
[0.08593]
];
var C = [
[-1.4916, -1.0616, -0.6156],
[-0.7423, 0, 0.7481]
];
var D = [[0],
[0.8886]];
var sys = new cst.ss(A, B, C, D);
// Render the state space system
csg.render_disp_unnum_ss(sys, ".matrix-sys");
</script>
<div id="graph1" style="width: 800px; height: 600px;"></div>
<h3>Bode plot of simple transfer function</h3>
<p>The transfer function itself is given by</p>
<div class="tf-sys"></div>
<p>We may want to change this transfer function, one of the factors in the pole poly...</p>
<form>
<input id="change-tf-param" class="uk-range" type="range"
value="5" min="1" max="9" step="0.1">
</form>
<p>And it has the following frequency domain characteristic (Bode diagram).</p>
<div class="bode-g1" style="width: 800px; height: 600px;"></div>
<script type="text/javascript">
console.log("Simulating and drawing");
var t1 = cst.colon(0, 0.1, 100);
var y1 = sys.lsim(1, t1);
var toplot = math.concat(math.transpose(t1), math.transpose([y1[0]]));
console.log(toplot);
// Plot
csg.timeseries(t1, [y1[0]], "#graph1");
// Compute eigenvalues
a = [[3, -2], [4, -1]];
console.log("Computing eigenvalues for...");
console.log(a);
console.log(cst.eig(a));
a = [[7, 3, 4, 11, -9, -2],
[-6, 4, -5, 7, 1, 12],
[-1, -9, 2, 2, 9, 1],
[-8, 0, -1, 5, 0, 8],
[-4, 3, -5, 7, 2, 10],
[6, 1, 4, -11, -7, -1]];
console.log("Computing eigenvalues for...");
console.log(a);
console.log(cst.eig(a));
a = [[0, 1, 0], [0, 0, 1], [1, 0, 0]];
console.log("Computing eigenvalues for...");
console.log(a);
console.log(cst.eig(a));
// Test conversion
console.log("Converting tf 2 ss...");
var G = cst.tf([1], [1, 1]);
var sys1 = G.tf2ss();
// Try to simulate tf
console.log("Simulating tf...");
var t1 = performance.now();
var yy = sys1.lsim(1, cst.colon(0, 0.1, 100));
var t2 = performance.now();
console.log(yy);
console.log("took ", (t2 - t1), "ms to simulate 1000 points");
console.log("Converting another one...");
var G1 = cst.tf([2.5, 1], [4, 5, 9, 1]);
sys2 = G1.tf2ss();
// Test freq domain chars
console.log("Computing freq domain chars of simple TF");
csg.bode(G1, undefined, ".bode-g1");
// Show the tf
csg.render_disp_unnum_tf(G1, ".tf-sys");
// Add code to change one value
UIkit.util.on('#change-tf-param', 'change', function () {
// Time the change
var t1 = performance.now();
// Show the tf
G1.a[1] = this.valueAsNumber;
csg.render_disp_unnum_tf(G1, ".tf-sys");
// Recompute/plot freq response
csg.bode(G1, undefined, ".bode-g1");
var t2 = performance.now();
console.log("Change took " + (t2-t1) + "ms to happen");
});
</script>
<p>This is an example of drawing a response manually.</p>
<div class="draw-signal" style="width: 800px; height: 600px;"></div>
<script type="text/javascript">
var ts = 0.01;
var Fs = 1/ts;
var t3 = cst.colon(0,ts,1);
var L = t3.matsize()[1];
var my_draw = csg.draw_timeseries(t3,'.draw-signal');
</script>
<p>To make things interesting, let's compute the FFT of this response. <button id="compfft">Do it</button></p>
<div class="draw-fft" style="width: 800px; height: 600px;"></div>
<script type="text/javascript">
d3.select("#compfft").on("click", function(ev){
var utofft = my_draw.userdata.get_data().sub2d(":","",1,"");
var Y1 = Jmat.fft(utofft).e;
// At this point, due to lack of documentation, have to parse manually
var Y = [];
for (var k=0; k<Y1.length; k++){
Y.push([math.abs(math.Complex(Y1[k][0].re, Y1[k][0].im))]);
}
var P2 = math.abs(math.dotDivide(Y, L));
var P1 = P2.sub2d(1,parseInt(L/2)+1,0,"");
var P11 = math.concat([P1[0]], math.multiply(P1.sub2d(2,-1,0,""),2), [P1[P1.length-1]], 0);
var f = math.multiply(cst.colon(0,1,parseInt(L/2)-1), Fs/L);
var dsfft = csg.timeseries(f,P11,".draw-fft", {"xlabel": "Freq [Hz]", "ylabel": "|P|"});
});
// Draw first FFT. Ugly, but should work!
document.getElementById("compfft").click();
</script>
</div>
</body>
</html>