2017-08-22 02:49:35 +00:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>intval 3</title>
|
2017-10-22 01:54:17 +00:00
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
|
|
<meta name="format-detection" content="telephone=no">
|
2017-10-22 02:01:46 +00:00
|
|
|
<meta name = "viewport" content = "width = 320, initial-scale = 1.0, user-scalable = no">
|
2017-10-21 15:46:06 +00:00
|
|
|
<style>
|
|
|
|
|
html,body{
|
|
|
|
|
background: #212121;
|
2017-10-22 02:01:46 +00:00
|
|
|
height: 100%;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
2017-10-21 15:46:06 +00:00
|
|
|
}
|
2017-10-22 01:54:17 +00:00
|
|
|
*{
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-family: 'Arial Neue', Helvetical, Arial, sans-serif;
|
|
|
|
|
}
|
2017-10-22 02:01:46 +00:00
|
|
|
body{
|
|
|
|
|
}
|
2017-10-22 19:35:56 +00:00
|
|
|
#app,
|
|
|
|
|
#settings{
|
2017-10-24 00:54:03 +00:00
|
|
|
padding: 5px 10% 0 10%;
|
2017-10-22 02:13:38 +00:00
|
|
|
}
|
2017-10-22 19:35:56 +00:00
|
|
|
#settings{
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
#settings h2{
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
}
|
2017-10-22 01:22:02 +00:00
|
|
|
/* The switch - the box around the slider */
|
|
|
|
|
.switch {
|
|
|
|
|
position: relative;
|
2017-10-22 02:17:32 +00:00
|
|
|
display: block;
|
2017-10-22 01:22:02 +00:00
|
|
|
width: 60px;
|
|
|
|
|
height: 34px;
|
2017-10-22 02:17:32 +00:00
|
|
|
margin: 0 auto;
|
2017-10-22 01:22:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Hide default HTML checkbox */
|
|
|
|
|
.switch input {display:none;}
|
|
|
|
|
|
|
|
|
|
/* The slider */
|
|
|
|
|
.slider {
|
2017-10-22 01:44:07 +00:00
|
|
|
position: absolute;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background-color: #20ce45;
|
|
|
|
|
-webkit-transition: .4s;
|
|
|
|
|
transition: .4s;
|
2017-10-22 01:22:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider:before {
|
2017-10-22 01:44:07 +00:00
|
|
|
position: absolute;
|
|
|
|
|
content: "";
|
|
|
|
|
height: 26px;
|
|
|
|
|
width: 26px;
|
|
|
|
|
left: 4px;
|
|
|
|
|
bottom: 4px;
|
|
|
|
|
background-color: white;
|
|
|
|
|
-webkit-transition: .4s;
|
|
|
|
|
transition: .4s;
|
2017-10-22 01:22:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input:checked + .slider {
|
2017-10-22 01:44:07 +00:00
|
|
|
background-color: #f32121;
|
2017-10-22 01:22:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input:focus + .slider {
|
2017-10-22 02:13:38 +00:00
|
|
|
|
2017-10-22 01:22:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input:checked + .slider:before {
|
2017-10-22 01:44:07 +00:00
|
|
|
-webkit-transform: translateX(26px);
|
|
|
|
|
-ms-transform: translateX(26px);
|
|
|
|
|
transform: translateX(26px);
|
2017-10-22 01:22:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Rounded sliders */
|
|
|
|
|
.slider.round {
|
2017-10-22 01:44:07 +00:00
|
|
|
border-radius: 34px;
|
2017-10-22 01:22:02 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.slider.round:before {
|
2017-10-22 01:44:07 +00:00
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
2017-10-22 19:35:56 +00:00
|
|
|
input[type=number],
|
|
|
|
|
input[type=text],
|
2017-10-23 04:03:12 +00:00
|
|
|
input[type=password],
|
2017-10-22 19:35:56 +00:00
|
|
|
select{
|
2017-10-22 02:13:38 +00:00
|
|
|
width: 100%;
|
|
|
|
|
border: 2px solid #fff;
|
2017-10-22 01:44:07 +00:00
|
|
|
border-radius: 5px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
background: transparent;
|
|
|
|
|
box-shadow: none;
|
2017-10-22 02:41:58 +00:00
|
|
|
outline: none;
|
2017-10-22 01:54:17 +00:00
|
|
|
margin: 5px 0;
|
2017-10-22 02:01:46 +00:00
|
|
|
padding: 5px 10px;
|
|
|
|
|
box-sizing: border-box;
|
2017-10-22 01:44:07 +00:00
|
|
|
}
|
2017-10-22 19:35:56 +00:00
|
|
|
option{
|
|
|
|
|
color: #212121;
|
|
|
|
|
}
|
2017-10-22 01:44:07 +00:00
|
|
|
button{
|
2017-10-22 02:13:38 +00:00
|
|
|
width: 100%;
|
2017-10-22 02:01:46 +00:00
|
|
|
border: 2px solid #fff;
|
2017-10-22 01:44:07 +00:00
|
|
|
border-radius: 5px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
background: transparent;
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
box-shadow: none;
|
2017-10-22 01:54:17 +00:00
|
|
|
outline: none;
|
|
|
|
|
margin: 5px 0;
|
2017-10-22 02:01:46 +00:00
|
|
|
padding: 5px 0;
|
|
|
|
|
text-align: center;
|
2017-10-22 01:44:07 +00:00
|
|
|
}
|
|
|
|
|
button:focus{
|
|
|
|
|
background-color: #20ce45;
|
|
|
|
|
border-color: #20ce45;
|
2017-10-22 01:54:17 +00:00
|
|
|
color: #212121;
|
2017-10-22 02:13:38 +00:00
|
|
|
font-weight: bold;
|
|
|
|
|
}
|
|
|
|
|
#fwdLabel,#bwdLabel{
|
|
|
|
|
display: block;
|
|
|
|
|
line-height: 34px;
|
|
|
|
|
height: 33px;
|
|
|
|
|
color: #444;
|
|
|
|
|
}
|
|
|
|
|
#fwdLabel.selected,
|
|
|
|
|
#bwdLabel.selected{
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
#fwdLabel{
|
|
|
|
|
float: left;
|
|
|
|
|
}
|
|
|
|
|
#bwdLabel{
|
2017-10-22 02:17:32 +00:00
|
|
|
position: absolute;
|
|
|
|
|
right: 10%;
|
2017-10-22 02:13:38 +00:00
|
|
|
}
|
|
|
|
|
.label{
|
2017-10-22 02:41:58 +00:00
|
|
|
text-align: center;
|
2017-10-22 02:13:38 +00:00
|
|
|
color: #666;
|
2017-10-24 13:56:59 +00:00
|
|
|
margin-top: 6px;
|
|
|
|
|
margin-bottom: 9px;
|
2017-10-22 01:22:02 +00:00
|
|
|
}
|
2017-11-21 18:50:01 +00:00
|
|
|
.icon{
|
|
|
|
|
|
2017-10-22 19:35:56 +00:00
|
|
|
}
|
2017-10-23 04:03:12 +00:00
|
|
|
#exposure,
|
|
|
|
|
#delay{
|
|
|
|
|
width: 70%;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
#scale,
|
|
|
|
|
#delayScale{
|
|
|
|
|
width: 25%;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
#str{
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
2017-10-24 00:54:03 +00:00
|
|
|
#counter{
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
2017-10-21 15:46:06 +00:00
|
|
|
</style>
|
2017-08-22 02:49:35 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2017-10-22 02:01:46 +00:00
|
|
|
<div id="app">
|
2017-10-22 19:35:56 +00:00
|
|
|
<div>
|
|
|
|
|
<div class="label">Counter</div>
|
2017-10-24 00:41:28 +00:00
|
|
|
<input type="number" id="counter" oninput="setCounter();" value="0" step="1" />
|
2017-10-22 19:35:56 +00:00
|
|
|
</div>
|
2017-10-22 02:01:46 +00:00
|
|
|
<div>
|
2017-10-22 02:13:38 +00:00
|
|
|
<div class="label">Direction</div>
|
2017-10-22 02:17:32 +00:00
|
|
|
<span id="bwdLabel">BACKWARD</span>
|
2017-10-22 02:13:38 +00:00
|
|
|
<span id="fwdLabel" class="selected">FORWARD</span>
|
2017-10-22 02:41:58 +00:00
|
|
|
<label class="switch">
|
|
|
|
|
<input type="checkbox" id="dir" onclick="setDir();">
|
2017-10-22 02:01:46 +00:00
|
|
|
<span class="slider round"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
2017-10-23 04:17:02 +00:00
|
|
|
<div class="label">Exposure <span id="str">1/5</span></div>
|
2017-10-23 04:03:12 +00:00
|
|
|
<input type="number" id="exposure" value="630" min="0" oninput="setExposure();" />
|
|
|
|
|
<select id="scale" onchange="setExposureScale();">
|
|
|
|
|
<option value="ms" selected>ms</option>
|
|
|
|
|
<option value="sec">sec</option>
|
|
|
|
|
<option value="min">min</option>
|
|
|
|
|
<option value="hour">hour</option>
|
|
|
|
|
</select>
|
2017-10-22 02:01:46 +00:00
|
|
|
</div>
|
|
|
|
|
<div>
|
2017-10-23 04:03:12 +00:00
|
|
|
<div class="label">Delay</div>
|
2017-10-22 02:01:46 +00:00
|
|
|
<input type="number" id="delay" value="0" min="0" step="1" />
|
2017-10-23 04:03:12 +00:00
|
|
|
<select id="delayScale" onchange="setDelayScale();">
|
|
|
|
|
<option value="ms" selected>ms</option>
|
|
|
|
|
<option value="sec">sec</option>
|
|
|
|
|
<option value="min">min</option>
|
|
|
|
|
<option value="hour">hour</option>
|
|
|
|
|
</select>
|
2017-10-22 02:01:46 +00:00
|
|
|
</div>
|
|
|
|
|
<div>
|
2017-10-22 02:13:38 +00:00
|
|
|
<button id="seq">START SEQUENCE</button>
|
2017-10-22 02:01:46 +00:00
|
|
|
</div>
|
|
|
|
|
<div>
|
2017-10-22 02:13:38 +00:00
|
|
|
<button id="frame" onclick="frame();">FRAME</button>
|
2017-10-22 02:01:46 +00:00
|
|
|
</div>
|
2017-10-22 01:44:07 +00:00
|
|
|
</div>
|
2017-10-22 19:35:56 +00:00
|
|
|
<div id="settings">
|
|
|
|
|
<h2>SETTINGS</h2>
|
|
|
|
|
<div>
|
2017-10-23 04:03:12 +00:00
|
|
|
<div class="label">Rex-o-fader</div>
|
|
|
|
|
<select id="angle">
|
2017-10-24 13:56:59 +00:00
|
|
|
<option value="133" selected>0 (Normal)</option>
|
|
|
|
|
<option value="66">1 Stop</option>
|
|
|
|
|
<option value="33">2 Stop</option>
|
2017-10-22 19:35:56 +00:00
|
|
|
</select>
|
|
|
|
|
</div>
|
2017-10-23 16:58:37 +00:00
|
|
|
<h2>BLUETOOTH</h2>
|
|
|
|
|
<select id="bluetooth">
|
|
|
|
|
<option>N/A</option>
|
|
|
|
|
</select>
|
|
|
|
|
<h2>WIFI</h2>
|
2017-10-23 04:03:12 +00:00
|
|
|
<div>
|
|
|
|
|
<input type="text" id="ssid" placeholder="Wifi SSID" />
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<input type="password" id="password" placeholder="Wifi Password" />
|
|
|
|
|
</div>
|
2017-10-22 19:35:56 +00:00
|
|
|
</div>
|
2017-11-21 18:50:01 +00:00
|
|
|
<footer>
|
|
|
|
|
<img id="settingsIcon" onclick="settingsPage();" class="icon" src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU0IDU0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NCA1NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiPgo8Zz4KCTxwYXRoIGQ9Ik01MS4yMiwyMWgtNS4wNTJjLTAuODEyLDAtMS40ODEtMC40NDctMS43OTItMS4xOTdzLTAuMTUzLTEuNTQsMC40Mi0yLjExNGwzLjU3Mi0zLjU3MSAgIGMwLjUyNS0wLjUyNSwwLjgxNC0xLjIyNCwwLjgxNC0xLjk2NmMwLTAuNzQzLTAuMjg5LTEuNDQxLTAuODE0LTEuOTY3bC00LjU1My00LjU1M2MtMS4wNS0xLjA1LTIuODgxLTEuMDUyLTMuOTMzLDBsLTMuNTcxLDMuNTcxICAgYy0wLjU3NCwwLjU3My0xLjM2NiwwLjczMy0yLjExNCwwLjQyMUMzMy40NDcsOS4zMTMsMzMsOC42NDQsMzMsNy44MzJWMi43OEMzMywxLjI0NywzMS43NTMsMCwzMC4yMiwwSDIzLjc4ICAgQzIyLjI0NywwLDIxLDEuMjQ3LDIxLDIuNzh2NS4wNTJjMCwwLjgxMi0wLjQ0NywxLjQ4MS0xLjE5NywxLjc5MmMtMC43NDgsMC4zMTMtMS41NCwwLjE1Mi0yLjExNC0wLjQyMWwtMy41NzEtMy41NzEgICBjLTEuMDUyLTEuMDUyLTIuODgzLTEuMDUtMy45MzMsMGwtNC41NTMsNC41NTNjLTAuNTI1LDAuNTI1LTAuODE0LDEuMjI0LTAuODE0LDEuOTY3YzAsMC43NDIsMC4yODksMS40NCwwLjgxNCwxLjk2NmwzLjU3MiwzLjU3MSAgIGMwLjU3MywwLjU3NCwwLjczLDEuMzY0LDAuNDIsMi4xMTRTOC42NDQsMjEsNy44MzIsMjFIMi43OEMxLjI0NywyMSwwLDIyLjI0NywwLDIzLjc4djYuNDM5QzAsMzEuNzUzLDEuMjQ3LDMzLDIuNzgsMzNoNS4wNTIgICBjMC44MTIsMCwxLjQ4MSwwLjQ0NywxLjc5MiwxLjE5N3MwLjE1MywxLjU0LTAuNDIsMi4xMTRsLTMuNTcyLDMuNTcxYy0wLjUyNSwwLjUyNS0wLjgxNCwxLjIyNC0wLjgxNCwxLjk2NiAgIGMwLDAuNzQzLDAuMjg5LDEuNDQxLDAuODE0LDEuOTY3bDQuNTUzLDQuNTUzYzEuMDUxLDEuMDUxLDIuODgxLDEuMDUzLDMuOTMzLDBsMy41NzEtMy41NzJjMC41NzQtMC41NzMsMS4zNjMtMC43MzEsMi4xMTQtMC40MiAgIGMwLjc1LDAuMzExLDEuMTk3LDAuOTgsMS4xOTcsMS43OTJ2NS4wNTJjMCwxLjUzMywxLjI0NywyLjc4LDIuNzgsMi43OGg2LjQzOWMxLjUzMywwLDIuNzgtMS4yNDcsMi43OC0yLjc4di01LjA1MiAgIGMwLTAuODEyLDAuNDQ3LTEuNDgxLDEuMTk3LTEuNzkyYzAuNzUxLTAuMzEyLDEuNTQtMC4xNTMsMi4xMTQsMC40MmwzLjU3MSwzLjU3MmMxLjA1MiwxLjA1MiwyLjg4MywxLjA1LDMuOTMzLDBsNC41NTMtNC41NTMgICBjMC41MjUtMC41MjUsMC44MTQtMS4yMjQsMC44MTQtMS45NjdjMC0wLjc0Mi0wLjI4OS0xLjQ0LTAuODE0LTEuOTY2bC0zLjU3Mi0zLjU3MWMtMC41NzMtMC41NzQtMC43My0xLjM2NC0wLjQyLTIuMTE0ICAgUzQ1LjM1NiwzMyw0Ni4xNjgsMzNoNS4wNTJjMS41MzMsMCwyLjc4LTEuMjQ3LDIuNzgtMi43OFYyMy43OEM1NCwyMi4yNDcsNTIuNzUzLDIxLDUxLjIyLDIxeiBNNTIsMzAuMjIgICBDNTIsMzAuNjUsNTEuNjUsMzEsNTEuMjIsMzFoLTUuMDUyYy0xLjYyNCwwLTMuMDE5LDAuOTMyLTMuNjQsMi40MzJjLTAuNjIyLDEuNS0wLjI5NSwzLjE0NiwwLjg1NCw0LjI5NGwzLjU3MiwzLjU3MSAgIGMwLjMwNSwwLjMwNSwwLjMwNSwwLjgsMCwxLjEwNGwtNC41NTMsNC41NTNjLTAuMzA0LDAuMzA0LTAuNzk5LDAuMzA2LTEuMTA0LDBsLTMuNTcxLTMuNTcyYy0xLjE0OS0xLjE0OS0yLjc5NC0xLjQ3NC00LjI5NC0wLjg1NCAgIGMtMS41LDAuNjIxLTIuNDMyLDIuMDE2LTIuNDMyLDMuNjR2NS4wNTJDMzEsNTEuNjUsMzAuNjUsNTIsMzAuMjIsNTJIMjMuNzhDMjMuMzUsNTIsMjMsNTEuNjUsMjMsNTEuMjJ2LTUuMDUyICAgYzAtMS42MjQtMC45MzItMy4wMTktMi40MzItMy42NGMtMC41MDMtMC4yMDktMS4wMjEtMC4zMTEtMS41MzMtMC4zMTFjLTEuMDE0LDAtMS45OTcsMC40LTIuNzYxLDEuMTY0bC0zLjU3MSwzLjU3MiAgIGMtMC4zMDYsMC4zMDYtMC44MDEsMC4zMDQtMS4xMDQsMGwtNC41NTMtNC41NTNjLTAuMzA1LTAuMzA1LTAuMzA1LTAuOCwwLTEuMTA0bDMuNTcyLTMuNTcxYzEuMTQ4LTEuMTQ4LDEuNDc2LTIuNzk0LDAuODU0LTQuMjk0ICAgQzEwLjg1MSwzMS45MzIsOS40NTYsMzEsNy44MzIsMzFIMi43OEMyLjM1LDMxLDIsMzAuNjUsMiwzMC4yMlYyMy43OEMyLDIzLjM1LDIuMzUsMjMsMi43OCwyM2g1LjA1MiAgIGMxLjYyNCwwLDMuMDE5LTAuOTMyLDMuNjQtMi40MzJjMC42MjItMS41LDAuMjk1LTMuMTQ2LTAuODU0LTQuMjk0bC0zLjU3Mi0zLjU3MWMtMC4zMDUtMC4zMDUtMC4zMDUtMC44LDAtMS4xMDRsNC41NTMtNC41NTMgICBjMC4zMDQtMC4zMDUsMC43OTktMC4zMDUsMS4xMDQsMGwzLjU3MSwzLjU3MWMxLjE0NywxLjE0NywyLjc5MiwxLjQ3Niw0LjI5NCwwLjg1NEMyMi4wNjgsMTAuODUxLDIzLDkuNDU2LDIzLDcuODMyVjIuNzggICBDMjMsMi4zNSwyMy4zNSwyLDIzLjc4LDJoNi40MzlDMzAuNjUsMiwzMSwyLjM1LDMxLDIuNzh2NS4wNTJjMCwxLjYyNCwwLjkzMiwzLjAxOSwyLjQzMiwzLjY0ICAgYzEuNTAyLDAuNjIyLDMuMTQ2LDAuMjk0LDQuMjk0LTAuODU0bDMuNTcxLTMuNTcxYzAuMzA2LTAuMzA1LDAuODAxLTAuMzA1LDEuMTA0LDBsNC41NTMsNC41NTNjMC4zMDUsMC4zMDUsMC4zMDUsMC44LDAsMS4xMDQgICBsLTMuNTcyLDMuNTcxYy0xLjE0OCwxLjE0OC0xLjQ3NiwyLjc5NC0wLjg1NCw0LjI5NGMwLjYyMSwxLjUsMi4w
|
|
|
|
|
<h1 class="selected"><span onclick="appPage();" class="icon">INTVAL</span></h1>
|
|
|
|
|
<img src="" id="sequencerIcon" onclick="sequencerPage();" class="icon" />
|
|
|
|
|
<img id="mscriptIcon" onclick="mscriptPage();" class="icon" src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDUyMi40NjggNTIyLjQ2OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTIyLjQ2OCA1MjIuNDY5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTMyNS43NjIsNzAuNTEzbC0xNy43MDYtNC44NTRjLTIuMjc5LTAuNzYtNC41MjQtMC41MjEtNi43MDcsMC43MTVjLTIuMTksMS4yMzctMy42NjksMy4wOTQtNC40MjksNS41NjhMMTkwLjQyNiw0NDAuNTMgICAgYy0wLjc2LDIuNDc1LTAuNTIyLDQuODA5LDAuNzE1LDYuOTk1YzEuMjM3LDIuMTksMy4wOSwzLjY2NSw1LjU2OCw0LjQyNWwxNy43MDEsNC44NTZjMi4yODQsMC43NjYsNC41MjEsMC41MjYsNi43MS0wLjcxMiAgICBjMi4xOS0xLjI0MywzLjY2Ni0zLjA5NCw0LjQyNS01LjU2NEwzMzIuMDQyLDgxLjkzNmMwLjc1OS0yLjQ3NCwwLjUyMy00LjgwOC0wLjcxNi02Ljk5OSAgICBDMzMwLjA4OCw3Mi43NDcsMzI4LjIzNyw3MS4yNzIsMzI1Ljc2Miw3MC41MTN6IiBmaWxsPSIjRkZGRkZGIi8+CgkJPHBhdGggZD0iTTE2Ni4xNjcsMTQyLjQ2NWMwLTIuNDc0LTAuOTUzLTQuNjY1LTIuODU2LTYuNTY3bC0xNC4yNzctMTQuMjc2Yy0xLjkwMy0xLjkwMy00LjA5My0yLjg1Ny02LjU2Ny0yLjg1NyAgICBzLTQuNjY1LDAuOTU1LTYuNTY3LDIuODU3TDIuODU2LDI1NC42NjZDMC45NSwyNTYuNTY5LDAsMjU4Ljc1OSwwLDI2MS4yMzNjMCwyLjQ3NCwwLjk1Myw0LjY2NCwyLjg1Niw2LjU2NmwxMzMuMDQzLDEzMy4wNDQgICAgYzEuOTAyLDEuOTA2LDQuMDg5LDIuODU0LDYuNTY3LDIuODU0czQuNjY1LTAuOTUxLDYuNTY3LTIuODU0bDE0LjI3Ny0xNC4yNjhjMS45MDMtMS45MDIsMi44NTYtNC4wOTMsMi44NTYtNi41NyAgICBjMC0yLjQ3MS0wLjk1My00LjY2MS0yLjg1Ni02LjU2M0w1MS4xMDcsMjYxLjIzM2wxMTIuMjA0LTExMi4yMDFDMTY1LjIxNywxNDcuMTMsMTY2LjE2NywxNDQuOTM5LDE2Ni4xNjcsMTQyLjQ2NXoiIGZpbGw9IiNGRkZGRkYiLz4KCQk8cGF0aCBkPSJNNTE5LjYxNCwyNTQuNjYzTDM4Ni41NjcsMTIxLjYxOWMtMS45MDItMS45MDItNC4wOTMtMi44NTctNi41NjMtMi44NTdjLTIuNDc4LDAtNC42NjEsMC45NTUtNi41NywyLjg1N2wtMTQuMjcxLDE0LjI3NSAgICBjLTEuOTAyLDEuOTAzLTIuODUxLDQuMDktMi44NTEsNi41NjdzMC45NDgsNC42NjUsMi44NTEsNi41NjdsMTEyLjIwNiwxMTIuMjA0TDM1OS4xNjMsMzczLjQ0MiAgICBjLTEuOTAyLDEuOTAyLTIuODUxLDQuMDkzLTIuODUxLDYuNTYzYzAsMi40NzgsMC45NDgsNC42NjgsMi44NTEsNi41N2wxNC4yNzEsMTQuMjY4YzEuOTA5LDEuOTA2LDQuMDkzLDIuODU0LDYuNTcsMi44NTQgICAgYzIuNDcxLDAsNC42NjEtMC45NTEsNi41NjMtMi44NTRMNTE5LjYxNCwyNjcuOGMxLjkwMy0xLjkwMiwyLjg1NC00LjA5NiwyLjg1NC02LjU3ICAgIEM1MjIuNDY4LDI1OC43NTUsNTIxLjUxNywyNTYuNTY1LDUxOS42MTQsMjU0LjY2M3oiIGZpbGw9IiNGRkZGRkYiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" />
|
|
|
|
|
</footer>
|
2017-10-22 01:07:45 +00:00
|
|
|
<script>
|
2017-10-23 04:03:12 +00:00
|
|
|
var BOLEX = {
|
|
|
|
|
angle : 133,
|
2017-10-23 04:17:02 +00:00
|
|
|
prism : 0.8,
|
|
|
|
|
expected : 630
|
2017-10-23 04:03:12 +00:00
|
|
|
};
|
2017-10-22 19:35:56 +00:00
|
|
|
var STATE = {
|
2017-10-23 04:03:12 +00:00
|
|
|
dir : true,
|
|
|
|
|
exposure : 630, //always ms
|
|
|
|
|
delay : 0,
|
|
|
|
|
scale : 'ms',
|
|
|
|
|
delayScale : 'ms',
|
|
|
|
|
counter : 0
|
2017-10-22 19:35:56 +00:00
|
|
|
}
|
2017-11-21 21:34:07 +00:00
|
|
|
//functions
|
2017-10-22 01:54:17 +00:00
|
|
|
var frame;
|
2017-10-22 19:35:56 +00:00
|
|
|
var getState;
|
2017-10-22 01:54:17 +00:00
|
|
|
var setDir;
|
|
|
|
|
var setExposure;
|
|
|
|
|
var setDelay;
|
2017-10-24 00:44:35 +00:00
|
|
|
var setCounter;
|
2017-10-23 04:03:12 +00:00
|
|
|
//ms
|
|
|
|
|
var shutter = function (exposure) {
|
|
|
|
|
'use strict';
|
2017-10-23 04:17:02 +00:00
|
|
|
var fraction = BOLEX.expected / 1000;
|
2017-10-23 04:03:12 +00:00
|
|
|
var speed;
|
|
|
|
|
var corrected;
|
|
|
|
|
var str;
|
2017-10-23 04:33:02 +00:00
|
|
|
if (exposure > BOLEX.expected) {
|
2017-10-23 04:03:12 +00:00
|
|
|
//if exposure is explicitly set
|
|
|
|
|
fraction = exposure / 1000;
|
|
|
|
|
speed = fraction;
|
|
|
|
|
} else {
|
|
|
|
|
speed = fraction * (BOLEX.angle / 360);
|
|
|
|
|
}
|
|
|
|
|
corrected = speed * BOLEX.prism;
|
|
|
|
|
if (corrected < 1.0) {
|
|
|
|
|
//less than a second
|
2017-10-23 04:17:02 +00:00
|
|
|
str = '1/' + Math.round(Math.pow(corrected, -1)) + ' sec';
|
2017-10-23 04:03:12 +00:00
|
|
|
} else if (corrected >= 1.0 && corrected < 60) {
|
|
|
|
|
//greater than a second, less than a minute
|
|
|
|
|
str = '' + (Math.round(corrected * 10) / 10) + ' sec'
|
|
|
|
|
} else if (corrected >= 60 && corrected < 60 * 60) {
|
|
|
|
|
//greater than a minute, less than an hour
|
|
|
|
|
str = '' + (Math.round(corrected / 6) / 10) + ' min';
|
|
|
|
|
} else if (corrected >= 60 * 60 && corrected < 60 * 60 * 24) {
|
|
|
|
|
//greater than an hour, less than a day
|
|
|
|
|
str = '' + (Math.round(corrected / (6 * 60)) / 10) + ' hr';
|
|
|
|
|
} else if (corrected >= 60 * 60 * 24) {
|
|
|
|
|
//greater than a day
|
|
|
|
|
str = '' + (Math.round(corrected / (6 * 60 * 24)) / 10) + ' day';
|
|
|
|
|
}
|
|
|
|
|
return { speed : speed, str : str }
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var scaleAuto = function (ms) {
|
|
|
|
|
'use strict';
|
|
|
|
|
if (ms < 1000) {
|
|
|
|
|
return 'ms'
|
|
|
|
|
} else if (ms >= 1000 && ms < 1000 * 60) {
|
|
|
|
|
return 'sec'
|
|
|
|
|
} else if (ms >= 1000 * 60 && ms < 1000 * 60 * 60) {
|
|
|
|
|
return 'min'
|
|
|
|
|
} else if (ms >= 1000 * 60 * 60) {
|
|
|
|
|
return 'hour'
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var scaleTime = function (raw, scale) {
|
|
|
|
|
'use strict';
|
|
|
|
|
if (scale === 'ms') {
|
|
|
|
|
return raw
|
|
|
|
|
} else if (scale === 'sec') {
|
|
|
|
|
return raw * 1000;
|
|
|
|
|
} else if (scale === 'min') {
|
|
|
|
|
return raw * (1000 * 60);
|
|
|
|
|
} else if (scale === 'hour') {
|
|
|
|
|
return raw * (1000 * 60 * 60);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var setExposureScale = function () {
|
|
|
|
|
'use strict';
|
|
|
|
|
var scale = $('#scale').val();
|
|
|
|
|
if (scale === 'ms') {
|
|
|
|
|
$('#exposure').val(STATE.exposure);
|
|
|
|
|
} else if (scale === 'sec') {
|
|
|
|
|
$('#exposure').val(STATE.exposure / 1000);
|
|
|
|
|
} else if (scale === 'min') {
|
|
|
|
|
$('#exposure').val(STATE.exposure / (1000 * 60));
|
|
|
|
|
} else if (scale === 'hour') {
|
|
|
|
|
$('#exposure').val(STATE.exposure / (1000 * 60 * 60));
|
|
|
|
|
}
|
|
|
|
|
STATE.scale = scale;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var setDelayScale = function () {
|
|
|
|
|
'use strict';
|
|
|
|
|
var scale = $('#scale').val();
|
|
|
|
|
if (scale === 'ms') {
|
|
|
|
|
$('#delay').val(STATE.delay);
|
|
|
|
|
} else if (scale === 'sec') {
|
|
|
|
|
$('#delay').val(STATE.delay / 1000);
|
|
|
|
|
} else if (scale === 'min') {
|
|
|
|
|
$('#delay').val(STATE.delay / (1000 * 60));
|
|
|
|
|
} else if (scale === 'hour') {
|
|
|
|
|
$('#delay').val(STATE.delay / (1000 * 60 * 60));
|
|
|
|
|
}
|
|
|
|
|
STATE.delayScale = scale;
|
|
|
|
|
};
|
|
|
|
|
|
2017-10-22 02:41:58 +00:00
|
|
|
var setDirLabel = function (dir) {
|
2017-11-21 21:43:56 +00:00
|
|
|
const bwdLabel = document.getElementById('bwdLabel');
|
|
|
|
|
const fwdLabel = document.getElementById('fwdLabel');
|
2017-10-22 02:41:58 +00:00
|
|
|
if (dir) {
|
2017-11-21 21:43:56 +00:00
|
|
|
bwdLabel.classList.remove('selected')
|
|
|
|
|
fwdLabel.classList.add('selected')
|
2017-10-22 02:41:58 +00:00
|
|
|
} else {
|
2017-11-21 21:43:56 +00:00
|
|
|
fwdLabel.classList.remove('selected')
|
|
|
|
|
bwdLabel.classList.add('selected')
|
2017-10-22 02:41:58 +00:00
|
|
|
}
|
|
|
|
|
};
|
2017-10-22 19:35:56 +00:00
|
|
|
var incCounter = function (val) {
|
2017-10-23 04:03:12 +00:00
|
|
|
'use strict';
|
2017-10-22 19:35:56 +00:00
|
|
|
var current = $('#counter').val();
|
2017-10-23 00:01:43 +00:00
|
|
|
$('#counter').val(parseInt(current) + val);
|
2017-10-23 04:03:12 +00:00
|
|
|
STATE.counter += val;
|
|
|
|
|
};
|
|
|
|
|
var appPage = function () {
|
|
|
|
|
'use strict';
|
|
|
|
|
$('#app').show();
|
|
|
|
|
$('#settings').hide();
|
|
|
|
|
$('#settingsIcon').removeClass('selected');
|
|
|
|
|
$('#mscriptIcon').removeClass('selected');
|
|
|
|
|
$('#bar h1').addClass('selected');
|
2017-10-22 19:35:56 +00:00
|
|
|
};
|
|
|
|
|
var settingsPage = function () {
|
2017-10-23 04:03:12 +00:00
|
|
|
'use strict';
|
2017-10-22 19:35:56 +00:00
|
|
|
$('#settings').show();
|
|
|
|
|
$('#app').hide();
|
|
|
|
|
$('#bar h1').removeClass('selected');
|
|
|
|
|
$('#mscriptIcon').removeClass('selected');
|
|
|
|
|
$('#settingsIcon').addClass('selected');
|
|
|
|
|
};
|
2017-10-22 01:07:45 +00:00
|
|
|
</script>
|
|
|
|
|
<script>
|
2017-11-21 21:43:56 +00:00
|
|
|
'use strict'
|
|
|
|
|
const web = {};
|
2017-10-22 01:54:17 +00:00
|
|
|
web.frame = function () {
|
|
|
|
|
$.ajax({
|
|
|
|
|
method : 'POST',
|
|
|
|
|
url : '/frame',
|
2017-10-22 02:50:56 +00:00
|
|
|
contentType: 'application/json',
|
2017-10-22 02:47:12 +00:00
|
|
|
dataType : 'json',
|
2017-10-22 01:54:17 +00:00
|
|
|
success : web.frameSuccess
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
web.frameSuccess = function (res) {
|
|
|
|
|
$('#frame').blur();
|
2017-10-22 19:35:56 +00:00
|
|
|
if (res.dir === true) {
|
|
|
|
|
incCounter(1);
|
|
|
|
|
} else {
|
|
|
|
|
incCounter(-1);
|
|
|
|
|
}
|
2017-10-22 01:54:17 +00:00
|
|
|
};
|
|
|
|
|
web.setDir = function () {
|
2017-11-21 21:49:02 +00:00
|
|
|
const dir = document.getElementById('dir').checked;
|
2017-11-21 21:52:59 +00:00
|
|
|
const formData = new FormData()
|
|
|
|
|
console.log('set to => ' + dir)
|
|
|
|
|
formData.append('json', JSON.stringify({ dir : dir }))
|
2017-11-21 21:43:56 +00:00
|
|
|
const opts = {
|
2017-11-21 21:38:11 +00:00
|
|
|
method : 'POST',
|
2017-11-21 21:52:59 +00:00
|
|
|
body : formData
|
2017-11-21 18:50:01 +00:00
|
|
|
};
|
2017-11-21 21:52:59 +00:00
|
|
|
console.dir(opts)
|
2017-11-21 21:49:02 +00:00
|
|
|
fetch('/dir', opts)
|
|
|
|
|
.then(res => {
|
|
|
|
|
return res.json()
|
|
|
|
|
})
|
|
|
|
|
.then(web.setDirSuccess).catch(err => {
|
|
|
|
|
console.error('Error setting direction')
|
|
|
|
|
console.error(err);
|
|
|
|
|
});
|
2017-10-22 01:54:17 +00:00
|
|
|
};
|
|
|
|
|
web.setDirSuccess = function (res) {
|
2017-10-23 04:03:12 +00:00
|
|
|
STATE.dir = res.dir;
|
2017-10-22 19:35:56 +00:00
|
|
|
setDirLabel(res.dir);
|
2017-10-23 04:03:12 +00:00
|
|
|
console.log('setDir to ' + res.dir);
|
2017-10-22 19:35:56 +00:00
|
|
|
};
|
|
|
|
|
web.getState = function () {
|
|
|
|
|
$.ajax({
|
|
|
|
|
method : 'GET',
|
|
|
|
|
url : '/status',
|
|
|
|
|
success : web.getStateSuccess
|
2017-10-23 04:03:12 +00:00
|
|
|
});
|
2017-10-22 19:35:56 +00:00
|
|
|
};
|
|
|
|
|
web.getStateSuccess = function (res) {
|
2017-10-23 04:03:12 +00:00
|
|
|
var exposure;
|
2017-10-23 04:17:02 +00:00
|
|
|
var scale;
|
2017-10-22 23:59:38 +00:00
|
|
|
if (res.frame.dir !== true) {
|
|
|
|
|
$('#dir').prop('checked', true);
|
2017-10-23 04:03:12 +00:00
|
|
|
STATE.dir = res.frame.dir;
|
2017-10-22 23:59:38 +00:00
|
|
|
setDirLabel(false);
|
|
|
|
|
}
|
|
|
|
|
$('#counter').val(res.counter);
|
2017-10-24 00:43:16 +00:00
|
|
|
STATE.counter = res.counter;
|
|
|
|
|
//Exposure
|
2017-10-23 04:03:12 +00:00
|
|
|
if (res.frame.exposure === 0) {
|
2017-10-23 04:17:02 +00:00
|
|
|
res.frame.exposure = BOLEX.expected;
|
2017-10-23 04:03:12 +00:00
|
|
|
}
|
|
|
|
|
STATE.exposure = res.frame.exposure;
|
|
|
|
|
exposure = shutter(STATE.exposure);
|
2017-10-23 04:19:48 +00:00
|
|
|
scale = scaleAuto(STATE.exposure);
|
2017-10-23 05:17:05 +00:00
|
|
|
$('#str').text(exposure.str);
|
2017-10-23 05:11:46 +00:00
|
|
|
$('#scale').val(scale);
|
2017-10-23 05:20:20 +00:00
|
|
|
setExposureScale();
|
2017-10-23 05:08:18 +00:00
|
|
|
|
2017-10-22 23:59:38 +00:00
|
|
|
$('#delay').val(res.frame.delay);
|
2017-10-23 04:03:12 +00:00
|
|
|
STATE.delay = res.frame.delay;
|
|
|
|
|
};
|
|
|
|
|
web.setExposure = function () {
|
|
|
|
|
var exposure = $('#exposure').val();
|
2017-10-23 05:24:22 +00:00
|
|
|
if (exposure === '' || exposure === null) {
|
|
|
|
|
exposure = 0;
|
|
|
|
|
}
|
2017-10-23 04:03:12 +00:00
|
|
|
var scaledExposure = scaleTime(exposure, STATE.scale);
|
|
|
|
|
$.ajax({
|
|
|
|
|
method : 'POST',
|
|
|
|
|
url : '/exposure',
|
2017-10-23 04:17:02 +00:00
|
|
|
data : JSON.stringify({ exposure : scaledExposure }),
|
2017-10-23 04:03:12 +00:00
|
|
|
contentType: 'application/json',
|
|
|
|
|
dataType : 'json',
|
|
|
|
|
success : web.setExposureSuccess
|
|
|
|
|
});
|
2017-11-21 18:50:01 +00:00
|
|
|
|
2017-10-23 04:03:12 +00:00
|
|
|
};
|
|
|
|
|
web.setExposureSuccess = function (res) {
|
|
|
|
|
var exposure;
|
2017-10-23 04:26:53 +00:00
|
|
|
if (res.exposure < BOLEX.expected) {
|
2017-10-23 04:17:02 +00:00
|
|
|
res.exposure = BOLEX.expected;
|
2017-10-23 04:03:12 +00:00
|
|
|
}
|
|
|
|
|
STATE.exposure = res.exposure;
|
|
|
|
|
exposure = shutter(STATE.exposure);
|
|
|
|
|
$('#str').text(exposure.str);
|
|
|
|
|
console.log('setExposure to ' + res.exposure);
|
|
|
|
|
};
|
|
|
|
|
web.setDelay = function () {
|
|
|
|
|
var delay = $('#delay').val();
|
|
|
|
|
var scaledDelay = scaleTime(delay, STATE.delayScale);
|
|
|
|
|
$.ajax({
|
|
|
|
|
method : 'POST',
|
|
|
|
|
url : '/delay',
|
2017-10-24 00:41:28 +00:00
|
|
|
data : JSON.stringify({ delay : scaledDelay }),
|
2017-10-23 04:03:12 +00:00
|
|
|
contentType: 'application/json',
|
|
|
|
|
dataType : 'json',
|
|
|
|
|
success : web.setDelaySuccess
|
2017-10-24 00:41:28 +00:00
|
|
|
});
|
2017-10-23 04:03:12 +00:00
|
|
|
};
|
|
|
|
|
web.setDelaySuccess = function (res) {
|
|
|
|
|
STATE.delay = res.delay;
|
2017-10-24 00:41:28 +00:00
|
|
|
console.log('setDelay to ' + res.delay);
|
|
|
|
|
};
|
|
|
|
|
web.setCounter = function () {
|
|
|
|
|
var counter = $('#counter').val();
|
|
|
|
|
$.ajax({
|
|
|
|
|
method : 'POST',
|
|
|
|
|
url : '/counter',
|
|
|
|
|
data : JSON.stringify({ counter : counter }),
|
|
|
|
|
contentType: 'application/json',
|
|
|
|
|
dataType : 'json',
|
|
|
|
|
success : web.setCounterSuccess
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
web.setCounterSuccess = function (res) {
|
|
|
|
|
STATE.counter = res.counter;
|
|
|
|
|
console.log('setCounter to ' + res.counter);
|
2017-10-22 01:54:17 +00:00
|
|
|
};
|
|
|
|
|
web.init = function () {
|
|
|
|
|
'use strict';
|
|
|
|
|
frame = web.frame;
|
2017-10-22 19:35:56 +00:00
|
|
|
getState = web.getState;
|
2017-10-22 01:54:17 +00:00
|
|
|
setDir = web.setDir;
|
|
|
|
|
setExposure = web.setExposure;
|
2017-10-24 00:41:28 +00:00
|
|
|
setCounter = web.setCounter;
|
2017-10-22 23:59:38 +00:00
|
|
|
|
2017-10-22 19:35:56 +00:00
|
|
|
web.getState();
|
2017-10-22 01:54:17 +00:00
|
|
|
};
|
|
|
|
|
web.init();
|
2017-10-22 01:07:45 +00:00
|
|
|
</script>
|
|
|
|
|
<script>
|
2017-10-22 01:54:17 +00:00
|
|
|
var mobile = {};
|
|
|
|
|
mobile.init = function () {
|
|
|
|
|
'use strict';
|
|
|
|
|
};
|
2017-10-22 01:07:45 +00:00
|
|
|
</script>
|
2017-08-22 02:49:35 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
