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

28
app/www/index.html
View File

@ -9,7 +9,7 @@
<link rel="stylesheet" href="static/css/monokai.css" />--> <link rel="stylesheet" href="static/css/monokai.css" />-->
<link rel="stylesheet" href="static/css/index.css" /> <link rel="stylesheet" href="static/css/index.css" />
</head> </head>
<body> <body class="mobile">
<div id="overlay"> <div id="overlay">
<div id="spinner"></div> <div id="spinner"></div>
</div> </div>
@ -57,18 +57,24 @@
</div> </div>
<div id="settings" class="page"> <div id="settings" class="page">
<h2>SETTINGS</h2> <h2>SETTINGS</h2>
<div class="clearfix">
<div class="setting">
<div class="label">ISO</div> <div class="label">ISO</div>
<input type="number" class="iso" placeholder="100" value="100"> <input type="number" class="iso" placeholder="100" value="100">
</div>
<div class="setting">
<div class="label">F-stop</div> <div class="label">F-stop</div>
<input type="number" class="fstop" placeholder="5.6" value="5.6"> <input type="number" class="fstop" placeholder="5.6" value="5.6">
<div> </div>
<div class="setting">
<div class="label">Rex-o-fader</div> <div class="label">Rex-o-fader</div>
<select id="angle"> <select class="angle">
<option value="133" selected>0 (Normal)</option> <option value="133" selected>0 (Normal)</option>
<option value="66">1 Stop</option> <option value="66">1 Stop</option>
<option value="33">2 Stop</option> <option value="33">2 Stop</option>
</select> </select>
</div> </div>
</div>
<div class="ble"> <div class="ble">
<h2>BLUETOOTH</h2> <h2>BLUETOOTH</h2>
<select id="bluetooth"> <select id="bluetooth">
@ -102,11 +108,25 @@
</div>--> </div>-->
<div id="camera" class="page"> <div id="camera" class="page">
<h2>CAMERA EXPOSURE</h2> <h2>CAMERA EXPOSURE</h2>
<div class="clearfix">
<div class="setting">
<div class="label">ISO</div> <div class="label">ISO</div>
<input type="number" class="iso" placeholder="100" value="100"> <input type="number" class="iso" placeholder="100" value="100">
</div>
<div class="setting">
<div class="label">F-stop</div> <div class="label">F-stop</div>
<input type="number" class="fstop" placeholder="5.6" value="5.6"> <input type="number" class="fstop" placeholder="5.6" value="5.6">
<button onclick="mobile.getCamera();"><i class="cameraIcon"></i></button> </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> </div>
<footer> <footer>
<div id="settingsIcon" onclick="settingsPage();" class="icon"> <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; font-family: 'Arial Neue', Helvetical, Arial, sans-serif;
} }
.clearfix::after {
content: "";
clear: both;
display: table;
}
body.mobile{ body.mobile{
padding-top: 35px; padding-top: 35px;
} }
@ -336,7 +343,6 @@ footer > div.selected{
#wifi.active{ #wifi.active{
display: block; display: block;
} }
.indicator { .indicator {
color: red; color: red;
width: 0; width: 0;
@ -346,3 +352,14 @@ footer > div.selected{
border-bottom: 5px solid black; 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('resume', this.onDeviceResume.bind(this), false);
document.addEventListener('DOMContentLoaded', event => { document.addEventListener('DOMContentLoaded', event => {
if (typeof cordova === 'undefined') { if (typeof cordova === 'undefined') {
init();
web.init(); web.init();
getState(); getState();
} }
@ -34,6 +35,7 @@ var app = {
// Bind any cordova events here. Common events are: // Bind any cordova events here. Common events are:
// 'pause', 'resume', etc. // 'pause', 'resume', etc.
onDeviceReady: function() { onDeviceReady: function() {
init();
mobile.init(); mobile.init();
}, },
onDeviceResume : function () { onDeviceResume : function () {

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

@ -2,6 +2,8 @@
const BOLEX = { const BOLEX = {
angle : 133, angle : 133,
prism : 0.8, prism : 0.8,
iso : 100,
fstop : 5.6,
expected : 630 expected : 630
}; };
const STATE = { 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 () { var appPage = function () {
unsetPages(); unsetPages();
document.getElementById('app').classList.add('selected'); document.getElementById('app').classList.add('selected');
@ -263,3 +282,15 @@ var spinnerHide = function () {
var isNumeric = function (n) { var isNumeric = function (n) {
return !isNaN(parseFloat(n)) && isFinite(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);
});
};