Monitor the progress of an advanced sequence

This commit is contained in:
mmcwilliams 2020-05-19 23:23:42 -04:00
parent 05af031cba
commit 020b273ab2
6 changed files with 93 additions and 48 deletions

View File

@ -178,7 +178,10 @@
<div> <div>
<button id="run" onclick="advanced();">RUN</button> <button id="run" onclick="advanced();">RUN</button>
</div> </div>
<div id="progress"></div> <div id="progress">
<div id="progressVal" style="width:0%;"></div>
<div id="progressText">0%</div>
</div>
</div> </div>
<footer> <footer>
<div id="settingsIcon" onclick="settingsPage();" class="icon"> <div id="settingsIcon" onclick="settingsPage();" class="icon">

View File

@ -466,4 +466,32 @@ body.mobile footer{
#stats span{ #stats span{
color: #fff; color: #fff;
}
#progress{
display: none;
position: absolute;
height: 18px;
margin: 0 2%;
width: 96%;
bottom: 58px;
left: 0;
border-radius: 4px;
overflow: hidden;
}
#progress.active{
display: block;
}
#progressVal{
height: 18px;
background: #999;
}
#progressText{
position: absolute;
top: 0;
margin: 0 auto;
width: 100%;
text-align: center;
color: #999;
mix-blend-mode: difference;
} }

View File

@ -327,6 +327,48 @@ var calcStats = function () {
document.getElementById('frameEnd').innerHTML = frameEnd; document.getElementById('frameEnd').innerHTML = frameEnd;
}; };
var seqProgress = function () {
console.log('sequence progress')
const extraFwd = BOLEX.expected;
const extraBwd = BOLEX.expected + 150;
const loops = parseInt(document.getElementById('len').value);
const multiple = parseInt(document.getElementById('multiple').value);
const progressElem = document.getElementById('progress');
const total = loops * multiple;
let delay = 0;
let exp;
if (STATE.exposure > BOLEX.expected) {
exp = STATE.exposure + (STATE.dir ? extraFwd : extraBwd);
} else {
exp = BOLEX.expected;
}
if (!progressElem.classList.contains('active')) {
progressElem.classList.add('active');
}
for (let x = 0; x < loops; x++) {
for (let y = 0; y < multiple; y++) {
let progress = ((x * multiple) + y + 1) / total;
let time = (((x * multiple) + y) * exp) + delay;
setTimeout(() => {
//console.log(progress);
document.getElementById('progressVal').style = `width: ${progress * 100}%;`;
document.getElementById('progressText').innerHTML = `${Math.round(progress * 100)}%`;
}, time);
}
delay += STATE.delay;
}
setTimeout(() => {
//console.log(progress);
document.getElementById('progressVal').style = `width: 100%;`;
document.getElementById('progressText').innerHTML = `100%`;
}, (exp * total) + ((loops - 1) * STATE.delay));
}
var UI = {}; var UI = {};
UI.overlay = { UI.overlay = {

View File

@ -371,7 +371,7 @@ mobile.advanced = function () {
mobile.ble.SERVICE_ID, mobile.ble.SERVICE_ID,
mobile.ble.CHAR_ID, mobile.ble.CHAR_ID,
stringToBytes(JSON.stringify(opts)), //check length? stringToBytes(JSON.stringify(opts)), //check length?
mobile.advanceSuccess, mobile.advancedSuccess,
mobile.ble.onError); mobile.ble.onError);
if (!elem.classList.contains('focus')) { if (!elem.classList.contains('focus')) {
@ -383,26 +383,16 @@ mobile.advanced = function () {
mobile.advancedSuccess = function () { mobile.advancedSuccess = function () {
console.log('Sequence state changed'); console.log('Sequence state changed');
if (STATE.sequence === false) {
seqProgress();
}
getState(); getState();
setTimeout(() => { document.getElementById('seq').blur();
if (STATE.sequence) { document.getElementById('run').blur();
seqState(true);
} else {
seqState(false);
}
document.getElementById('seq').blur();
document.getElementById('run').blur();
}, 42);
setTimeout(() => { setTimeout(() => {
console.log('Sequence complete'); console.log('Sequence complete');
getState(); getState();
setTimeout(() => {
if (STATE.sequence) {
seqState(true);
} else {
seqState(false);
}
}, 42);
}, STATE.advanced + 1000); }, STATE.advanced + 1000);
}; };

View File

@ -328,13 +328,13 @@ pwa.frameSuccess = function () {
console.log('Frame finished, getting state.'); console.log('Frame finished, getting state.');
pwa.wble.active = false; pwa.wble.active = false;
document.getElementById('frame').classList.remove('focus'); document.getElementById('frame').classList.remove('focus');
pwa.getState(); getState();
} else { } else {
setTimeout(() => { setTimeout(() => {
console.log('Frame finished, getting state.'); console.log('Frame finished, getting state.');
pwa.wble.active = false; pwa.wble.active = false;
document.getElementById('frame').classList.remove('focus'); document.getElementById('frame').classList.remove('focus');
pwa.getState(); getState();
}, STATE.exposure + 500) }, STATE.exposure + 500)
} }
} }
@ -356,7 +356,7 @@ pwa.setDir = async function () {
}; };
pwa.dirSuccess = function () { pwa.dirSuccess = function () {
console.log('Set direction'); console.log('Set direction');
pwa.getState(); getState();
setTimeout(() => { setTimeout(() => {
setDirLabel(STATE.dir); setDirLabel(STATE.dir);
}, 50); }, 50);
@ -386,7 +386,7 @@ pwa.setExposure = async function () {
pwa.exposureSuccess = function () { pwa.exposureSuccess = function () {
console.log('Set exposure'); console.log('Set exposure');
pwa.getState(); getState();
}; };
pwa.setDelay = async function () { pwa.setDelay = async function () {
@ -410,7 +410,7 @@ pwa.setDelay = async function () {
pwa.delaySuccess = function () { pwa.delaySuccess = function () {
console.log('Set delay'); console.log('Set delay');
pwa.getState(); getState();
}; };
pwa.setCounter = async function () { pwa.setCounter = async function () {
@ -439,7 +439,7 @@ pwa.setCounter = async function () {
pwa.counterSuccess = function () { pwa.counterSuccess = function () {
console.log('Set counter'); console.log('Set counter');
pwa.getState(); getState();
}; };
pwa.sequence = async function () { pwa.sequence = async function () {
@ -469,7 +469,7 @@ pwa.sequence = async function () {
pwa.sequenceSuccess = function () { pwa.sequenceSuccess = function () {
console.log('Sequence state changed'); console.log('Sequence state changed');
pwa.getState(); getState();
setTimeout(() => { setTimeout(() => {
if (STATE.sequence) { if (STATE.sequence) {
pwa.wble.active = true; pwa.wble.active = true;
@ -521,25 +521,13 @@ pwa.advanced = async function () {
pwa.advancedSuccess = function () { pwa.advancedSuccess = function () {
console.log('Sequence state changed'); console.log('Sequence state changed');
pwa.getState(); if (STATE.sequence === false) {
setTimeout(() => { seqProgress();
if (STATE.sequence) { }
seqState(true); getState();
} else {
seqState(false);
}
document.getElementById('seq').blur();
}, 42);
setTimeout(() => { setTimeout(() => {
console.log('Sequence complete'); console.log('Sequence complete');
getState(); getState();
setTimeout(() => {
if (STATE.sequence) {
seqState(true);
} else {
seqState(false);
}
}, 42);
}, STATE.advanced + 1000); }, STATE.advanced + 1000);
}; };

View File

@ -192,6 +192,7 @@ web.advancedSuccess = function (res) {
STATE.sequence = true; STATE.sequence = true;
document.getElementById('seq').focus(); document.getElementById('seq').focus();
seqState(true); seqState(true);
seqProgress();
} else if (res.stopped) { } else if (res.stopped) {
STATE.sequence = false; STATE.sequence = false;
document.getElementById('seq').blur(); document.getElementById('seq').blur();
@ -201,13 +202,6 @@ web.advancedSuccess = function (res) {
setTimeout(() => { setTimeout(() => {
console.log('Sequence complete'); console.log('Sequence complete');
getState(); getState();
setTimeout(() => {
if (STATE.sequence) {
seqState(true);
} else {
seqState(false);
}
}, 42);
}, STATE.advanced + 1000); }, STATE.advanced + 1000);
}; };
web.reset = function () { web.reset = function () {