intval3/app/www/static/js/intval.pwa.js

963 lines
21 KiB
JavaScript

/* jshint esversion:6, strict:true, browser:true*/
/* global console, alert */
'use strict';
var pwa = {};
pwa.wble = {
BLENO_DEVICE_NAME : 'intval3',
DEVICE_ID : 'intval3',
SERVICE_ID : '149582bd-d49d-4b5c-acd1-1ae503d09e7a',
CHAR_ID : '47bf69fb-f62f-4ef8-9be8-eb727a54fae4', //general data
WIFI_ID : '3fe7d9cf-7bd2-4ff0-97c5-ebe87288c2cc', //wifi only
devices : [],
device : {},
peripheral : {},
service : {},
characteristics : {},
descriptors : {},
connected : false,
active : false
};
pwa.wifi = {
current : 'null',
available : [],
ip : null
};
async function delay (ms) {
return new Promise((resolve, reject) => {
return setTimeout(resolve, ms);
})
}
pwa.wble.scan = async function () {
let device;
UI.spinner.show('Scanning for INTVAL3...');
UI.overlay.show();
document.getElementById('tap').style.display = 'none';
pwa.wble.devices = [];
try {
device = await navigator.bluetooth.requestDevice({
filters: [{
name : pwa.wble.DEVICE_ID
}],
optionalServices: [ pwa.wble.SERVICE_ID ]
});
} catch (err) {
console.error(err);
pwa.wble.onError(err.message);
}
if (device) {
pwa.wble.onDiscover(device);
}
await delay(5000);
UI.spinner.hide();
UI.overlay.hide();
if (!pwa.wble.connected) {
pwa.alert('No devices found.')
settingsPage();
}
};
pwa.wble.onDiscover = function (device) {
if (device && device.name && device.name.indexOf('intval3') !== -1) {
console.log('BLE - Discovered INTVAL3');
//console.dir(device);
pwa.wble.devices.push(device);
if (!pwa.wble.connected) {
pwa.wble.connect(device);
}
} else {
//console.log(`BLE - Discovered Other ${device.id}`);
}
};
pwa.wble.connect = async function (device) {
console.log(`BLE - Connecting to ${device.id}`);
let peripheral;
let service;
try {
peripheral = await device.gatt.connect();
} catch (err) {
pwa.wble.onError(err);
}
try {
service = await peripheral.getPrimaryService(pwa.wble.SERVICE_ID);
} catch (err) {
console.error(err);
pwa.wble.onError(err.message);
return false;
}
pwa.wble.onConnect(peripheral, device, service);
};
pwa.wble.onConnect = function (peripheral, device, service) {
const elem = document.getElementById('bluetooth');
const option = document.createElement('option');
const disconnect = document.getElementById('disconnect');
const scan = document.getElementById('scan');
UI.spinner.hide();
UI.overlay.hide();
console.log(`BLE - Connected to ${device.id}`);
//console.dir(peripheral);
//console.dir(device);
pwa.wble.peripheral = peripheral;
pwa.wble.device = device;
pwa.wble.service = service;
pwa.wble.connected = true;
elem.innerHTML = '';
option.text = device.name;
option.value = device.id;
elem.add(option);
disconnect.classList.add('active');
scan.classList.remove('active');
getState();
getWifi();
};
pwa.wble.disconnect = function () {
const elem = document.getElementById('bluetooth');
const option = document.createElement('option');
const disconnect = document.getElementById('disconnect');
const scan = document.getElementById('scan');
let device;
if (!pwa.wble.connected) {
console.warn('Not connected to any device');
return false;
}
device = pwa.wble.device;
console.log(`BLE - Disconnecting from ${device.id}`);
//ble.disconnect(device.id, pwa.wble.onDisconnect, pwa.wble.onDisconnect);
elem.innerHTML = '';
option.text = 'N/A';
elem.add(option);
disconnect.classList.remove('active');
scan.classList.add('active');
UI.spinner.hide();
UI.overlay.hide();
};
pwa.wble.onDisconnect = function (res) {
console.log(`BLE - Disconnected from ${res}`);
pwa.wble.connected = false;
pwa.wble.device = {};
};
pwa.wble.onError = function (err) {
if (err.errorMessage && err.errorMessage === 'Peripheral Disconnected') {
console.log('Device disconnected');
pwa.wble.disconnect()
} else {
pwa.alert(JSON.stringify(err));
}
};
pwa.wble.read = async function (characteristicId) {
const decoder = new TextDecoder('utf-8');
let characteristic;
let value;
let json;
let obj;
if (typeof pwa.wble.characteristics[characteristicId] === 'undefined') {
try {
characteristic = await pwa.wble.service.getCharacteristic(characteristicId);
pwa.wble.characteristics[characteristicId] = characteristic;
} catch (err) {
console.error(err);
pwa.wble.onError(err.message);
return false;
}
} else {
characteristic = pwa.wble.characteristics[characteristicId]
}
try {
value = await characteristic.readValue();
} catch (err) {
console.error(err);
pwa.wble.onError(err.message);
}
json = decoder.decode(value);
try {
obj = JSON.parse(json);
} catch (err) {
console.warn(json);
throw err;
}
return obj;
}
pwa.wble.write = async function ( characteristicId, json) {
const encoder = new TextEncoder('utf-8');
let characteristic;
let value;
if (typeof pwa.wble.characteristics[characteristicId] === 'undefined') {
try {
characteristic = await pwa.wble.service.getCharacteristic(characteristicId);
pwa.wble.charactersitics[characteristicId] = characteristic;
} catch (err) {
console.error(err);
pwa.wble.onError(err.message);
return false;
}
} else {
characteristic = pwa.wble.characteristics[characteristicId];
}
value = JSON.stringify(json);
encoder.encode(value);
try {
await characteristic.writeValue(encoder.encode(value))
} catch (err) {
console.error(err);
pwa.wble.onError(err.message);
return false;
}
return true;
}
pwa.init = function () {
const bleInputs = document.querySelectorAll('.ble');
const bolIso = document.querySelector('.iso');
const bolF = document.querySelector('.fstop');
const tap = document.getElementById('tap');
//document.querySelector('body').classList.add('mobile');
window.frame = pwa.frame;
window.getState = pwa.getState;
window.setDir = pwa.setDir;
window.setExposure = pwa.setExposure;
window.setDelay = pwa.setDelay;
window.setCounter = pwa.setCounter;
window.sequence = pwa.sequence;
window.reset = pwa.reset;
window.restart = pwa.restart;
window.update = pwa.update;
window.getWifi = pwa.getWifi;
window.setWifi = pwa.setWifi;
window.editWifi = pwa.editWifi;
window.advanced = pwa.advanced;
//show ble-specific fields in settings
for (let i of bleInputs) {
i.classList.add('active');
}
UI.spinner.init();
UI.overlay.show();
tap.onclick = pwa.wble.scan;
tap.style.display = 'block';
//pwa.cameraValues();
};
pwa.pairInteraction = function () {
pwa.wble.scan();
}
pwa.getState = async function () {
let state;
if (!pwa.wble.connected) {
return false
}
try {
state = await pwa.wble.read(pwa.wble.CHAR_ID);
} catch (err) {
console.error(err);
pwa.wble.onError(err.message);
return false;
}
setState(state);
};
pwa.frame = async function () {
const opts = {
type : 'frame'
};
if (!pwa.wble.connected) {
return pwa.alert('Not connected to an INTVAL3 device.');
}
if (pwa.wble.active) {
return false;
}
document.getElementById('frame').classList.add('focus');
pwa.wble.active = true;
try {
await pwa.wble.write(pwa.wble.CHAR_ID, opts);
} catch (err) {
console.error(err);
pwa.wble.onError(err.message);
return false;``
}
pwa.frameSuccess();
};
pwa.frameSuccess = function () {
if (STATE.exposure < 5000) {
console.log('Frame finished, getting state.');
pwa.wble.active = false;
document.getElementById('frame').classList.remove('focus');
getState();
} else {
setTimeout(() => {
console.log('Frame finished, getting state.');
pwa.wble.active = false;
document.getElementById('frame').classList.remove('focus');
getState();
}, STATE.exposure + 500)
}
}
pwa.setDir = async function () {
const opts = {
type : 'dir',
dir : !document.getElementById('dir').checked
};
try {
await pwa.wble.write(pwa.wble.CHAR_ID, opts);
} catch (err) {
console.error(err);
pwa.wble.onError(err.message);
return false;
}
pwa.dirSuccess();
};
pwa.dirSuccess = function () {
console.log('Set direction');
getState();
setTimeout(() => {
setDirLabel(STATE.dir);
}, 50);
};
pwa.setExposure = async function () {
const opts = {
type : 'exposure'
};
let exposure = document.getElementById('exposure').value;
let scaledExposure;
if (exposure === '' || exposure === null) {
exposure = 0;
}
scaledExposure = scaleTime(exposure, STATE.scale);
opts.exposure = scaledExposure;
try {
await pwa.wble.write(pwa.wble.CHAR_ID, opts);
} catch (err) {
console.error(err);
pwa.wble.onError(err.message);
return false;
}
pwa.exposureSuccess();
};
pwa.exposureSuccess = function () {
console.log('Set exposure');
getState();
};
pwa.setDelay = async function () {
const delay = document.getElementById('delay').value;
const scaledDelay = scaleTime(delay, STATE.delayScale);
const opts = {
type : 'delay',
delay : scaledDelay
};
try {
await pwa.wble.write(pwa.wble.CHAR_ID, opts);
} catch (err) {
console.error(err);
pwa.wble.onError(err.message);
return false;
}
pwa.delaySuccess();
}
pwa.delaySuccess = function () {
console.log('Set delay');
getState();
};
pwa.setCounter = async function () {
const opts = {
type : 'counter',
counter : null
};
const counter = document.getElementById('counter').value;
const change = prompt(`Change counter value?`, counter);
if (change === null || !isNumeric(change)) return false;
if (change === counter) return true;
opts.counter = change;
try {
await pwa.wble.write(pwa.wble.CHAR_ID, opts);
} catch (err) {
console.error(err);
pwa.wble.onError(err.message);
return false;
}
pwa.counterSuccess();
};
pwa.counterSuccess = function () {
console.log('Set counter');
getState();
};
pwa.sequence = async function () {
const opts = {
type : 'sequence'
};
const elem = document.getElementById('seq');
if (!pwa.wble.connected) {
return pwa.alert('Not connected to an INTVAL3 device.');
}
try {
await pwa.wble.write(pwa.wble.CHAR_ID, opts);
} catch (err) {
console.error(err);
pwa.wble.onError(err.message);
return false;
}
pwa.sequenceSuccess();
if (!elem.classList.contains('focus')) {
elem.classList.add('focus');
}
pwa.wble.active = true;
};
pwa.sequenceSuccess = function () {
console.log('Sequence state changed');
getState();
setTimeout(() => {
if (STATE.sequence) {
pwa.wble.active = true;
seqState(true);
} else {
pwa.wble.active = false;
seqState(false);
}
}, 20);
};
pwa.advanced = async function () {
const len = parseInt(document.getElementById('len').value);
const multiple = parseInt(document.getElementById('multiple').value);
const opts = {
type : 'sequence',
len,
multiple
};
if (!opts.len) {
return pwa.alert('You must set a total frame count.');
}
if (!opts.multiple) {
return pwa.alert('You must set a frame multiple value.');
}
const elem = document.getElementById('run');
if (!pwa.wble.connected) {
return pwa.alert('Not connected to an INTVAL3 device.');
}
try {
await pwa.wble.write(pwa.wble.CHAR_ID, opts);
} catch (err) {
console.error(err);
pwa.wble.onError(err.message);
return false;
}
pwa.advancedSuccess();
if (!elem.classList.contains('focus')) {
elem.classList.add('focus');
}
pwa.wble.active = true;
};
pwa.advancedSuccess = function () {
console.log('Sequence state changed');
if (STATE.sequence === false) {
seqProgress();
}
getState();
setTimeout(() => {
console.log('Sequence complete');
getState();
}, STATE.advanced + 1000);
};
//retreive object with list of available Wifi APs,
//and state of current connection, if available
pwa.getWifi = async function () {
let wifiRes;
UI.spinner.show('Refreshing WIFI...');
UI.overlay.show();
try {
wifiRes = await pwa.wble.read(pwa.wble.WIFI_ID);
} catch (err) {
console.error(err);
pwa.wble.onError(err.message);
return false
}
pwa.getWifiSuccess(wifiRes);
};
pwa.getWifiSuccess = function (res) {
const elem = document.getElementById('available');
const wifi = document.getElementById('wifi');
const password = document.getElementById('password');
const ip = document.getElementById('ip');
let option = document.createElement('option');
UI.spinner.hide();
UI.overlay.hide();
elem.innerHTML = '';
console.dir(res);
if (!res.available || res.available.length === 0) {
if (elem.classList.contains('active')) {
elem.classList.remove('active');
}
option.text = 'N/A'
elem.add(option);
elem.value = '';
} else {
for (let ap of res.available) {
option = document.createElement('option');
option.text = ap;
option.value = ap;
elem.add(option);
}
if (res.current && res.available.indexOf(res.current) !== -1) {
elem.value = res.current
if (!elem.classList.contains('active')) {
elem.classList.add('active');
}
if (wifi.classList.contains('active')) {
wifi.classList.remove('active');
}
if (password.classList.contains('active')) {
password.classList.remove('active');
}
} else {
if (!wifi.classList.contains('active')) {
wifi.classList.add('active');
}
if (!password.classList.contains('active')) {
password.classList.add('active');
}
}
}
if (typeof res.ip !== 'undefined' && res.ip != null ) {
ip.innerHTML = `Local IP: <span onclick="window.open('http://${res.ip}', '_system', 'location=yes');">${res.ip}</span>`
if (!ip.classList.contains('active')) {
ip.classList.add('active');
}
} else {
ip.innerHTML = 'Local IP: null'
if (ip.classList.contains('active')) {
ip.classList.remove('active');
}
}
pwa.wifi.current = res.current;
pwa.wifi.available = res.available;
pwa.wifi.ip = res.ip;
};
pwa.editWifi = function () {
const available = document.getElementById('available');
const wifi = document.getElementById('wifi');
const password = document.getElementById('password');
if (!wifi.classList.contains('active')) {
wifi.classList.add('active');
}
if (!password.classList.contains('active')) {
password.classList.add('active');
}
password.focus();
if (available.value !== pwa.wifi.current && available.classList.contains('active')) {
available.classList.remove('active');
}
};
pwa.setWifi = async function () {
const ssid = document.getElementById('available').value;
const pwd = document.getElementById('password').value;
const opts = {
ssid : ssid,
pwd : pwd
};
UI.spinner.show('Setting WIFI...');
UI.overlay.show();
if (ssid === '' || ssid === null || ssid === undefined) {
return pwa.alert('Cannot set wireless credentials with a blank SSID');
}
if (pwd === '' || pwd === null || pwd === undefined) {
return pwa.alert('Cannot set wireless credentials with a blank passphrase');
}
if (pwd.length < 8 || pwd.length > 63) {
return pwa.alert('Passphrase must be 8..63 characters');
}
try {
await pwa.wble.write(pwa.wble.WIFI_ID, opts);
} catch (err) {
console.error(err);
pwa.wble.onError(err.message);
return false;
}
pwa.setWifiSuccess();
};
pwa.setWifiSuccess = function () {
UI.spinner.hide();
UI.overlay.hide();
console.log('Set new wifi credentials');
setTimeout(pwa.getWifi, 100);
};
/*
pwa.exif = {}
pwa.getCamera = function () {
const opts = {
quality: 30,
sourceType: Camera.PictureSourceType.CAMERA,
destinationType: Camera.DestinationType.FILE_URI
};
navigator.camera.getPicture(pwa.cameraSuccess, pwa.cameraError, opts);
};
pwa.cameraSuccess = function (result) {
const thisResult = JSON.parse(result);
const metadata = JSON.parse(thisResult.json_metadata);
pwa.cameraExposure(metadata.Exif);
};
pwa.cameraError = function (err) {
console.error(err);
pwa.alert(JSON.stringify(err));
};
pwa.cameraExposure = function (exif) {
const cam_exp = document.getElementById('cam_exp');
const cam_f = document.getElementById('cam_f');
const cam_iso = document.getElementById('cam_iso');
const bol_exp = document.getElementById('bol_exp');
const bol_f = document.getElementById('bol_f');
const bol_iso = document.getElementById('bol_iso');
const bol_f_diff = document.getElementById('bol_f_diff');
const bol_iso_diff = document.getElementById('bol_iso_diff');
const bol_exp_diff = document.getElementById('bol_exp_diff');
const fstop = BOLEX.fstop || 5.6;
const iso = BOLEX.iso || 100;
const prism = BOLEX.prism || 0.8;
const cFstop = exif.ApertureValue || exif.FNumber;
const cExposure = exif.ExposureTime * 1000;
const cIso = exif.ISOSpeedRatings[0];
//convert fstop to "fnumber", an absolute scale where stops are scaled to 1.0
const f = fnumber(cFstop);
const target = fnumber(fstop); //bolex
let exposure = cExposure;
let isoStops = 0;
let fStops = 0;
let expDiff;
let scale_elem;
let exposure_elem;
let proceed;
let e1;
let e2;
pwa.exif = exif;
//Determine if fstop of phone camera "f"
if (target !== f) {
fStops = f - target;
exposure = exposure / Math.pow(2, fStops);
}
if (cIso != iso) {
isoStops = (Math.log(cIso) / Math.log(2)) - (Math.log(iso) / Math.log(2));
}
//Double or halve exposure based on the differences in ISO stops
exposure = exposure * Math.pow(2, isoStops);
//Compensate for Bolex prism
exposure = exposure * Math.pow(2, prism);
exposure = Math.round(exposure) //round to nearest millisecond
bol_f.value = fstop;
bol_iso.value = iso;
bol_exp.value = exposure;
//Total difference in exposure from phone camera to Bolex
expDiff = (Math.log(exposure) / Math.log(2)) - (Math.log(cExposure) / Math.log(2));
bol_exp_diff.innerHTML = floatDisplay(expDiff);
bol_iso_diff.innerHTML = floatDisplay(isoStops);
bol_f_diff.innerHTML = floatDisplay(-fStops);
cam_exp.value = cExposure;
cam_f.value = cFstop;
cam_iso.value = cIso;
function exposureConfirm (index) {
if (index === 1) {
e1 = new Event('change');
e2 = new Event('change');
scale_elem = document.getElementById('scale');
exposure_elem = document.getElementById('exposure');
scale_elem.value = 'ms';
scale_elem.dispatchEvent(e1);
exposure_elem.value = exposure;
exposure_elem.dispatchEvent(e2);
}
}
if (exposure > 500) {
navigator.notification.confirm(
`Set camera exposure to ${exposure}ms to match photo?`,
exposureConfirm,
'INTVAL3',
['Okay', 'Cancel']
);
}
{
"Exif": {
"DateTimeOriginal": "2018:02:02 16:59:13",
"ExposureBiasValue": 0,
"SensingMethod": 2,
"BrightnessValue": -0.9969016228800144,
"LensMake": "Apple",
"FNumber": 1.8,
"FocalLength": 3.99,
"ShutterSpeedValue": 2.049355412374274,
"SceneType": 1,
"ApertureValue": 1.6959938131099002,
"SubjectArea": [
2015,
1511,
2217,
1330
],
"ColorSpace": 65535,
"LensSpecification": [
3.99,
3.99,
1.8,
1.8
],
"PixelYDimension": 3024,
"WhiteBalance": 0,
"DateTimeDigitized": "2018:02:02 16:59:13",
"ExposureMode": 0,
"ISOSpeedRatings": [
100
],
"PixelXDimension": 4032,
"LensModel": "iPhone 8 back camera 3.99mm f/1.8",
"ExposureTime": 0.25,
"Flash": 24,
"SubsecTimeDigitized": "209",
"SubsecTimeOriginal": "209",
"ExposureProgram": 2,
"FocalLenIn35mmFilm": 28,
"MeteringMode": 5
}
}
};
pwa.refreshExposure = function () {
if (typeof pwa.exif.ExposureTime !== 'undefined') {
pwa.cameraExposure(pwa.exif);
}
};
pwa.EV = function (fstop, shutter) {
const sec = shutter / 1000; //shutter in ms => seconds
const square = Math.pow(fstop, 2);
return Math.log(square / sec);
};*/
pwa.reset = async function () {
const opts = {
type : 'reset'
};
const cont = confirm(`Reset INTVAL3 to default settings and clear counter?`);
if (cont) {
try {
await pwa.wble.write(pwa.wble.CHAR_ID, opts);
} catch (err) {
console.error(err);
pwa.wble.onError(err.message);
return false;
}
pwa.resetSuccess();
}
};
pwa.resetSuccess = function () {
console.log('Reset to default settings');
setTimeout(() => {
pwa.getState();
}, 100)
};
pwa.update = async function () {
const opts = {
type : 'update'
};
const cont = confirm(`Check for updates? You will be disconnected from the INTVAL3 during this process.`);
if (cont) {
UI.spinner.show('Updating INTVAL3...');
UI.overlay.show();
try {
await pwa.wble.write(pwa.wble.CHAR_ID, opts);
} catch (err) {
console.error(err);
pwa.wble.onError(err.message);
return false;
}
pwa.updateSuccess();
}
};
pwa.updateSuccess = function () {
console.log('Finished updating firmware, restarting...');
};
pwa.restart = async function () {
const opts = {
type : 'restart'
};
const cont = confirm(`Restart the INTVAL3? You will be disconnected from it during this process.`);
if (cont) {
UI.spinner.show('Restarting INTVAL3...');
UI.overlay.show();
try {
await pwa.wble.write(pwa.wble.CHAR_ID, opts);
} catch (err) {
console.error(err);
pwa.wble.onError(err.message);
return false;
}
pwa.restartSuccess();
}
};
pwa.restartSuccess = function () {
console.log('Restarting... ');
}
pwa.alert = function (msg) {
if (typeof navigator !== 'undefined' && typeof navigator.notification !== 'undefined') {
navigator.notification.alert(
msg,
() => {},
'INTVAL3',
'Okay'
);
} else {
alert(msg);
}
};
/**
* Mobile helper functions
*/
function bytesToString (buffer) {
return String.fromCharCode.apply(null, new Uint8Array(buffer));
}
function stringToBytes(string) {
var array = new Uint8Array(string.length);
for (var i = 0, l = string.length; i < l; i++) {
array[i] = string.charCodeAt(i);
}
return array.buffer;
}
function fnumber (fstop) {
return Math.log(fstop) / Math.log(Math.sqrt(2));
}
function floatDisplay (value) {
let str = value + '';
const period = str.indexOf('.');
if (period === -1) {
str = str + '.0';
} else {
str = roundTenth(value) + '';
}
if (value < 0) {
str = `<span class="neg">${(str + '')}</span>`;
} else if (value > 0) {
str = `<span class="pos">+${(str + '')}</span>`;
}
return str;
}
function roundTenth (value) {
return Math.round((value * 10) / 10)
}