-
Notifications
You must be signed in to change notification settings - Fork 1
/
Right-Sec2-Sub0-FourierExamples.html
124 lines (121 loc) · 5.06 KB
/
Right-Sec2-Sub0-FourierExamples.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--Title-->
<title>Right-Sec2-Sub0-FourierExamples</title>
<!--css links-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" rel="stylesheet"
integrity='sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ' crossorigin='anonymous'>
<link href="styles/style.css" rel="stylesheet">
<link href="styles/skeleton.css" rel="stylesheet">
<link href="styles/index_Style.css" rel="stylesheet">
<link href="styles/loadout_Style.css" rel="stylesheet">
<!--Required JS resources-->
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="scripts/debounce_and_throttle.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"
integrity="sha256-t7CAuaRhODo/cv00lxyONppujwTFFwUWGkrhD/UB1qM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.2.2/math.min.js"
integrity="sha256-D/MkugLuxx4Xx0Kb92cUhpxlCMhUvQ0eOtEL8Ol23jM=" crossorigin="anonymous"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX", "output/HTML-CSS"],
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
processEscapes: true
},
"HTML-CSS": { fonts: ["TeX"] }
});
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML"></script>
</head>
<body id="loadout2sub0">
<!--Graph-->
<div id='graph0Sec2'>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<!--Sub Section Title (shown instead of scroll down options when specific function selected on LHS-->
<h4 id="subSecTitle"></h4>
<!--Scroll down to select the function-->
<!--Scroll down-->
<div id="scrollSec2Sub1">
<strong>Select Function: </strong>
<select id="SelectSec2Sub1">
<option id="opt1" title="Triangular Function" value="triangular">Triangular Function
</option>
<option id="opt2" title="Parabola Function" value="parabola">Parabola Function
</option>
<option id="opt3" title="Dirac-Delta Function" value="dirac">Dirac-Delta Function
</option>
<option id="opt4" title="Square Function" value="square">Square Function
</option>
<option id="opt5" title="Sawtooth Function" value="sawtooth">Sawtooth Function
</option>
<option id="opt6" title="|x| Function" value="mode">|x| Function
</option>
</select>
</div>
<!--Slider-->
<div class="overall-sliders-container">
<!--NB: Be careful with classes and types-->
<!--BEGIN Slider A-->
<div id="ASec2Sub1" class="partial-sliders-container">
<!--Slider Display A-->
<label class="slider-label">Amplitude:
<span id="AControllerSec2Sub1Display" data-unit="">1</span>
</label>
<!--Slider A-->
<label class="slider">
<span class="sliderMin">-5</span>
<input id="AControllerSec2Sub1" class="inputs" type="range" value="1.0"
min="-5.0"
max="5.0" step="0.1"/>
<span class="sliderMax">5</span></label>
</div>
<!--END Slider A-->
<!--BEGIN Slider N-->
<div id="N" class="partial-sliders-container">
<!--Slider Display N-->
<label class="slider-label">Number of Terms:
<span id="NControllerSec2Sub1Display" data-unit="">1</span>
</label>
<!--Slider N-->
<label class="slider">
<span class="sliderMin">0</span>
<input id="NControllerSec2Sub1" class="inputs" type="range" value="1" min="0"
max="20" step="1"/>
<span class="sliderMax">20</span>
</label>
</div>
<!--END Slider N-->
<!--BEGIN Slider L-->
<div id="L" class="partial-sliders-container">
<!--Slider Display L-->
<label class="slider-label">Period:
<span id="LControllerSec2Sub1Display" data-unit="">1</span>
</label>
<!--Slider L-->
<label class="slider">
<span class="sliderMin">-5</span>
<input id="LControllerSec2Sub1" class="inputs" type="range" value="1" min="-5"
max="5" step="0.5"/>
<span class="sliderMax">5</span>
</label>
</div>
<!--END Slider L-->
</div>
</body>
<!--THE BRAINS-->
<script src="scripts/FS-scripts/2Visualising_Simple_Periodic_Functions.js"></script>
</html>