-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
152 lines (142 loc) · 11.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
<!DOCTYPE html>
<html lang="en-gb">
<head><meta charset="UTF-8">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<style type="text/css">
body{background-color: white; color: black; font-family: sans-serif; perspective:1500px;}
a:hover{color: #000;}
#header{width: 100%; height:155px;
background: #777799;
background: linear-gradient(#777799, black); border-radius: 25px;}
table, tr, td, th {border: 0px; padding: 0px; font-weight:normal;}
tr:nth-child(even) {background: #bbd}
tr:nth-child(odd) {background: #ddf}
table {outline:1px solid gray; width: 730px;}
th.right {text-align: right; width: 175px;}
th.left {text-align: left;}
section { position:relative; width: 180px; height: 120px; transform-style:preserve-3d;}
div.face { position:absolute; top:50%; left:50%; background-size:cover;}
div.face-top {width: 100px; height: 50px; background-image: url(top.jpg); transform:translateX(-50%) translateY(-50%) translateZ(20px); }
div.face-bottom {width: 100px; height: 50px; background-image: url(bottom.jpg); transform:translateX(-50%) translateY(-50%) rotateY(180deg) translateZ(20px); }
div.face-side1 {width: 100px; height: 40px; background-image: url(side1.jpg); transform:translateX(-50%) translateY(-50%) rotateX(90deg) translateZ(25px); }
div.face-side2 {width: 100px; height: 40px; background-image: url(side2.jpg); transform:translateX(-50%) translateY(-50%) rotateX(-90deg) translateZ(25px); }
div.face-end1 {width: 40px; height: 50px; background-image: url(end1.jpg); transform:translateX(-50%) translateY(-50%) rotateY(90deg) translateZ(50px); }
div.face-end2 {width: 40px; height: 50px; background-image: url(end2.jpg); transform:translateX(-50%) translateY(-50%) rotateY(-90deg) translateZ(50px); }
img.invertable{width:64px; height: 64px; padding: 3px; padding-right: 8px; margin-top: 5px; touch-action: manipulation;}
img.pointer {width:64px; height: 32px; padding: 0px; padding-right: 10px}
canvas.bell {margin: 0px; }
canvas.bellc {margin: 0px; padding: 0px; position: absolute;}
.selectfile{
margin-right: 5px;
font-weight: bold;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0px;
top: 0px;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: hidden; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
@-webkit-keyframes animatetop {
from {opacity: 0}
to {opacity: 1}
}
@keyframes animatetop {
from {opacity: 0}
to {opacity: 1}
}
.modal-content {
background-color: #fefefe;
border-radius: 25px 25px 25px 25px;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 550px; /* Could be more or less, depending on screen size */
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrapper" style="padding: 0; margin: 0; min-width: 800px; touch-action: manipulation;">
<div style="display: none; margin-top: 3px; border-radius: 25px 25px 0px 0px; background: #686888;" id="helpScreen"><iframe id="helpIframe" style="margin: 20px 20px 20px 20px; border: 0px; background-color: white;" scrolling="yes" src="help.html"></iframe></div>
<div style="overflow: hidden; position: relative; margin-top: 3px; border-radius: 25px 25px 0px 0px; background: #686888; text-align:center;" id="bellGraphics">
<canvas id="canvasBD" class="bellc"></canvas><canvas id="canvasBDt" class="bellc"></canvas>
<canvas id="canvasAT" class="bellc"></canvas><canvas id="canvasATt" class="bellc"></canvas>
<script type="text/javascript" src="bellboy.js" async defer></script>
</div>
<div id="openModal" class="modal"><div class="modal-content"><span class="close">×</span><p>Select a file to open...</p><select class="selectfile" id="openSelect"></select><button class="selectfile" id="fileOpenButton">Open</button></div></div>
<div id="recordModal" class="modal"><div class="modal-content"><span class="close">×</span><p>Enter filename for recording</p><input type="text" id="recordFileName" style="width:340px;" /> <button class="selectfile" id="recordButton">Start Recording</button><p id="nameInvalid" style="font-size: 9pt; visibility: hidden; color: red;">Please enter a valid file name:letters, numbers, spaces, dashes and full stops only</p></div></div>
<div id="diagnosticsModal" class="modal" ><div class="modal-content" style="margin: 5% auto; width: 820px"><span class="close">×</span>
<canvas id="canvasDiagnostics" class="bell"></canvas>
Show handstroke: <input type="checkbox" class="selectfile" id="diagHand" checked checked="checked" /> Show backstroke: <input type="checkbox" class="selectfile" id="diagBack" checked checked="checked" />
<TABLE>
<TR><TD title="Shows the gravity adjustment value calculated when calibration was carried out.">Gravity adjustment:</TD><TD><span id="gravityValue">0</span></TD></TR>
<TR><TD>Implied timings:</TD><TD><span id="impliedTimings" title="Peal time:">ZZZ(CPM) 0.99 (leadtime).</span></TD></TR>
<TR><TD>Average strike angles:</TD><TD><span id="averageStrikeAngles">XXX(handstroke) YYY(backstroke).</span></TD></TR>
<TR><TD>Average strike times (from BDC in ms):</TD><TD><span id="averageStrikeTimes">XXX(handstroke) YYY(backstroke).</span></TD></TR>
</TABLE>
</div></div>
<div id="settingsModal" class="modal"><div class="modal-content" style="width: 780px; margin: auto auto;"><span class="close">×</span>
<TABLE><TR><TH>Click the button to set the Bell-Boy to playback-only operation.</TH><TH class="right"><button class="selectfile" id="playbackButton">Playback only</button></TH></TR>
<TR><TH class="left">Choose whether you wish to display target-bell-rise angles and what angle you would like them at (shown as a green line and angle is measured from TDC in degrees).</TH>
<TH class="right">Handstroke: <select class="selectfile" id="targetSelectHand"></select><br>Backstroke: <select class="selectfile" id="targetSelectBack"></select></TH></TR>
<TR><TH class="left">Select the range of a stroke you would like the display to show (numbers are degrees from TDC).</TH><TH class="right">Angles: <select class="selectfile" id="zoomSelect"></select></TH></TR>
<TR><TH class="left">Change the playback speed of a loaded file or a finished live recording.</TH><TH class="right">Play speed: <select class="selectfile" id="speedSelect"></select></TH></TR>
<TR><TH class="left">Some bells will show a smaller "pull strength" measurement on the display. This setting allows you to change the scale (units are arbitary).</TH><TH class="right">Scale: <select class="selectfile" id="scaleSelect"></select></TH></TR>
<TR><TH class="left">Click the button for a deskside demo.</TH><TH class="right"><button class="selectfile" id="calibButton">Start demo</button></TH></TR>
<TR><TH class="left">Show some diagnostics.</TH><TH class="right"><button class="selectfile" id="diagnosticsButton">Diagnostics</button></TH></TR>
<TR><TH class="left">Select sleep time.</TH><TH class="right"><button class="selectfile" id="minusSleepButton">-</button><span id="sleep" >0.5 </span><button class="selectfile" id="plusSleepButton">+</button><button class="selectfile" id="sleepButton">Sleep</button></TH></TR>
</TABLE>
</div></div>
<div id="demoModal" class="modal"><div class="modal-content"><span class="close">×</span><section style="padding-left: 280px;"><div class="face face-top"></div><div class="face face-bottom"></div><div class="face face-side1"></div><div class="face face-side2"></div><div class="face face-end1"></div><div class="face face-end2"></div></section></div></div>
<div id="timingsModal" class="modal"><div class="modal-content" style="width: 780px; margin: auto auto;"><span class="close">×</span>
<TABLE><TR><TH class="left">Select the number of bells you are using.</TH><TH class="right">Bells: <select class="selectfile" id="bellsSelect"></select></TH></TR>
<TR><TH class="left">Select the number of changes per minute (ringing rate) that you want to use.</TH><TH class="right"><button class="selectfile" id="minusCPMButton">-</button><span id="CPM" title="Peal time: 2:43">31.0 </span><button class="selectfile" id="plusCPMButton">+</button></TH></TR>
<TR><TH class="left">Choose open handstroke timings. (1.0 is one beat, 0.0 is no open handstroke).</TH><TH class="right"><button class="selectfile" id="minusOHButton">-</button><span id="OH">1.0 </span><button class="selectfile" id="plusOHButton">+</button></TH></TR>
<TR><TH class="left">Choose if you want automatic chime detection or manual chime simulation using a time (in ms) from BDC. If your clappers are tied, use manual.</TH><TH class="right">Chimes: <select class="selectfile" id="chimeSelect"></select></TH></TR>
<TR><TH class="left">Automatically calculate what the CPM and open handstroke timings are for the loaded sample.</TH><TH class="right"><button class="selectfile" id="autoButton">Auto</button></TH></TR>
</TABLE>
</div></div>
<div style="margin-top: 0px; padding-bottom: 5px; padding-top: 5px; background: #686888; text-align:center; min-width: 800px;">
<span style="float: left; width: 48px; height: 48px; padding: 3px; margin-left: 8px;"> </span>
<img src="./circle-record-active.png" id="recordIcon" title="Record session/Stop Recording" class="invertable">
<img src="./circle-play-active.png" id="playIcon" title="Play downloaded or recorded session" class="invertable">
<img src="./circle-pause-active.png" id="pauseIcon" title="Pause playback" class="invertable">
<img src="./settings-active.png" id="settingsIcon" title="Open settings menu" class="invertable">
<img src="./cloud-download-active.png" id="downloadIcon" title="Download saved session" class="invertable">
<img src="./timings-active.png" id="timingsIcon" title="Set method timings" class="invertable">
<span><img src="./battery100.png" id="batteryIcon" title="Battery: Unknown%" style="float: right; width:48px; height: 30px; padding: 3px; margin-right: 8px; margin-top: 39px;"></span>
</div>
<div style="margin-top: 3px; border-radius: 0px 0px 25px 25px; background: #686888; text-align:center; min-width: 800px;">
<img src="./circle-back-active.png" id="backIcon" title="Skip back to previous stroke" class="invertable">
<img src="./circle-forward-active.png" id="forwardIcon" title="Skip forward to next stroke" class="invertable">
<img src="./circle-heart-active.png" id="favIcon" title="Display this stroke as an 'on top' yellow template" class="invertable">
<img src="./circle-cross-active.png" id="unstarIcon" title="Clear 'on-top' template" class="invertable">
<img src="./skip-select-inactive.png" id="skipSelectIcon" title="Choose which displays to skip" class="invertable">
<img src="./circle-power-active.png" id="powerIcon" title="Power off sensor" class="invertable">
<img src="./help.png" id="helpIcon" title="Help" class="invertable">
</div>
<div style=" margin-top: 0px; background: #FFFFFF; color: #686888; text-align:center; min-width: 800px;" id="statusLine"></div></div>
</body>
</html>