intval3/app/www/index.html

<!doctype html>
<html>
<head>
	<title>INTVAL3</title>
	<link rel="shortcut icon" type="image/x-icon" href="/static/img/favicon.ico" />
	<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, minimal-ui, viewport-fit=cover">
	<!--<link rel="stylesheet" href="static/css/codemirror.css" />
	<link rel="stylesheet" href="static/css/monokai.css" />-->
	<link rel="stylesheet" href="static/css/index.css" />
</head>
<body>
<div id="overlay">
	<div id="spinner"></div>
	<div id="msg"></div>
	<div id="tap">Tap to Connect</div>
</div>
<div id="app" class="page selected">
	<h2>INTVAL3</h2>
	<div>
		<div class="label">Counter</div>
		<input type="number" id="counter" onclick="setCounter();" value="0" step="1" readonly />
	</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" onchange="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" onchange="setDelay();" />
		<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" onclick="sequence();">START SEQUENCE</button>
	</div>
	<div>
		<button id="frame" onclick="frame();">+1 FRAME</button>
	</div>
</div>
<div id="settings" class="page">
	<div class="ble">
		<h2>BLUETOOTH</h2>
		<select id="bluetooth">
			<option>N/A</option>
		</select>
		<button id="disconnect" onclick="mobile.ble.disconnect();">DISCONNECT</button>
		<button id="scan" class="active" onclick="mobile.ble.scan();">SCAN FOR DEVICE</button>
	</div>
	<div class="ble">
		<h2>WIFI</h2>
		<div id="ip">
			Local IP: null
		</div>
		<div>
			<select id="available" class="" onchange="editWifi();">
				<option>N/A</option>
			</select>
		</div>
		<div>
			<input type="password" id="password" class="" placeholder="Wifi Password" />
		</div>
		<button id="wifi" class="" onclick="setWifi();">CONNECT</button>
		<button id="wifiRefresh" class="" onclick="getWifi();">REFRESH WIFI</button>
	</div>
	<div>
		<button id="reset" onclick="reset();">RESET</button>
		<button id="restart" onclick="restart();">RESTART</button>
		<button id="update" onclick="update();">UPDATE</button>
	</div>
</div>
<!--<div id="mscript" class="page">
	<h2>MSCRIPT</h2>
	<textarea id="mscript_editor"></textarea>
	<button id="compile">COMPILE</button>
	<button id="mscript_seq">START SEQUENCE</button>
</div>-->
<div id="camera" class="page">
	<h2>CAMERA</h2>
	<div class="clearfix">
		<div class="setting">
			<div class="label">ISO</div>
			<input type="number" class="iso" placeholder="100" value="100" onchange="mobile.refreshExposure();">
		</div>
		<div class="setting">
			<div class="label">F-stop</div>
			<input type="number" class="fstop" placeholder="5.6" value="5.6" onchange="mobile.refreshExposure();" />
		</div>
		<div class="setting">
			<div class="label">Rex-o-fader</div>
			<select class="angle">
				<option value="133" selected>0 (Normal)</option>
				<option value="66">1 Stop</option>
				<option value="33">2 Stop</option>
			</select>
		</div>
	</div>
	<button id="cameraBtn" class="ble" onclick="mobile.getCamera();">
		<i class="cameraIcon"></i>
	</button>
	<div class="clearfix ble">
		<div id="camera_exposure">
			<h3>PHONE</h3>
			<div>
				<label for="cam_exp">EXP</label>
				<input readonly id="cam_exp" type="text" />
			</div>
			<div>
				<label for="cam_f">F</label>
				<input readonly id="cam_f" type="text" />
			</div>
			<div>
				<label for="cam_iso">ISO</label>
				<input readonly id="cam_iso" type="text" />
			</div>
			<div>
				<label>COMP</label>
			</div>
		</div>
		<div id="bolex_exposure">
			<h3>BOLEX</h3>
			<div>
				<label id="bol_exp_diff"></label>
				<input readonly id="bol_exp" type="text" />
			</div>
			<div>
				<label id="bol_f_diff"></label>
				<input readonly id="bol_f" type="text" />
			</div>
			<div>
				<label id="bol_iso_diff"></label>
				<input readonly id="bol_iso" type="text" />
			</div>
			<div>
				<label><span class="pos">+0.8</span></label>
			</div>
		</div>
	</div>
</div>
<footer>
	<div id="settingsIcon" onclick="settingsPage();" class="icon">
		<div> </div>
	</div>
	<div id="appIcon" onclick="appPage();" class="icon selected">
		<div></div>
	</div>
	<!--<div id="mscriptIcon" onclick="mscriptPage();" class="icon">
		<div></div>
	</div>-->
	<div id="cameraIcon" onclick="cameraPage();" class="icon">
		<div class="cameraIcon"></div>
	</div>
</footer>
<script src="cordova.js"></script>
<script src="static/js/spin.min.js"></script>
<!--<script src="static/js/codemirror.js"></script>-->
<script src="static/js/intval.core.js"></script>
<script src="static/js/intval.web.js"></script>
<script src="static/js/intval.mobile.js"></script>
<script src="static/js/intval.pwa.js"></script>
<!--<script src="static/js/intval.mscript.js"></script>-->
<script src="static/js/index.js"></script>
</body>
</html>
App index file placeholder 2017-08-22 02:49:35 +00:00			`<!doctype html>`
			`<html>`
			`<head>`
Consistent naming, new icon, building for more testers 2017-12-30 04:10:18 +00:00			`<title>INTVAL3</title>`
Add a favicon before deploying. 2019-06-19 23:32:36 +00:00			`<link rel="shortcut icon" type="image/x-icon" href="/static/img/favicon.ico" />`
Clean up styles, add labels to existing fields and meta tags for mobile views. 2017-10-22 01:54:17 +00:00			`<meta name="apple-mobile-web-app-capable" content="yes">`
			`<meta name="format-detection" content="telephone=no">`
App supports controlling intval with bluetooth 2017-12-13 22:52:25 +00:00			`<meta name="viewport" content="width = 320, initial-scale = 1.0, user-scalable = no, minimal-ui, viewport-fit=cover">`
Pull mscript features for now 2018-02-02 18:02:15 +00:00			`<!--<link rel="stylesheet" href="static/css/codemirror.css" />`
			`<link rel="stylesheet" href="static/css/monokai.css" />-->`
Move svg icons into css file. 2017-11-22 19:26:43 +00:00			`<link rel="stylesheet" href="static/css/index.css" />`
App index file placeholder 2017-08-22 02:49:35 +00:00			`</head>`
Pull default mobile styles. 2018-02-06 22:34:58 +00:00			`<body>`
App supports controlling intval with bluetooth 2017-12-13 22:52:25 +00:00			`<div id="overlay">`
			`<div id="spinner"></div>`
Add a message element for brief displays 2018-02-12 19:21:49 +00:00			`<div id="msg"></div>`
Created a PWA frontend. This marks a major milestone in the project, as I will be dropping support of the cordova mobile app and rely entirely on the PWA for bluetooth connectivity going forward. Can't afford an Apple dev license I'll never use and don't want the trouble of maintaining mobile apps on the stores that maybe a handful of people will use. Check intval.sixteenmillimeter.com for this site deployed as an app. 2019-06-19 23:23:20 +00:00			`<div id="tap">Tap to Connect</div>`
App supports controlling intval with bluetooth 2017-12-13 22:52:25 +00:00			`</div>`
Use classes over ids. Only allow promp value to change counter. 2017-11-22 16:25:04 +00:00			`<div id="app" class="page selected">`
Consistent naming, new icon, building for more testers 2017-12-30 04:10:18 +00:00			`<h2>INTVAL3</h2>`
Get state at startup (to maintain state on the device and report to the client on reload). Also, settings UI in place, need mscript UI as well. 2017-10-22 19:35:56 +00:00			`<div>`
			`<div class="label">Counter</div>`
Use classes over ids. Only allow promp value to change counter. 2017-11-22 16:25:04 +00:00			`<input type="number" id="counter" onclick="setCounter();" value="0" step="1" readonly />`
Get state at startup (to maintain state on the device and report to the client on reload). Also, settings UI in place, need mscript UI as well. 2017-10-22 19:35:56 +00:00			`</div>`
Style the buttons and inputs to fill width of screen. 2017-10-22 02:01:46 +00:00			`<div>`
Add labels to direction UI 2017-10-22 02:13:38 +00:00			`<div class="label">Direction</div>`
Fix direction selection UI 2017-10-22 02:17:32 +00:00			`<span id="bwdLabel">BACKWARD</span>`
Add labels to direction UI 2017-10-22 02:13:38 +00:00			`<span id="fwdLabel" class="selected">FORWARD</span>`
Styles for setDir ready to test on device. 2017-10-22 02:41:58 +00:00			`<label class="switch">`
			`<input type="checkbox" id="dir" onclick="setDir();">`
Style the buttons and inputs to fill width of screen. 2017-10-22 02:01:46 +00:00			`<span class="slider round"></span>`
			`</label>`
			`</div>`
			`<div>`
Set exposure and autoscale when restoring state 2017-10-23 04:17:02 +00:00			`<div class="label">Exposure <span id="str">1/5</span></div>`
App supports controlling intval with bluetooth 2017-12-13 22:52:25 +00:00			`<input type="number" id="exposure" value="630" min="0" onchange="setExposure();" />`
Set exposure, scale and parse time at different scales. 2017-10-23 04:03:12 +00:00			`<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>`
Style the buttons and inputs to fill width of screen. 2017-10-22 02:01:46 +00:00			`</div>`
			`<div>`
Set exposure, scale and parse time at different scales. 2017-10-23 04:03:12 +00:00			`<div class="label">Delay</div>`
App supports controlling intval with bluetooth 2017-12-13 22:52:25 +00:00			`<input type="number" id="delay" value="0" min="0" step="1" onchange="setDelay();" />`
Set exposure, scale and parse time at different scales. 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>`
Style the buttons and inputs to fill width of screen. 2017-10-22 02:01:46 +00:00			`</div>`
			`<div>`
Add events to the html and respective libraries, web, mobile and core 2017-12-21 04:49:51 +00:00			`<button id="seq" onclick="sequence();">START SEQUENCE</button>`
Style the buttons and inputs to fill width of screen. 2017-10-22 02:01:46 +00:00			`</div>`
			`<div>`
Set innerHTML of non-input elements, not value. This is why labels are not changing. 2017-12-24 03:30:17 +00:00			`<button id="frame" onclick="frame();">+1 FRAME</button>`
Style the buttons and inputs to fill width of screen. 2017-10-22 02:01:46 +00:00			`</div>`
Style buttons and input 2017-10-22 01:44:07 +00:00			`</div>`
Use classes over ids. Only allow promp value to change counter. 2017-11-22 16:25:04 +00:00			`<div id="settings" class="page">`
App supports controlling intval with bluetooth 2017-12-13 22:52:25 +00:00			`<div class="ble">`
			`<h2>BLUETOOTH</h2>`
			`<select id="bluetooth">`
			`<option>N/A</option>`
			`</select>`
BLE features are working, minus the wifi feature. Good work today. 2017-12-13 23:40:14 +00:00			`<button id="disconnect" onclick="mobile.ble.disconnect();">DISCONNECT</button>`
			`<button id="scan" class="active" onclick="mobile.ble.scan();">SCAN FOR DEVICE</button>`
Set exposure, scale and parse time at different scales. 2017-10-23 04:03:12 +00:00			`</div>`
App supports controlling intval with bluetooth 2017-12-13 22:52:25 +00:00			`<div class="ble">`
			`<h2>WIFI</h2>`
Add path module to db to better format url? Why is database no longer writing? Move ip above list of wifi. List package.version in app server creation. 2018-01-05 22:31:00 +00:00			`<div id="ip">`
			`Local IP: null`
			`</div>`
App supports controlling intval with bluetooth 2017-12-13 22:52:25 +00:00			`<div>`
PWA wifi functions were not attached to DOM elements, only mobile ones. getWifi, setWifi and editWifi bindings were added to both pwa.init and mobile.init functions and DOM elements were bound to the generic functions. Resolves #7 2020-05-16 03:06:57 +00:00			`<select id="available" class="" onchange="editWifi();">`
Mobile app now allows user to interact with wifi settings. Also (mostly) properly displays the state of a sequence. 2018-01-02 05:35:20 +00:00			`<option>N/A</option>`
			`</select>`
App supports controlling intval with bluetooth 2017-12-13 22:52:25 +00:00			`</div>`
			`<div>`
Mobile app now allows user to interact with wifi settings. Also (mostly) properly displays the state of a sequence. 2018-01-02 05:35:20 +00:00			`<input type="password" id="password" class="" placeholder="Wifi Password" />`
App supports controlling intval with bluetooth 2017-12-13 22:52:25 +00:00			`</div>`
PWA wifi functions were not attached to DOM elements, only mobile ones. getWifi, setWifi and editWifi bindings were added to both pwa.init and mobile.init functions and DOM elements were bound to the generic functions. Resolves #7 2020-05-16 03:06:57 +00:00			`<button id="wifi" class="" onclick="setWifi();">CONNECT</button>`
			`<button id="wifiRefresh" class="" onclick="getWifi();">REFRESH WIFI</button>`
Set exposure, scale and parse time at different scales. 2017-10-23 04:03:12 +00:00			`</div>`
Hide BLE functions but don't hide footer on web 2018-02-09 17:25:22 +00:00			`<div>`
Add a message element for brief displays 2018-02-12 19:21:49 +00:00			`<button id="reset" onclick="reset();">RESET</button>`
			`<button id="restart" onclick="restart();">RESTART</button>`
			`<button id="update" onclick="update();">UPDATE</button>`
Add a reset feature to mobile app which allows the device to be reset to the default settings (direction forward, exposure 630 and delay 0). 2018-02-08 00:07:38 +00:00			`</div>`
Get state at startup (to maintain state on the device and report to the client on reload). Also, settings UI in place, need mscript UI as well. 2017-10-22 19:35:56 +00:00			`</div>`
Pull mscript features for now 2018-02-02 18:02:15 +00:00			`<!--<div id="mscript" class="page">`
Add mscript GUI. 2017-11-23 00:48:45 +00:00			`<h2>MSCRIPT</h2>`
			`<textarea id="mscript_editor"></textarea>`
Remove sequencer feature, too similar to the mcopy feature and not needed in a standalone intervalometer. 2017-11-23 01:05:19 +00:00			`<button id="compile">COMPILE</button>`
			`<button id="mscript_seq">START SEQUENCE</button>`
Pull mscript features for now 2018-02-02 18:02:15 +00:00			`</div>-->`
Add a state for the mobile app to trigger the camera and set Bolex camera values. 2018-01-09 05:06:17 +00:00			`<div id="camera" class="page">`
Display readonly camera values for the camera exposure screen. 2018-02-03 21:52:59 +00:00			`<h2>CAMERA</h2>`
Sync camera settings between multiple inputs and write to settings 2018-02-02 20:36:28 +00:00			`<div class="clearfix">`
			`<div class="setting">`
			`<div class="label">ISO</div>`
Display readonly camera values for the camera exposure screen. 2018-02-03 21:52:59 +00:00			`<input type="number" class="iso" placeholder="100" value="100" onchange="mobile.refreshExposure();">`
Sync camera settings between multiple inputs and write to settings 2018-02-02 20:36:28 +00:00			`</div>`
			`<div class="setting">`
			`<div class="label">F-stop</div>`
Display readonly camera values for the camera exposure screen. 2018-02-03 21:52:59 +00:00			`<input type="number" class="fstop" placeholder="5.6" value="5.6" onchange="mobile.refreshExposure();" />`
Sync camera settings between multiple inputs and write to settings 2018-02-02 20:36:28 +00:00			`</div>`
			`<div class="setting">`
			`<div class="label">Rex-o-fader</div>`
			`<select class="angle">`
			`<option value="133" selected>0 (Normal)</option>`
			`<option value="66">1 Stop</option>`
			`<option value="33">2 Stop</option>`
			`</select>`
			`</div>`
			`</div>`
Hide BLE functions but don't hide footer on web 2018-02-09 17:25:22 +00:00			`<button id="cameraBtn" class="ble" onclick="mobile.getCamera();">`
Display readonly camera values for the camera exposure screen. 2018-02-03 21:52:59 +00:00			`<i class="cameraIcon"></i>`
			`</button>`
Hide BLE functions but don't hide footer on web 2018-02-09 17:25:22 +00:00			`<div class="clearfix ble">`
Display readonly camera values for the camera exposure screen. 2018-02-03 21:52:59 +00:00			`<div id="camera_exposure">`
			`<h3>PHONE</h3>`
			`<div>`
			`<label for="cam_exp">EXP</label>`
			`<input readonly id="cam_exp" type="text" />`
			`</div>`
			`<div>`
			`<label for="cam_f">F</label>`
			`<input readonly id="cam_f" type="text" />`
			`</div>`
			`<div>`
			`<label for="cam_iso">ISO</label>`
			`<input readonly id="cam_iso" type="text" />`
			`</div>`
			`<div>`
			`<label>COMP</label>`
			`</div>`
			`</div>`
			`<div id="bolex_exposure">`
			`<h3>BOLEX</h3>`
			`<div>`
			`<label id="bol_exp_diff"></label>`
			`<input readonly id="bol_exp" type="text" />`
			`</div>`
			`<div>`
			`<label id="bol_f_diff"></label>`
			`<input readonly id="bol_f" type="text" />`
			`</div>`
			`<div>`
			`<label id="bol_iso_diff"></label>`
			`<input readonly id="bol_iso" type="text" />`
			`</div>`
			`<div>`
Pull default mobile styles. 2018-02-06 22:34:58 +00:00			`<label><span class="pos">+0.8</span></label>`
Display readonly camera values for the camera exposure screen. 2018-02-03 21:52:59 +00:00			`</div>`
			`</div>`
			`</div>`
Add a state for the mobile app to trigger the camera and set Bolex camera values. 2018-01-09 05:06:17 +00:00			`</div>`
Update app to not use text blobs 2017-11-21 18:50:01 +00:00			`<footer>`
Add mscript GUI. 2017-11-23 00:48:45 +00:00			`<div id="settingsIcon" onclick="settingsPage();" class="icon">`
			`<div> </div>`
Use classes over ids. Only allow promp value to change counter. 2017-11-22 16:25:04 +00:00			`</div>`
Add mscript GUI. 2017-11-23 00:48:45 +00:00			`<div id="appIcon" onclick="appPage();" class="icon selected">`
			`<div></div>`
Use classes over ids. Only allow promp value to change counter. 2017-11-22 16:25:04 +00:00			`</div>`
Pull mscript features for now 2018-02-02 18:02:15 +00:00			`<!--<div id="mscriptIcon" onclick="mscriptPage();" class="icon">`
Add mscript GUI. 2017-11-23 00:48:45 +00:00			`<div></div>`
Pull mscript features for now 2018-02-02 18:02:15 +00:00			`</div>-->`
Add a state for the mobile app to trigger the camera and set Bolex camera values. 2018-01-09 05:06:17 +00:00			`<div id="cameraIcon" onclick="cameraPage();" class="icon">`
			`<div class="cameraIcon"></div>`
			`</div>`
Update app to not use text blobs 2017-11-21 18:50:01 +00:00			`</footer>`
Establish cordova app in /app directory. Will do development with testflight and using an adhoc profile for beta testers. 2017-11-22 17:25:06 +00:00			`<script src="cordova.js"></script>`
App supports controlling intval with bluetooth 2017-12-13 22:52:25 +00:00			`<script src="static/js/spin.min.js"></script>`
Pull mscript features for now 2018-02-02 18:02:15 +00:00			`<!--<script src="static/js/codemirror.js"></script>-->`
Use a static file server config that will work on web and mobile. 2017-11-22 16:58:02 +00:00			`<script src="static/js/intval.core.js"></script>`
Web and mobile have their own files now. Determine presence of cordova when in mobile app. 2017-11-22 17:10:33 +00:00			`<script src="static/js/intval.web.js"></script>`
			`<script src="static/js/intval.mobile.js"></script>`
Created a PWA frontend. This marks a major milestone in the project, as I will be dropping support of the cordova mobile app and rely entirely on the PWA for bluetooth connectivity going forward. Can't afford an Apple dev license I'll never use and don't want the trouble of maintaining mobile apps on the stores that maybe a handful of people will use. Check intval.sixteenmillimeter.com for this site deployed as an app. 2019-06-19 23:23:20 +00:00			`<script src="static/js/intval.pwa.js"></script>`
Pull mscript features for now 2018-02-02 18:02:15 +00:00			`<!--<script src="static/js/intval.mscript.js"></script>-->`
Establish cordova app in /app directory. Will do development with testflight and using an adhoc profile for beta testers. 2017-11-22 17:25:06 +00:00			`<script src="static/js/index.js"></script>`
App index file placeholder 2017-08-22 02:49:35 +00:00			`</body>`
			`</html>`