Add a state for the mobile app to trigger the camera and set Bolex camera values.
This commit is contained in:
parent
e55154e46e
commit
62769db3bf
|
@ -57,6 +57,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="settings" class="page">
|
<div id="settings" class="page">
|
||||||
<h2>SETTINGS</h2>
|
<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>
|
||||||
<div class="label">Rex-o-fader</div>
|
<div class="label">Rex-o-fader</div>
|
||||||
<select id="angle">
|
<select id="angle">
|
||||||
|
@ -96,6 +100,14 @@
|
||||||
<button id="compile">COMPILE</button>
|
<button id="compile">COMPILE</button>
|
||||||
<button id="mscript_seq">START SEQUENCE</button>
|
<button id="mscript_seq">START SEQUENCE</button>
|
||||||
</div>
|
</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>
|
||||||
<footer>
|
<footer>
|
||||||
<div id="settingsIcon" onclick="settingsPage();" class="icon">
|
<div id="settingsIcon" onclick="settingsPage();" class="icon">
|
||||||
<div> </div>
|
<div> </div>
|
||||||
|
@ -106,6 +118,9 @@
|
||||||
<div id="mscriptIcon" onclick="mscriptPage();" class="icon">
|
<div id="mscriptIcon" onclick="mscriptPage();" class="icon">
|
||||||
<div></div>
|
<div></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="cameraIcon" onclick="cameraPage();" class="icon">
|
||||||
|
<div class="cameraIcon"></div>
|
||||||
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
<script src="cordova.js"></script>
|
<script src="cordova.js"></script>
|
||||||
<script src="static/js/spin.min.js"></script>
|
<script src="static/js/spin.min.js"></script>
|
||||||
|
|
|
@ -217,6 +217,24 @@ button.focus{
|
||||||
#appIcon > div{
|
#appIcon > div{
|
||||||
background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2MCA2MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiPgo8Zz4KCTxwYXRoIGQ9Ik00NS41NjMsMjkuMTc0bC0yMi0xNWMtMC4zMDctMC4yMDgtMC43MDMtMC4yMzEtMS4wMzEtMC4wNThDMjIuMjA1LDE0LjI4OSwyMiwxNC42MjksMjIsMTV2MzAgICBjMCwwLjM3MSwwLjIwNSwwLjcxMSwwLjUzMywwLjg4NEMyMi42NzksNDUuOTYyLDIyLjg0LDQ2LDIzLDQ2YzAuMTk3LDAsMC4zOTQtMC4wNTksMC41NjMtMC4xNzRsMjItMTUgICBDNDUuODM2LDMwLjY0LDQ2LDMwLjMzMSw0NiwzMFM0NS44MzYsMjkuMzYsNDUuNTYzLDI5LjE3NHogTTI0LDQzLjEwN1YxNi44OTNMNDMuMjI1LDMwTDI0LDQzLjEwN3oiIGZpbGw9IiNGRkZGRkYiLz4KCTxwYXRoIGQ9Ik0zMCwwQzEzLjQ1OCwwLDAsMTMuNDU4LDAsMzBzMTMuNDU4LDMwLDMwLDMwczMwLTEzLjQ1OCwzMC0zMFM0Ni41NDIsMCwzMCwweiBNMzAsNThDMTQuNTYxLDU4LDIsNDUuNDM5LDIsMzAgICBTMTQuNTYxLDIsMzAsMnMyOCwxMi41NjEsMjgsMjhTNDUuNDM5LDU4LDMwLDU4eiIgZmlsbD0iI0ZGRkZGRiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
|
background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2MCA2MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSIzMnB4IiBoZWlnaHQ9IjMycHgiPgo8Zz4KCTxwYXRoIGQ9Ik00NS41NjMsMjkuMTc0bC0yMi0xNWMtMC4zMDctMC4yMDgtMC43MDMtMC4yMzEtMS4wMzEtMC4wNThDMjIuMjA1LDE0LjI4OSwyMiwxNC42MjksMjIsMTV2MzAgICBjMCwwLjM3MSwwLjIwNSwwLjcxMSwwLjUzMywwLjg4NEMyMi42NzksNDUuOTYyLDIyLjg0LDQ2LDIzLDQ2YzAuMTk3LDAsMC4zOTQtMC4wNTksMC41NjMtMC4xNzRsMjItMTUgICBDNDUuODM2LDMwLjY0LDQ2LDMwLjMzMSw0NiwzMFM0NS44MzYsMjkuMzYsNDUuNTYzLDI5LjE3NHogTTI0LDQzLjEwN1YxNi44OTNMNDMuMjI1LDMwTDI0LDQzLjEwN3oiIGZpbGw9IiNGRkZGRkYiLz4KCTxwYXRoIGQ9Ik0zMCwwQzEzLjQ1OCwwLDAsMTMuNDU4LDAsMzBzMTMuNDU4LDMwLDMwLDMwczMwLTEzLjQ1OCwzMC0zMFM0Ni41NDIsMCwzMCwweiBNMzAsNThDMTQuNTYxLDU4LDIsNDUuNDM5LDIsMzAgICBTMTQuNTYxLDIsMzAsMnMyOCwxMi41NjEsMjgsMjhTNDUuNDM5LDU4LDMwLDU4eiIgZmlsbD0iI0ZGRkZGRiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
|
||||||
}
|
}
|
||||||
|
.cameraIcon{
|
||||||
|
background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwMCAxMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4Ij4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNTAsNDBjLTguMjg1LDAtMTUsNi43MTgtMTUsMTVjMCw4LjI4NSw2LjcxNSwxNSwxNSwxNWM4LjI4MywwLDE1LTYuNzE1LDE1LTE1ICAgIEM2NSw0Ni43MTgsNTguMjgzLDQwLDUwLDQweiBNOTAsMjVINzhjLTEuNjUsMC0zLjQyOC0xLjI4LTMuOTQ5LTIuODQ2bC0zLjEwMi05LjMwOUM3MC40MjYsMTEuMjgsNjguNjUsMTAsNjcsMTBIMzMgICAgYy0xLjY1LDAtMy40MjgsMS4yOC0zLjk0OSwyLjg0NmwtMy4xMDIsOS4zMDlDMjUuNDI2LDIzLjcyLDIzLjY1LDI1LDIyLDI1SDEwQzQuNSwyNSwwLDI5LjUsMCwzNXY0NWMwLDUuNSw0LjUsMTAsMTAsMTBoODAgICAgYzUuNSwwLDEwLTQuNSwxMC0xMFYzNUMxMDAsMjkuNSw5NS41LDI1LDkwLDI1eiBNNTAsODBjLTEzLjgwNywwLTI1LTExLjE5My0yNS0yNWMwLTEzLjgwNiwxMS4xOTMtMjUsMjUtMjUgICAgYzEzLjgwNSwwLDI1LDExLjE5NCwyNSwyNUM3NSw2OC44MDcsNjMuODA1LDgwLDUwLDgweiBNODYuNSw0MS45OTNjLTEuOTMyLDAtMy41LTEuNTY2LTMuNS0zLjVjMC0xLjkzMiwxLjU2OC0zLjUsMy41LTMuNSAgICBjMS45MzQsMCwzLjUsMS41NjgsMy41LDMuNUM5MCw0MC40MjcsODguNDMzLDQxLjk5Myw4Ni41LDQxLjk5M3oiIGZpbGw9IiNGRkZGRkYiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K) no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
#cameraIcon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.mobile #cameraIcon{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
button i {
|
||||||
|
display: block;
|
||||||
|
width: 33px;
|
||||||
|
height: 33px;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
footer{
|
footer{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -234,6 +252,10 @@ footer .icon {
|
||||||
border-right: 1px solid rgba(255, 255, 255, 0.3);
|
border-right: 1px solid rgba(255, 255, 255, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body.mobile footer .icon{
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
footer .icon:last-child{
|
footer .icon:last-child{
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
@ -310,3 +332,13 @@ footer > div.selected{
|
||||||
#password.active,#ip.active,#wifi.active{
|
#password.active,#ip.active,#wifi.active{
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.indicator {
|
||||||
|
color: red;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 5px solid transparent;
|
||||||
|
border-right: 5px solid transparent;
|
||||||
|
|
||||||
|
border-bottom: 5px solid black;
|
||||||
|
}
|
|
@ -217,6 +217,11 @@ var mscriptPage = function () {
|
||||||
document.getElementById('mscriptIcon').classList.add('selected');
|
document.getElementById('mscriptIcon').classList.add('selected');
|
||||||
editor.cm.refresh();
|
editor.cm.refresh();
|
||||||
};
|
};
|
||||||
|
var cameraPage = function () {
|
||||||
|
unsetPages();
|
||||||
|
document.getElementById('camera').classList.add('selected');
|
||||||
|
document.getElementById('cameraIcon').classList.add('selected');
|
||||||
|
};
|
||||||
var spinnerInit = function () {
|
var spinnerInit = function () {
|
||||||
const spinnerOpts = {
|
const spinnerOpts = {
|
||||||
lines: 13 // The number of lines to draw
|
lines: 13 // The number of lines to draw
|
||||||
|
|
|
@ -128,6 +128,7 @@ mobile.init = function () {
|
||||||
}
|
}
|
||||||
spinnerInit();
|
spinnerInit();
|
||||||
mobile.ble.scan();
|
mobile.ble.scan();
|
||||||
|
mobile.cameraValues()
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -408,6 +409,76 @@ mobile.setWifiSuccess = function () {
|
||||||
setTimeout(mobile.getWifi, 100);
|
setTimeout(mobile.getWifi, 100);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
mobile.getCamera = function () {
|
||||||
|
var opts = {
|
||||||
|
quality: 30,
|
||||||
|
sourceType: Camera.PictureSourceType.CAMERA,
|
||||||
|
destinationType: Camera.DestinationType.FILE_URI
|
||||||
|
};
|
||||||
|
navigator.camera.getPicture(mobile.cameraSuccess, mobile.cameraError, opts);
|
||||||
|
};
|
||||||
|
mobile.cameraSuccess = function (result) {
|
||||||
|
var thisResult = JSON.parse(result);
|
||||||
|
var metadata = JSON.parse(thisResult.json_metadata);
|
||||||
|
|
||||||
|
mobile.cameraExposure(fstop, metadata);
|
||||||
|
}
|
||||||
|
mobile.cameraError = function (err) {
|
||||||
|
console.error(err);
|
||||||
|
alert(err);
|
||||||
|
};
|
||||||
|
|
||||||
|
mobile.cameraExposure = function (exif) {
|
||||||
|
var fstop = document.querySelector('.fstop').value || 5.6;
|
||||||
|
var iso = document.querySelector('.iso').value || 100;
|
||||||
|
/*
|
||||||
|
ApertureValue: 1.6959938131099002
|
||||||
|
BrightnessValue: -0.3966568568788107
|
||||||
|
ColorSpace: 65535
|
||||||
|
DateTimeDigitized: "2018:01:08 23:06:13"
|
||||||
|
DateTimeOriginal: "2018:01:08 23:06:13"
|
||||||
|
ExposureBiasValue: 0
|
||||||
|
ExposureMode: 0
|
||||||
|
ExposureProgram: 2
|
||||||
|
ExposureTime: 0.2
|
||||||
|
FNumber: 1.8
|
||||||
|
Flash: 24
|
||||||
|
FocalLenIn35mmFilm: 28
|
||||||
|
FocalLength: 3.99
|
||||||
|
ISOSpeedRatings: [100] (1)
|
||||||
|
LensMake: "Apple"
|
||||||
|
LensModel: "iPhone 8 back camera 3.99mm f/1.8"
|
||||||
|
LensSpecification: [3.99, 3.99, 1.8, 1.8] (4)
|
||||||
|
MeteringMode: 5
|
||||||
|
PixelXDimension: 4032
|
||||||
|
PixelYDimension: 3024
|
||||||
|
SceneType: 1
|
||||||
|
SensingMethod: 2
|
||||||
|
ShutterSpeedValue: 2.38401125849867
|
||||||
|
SubjectArea: [2015, 1511, 2217, 1330] (4)
|
||||||
|
SubsecTimeDigitized: "567"
|
||||||
|
SubsecTimeOriginal: "567"
|
||||||
|
WhiteBalance: 0
|
||||||
|
*/
|
||||||
|
exif.AperatureValue || exif.FNumber
|
||||||
|
exif.ExposureTime
|
||||||
|
exif.ISOSpeedRatings
|
||||||
|
};
|
||||||
|
mobile.cameraValues = function () {
|
||||||
|
document.querySelectorAll('.iso').forEach(input => {
|
||||||
|
input.onchange = function () {
|
||||||
|
var val = this.value;
|
||||||
|
document.querySelectorAll('.iso').forEach(e => {
|
||||||
|
e.value = val;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Mobile helper functions
|
||||||
|
*/
|
||||||
|
|
||||||
function bytesToString (buffer) {
|
function bytesToString (buffer) {
|
||||||
return String.fromCharCode.apply(null, new Uint8Array(buffer));
|
return String.fromCharCode.apply(null, new Uint8Array(buffer));
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue