From 4760c1e49194d11e407734932c89623d03f9eab9 Mon Sep 17 00:00:00 2001
From: mmcwilliams <hi@mmcwilliams.com>
Date: Fri, 2 Feb 2018 15:36:28 -0500
Subject: [PATCH] Sync camera settings between multiple inputs and write to
 settings

---
 app/www/index.html               | 54 ++++++++++++++++++++++----------
 app/www/static/css/index.css     | 19 ++++++++++-
 app/www/static/js/index.js       |  2 ++
 app/www/static/js/intval.core.js | 31 ++++++++++++++++++
 4 files changed, 88 insertions(+), 18 deletions(-)
diff --git a/app/www/index.html b/app/www/index.html
index 500d7ca..6e8e2eb 100644
--- a/app/www/index.html
+++ b/app/www/index.html
@@ -9,7 +9,7 @@
 	<link rel="stylesheet" href="static/css/monokai.css" />-->
 	<link rel="stylesheet" href="static/css/index.css" />
 </head>
-<body>
+<body class="mobile">
 <div id="overlay">
 	<div id="spinner"></div>
 </div>
@@ -57,17 +57,23 @@
 </div>
 <div id="settings" class="page">
 	<h2>SETTINGS</h2>
-	<div class="label">ISO</div>
-	<input type="number" class="iso" placeholder="100" value="100">
-	<div class="label">F-stop</div>
-	<input type="number" class="fstop" placeholder="5.6" value="5.6">
-	<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 class="clearfix">
+		<div class="setting">
+			<div class="label">ISO</div>
+			<input type="number" class="iso" placeholder="100" value="100">
+		</div>
+		<div class="setting">
+			<div class="label">F-stop</div>
+			<input type="number" class="fstop" placeholder="5.6" value="5.6">
+		</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>
 	<div class="ble">
 		<h2>BLUETOOTH</h2>
@@ -102,11 +108,25 @@
 </div>-->
 <div id="camera" class="page">
 	<h2>CAMERA EXPOSURE</h2>
-	<div class="label">ISO</div>
-	<input type="number" class="iso" placeholder="100" value="100">
-	<div class="label">F-stop</div>
-	<input type="number" class="fstop" placeholder="5.6" value="5.6">
-	<button onclick="mobile.getCamera();"><i class="cameraIcon"></i></button>
+	<div class="clearfix">
+		<div class="setting">
+			<div class="label">ISO</div>
+			<input type="number" class="iso" placeholder="100" value="100">
+		</div>
+		<div class="setting">
+			<div class="label">F-stop</div>
+			<input type="number" class="fstop" placeholder="5.6" value="5.6">
+		</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="camera" onclick="mobile.getCamera();"><i class="cameraIcon"></i></button>
 </div>
 <footer>
 	<div id="settingsIcon" onclick="settingsPage();" class="icon">
diff --git a/app/www/static/css/index.css b/app/www/static/css/index.css
index 8e3ab64..7f2977e 100644
--- a/app/www/static/css/index.css
+++ b/app/www/static/css/index.css
@@ -36,6 +36,13 @@ html,body,button,h2,label,input{
     font-family: 'Arial Neue', Helvetical, Arial, sans-serif;
 
 }
+
+.clearfix::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+
 body.mobile{
     padding-top: 35px;
 }
@@ -336,7 +343,6 @@ footer > div.selected{
 #wifi.active{
     display: block;
 }
-
 .indicator {
   color: red;
   width: 0; 
@@ -345,4 +351,15 @@ footer > div.selected{
   border-right: 5px solid transparent;
   
   border-bottom: 5px solid black;
+}
+.setting{
+    width: 50%;
+    float: left;
+}
+.setting input,
+.setting select{
+    width: 90%;
+}
+#camera{
+    margin-top: 20px;
 }
\ No newline at end of file
diff --git a/app/www/static/js/index.js b/app/www/static/js/index.js
index 1c8de02..015c8be 100644
--- a/app/www/static/js/index.js
+++ b/app/www/static/js/index.js
@@ -23,6 +23,7 @@ var app = {
         document.addEventListener('resume', this.onDeviceResume.bind(this), false);
         document.addEventListener('DOMContentLoaded', event => {
             if (typeof cordova === 'undefined') {
+                init();
                 web.init();
                 getState();
             }
@@ -34,6 +35,7 @@ var app = {
     // Bind any cordova events here. Common events are:
     // 'pause', 'resume', etc.
     onDeviceReady: function() {
+        init();
         mobile.init();
     },
     onDeviceResume : function () {
diff --git a/app/www/static/js/intval.core.js b/app/www/static/js/intval.core.js
index fe3084f..3556531 100644
--- a/app/www/static/js/intval.core.js
+++ b/app/www/static/js/intval.core.js
@@ -2,6 +2,8 @@
 const BOLEX = {
 	angle : 133,
 	prism : 0.8,
+	iso : 100,
+	fstop : 5.6,
 	expected : 630
 };
 const STATE = {
@@ -201,6 +203,23 @@ var seqState = function (state) {
 	}
 };
 
+var syncInputs = function (selector, cb) {
+	const elems = document.querySelectorAll(selector);
+	[].forEach.call(elems, function (input) {
+		input.oninput = function () {
+			setInputs(selector, this.value)
+			cb(this.value)
+		}
+	});
+};
+
+var setInputs = function (selector, value) {
+	const elems = document.querySelectorAll(selector);
+	[].forEach.call(elems, function (input) {
+		input.value = value;
+	});
+};
+
 var appPage = function () {
 	unsetPages();
 	document.getElementById('app').classList.add('selected');
@@ -262,4 +281,16 @@ var spinnerHide = function () {
 }
 var isNumeric = function (n) {
 		return !isNaN(parseFloat(n)) && isFinite(n);
+};
+
+var init = function () {
+	syncInputs('.angle', (val) => {
+		BOLEX.angle = parseInt(val);
+	});
+	syncInputs('.iso', (val) => {
+		BOLEX.iso = parseInt(val);
+	});
+	syncInputs('.fstop', (val) => {
+		BOLEX.fstop = parseFloat(val);
+	});
 };
\ No newline at end of file
