init

Initial mock up of the app

src/main.js

@@ -0,0 +1,36 @@
+import './assets/main.css'
+
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
+
+
+var startPos = 0;
+var totalPos = 360;
+var currentPos = 156;
+var minRange = 0;
+var maxRange = 40;
+
+document.addEventListener("DOMContentLoaded", function(){
+    //....
+
+// Quick Preview GUI indicator Render
+var scale = document.getElementById("scale");
+
+Number.prototype.map = function (in_min, in_max, out_min, out_max) {
+  return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
+}
+var guiCurrentPos = Math.round(currentPos.map(startPos, totalPos, minRange, maxRange));
+
+for(var i = 0; i < 40; i=i+1){
+	scale.innerHTML += "<div class='bg-white'></div>";
+	if (i - 1 < guiCurrentPos) {
+  scale.getElementsByTagName("div")[i].classList.add("active");
+  	if (i == guiCurrentPos) {
+    scale.getElementsByTagName("div")[guiCurrentPos].classList.add("current");
+    }
+  }   
+   	
+}
+});