Add codemirror for editing mscript

This commit is contained in:
Matt 2016-04-19 16:49:37 -04:00
parent 83c9fba876
commit 6c238609ad
8 changed files with 277 additions and 27 deletions

View File

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

View File

@ -1,4 +1,5 @@
@BG: rgb(50, 43, 47); //@BG: rgb(50, 43, 47);
@BG : #272b30;
@COMMON: #fff; @COMMON: #fff;
@FORWARD: #00C4A0; @FORWARD: #00C4A0;
@ -10,8 +11,10 @@
@INPUT_BG : rgba(255, 255, 255, 0.05); @INPUT_BG : rgba(255, 255, 255, 0.05);
@FOOTER_H : 150px;
.monospace () { .monospace () {
font-family: monospace; font-family: 'Menlo', monospace;
} }
.button (@color: @COMMON) { .button (@color: @COMMON) {
@ -63,13 +66,13 @@ footer{
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 150px; height: @FOOTER_H;
} }
#log{ #log{
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 150px; height: @FOOTER_H;
} }
#screens{ #screens{
@ -342,12 +345,12 @@ footer{
} }
} }
#seq_stats{ #seq_stats{
width: 50%; width: 40%;
float: right; float: right;
padding: 0 20px; padding: 20px 61px 0 0;
h3{ h3{
font-size: 20px; font-size: 20px;
margin: 12px 0 3px; margin: 16px 0 3px;
} }
span{ span{
font-weight: 600; font-weight: 600;
@ -359,7 +362,7 @@ footer{
#seq_loop{ #seq_loop{
width: 40%; width: 40%;
float: left; float: left;
padding: 0 28px; padding: 0 0 0 56px;
h3{ h3{
font-size: 20px; font-size: 20px;
margin: 12px 0 3px; margin: 12px 0 3px;
@ -370,6 +373,7 @@ footer{
color: @COMMON; color: @COMMON;
font-size: 21px; font-size: 21px;
width: 121px; width: 121px;
margin-top: 10px;
padding: 6px 12px; 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{ #overlay{
position: fixed; position: fixed;
top: 0; top: 0;
@ -514,4 +538,11 @@ button{
.cp-memo{ .cp-memo{
bottom: 2px !important; bottom: 2px !important;
} }
}
.cm-s-monokai.CodeMirror{
background: @BG !important;
}
.cm-s-monokai .CodeMirror-gutters {
background: @BG + rgb(15, 15, 15) !important;
} }

36
app/css/monokai.css Normal file
View File

@ -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;
}

View File

@ -7,7 +7,7 @@ var scripts = [
'./src/jquery-electron-fix.js', './src/jquery-electron-fix.js',
'./src/jquery.contextMenu.min.js', './src/jquery.contextMenu.min.js',
'./src/w2ui-1.4.3.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/moment.min.js',
'./src/colors.js', './src/colors.js',
'./src/colorPicker.data.js', './src/colorPicker.data.js',

View File

@ -8,6 +8,7 @@
<link href="./css/w2ui-1.4.3.min.css" rel="stylesheet"> <link href="./css/w2ui-1.4.3.min.css" rel="stylesheet">
<link href="./css/effeckt.css" rel="stylesheet"> <link href="./css/effeckt.css" rel="stylesheet">
<link href="./css/codemirror.min.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"> <link href="./css/app.css" rel="stylesheet">
</head> </head>
<body onload="init();"> <body onload="init();">
@ -52,18 +53,22 @@
<input id="seq_scroll_state" type="number" min="0" value="00000" /> <input id="seq_scroll_state" type="number" min="0" value="00000" />
</div> </div>
<div id="seq_stats"> <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>
<div id="seq_loop"> <div id="seq_loop">
<h3>LOOPS</h3> <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);"/> <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> </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="controls" class="screen">
<div id="counters_2"> <div id="counters_2">
<div class="cam"> <div class="cam">

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1034,6 +1034,76 @@ gui.warn = function (title, message) {
}; };
gui.error = function () {}; 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 Sequencer grid
*******/ *******/
@ -1286,6 +1356,8 @@ nav.change = function (id) {
if (w2ui['colors'].active === 'rgb') { if (w2ui['colors'].active === 'rgb') {
light.rgb.set(light.color); light.rgb.set(light.color);
} }
} else if (id === 'script') {
gui.mscript.open();
} }
}; };
@ -1315,6 +1387,8 @@ var init = function () {
'use strict'; 'use strict';
nav.init(); nav.init();
gui.grid.init(); gui.grid.init();
gui.mscript.init();
gui.console.init();
log.init(); log.init();
devices.init(); devices.init();
light.init(); light.init();