-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
120 lines (111 loc) · 4.79 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
<head>
<script src="lib/complex.min.js"></script>
<script src="dsp.js"></script>
<script src="polynomial.js"></script>
<script src="position.js"></script>
<style>
p {
margin: 0;
}
h3 {
margin: 2;
}
h4 {
margin: 2;
}
</style>
<link type="text/css" rel="stylesheet" href="filter-visualizer.css"></link>
<link type="text/css" rel="stylesheet" href="tab.css"></link>
</head>
<body>
<div class="tab">
<button id="defaultTab" class="tablinks" onclick="openTab(event, 'global-controls')">Global controls</button>
<button class="tablinks" onclick="openTab(event, 'continuous-poles-zeros')">Continuous poles/zeros (analog)</button>
<button class="tablinks" onclick="openTab(event, 'discrete-poles-zeros')">Discrete poles/zeros (digital)</button>
</div>
<div id="global-controls" class="tabcontent">
<div class="vertical-block">
<p>samplerate</p>
<input id="samplerate" oninput="sampleRate=document.getElementById('samplerate').value;drawFromSplane()"></input>
<p>frequency</p>
<input id="frequency" class="inline" oninput="setFrequency(false);">
<p></p>
<input id="frequency-s" style="width:200px;" class="inline" type="range" oninput="setFrequency(true);" min=0.0 max=0.5 step=0.001>
</div>
<div class="vertical-block">
<button onclick="setButterworth()">butterworth</button>
<p>butterworth filter type</p>
<input id="butterworthType" type="range" min=2 max=3 oninput="setButterworth();">
<p>butterworth filter order</p>
<input id="butterworthOrder" type="range" min=1 max=8 oninput="setButterworth();">
</div>
<div class="vertical-block">
<button onclick="setChebyshev()">chebyshev</button>
<p>chebyshev filter type</p>
<input id="chebyshevType" type="range" min=2 max=3 oninput="setChebyshev();">
<p>chebyshev ripples db</p>
<input id="chebyshevRipples" type="range" min=0.01 max=3.0 step=0.0000001 oninput="setChebyshev();">
<p>chebyshev filter order</p>
<input id="chebyshevOrder" type="range" min=1 max=8 oninput="setChebyshev();">
</div>
<div class="vertical-block">
<button onclick="setOnepole()">onepole</button>
<button onclick="setOnepoleZero()">onepole zero</button>
<p>onepole zero type</p>
<input id="onepoleType" type="range" min=2 max=3 oninput="setOnepoleZero();">
</div>
<div class="vertical-block">
<button onclick="setLinkwitzRiley()">linkwitz riley</button>
<p>linkwitz riley type</p>
<input id="linkwitzRileyType" type="range" min=2 max=3 oninput="setLinkwitzRiley();">
<p>linkwitz riley order</p>
<input id="linkwitzRileyOrder" type="range" min=0 max=2 oninput="setLinkwitzRiley();">
</div>
<div class="vertical-block">
<button onclick="setAllpass()">allpass</button>
<p>allpass order</p>
<input id="allpassOrder" type="range" min=1 max=4 oninput="setAllpass();">
</div>
<div class="vertical-block">
<button onclick="setMovingAverage()">moving average</button>
<p>kernel size</p>
<input id="movingAverageOrder" type="range" min=1 max=8 oninput="setMovingAverage();">
</div>
</div>
</div>
<div id="continuous-poles-zeros" class="tabcontent">
</div>
<div id="discrete-poles-zeros" class="tabcontent">
</div>
<hr>
<div style="display:inline-block;">
<h4>s-plane normalized (Laplace)</h4>
<canvas id="sPlane" width=1000 height=1000></canvas>
</div>
<div style="display:inline-block;">
<h4>z-plane scaled by frequency (Z-transform)</h4>
<canvas id="zPlane" width=1000 height=1000></canvas>
</div>
<div style="display:inline-block;">
<h4>z-plane frequency response (transfer function)</h4>
<canvas id="response" width=1000 height=1000></canvas>
</div>
<div style="display:inline-block">
<h4>impulse response</h4>
<canvas id="impulse" width=1000 height=1000></canvas>
</div>
<div style="display:inline-block">
<h4>step response</h4>
<canvas id="step" width=1000 height=1000></canvas>
</div>
<div style="display:inline-block">
<h4>groupdelay (WIP)</h4>
<canvas id="groupdelay" width=1000 height=1000></canvas>
</div>
<hr>
<h3>debug / info</h3>
<p id="console"></p>
<script src="html-builder.js"></script>
<script src="tab.js"></script>
<script src="filter-visualizer.js"></script>
</body>