Sync camera settings between multiple inputs and write to settings
This commit is contained in:
parent
286c0eec4c
commit
4760c1e491
|
@ -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">
|
||||
|
|
|
@ -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;
|
||||
|
@ -346,3 +352,14 @@ footer > div.selected{
|
|||
|
||||
border-bottom: 5px solid black;
|
||||
}
|
||||
.setting{
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
.setting input,
|
||||
.setting select{
|
||||
width: 90%;
|
||||
}
|
||||
#camera{
|
||||
margin-top: 20px;
|
||||
}
|
|
@ -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 () {
|
||||
|
|
|
@ -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');
|
||||
|
@ -263,3 +282,15 @@ 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);
|
||||
});
|
||||
};
|
Loading…
Reference in New Issue