Add a function to cancel a sequence. This should only be used during "seq.exec()".

app/css/app.css

@@ -829,6 +829,21 @@ button:focus {
   color: #fff;
   text-shadow: 1px 1px 2px #000;
 }
+#spinnerCancel {
+  display: none;
+  position: absolute;
+  z-index: 2000000000;
+  left: 50%;
+  top: 50%;
+  text-align: center;
+  margin-left: -40%;
+  margin-top: 120px;
+  width: 80%;
+}
+#spinnerCancel .btn {
+  margin: 0 auto;
+  background: rgba(80, 80, 80, 0.4);
+}
 .cp-app {
   position: relative !important;
   border-radius: 0px !important;

app/index.html

@@ -302,10 +302,14 @@
     <div id="overlay" onclick="gui.overlay(false);gui.spinner(false);"></div>
     <div id="spinner">
       <div id="spinnerMsg"></div>
+      <div id="spinnerCancel">
+        <div class="btn" style="margin:auto;" onclick="seq.cancel();">Cancel</div>
+      </div>
       <div id="spinnerProgress" class="progress">
         <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
           <span class="sr-only">0% Complete</span>
         </div>
+
       </div>
     </div>
     <script src="./js/app.js"></script>

app/less/app.less

@@ -158,6 +158,22 @@
     text-shadow: 1px 1px 2px #000;
 }
 
+#spinnerCancel{
+	display:none;
+	position: absolute;
+    z-index: 2000000000;
+    left: 50%;
+    top: 50%;
+    text-align: center;
+    margin-left: -40%;
+    margin-top: 120px;
+    width: 80%;
+    .btn{
+    	margin: 0 auto;
+    	background: rgba(80,80,80, 0.4);
+    }
+}
+
 .cp-app{
 	position: relative !important;
 	border-radius: 0px !important;

app/lib/ui/cmd.js

@@ -192,6 +192,12 @@ cmd.black_backward = function (callback) {
 		}, mcopy.cfg.arduino.serialDelay);
 	}
 };
+/**
+ * Move the camera to a specific frame. Accepts the input with the "move_cam_to"
+ * value. Moves as black frames to prevent multiple exposure.
+ *
+ * @param {object} t  HTML input element with the move to val
+ **/
 cmd.cam_to = function (t) {
 	const raw = $('#move_cam_to').val();
 	const val = parseInt(raw);

app/lib/ui/index.js

@@ -106,7 +106,7 @@ gui.spinnerCfg =  {
 	top: '50%', // Top position relative to parent
 	left: '50%' // Left position relative to parent
 };
-gui.spinner = function (state, msg, progress) {
+gui.spinner = function (state, msg, progress, cancel) {
 	'use strict';
 	let target;
 	let spinner;
@@ -128,6 +128,11 @@ gui.spinner = function (state, msg, progress) {
 	if (progress) {
 		gui.spinnerProgress(progress);
 	}
+	if (cancel) {
+		$('#spinnerCancel').show();
+	} else {
+		$('#spinnerCancel').hide();
+	}
 };
 gui.spinnerMsg = function (msg) {
 	'use strict';

app/lib/ui/seq.js

@@ -241,11 +241,16 @@ seq.exec = function (arr) {
 	seq.queue = arr;
 	//console.dir(arr);
 	gui.overlay(true);
-	gui.spinner(true, `Running sequence of ${arr.length} frame${(arr.length === 1 ? '' : 's')}`, 0);
+	gui.spinner(true, `Running sequence of ${arr.length} frame${(arr.length === 1 ? '' : 's')}`, 0, true);
 	log.info(`Sequence started`, 'SEQUENCE', true);
 	seq.step();
 };
 
+seq.cancel = function () {
+	gui.spinner(true, `Cancelling sequence...`);
+	seq.running = false;
+}
+
 seq.execStop = function (msg) {
 	'use strict';
 	gui.overlay(false);
@@ -281,7 +286,7 @@ seq.step = function () {
 		if (typeof elem !== 'undefined') {
 			current = seq.state.len - seq.queue.length;
 			max = seq.state.len;
-			gui.spinner(true, `Sequence: step ${c} ${current}/${max}`, (current / max) * 100);
+			gui.spinner(true, `Sequence: step ${c} ${current}/${max}`, (current / max) * 100, true);
 			log.info(`Sequence: step ${c} ${current}/${max}`, 'SEQUENCE', true);
 			if (c === 'CF'){
 				cmd.cam_forward(rgb, seq.step);