16mm
/
intval3
1
0
Fork 0
Code Issues 1 Pull Requests 9 Projects Releases Wiki Activity

Sync camera settings between multiple inputs and write to settings

This commit is contained in:
mmcwilliams 2018-02-02 15:36:28 -05:00
parent 286c0eec4c
commit 4760c1e491
4 changed files with 88 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
app/www/index.html
View File

@ -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">

19
app/www/static/css/index.css
View File

@ -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;
}

2
app/www/static/js/index.js
View File

@ -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 () {

31
app/www/static/js/intval.core.js
View File

@ -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);
});
};