Add codemirror for editing mscript

app/css/app.css

@@ -251,7 +251,7 @@ footer {
   display: block;
   margin: 0 auto;
   text-align: center;
-  font-family: monospace;
+  font-family: 'Menlo', monospace;
 }
 #counters .cam input.changed,
 #counters_2 .cam input.changed,
@@ -296,13 +296,13 @@ footer {
   margin-right: 60px;
 }
 #seq_stats {
-  width: 50%;
+  width: 40%;
   float: right;
-  padding: 0 20px;
+  padding: 20px 61px 0 0;
 }
 #seq_stats h3 {
   font-size: 20px;
-  margin: 12px 0 3px;
+  margin: 16px 0 3px;
 }
 #seq_stats span {
   font-weight: 600;
@@ -311,18 +311,19 @@ footer {
 #seq_loop {
   width: 40%;
   float: left;
-  padding: 0 28px;
+  padding: 0 0 0 56px;
 }
 #seq_loop h3 {
   font-size: 20px;
   margin: 12px 0 3px;
 }
 #seq_loop input {
-  font-family: monospace;
+  font-family: 'Menlo', monospace;
   background: rgba(255, 255, 255, 0.05);
   color: #fff;
   font-size: 21px;
   width: 121px;
+  margin-top: 10px;
   padding: 6px 12px;
 }
 button {
@@ -347,7 +348,7 @@ button span {
 button:active,
 button .active {
   background: #fff;
-  color: #322b2f;
+  color: #272b30;
   outline: none;
 }
 button:focus {
@@ -452,7 +453,7 @@ button:focus {
   opacity: 1;
 }
 #seq_labels {
-  font-family: monospace;
+  font-family: 'Menlo', monospace;
   background-color: #272b30;
   position: absolute;
   top: 128px;
@@ -469,6 +470,23 @@ button:focus {
   display: inline-block;
   margin-right: 5px;
 }
+#console {
+  background: #000;
+  border-top: 2px solid rgba(255, 255, 255, 0.3);
+}
+#console textarea {
+  font-family: 'Menlo', monospace;
+  outline: none !important;
+  border: none;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 20px;
+  width: 100%;
+  height: 150px;
+  display: block;
+  background: black;
+  color: #fff;
+}
 #overlay {
   position: fixed;
   top: 0;
@@ -491,3 +509,9 @@ button:focus {
 .cp-app .cp-memo {
   bottom: 2px !important;
 }
+.cm-s-monokai.CodeMirror {
+  background: #272b30 !important;
+}
+.cm-s-monokai .CodeMirror-gutters {
+  background: #363a3f !important;
+}

app/css/app.less

@@ -1,4 +1,5 @@
-@BG: rgb(50, 43, 47);
+//@BG: rgb(50, 43, 47);
+@BG : #272b30;
 @COMMON: #fff;
 
 @FORWARD: #00C4A0;
@@ -10,8 +11,10 @@
 
 @INPUT_BG : rgba(255, 255, 255, 0.05);
 
+@FOOTER_H : 150px;
+
 .monospace () {
-	font-family: monospace;
+	font-family: 'Menlo', monospace;
 }
 
 .button (@color: @COMMON) {
@@ -63,13 +66,13 @@ footer{
 	position: fixed;
     bottom: 0;
     width: 100%;
-    height: 150px;
+    height: @FOOTER_H;
 }
 
 #log{
 	position: fixed;
 	width: 100%;
-	height: 150px;
+	height: @FOOTER_H;
 }
 
 #screens{
@@ -342,12 +345,12 @@ footer{
 	}
 }
 #seq_stats{
-	width: 50%;
+	width: 40%;
 	float: right;
-	padding: 0 20px;
+	padding: 20px 61px 0 0;
 	h3{
 		font-size: 20px;
-		margin: 12px 0 3px;
+		margin: 16px 0 3px;
 	}
 	span{
 		font-weight: 600;
@@ -359,7 +362,7 @@ footer{
 #seq_loop{
 	width: 40%;
 	float: left;
-	padding: 0 28px;
+	padding: 0 0 0 56px;
 	h3{
 		font-size: 20px;
 		margin: 12px 0 3px;
@@ -370,6 +373,7 @@ footer{
     	color: @COMMON;
     	font-size: 21px;
 		width: 121px;
+		margin-top: 10px;
 		padding: 6px 12px;
 	}
 }
@@ -491,6 +495,26 @@ button{
 	}
 }
 
+#console{
+	background: #000;
+	border-top: 2px solid rgba(255, 255, 255, 0.3);
+	textarea{
+		.monospace();
+		font-size: 12px;
+		line-height: 17px;
+		outline: none !important;
+		border: none;
+		box-sizing: border-box;
+		margin: 0;
+		padding: 20px;
+		width: 100%;
+		height: @FOOTER_H;
+		display: block;
+		background: black;
+		color: @COMMON;
+	}
+}
+
 #overlay{
 	position: fixed;
 	top: 0;
@@ -515,3 +539,10 @@ button{
 		bottom: 2px !important;
 	}
 }
+
+.cm-s-monokai.CodeMirror{
+	background: @BG !important;
+}
+.cm-s-monokai .CodeMirror-gutters {
+	background: @BG + rgb(15, 15, 15) !important;
+}

app/css/monokai.css

@@ -0,0 +1,36 @@
+/* Based on Sublime Text's Monokai theme */
+
+.cm-s-monokai.CodeMirror { color: #f8f8f2; }
+.cm-s-monokai div.CodeMirror-selected { background: #49483E; }
+.cm-s-monokai .CodeMirror-line::selection, .cm-s-monokai .CodeMirror-line > span::selection, .cm-s-monokai .CodeMirror-line > span > span::selection { background: rgba(73, 72, 62, .99); }
+.cm-s-monokai .CodeMirror-line::-moz-selection, .cm-s-monokai .CodeMirror-line > span::-moz-selection, .cm-s-monokai .CodeMirror-line > span > span::-moz-selection { background: rgba(73, 72, 62, .99); }
+.cm-s-monokai .CodeMirror-gutters { background: #272822; border-right: 0px; }
+.cm-s-monokai .CodeMirror-guttermarker { color: white; }
+.cm-s-monokai .CodeMirror-guttermarker-subtle { color: #d0d0d0; }
+.cm-s-monokai .CodeMirror-linenumber { color: #d0d0d0; }
+.cm-s-monokai .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
+
+.cm-s-monokai span.cm-comment { color: #75715e; }
+.cm-s-monokai span.cm-atom { color: #ae81ff; }
+.cm-s-monokai span.cm-number { color: #ae81ff; }
+
+.cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute { color: #a6e22e; }
+.cm-s-monokai span.cm-keyword { color: #f92672; }
+.cm-s-monokai span.cm-builtin { color: #66d9ef; }
+.cm-s-monokai span.cm-string { color: #e6db74; }
+
+.cm-s-monokai span.cm-variable { color: #f8f8f2; }
+.cm-s-monokai span.cm-variable-2 { color: #9effff; }
+.cm-s-monokai span.cm-variable-3 { color: #66d9ef; }
+.cm-s-monokai span.cm-def { color: #fd971f; }
+.cm-s-monokai span.cm-bracket { color: #f8f8f2; }
+.cm-s-monokai span.cm-tag { color: #f92672; }
+.cm-s-monokai span.cm-header { color: #ae81ff; }
+.cm-s-monokai span.cm-link { color: #ae81ff; }
+.cm-s-monokai span.cm-error { background: #f92672; color: #f8f8f0; }
+
+.cm-s-monokai .CodeMirror-activeline-background { background: #373831; }
+.cm-s-monokai .CodeMirror-matchingbracket {
+  text-decoration: underline;
+  color: white !important;
+}

app/gulpfile.js

@@ -7,7 +7,7 @@ var scripts = [
 	'./src/jquery-electron-fix.js',
 	'./src/jquery.contextMenu.min.js',
 	'./src/w2ui-1.4.3.min.js',
-	'./src/codemirror-compressed.js', //codemirror
+	'./src/codemirror-compressed.js', //codemirror, python mode
 	'./src/moment.min.js',
 	'./src/colors.js',
 	'./src/colorPicker.data.js',

app/index.html

@@ -8,6 +8,7 @@
     <link href="./css/w2ui-1.4.3.min.css" rel="stylesheet">
     <link href="./css/effeckt.css" rel="stylesheet">
     <link href="./css/codemirror.min.css" rel="stylesheet">
+    <link href="./css/monokai.css" rel="stylesheet">
     <link href="./css/app.css" rel="stylesheet">
   </head>
   <body onload="init();">
@@ -52,18 +53,22 @@
           <input id="seq_scroll_state" type="number" min="0" value="00000" />
         </div>
         <div id="seq_stats">
-          <h3>STATS</h3>
+          <div class="seq_count"># of steps: <span>0</span></div>
-          <div class="seq_count">Number of instructions: <span>0</span></div>
+          <div class="timing">To complete: <span>0 ms</span></div>
-          <div class="timing">Time to complete: <span>0 ms</span></div>
+          <div class="cam_end">Camera end: <span>00000</span></div>
-          <div class="cam_end">Camera end position: <span>00000</span></div>
+          <div class="proj_end">Projector end: <span>00000</span></div>
-          <div class="proj_end">Projector end position: <span>00000</span></div>
         </div>
         <div id="seq_loop">
           <h3>LOOPS</h3>
           <input type="number" min="1" id="seq_loop" value="00001" onchange="this.value = gui.fmtZero(this.value, 6); gui.grid.loopChange(this);"/>
         </div>
       </div>
-      <div id="script" class="screen"></div>
+      <div id="script" class="screen">
+        <textarea id="editor"></textarea>
+        <footer id="console">
+          <textarea>> </textarea>
+        </footer>
+      </div>
       <div id="controls" class="screen">
         <div id="counters_2">
           <div class="cam">

app/src/index.js

@@ -1034,6 +1034,76 @@ gui.warn = function (title, message) {
 };
 gui.error = function () {};
 
+/******
+	Mscript GUI
+*******/
+gui.mscript = {};
+gui.mscript.editor = {};
+gui.mscript.data = {};
+gui.mscript.raw = '';
+gui.mscript.init = function () {
+	'use strict';
+	$('#editor').val('CF 1\nPF 1');
+	gui.mscript.editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
+		lineNumbers: true,
+		mode: 'python',
+		matchBrackets: true,
+		theme: 'monokai'
+	});
+	gui.mscript.editor.setSize(null, $(window).height() - $('footer').eq(0).height() - 30);
+	gui.mscript.editor.on('change', function (e) {
+		var data = gui.mscript.editor.getValue(),
+			output = gui.mscript.parse(data);
+	});
+	$(document).on('resize', function () {
+		gui.mscript.editor.setSize(null, $(window).height() - $('footer').eq(0).height() - 30);
+	});
+};
+gui.mscript.open = function () {
+	'use strict';
+	gui.mscript.editor.setSize(null, $(window).height() - $('footer').eq(0).height() - 30);
+	gui.mscript.editor.refresh();
+};
+gui.mscript.update = function () {
+	//ehhhhh
+	$('#mscript textarea').val(mcopy.state.sequence.arr.join('\n'));
+};
+gui.mscript.parse = function (str) {
+	/*var cmd = 'node mscript.js "' + str + '\n"';
+	gui.mscript.raw = str;
+	mcopy.exec(cmd, function (data) {
+		gui.mscript.data = JSON.parse(data);
+	});*/
+};
+
+/*******
+ *   gui console
+ *******/
+gui.console = {};
+gui.console.elem = {};
+gui.console.init = function () {
+	'use script';
+	gui.console.elem = $('#console textarea');
+	gui.console.elem.on('keyup', function (e) {
+		var code = e.keyCode || e.which;
+		if (code === 13) {
+			gui.console.exec();
+			e.preventDefault();
+			return false;
+		}
+	});
+};
+gui.console.exec = function () {
+	'use strict';
+	gui.console.newLine();
+};
+gui.console.newLine = function () {
+	'use strict';
+	var current = gui.console.elem.val();
+	current += '> ';
+	gui.console.elem.val(current);
+};
+
 /******
 	Sequencer grid
 *******/
@@ -1286,6 +1356,8 @@ nav.change = function (id) {
 		if (w2ui['colors'].active === 'rgb') {
 			light.rgb.set(light.color);
 		}
+	} else if (id === 'script') {
+		gui.mscript.open();
 	}
 };
 
@@ -1315,6 +1387,8 @@ var init = function () {
 	'use strict';
 	nav.init();
 	gui.grid.init();
+	gui.mscript.init();
+	gui.console.init();
 	log.init();	
 	devices.init();
 	light.init();