Monitor the progress of an advanced sequence

app/www/index.html

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

app/www/static/css/index.css

@@ -466,4 +466,32 @@ body.mobile footer{
 
 #stats span{
     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;
 }

app/www/static/js/intval.core.js

@@ -327,6 +327,48 @@ var calcStats = function () {
 	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 = {};
 
 UI.overlay = {

app/www/static/js/intval.mobile.js

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

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

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

app/www/static/js/intval.web.js

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