-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
213 lines (190 loc) · 10.5 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
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>CV19 Oscilloscope</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/nouislider.min.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
</head>
<body class="bg-dark position-relative">
<div id="app" class="container-fluid p-0">
<nav id="sidebar1" class="sidebar d-flex flex-column flex-shrink-0 p-md-3 p-2 text-white bg-dark modal-dialog-scrollable">
<span class="fs-4 d-flex align-items-center mb-md-3 me-md-auto mx-auto text-white text-decoration-none">Channel 1</span>
<hr/>
<div class="clearfix" id="ui-container"></div>
<div class="mt-auto">
<button class="btn btn-primary w-100 mt-auto text-center cursor-click mb-3" data-channel="0" data-bs-toggle="modal" data-bs-target="#addCollectionModal">Add to collection</button>
<button class="dismiss btn btn-outline-primary w-100 mt-auto text-center cursor-click">Hide</button>
</div>
</nav>
<nav id="sidebar3" class="sidebar d-flex flex-column flex-shrink-0 p-md-3 p-2 text-white bg-dark">
<span class="fs-4 d-flex align-items-center mb-md-3 me-md-auto mx-auto text-white text-decoration-none">Channel 2</span>
<hr/>
<div class="clearfix" id="ui-container3"></div>
<button class="dismiss btn btn-outline-primary w-100 mt-auto text-center cursor-click">Hide</button>
</nav>
<nav id="sidebar4" class="sidebar d-flex flex-column flex-shrink-0 p-md-3 p-2 text-white bg-dark">
<span class="fs-4 d-flex align-items-center mb-md-3 me-md-auto mx-auto text-white text-decoration-none">Collection</span>
<hr/>
<div class="clearfix" id="ui-container4"></div>
<div class="mt-auto">
<button id="delete_collection_btn" class="btn btn-danger w-100 mt-auto text-center cursor-click mb-3">Delete</button>
<button class="dismiss btn btn-outline-warning w-100 mt-auto text-center cursor-click">Hide</button>
</div>
</nav>
<nav id="sidebar2" class="sidebar d-flex flex-column flex-shrink-0 p-md-3 p-2 text-white bg-dark">
<span class="fs-4 d-flex align-items-center mb-md-3 me-md-auto mx-auto text-white text-decoration-none">Grid</span>
<hr/>
<div class="clearfix" id="ui-container2"></div>
<button class="dismiss btn btn-outline-light w-100 mt-auto text-center cursor-click">Hide</button>
</nav>
<!-- End Sidebar-->
<div id="content" class="w-100 h-100 d-flex flex-column">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid px-0 px-md-3">
<div class="d-flex">
<span class="navbar-brand"><span class="font-emoji">✌</span> CV19 Oscilloscope</span>
<button type="button" id="sidebarCollapse1" class="btn btn-primary me-2">
<span>Input <span class="font-emoji">1️⃣</span></span>
</button>
<button type="button" id="sidebarCollapse3" class="btn btn-primary me-2" style="display:none">
<span>Channel 2</span>
</button>
<button type="button" id="sidebarCollapse4" class="btn btn-warning me-2">
<span><span class="font-emoji">🗂</span> Collection</span>
</button>
</button>
<button type="button" id="sidebarCollapse2" class="btn btn-light">
<span><span class="font-emoji">🎚</span> Grid</span>
</button>
</div>
<div class="text-light ml-auto d-flex align-items-center">
<button id="measurementButton" class="btn btn-light me-md-3">Measurement</button>
<button class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#aboutModal"><span class="font-emoji">💌</span></button>
</div>
</div>
</nav>
<div id="canvas">
<div id="measurementToast" class="toast-container position-absolute top-0 end-0 p-3">
<!-- Then put toasts within -->
<div id="toast1" style="width:auto" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body fw-bold flex-grow-1">
<div>
<span class="font-emoji">ΔV</span> = <span id="measurementDeltaV">0</span>
</div>
<div>
<span class="font-emoji">ΔT</span> = <span id="measurementDeltaT">0</span>
</div>
<div>
<span>Freq</span> = <span id="measurementFreq">0</span>
</div>
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="alert1" class="toast position-absolute w-50 top-50 start-50 translate-middle show align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body flex-fill text-center">
To use Live Audio Input, please allow access to your browser's microphone when prompted, or check your browser settings.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<div id="alert2" class="toast position-absolute top-50 start-50 translate-middle align-items-center text-white bg-warning border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body flex-fill text-center">
<b>This browser didn't support WebSerial, so the serial channel was disabled.</b>
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- About Modal -->
<div class="modal fade" id="aboutModal" tabindex="-1" aria-labelledby="aboutModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="aboutModalLabel">Dear students</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="text-justify">Oscilloscope is a vital equipment for studying and practicing electrical circuit. We're sorry that we can't send the real scope to you under this COVID19 situation. Thus, we hope that this virtual scope will fulfill the basic functionality of a real scope.</p>
<p class="text-justify">The audio used in this app was sampled at <span id="sampling_rate">N/A</span>. The signal might be filtered by the sound card hardware before displaying on the screen.</p>
<p class="text-justify">For usability, the shortcut key for measurement is <kbd>M</kbd>. The <kbd>ESC</kbd> is also set to quit the measurement mode.</p>
<p class="text-justify">If you want to create your own scope, this app uses WebAudio, <a href="https://github.com/danchitnis/webgl-plot">WebGL</a>, and extends the <a href="https://github.com/edwardball/academo.org/tree/master/demos/virtual-oscilloscope">original code</a> from <a href="https://academo.org/demos/virtual-oscilloscope/">Academo</a>.
The source code was released at <a href="https://github.com/nodtem66/CV19_Oscilloscope">Github</a>.</p>
<br>Regards<br>EGBI223<br>Sep 4, 2021
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Add Collection Modal -->
<div class="modal fade" id="addCollectionModal" tabindex="-1" aria-labelledby="addCollectionModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="aboutModalLabel">Add collection</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="collectionName" class="form-label">Collection name</label>
<input type="text" class="form-control" id="collectionName" aria-describedby="collectionNameHelp">
<div id="collectionNameHelp" class="form-text">Enter the name for displaying</div>
</div>
<div class="mb-3">
<label for="collectionColorName" class="form-label">Color</label>
<input class="form-control" id="collectionColor" value="FF0000" data-jscolor="{preset:'small dark', position:'right'}">
<input type="hidden" id="collectionChannel" value="">
</div>
<div class="modal-footer">
<button id="add_collection_btn" type="button" class="btn btn-primary" data-bs-dismiss="modal">Add</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/vendor/monkeypatch.js"></script>
<script src="js/vendor/jquery-3.6.0.min.js"></script>
<script src="js/vendor/bootstrap.bundle.min.js"></script>
<script src="js/vendor/nouislider.min.js"></script>
<script src="js/vendor/webglplot.umd.min.js"></script>
<script src="js/vendor/lagrange.js"></script>
<script src="js/vendor/jscolor.js"></script>
<!--
<script>
jscolor.presets.default = {
format:'rgba'
};
</script>
-->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/vendor/ui.js"></script>
</body>
</html>
<!--
Refs:
https://github.com/edwardball/academo.org/blob/master/demos/virtual-oscilloscope/index.html
https://create.arduino.cc/projecthub/phpoc_man/arduino-web-oscilloscope-support-trigger-5d6312
https://github.com/danchitnis/webgl-plot
-->