Skip to content

Commit 0a78c8d

Browse files
fquirinfquirin
committed
move some HTML to new test-pages folder
1 parent 36a910b commit 0a78c8d

10 files changed

+1188
-37
lines changed

‎modules-demo.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<script type="text/javascript" src="src/resources/opus-file-splitter.js?v=0.9.7"></script>
2323
<script type="text/javascript" src="src/resources/fir-filter-resampler.js?v=0.9.7"></script>
2424

25-
<link rel="stylesheet" type="text/css" href="tests.css?v=0.9.7">
25+
<link rel="stylesheet" type="text/css" href="test-pages/tests.css?v=0.9.7">
2626
<style></style>
2727
</head>
2828
<body>
@@ -138,7 +138,7 @@ <h1>SEPIA Web Audio Processor - Module Tests</h1>
138138
<div id="chart4" class="chart"></div>
139139
<div id="heatmap1" class="chart"></div>
140140
</div>
141-
<script type='text/javascript' src="test-commons.js"></script>
141+
<script type='text/javascript' src="test-pages/test-commons.js"></script>
142142
<script type='text/javascript'>
143143
var infoElement = document.getElementById('info');
144144
var statusElement = document.getElementById('status');

‎test-pages/recorder.css‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
body {
2+
font-family: sans-serif;
3+
margin: 0;
4+
padding: 8px 0;
5+
font-size: 15px;
6+
position: relative;
7+
}
8+
h2 {
9+
margin: 24px 0 8px 0;
10+
}
11+
h1, h2, h3 {
12+
display: flex;
13+
align-items: center;
14+
}
15+
label, input, select, label + span {
16+
margin: 8px;
17+
padding: 4px 6px;
18+
}
19+
input[type=number] {
20+
width: 64px;
21+
}
22+
input[type=text] {
23+
width: 128px;
24+
}
25+
label + span {
26+
border: 1px solid #ccc;
27+
border-radius: 3px;
28+
cursor: default;
29+
min-height: 16px;
30+
}
31+
button {
32+
background: #000;
33+
color: #eee;
34+
border-radius: 3px;
35+
cursor: pointer;
36+
height: 25px;
37+
padding: 4px 12px;
38+
margin: 8px;
39+
border: 0;
40+
box-shadow: 0px 1px 0px 1px #ccc;
41+
}
42+
button.round {
43+
border-radius: 15px;
44+
}
45+
button.variant-2 {
46+
background: #fff;
47+
border: 1px solid #999;
48+
color: #000;
49+
}
50+
@media (hover: hover) and (pointer: fine){
51+
button:hover {
52+
background: #111;
53+
color: #ceff1a;
54+
}
55+
button:active {
56+
box-shadow: unset;
57+
margin-top: 9px;
58+
margin-bottom: 7px;
59+
}
60+
}
61+
label + input, label + select, label + button, button + button {
62+
margin-left: 0px;
63+
}
64+
h1 > button {
65+
margin: 0 16px 0 0;
66+
border-radius: 15px;
67+
min-height: 30px;
68+
min-width: 30px;
69+
background: #fff;
70+
border: 1px solid #999;
71+
color: #000;
72+
font-size: 18px;
73+
padding: 0;
74+
}
75+
.page {
76+
max-width: 1024px;
77+
margin: auto;
78+
background: #fff;
79+
padding: 16px 32px;
80+
}
81+
.section {
82+
display: flex;
83+
flex-wrap: wrap;
84+
/* flex-direction: column; */
85+
justify-content: center;
86+
align-items: center;
87+
}
88+
.group {
89+
display: inline-flex;
90+
flex-wrap: wrap;
91+
justify-content: center;
92+
align-items: center;
93+
max-width: 100%;
94+
margin-top: 4px;
95+
}
96+
@media screen and ( min-width: 1110px ) and ( min-height: 512px ){
97+
.page {
98+
border: 1px solid #ddd;
99+
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.04);
100+
}
101+
}
102+
#volumeMeter {
103+
position: relative;
104+
border: 1px solid black;
105+
min-height: 26px;
106+
min-width: 128px;
107+
background: #eee;
108+
min-width: 256px;
109+
max-width: 100%;
110+
margin: 8px;
111+
border-radius: 14px;
112+
overflow: hidden;
113+
}
114+
#volumeBar {
115+
position: absolute;
116+
background: #0f4;
117+
height: 100%;
118+
width: 100%;
119+
top: 0;
120+
left: 0;
121+
transition: width .3s;
122+
}
123+
#micButton {
124+
background: #000;
125+
background-image: url(../sepia.svg);
126+
background-size: 60%;
127+
background-position: center;
128+
background-repeat: no-repeat;
129+
color: #fff;
130+
border: 0;
131+
height: 50px;
132+
width: 50px;
133+
border-radius: 50%;
134+
margin: 16px;
135+
cursor: pointer;
136+
}
137+
@media (hover: hover) and (pointer: fine){
138+
#micButton:active {
139+
margin: 17px 16px 15px 16px;
140+
}
141+
}
142+
#micButton.loading {
143+
background-color: #999;
144+
}
145+
#micButton.recording {
146+
background-color: #f04;
147+
}
148+
#recoderInfo.with-button {
149+
border: 0;
150+
padding: 0;
151+
margin: 0;
152+
}
153+
#messageText {
154+
flex: 1 1 auto;
155+
}
156+
#messages {
157+
background: #eee;
158+
padding: 8px;
159+
font-size: 13px;
160+
border: 1px solid #aaa;
161+
overflow: auto;
162+
/*max-height: 40vh;*/
163+
min-height: 150px;
164+
}
165+
#messages li {
166+
list-style: none;
167+
margin: 6px 0;
168+
}
169+
.chart {
170+
margin: 30px 0;
171+
height: 128px;
172+
border: 1px solid #000;
173+
overflow: auto;
174+
}
175+
.modal-layer {
176+
position: fixed;
177+
width: 100%;
178+
height: 100%;
179+
top: 0;
180+
left: 0;
181+
background: rgba(0, 0, 0, 0.25);
182+
display: flex;
183+
justify-content: center;
184+
align-items: center;
185+
z-index: 100;
186+
}
187+
.modal-box {
188+
width: 85%;
189+
max-width: 320px;
190+
height: auto;
191+
background: #fff;
192+
padding: 16px;
193+
border: 1px solid #000;
194+
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.25);
195+
white-space: break-spaces;
196+
overflow: auto;
197+
}
198+
.modal-box textarea {
199+
box-sizing: border-box;
200+
width: 100%;
201+
height: 200px;
202+
resize: vertical;
203+
}

test-commons.js renamed to test-pages/test-commons.js

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -103,13 +103,20 @@ function addTitleToPage(titleText){
103103
(document.getElementById("mainView") || document.body).appendChild(ele);
104104
return ele;
105105
}
106-
function addChartContainerToPage(){
106+
function addChartContainerToPage(myParentEle){
107107
var ele = document.createElement("div");
108108
ele.className = "chart";
109-
(document.getElementById("mainView") || document.body).appendChild(ele);
109+
(myParentEle ||document.getElementById("mainView") || document.body).appendChild(ele);
110110
return ele;
111111
}
112-
function plotData(data, plotIndex, expandData){
112+
function plotData(data, plotIndexOrParent, expandData){
113+
var plotParentEle = undefined;
114+
var plotIndex = undefined;
115+
if (typeof plotIndexOrParent == "number"){
116+
plotIndex = plotIndexOrParent;
117+
}else if (plotIndexOrParent){
118+
plotParentEle = plotIndexOrParent;
119+
}
113120
var p = (plotIndex != undefined)? fixedPlots[plotIndex] : undefined;
114121
if (p){
115122
if (p.use){
@@ -121,21 +128,24 @@ function plotData(data, plotIndex, expandData){
121128
p.graph.draw();
122129
}
123130
}else{
124-
var ele = addChartContainerToPage();
125-
var conf = {
126-
targetElement: ele,
127-
showPoints: false,
128-
strokeWidth: 1
129-
}
130-
if (expandData){
131-
var x = uPlot.lazy.createSequence(0, data[0].length);
132-
conf.data = [x, ...data];
133-
}else{
134-
var x = uPlot.lazy.createSequence(0, data.length);
135-
conf.data = [x, data];
136-
}
137-
uPlot.lazy.plot(conf);
131+
plotToParent(data, plotParentEle, undefined, expandData);
132+
}
133+
}
134+
function plotToParent(data, parentEle, config, expandData){
135+
var ele = addChartContainerToPage(parentEle);
136+
var conf = config || {
137+
showPoints: false,
138+
strokeWidth: 1
139+
}
140+
conf.targetElement = ele;
141+
if (expandData){
142+
var x = uPlot.lazy.createSequence(0, data[0].length);
143+
conf.data = [x, ...data];
144+
}else{
145+
var x = uPlot.lazy.createSequence(0, data.length);
146+
conf.data = [x, data];
138147
}
148+
return uPlot.lazy.plot(conf);
139149
}
140150
function drawHeatmap(data, hmIndex, maxPoints){
141151
var heatmap = (hmIndex != undefined)? heatmaps[hmIndex] : undefined;

0 commit comments

Comments
 (0)