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

Add a state for the mobile app to trigger the camera and set Bolex camera values.

This commit is contained in:
mmcwilliams 2018-01-09 00:06:17 -05:00
parent e55154e46e
commit 62769db3bf
4 changed files with 123 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/www/index.html
View File

@ -57,6 +57,10 @@
</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">
@ -96,6 +100,14 @@
<button id="compile">COMPILE</button>
<button id="mscript_seq">START SEQUENCE</button>
</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>
<div id="settingsIcon" onclick="settingsPage();" class="icon">
<div> </div>
@ -106,6 +118,9 @@
<div id="mscriptIcon" onclick="mscriptPage();" class="icon">
<div></div>
</div>
<div id="cameraIcon" onclick="cameraPage();" class="icon">
<div class="cameraIcon"></div>
</div>
</footer>
<script src="cordova.js"></script>
<script src="static/js/spin.min.js"></script>

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

@ -217,6 +217,24 @@ button.focus{
#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;
}
.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{
width: 100%;
@ -234,6 +252,10 @@ footer .icon {
border-right: 1px solid rgba(255, 255, 255, 0.3);
}
body.mobile footer .icon{
width: 25%;
}
footer .icon:last-child{
border-right: 0;
}
@ -309,4 +331,14 @@ footer > div.selected{
}
#password.active,#ip.active,#wifi.active{
display: block;
}
.indicator {
color: red;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}

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

@ -217,6 +217,11 @@ var mscriptPage = function () {
document.getElementById('mscriptIcon').classList.add('selected');
editor.cm.refresh();
};
var cameraPage = function () {
unsetPages();
document.getElementById('camera').classList.add('selected');
document.getElementById('cameraIcon').classList.add('selected');
};
var spinnerInit = function () {
const spinnerOpts = {
lines: 13 // The number of lines to draw

71
app/www/static/js/intval.mobile.js
View File

@ -128,6 +128,7 @@ mobile.init = function () {
}
spinnerInit();
mobile.ble.scan();
mobile.cameraValues()
};
@ -408,6 +409,76 @@ mobile.setWifiSuccess = function () {
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) {
return String.fromCharCode.apply(null, new Uint8Array(buffer));
};