<!doctype html> <html> <head> <title>intval 3</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no"> <meta name = "viewport" content = "width = 320, initial-scale = 1.0, user-scalable = no"> <style> html,body{ background: #212121; height: 100%; padding: 0; margin: 0; } *{ color: #fff; font-family: 'Arial Neue', Helvetical, Arial, sans-serif; } body{ } #app, #settings{ padding: 5px 10% 0 10%; } #settings{ display: none; } #settings h2{ font-size: 18px; text-align: center; font-weight: normal; } /* The switch - the box around the slider */ .switch { position: relative; display: block; width: 60px; height: 34px; margin: 0 auto; } /* Hide default HTML checkbox */ .switch input {display:none;} /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #20ce45; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #f32121; } input:focus + .slider { } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } input[type=number], input[type=text], input[type=password], select{ width: 100%; border: 2px solid #fff; border-radius: 5px; color: #fff; font-size: 18px; -webkit-appearance: none; background: transparent; box-shadow: none; outline: none; margin: 5px 0; padding: 5px 10px; box-sizing: border-box; } option{ color: #212121; } button{ width: 100%; border: 2px solid #fff; border-radius: 5px; color: #fff; font-size: 18px; background: transparent; -webkit-appearance: none; box-shadow: none; outline: none; margin: 5px 0; padding: 5px 0; text-align: center; } button:focus{ background-color: #20ce45; border-color: #20ce45; color: #212121; font-weight: bold; } #fwdLabel,#bwdLabel{ display: block; line-height: 34px; height: 33px; color: #444; } #fwdLabel.selected, #bwdLabel.selected{ color: #fff; } #fwdLabel{ float: left; } #bwdLabel{ position: absolute; right: 10%; } .label{ text-align: center; color: #666; margin-top: 6px; margin-bottom: 9px; } .icon{ } #exposure, #delay{ width: 70%; display: inline-block; } #scale, #delayScale{ width: 25%; display: inline-block; float: right; } #str{ color: #fff; } #counter{ text-align: center; } </style> </head> <body> <div id="app"> <div> <div class="label">Counter</div> <input type="number" id="counter" oninput="setCounter();" value="0" step="1" /> </div> <div> <div class="label">Direction</div> <span id="bwdLabel">BACKWARD</span> <span id="fwdLabel" class="selected">FORWARD</span> <label class="switch"> <input type="checkbox" id="dir" onclick="setDir();"> <span class="slider round"></span> </label> </div> <div> <div class="label">Exposure <span id="str">1/5</span></div> <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> </div> <div> <div class="label">Delay</div> <input type="number" id="delay" value="0" min="0" step="1" /> <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> </div> <div> <button id="seq">START SEQUENCE</button> </div> <div> <button id="frame" onclick="frame();">FRAME</button> </div> </div> <div id="settings"> <h2>SETTINGS</h2> <div> <div class="label">Rex-o-fader</div> <select id="angle"> <option value="133" selected>0 (Normal)</option> <option value="66">1 Stop</option> <option value="33">2 Stop</option> </select> </div> <h2>BLUETOOTH</h2> <select id="bluetooth"> <option>N/A</option> </select> <h2>WIFI</h2> <div> <input type="text" id="ssid" placeholder="Wifi SSID" /> </div> <div> <input type="password" id="password" placeholder="Wifi Password" /> </div> </div> <footer> <img id="settingsIcon" onclick="settingsPage();" class="icon" src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU0IDU0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NCA1NDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiPgo8Zz4KCTxwYXRoIGQ9Ik01MS4yMiwyMWgtNS4wNTJjLTAuODEyLDAtMS40ODEtMC40NDctMS43OTItMS4xOTdzLTAuMTUzLTEuNTQsMC40Mi0yLjExNGwzLjU3Mi0zLjU3MSAgIGMwLjUyNS0wLjUyNSwwLjgxNC0xLjIyNCwwLjgxNC0xLjk2NmMwLTAuNzQzLTAuMjg5LTEuNDQxLTAuODE0LTEuOTY3bC00LjU1My00LjU1M2MtMS4wNS0xLjA1LTIuODgxLTEuMDUyLTMuOTMzLDBsLTMuNTcxLDMuNTcxICAgYy0wLjU3NCwwLjU3My0xLjM2NiwwLjczMy0yLjExNCwwLjQyMUMzMy40NDcsOS4zMTMsMzMsOC42NDQsMzMsNy44MzJWMi43OEMzMywxLjI0NywzMS43NTMsMCwzMC4yMiwwSDIzLjc4ICAgQzIyLjI0NywwLDIxLDEuMjQ3LDIxLDIuNzh2NS4wNTJjMCwwLjgxMi0wLjQ0NywxLjQ4MS0xLjE5NywxLjc5MmMtMC43NDgsMC4zMTMtMS41NCwwLjE1Mi0yLjExNC0wLjQyMWwtMy41NzEtMy41NzEgICBjLTEuMDUyLTEuMDUyLTIuODgzLTEuMDUtMy45MzMsMGwtNC41NTMsNC41NTNjLTAuNTI1LDAuNTI1LTAuODE0LDEuMjI0LTAuODE0LDEuOTY3YzAsMC43NDIsMC4yODksMS40NCwwLjgxNCwxLjk2NmwzLjU3MiwzLjU3MSAgIGMwLjU3MywwLjU3NCwwLjczLDEuMzY0LDAuNDIsMi4xMTRTOC42NDQsMjEsNy44MzIsMjFIMi43OEMxLjI0NywyMSwwLDIyLjI0NywwLDIzLjc4djYuNDM5QzAsMzEuNzUzLDEuMjQ3LDMzLDIuNzgsMzNoNS4wNTIgICBjMC44MTIsMCwxLjQ4MSwwLjQ0NywxLjc5MiwxLjE5N3MwLjE1MywxLjU0LTAuNDIsMi4xMTRsLTMuNTcyLDMuNTcxYy0wLjUyNSwwLjUyNS0wLjgxNCwxLjIyNC0wLjgxNCwxLjk2NiAgIGMwLDAuNzQzLDAuMjg5LDEuNDQxLDAuODE0LDEuOTY3bDQuNTUzLDQuNTUzYzEuMDUxLDEuMDUxLDIuODgxLDEuMDUzLDMuOTMzLDBsMy41NzEtMy41NzJjMC41NzQtMC41NzMsMS4zNjMtMC43MzEsMi4xMTQtMC40MiAgIGMwLjc1LDAuMzExLDEuMTk3LDAuOTgsMS4xOTcsMS43OTJ2NS4wNTJjMCwxLjUzMywxLjI0NywyLjc4LDIuNzgsMi43OGg2LjQzOWMxLjUzMywwLDIuNzgtMS4yNDcsMi43OC0yLjc4di01LjA1MiAgIGMwLTAuODEyLDAuNDQ3LTEuNDgxLDEuMTk3LTEuNzkyYzAuNzUxLTAuMzEyLDEuNTQtMC4xNTMsMi4xMTQsMC40MmwzLjU3MSwzLjU3MmMxLjA1MiwxLjA1MiwyLjg4MywxLjA1LDMuOTMzLDBsNC41NTMtNC41NTMgICBjMC41MjUtMC41MjUsMC44MTQtMS4yMjQsMC44MTQtMS45NjdjMC0wLjc0Mi0wLjI4OS0xLjQ0LTAuODE0LTEuOTY2bC0zLjU3Mi0zLjU3MWMtMC41NzMtMC41NzQtMC43My0xLjM2NC0wLjQyLTIuMTE0ICAgUzQ1LjM1NiwzMyw0Ni4xNjgsMzNoNS4wNTJjMS41MzMsMCwyLjc4LTEuMjQ3LDIuNzgtMi43OFYyMy43OEM1NCwyMi4yNDcsNTIuNzUzLDIxLDUxLjIyLDIxeiBNNTIsMzAuMjIgICBDNTIsMzAuNjUsNTEuNjUsMzEsNTEuMjIsMzFoLTUuMDUyYy0xLjYyNCwwLTMuMDE5LDAuOTMyLTMuNjQsMi40MzJjLTAuNjIyLDEuNS0wLjI5NSwzLjE0NiwwLjg1NCw0LjI5NGwzLjU3MiwzLjU3MSAgIGMwLjMwNSwwLjMwNSwwLjMwNSwwLjgsMCwxLjEwNGwtNC41NTMsNC41NTNjLTAuMzA0LDAuMzA0LTAuNzk5LDAuMzA2LTEuMTA0LDBsLTMuNTcxLTMuNTcyYy0xLjE0OS0xLjE0OS0yLjc5NC0xLjQ3NC00LjI5NC0wLjg1NCAgIGMtMS41LDAuNjIxLTIuNDMyLDIuMDE2LTIuNDMyLDMuNjR2NS4wNTJDMzEsNTEuNjUsMzAuNjUsNTIsMzAuMjIsNTJIMjMuNzhDMjMuMzUsNTIsMjMsNTEuNjUsMjMsNTEuMjJ2LTUuMDUyICAgYzAtMS42MjQtMC45MzItMy4wMTktMi40MzItMy42NGMtMC41MDMtMC4yMDktMS4wMjEtMC4zMTEtMS41MzMtMC4zMTFjLTEuMDE0LDAtMS45OTcsMC40LTIuNzYxLDEuMTY0bC0zLjU3MSwzLjU3MiAgIGMtMC4zMDYsMC4zMDYtMC44MDEsMC4zMDQtMS4xMDQsMGwtNC41NTMtNC41NTNjLTAuMzA1LTAuMzA1LTAuMzA1LTAuOCwwLTEuMTA0bDMuNTcyLTMuNTcxYzEuMTQ4LTEuMTQ4LDEuNDc2LTIuNzk0LDAuODU0LTQuMjk0ICAgQzEwLjg1MSwzMS45MzIsOS40NTYsMzEsNy44MzIsMzFIMi43OEMyLjM1LDMxLDIsMzAuNjUsMiwzMC4yMlYyMy43OEMyLDIzLjM1LDIuMzUsMjMsMi43OCwyM2g1LjA1MiAgIGMxLjYyNCwwLDMuMDE5LTAuOTMyLDMuNjQtMi40MzJjMC42MjItMS41LDAuMjk1LTMuMTQ2LTAuODU0LTQuMjk0bC0zLjU3Mi0zLjU3MWMtMC4zMDUtMC4zMDUtMC4zMDUtMC44LDAtMS4xMDRsNC41NTMtNC41NTMgICBjMC4zMDQtMC4zMDUsMC43OTktMC4zMDUsMS4xMDQsMGwzLjU3MSwzLjU3MWMxLjE0NywxLjE0NywyLjc5MiwxLjQ3Niw0LjI5NCwwLjg1NEMyMi4wNjgsMTAuODUxLDIzLDkuNDU2LDIzLDcuODMyVjIuNzggICBDMjMsMi4zNSwyMy4zNSwyLDIzLjc4LDJoNi40MzlDMzAuNjUsMiwzMSwyLjM1LDMxLDIuNzh2NS4wNTJjMCwxLjYyNCwwLjkzMiwzLjAxOSwyLjQzMiwzLjY0ICAgYzEuNTAyLDAuNjIyLDMuMTQ2LDAuMjk0LDQuMjk0LTAuODU0bDMuNTcxLTMuNTcxYzAuMzA2LTAuMzA1LDAuODAxLTAuMzA1LDEuMTA0LDBsNC41NTMsNC41NTNjMC4zMDUsMC4zMDUsMC4zMDUsMC44LDAsMS4xMDQgICBsLTMuNTcyLDMuNTcxYy0xLjE0OCwxLjE0OC0xLjQ3NiwyLjc5NC0wLjg1NCw0LjI5NGMwLjYyMSwxLjUsMi4wMTYsMi40MzIsMy42NCwyLjQzMmg1LjA1MkM1MS42NSwyMyw1MiwyMy4zNSw1MiwyMy43OFYzMC4yMnoiIGZpbGw9IiNGRkZGRkYiLz4KCTxwYXRoIGQ9Ik0yNywxOGMtNC45NjMsMC05LDQuMDM3LTksOXM0LjAzNyw5LDksOXM5LTQuMDM3LDktOVMzMS45NjMsMTgsMjcsMTh6IE0yNywzNGMtMy44NTksMC03LTMuMTQxLTctN3MzLjE0MS03LDctNyAgIHM3LDMuMTQxLDcsN1MzMC44NTksMzQsMjcsMzR6IiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" /> <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> <script> var BOLEX = { angle : 133, prism : 0.8, expected : 630 }; var STATE = { dir : true, exposure : 630, //always ms delay : 0, scale : 'ms', delayScale : 'ms', counter : 0 } //functions var frame; var getState; var setDir; var setExposure; var setDelay; var setCounter; //ms var shutter = function (exposure) { 'use strict'; var fraction = BOLEX.expected / 1000; var speed; var corrected; var str; if (exposure > BOLEX.expected) { //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 str = '1/' + Math.round(Math.pow(corrected, -1)) + ' sec'; } 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; }; var setDirLabel = function (dir) { const bwdLabel = document.getElementById('bwdLabel'); const fwdLabel = document.getElementById('fwdLabel'); if (dir) { bwdLabel.classList.remove('selected') fwdLabel.classList.add('selected') } else { fwdLabel.classList.remove('selected') bwdLabel.classList.add('selected') } }; var incCounter = function (val) { 'use strict'; var current = $('#counter').val(); $('#counter').val(parseInt(current) + val); STATE.counter += val; }; var appPage = function () { 'use strict'; $('#app').show(); $('#settings').hide(); $('#settingsIcon').removeClass('selected'); $('#mscriptIcon').removeClass('selected'); $('#bar h1').addClass('selected'); }; var settingsPage = function () { 'use strict'; $('#settings').show(); $('#app').hide(); $('#bar h1').removeClass('selected'); $('#mscriptIcon').removeClass('selected'); $('#settingsIcon').addClass('selected'); }; </script> <script> 'use strict' const web = {}; web.frame = function () { $.ajax({ method : 'POST', url : '/frame', contentType: 'application/json', dataType : 'json', success : web.frameSuccess }); } web.frameSuccess = function (res) { $('#frame').blur(); if (res.dir === true) { incCounter(1); } else { incCounter(-1); } }; web.setDir = function () { const dir = !document.getElementById('dir').checked; /*$.ajax({ method : 'POST', url : '/dir', data : JSON.stringify({ dir : dir}), contentType: 'application/json', dataType : 'json', success : web.setDirSuccess });*/ const opts = { method : 'POST', body : { dir : dir} }; fetch('/dir', opts).then(web.setDirSuccess); }; web.setDirSuccess = function (res) { STATE.dir = res.dir; setDirLabel(res.dir); console.log('setDir to ' + res.dir); }; web.getState = function () { $.ajax({ method : 'GET', url : '/status', success : web.getStateSuccess }); }; web.getStateSuccess = function (res) { var exposure; var scale; if (res.frame.dir !== true) { $('#dir').prop('checked', true); STATE.dir = res.frame.dir; setDirLabel(false); } $('#counter').val(res.counter); STATE.counter = res.counter; //Exposure if (res.frame.exposure === 0) { res.frame.exposure = BOLEX.expected; } STATE.exposure = res.frame.exposure; exposure = shutter(STATE.exposure); scale = scaleAuto(STATE.exposure); $('#str').text(exposure.str); $('#scale').val(scale); setExposureScale(); $('#delay').val(res.frame.delay); STATE.delay = res.frame.delay; }; web.setExposure = function () { var exposure = $('#exposure').val(); if (exposure === '' || exposure === null) { exposure = 0; } var scaledExposure = scaleTime(exposure, STATE.scale); $.ajax({ method : 'POST', url : '/exposure', data : JSON.stringify({ exposure : scaledExposure }), contentType: 'application/json', dataType : 'json', success : web.setExposureSuccess }); }; web.setExposureSuccess = function (res) { var exposure; if (res.exposure < BOLEX.expected) { res.exposure = BOLEX.expected; } 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', data : JSON.stringify({ delay : scaledDelay }), contentType: 'application/json', dataType : 'json', success : web.setDelaySuccess }); }; web.setDelaySuccess = function (res) { STATE.delay = res.delay; 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); }; web.init = function () { 'use strict'; frame = web.frame; getState = web.getState; setDir = web.setDir; setExposure = web.setExposure; setCounter = web.setCounter; web.getState(); }; web.init(); </script> <script> var mobile = {}; mobile.init = function () { 'use strict'; }; </script> </body> </html>