Add codemirror for editing mscript
This commit is contained in:
Matt
parent
83c9fba876
commit
6c238609ad
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -514,4 +538,11 @@ button{
|
|||
.cp-memo{
|
||||
bottom: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cm-s-monokai.CodeMirror{
|
||||
background: @BG !important;
|
||||
}
|
||||
.cm-s-monokai .CodeMirror-gutters {
|
||||
background: @BG + rgb(15, 15, 15) !important;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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">Number of instructions: <span>0</span></div>
|
||||
<div class="timing">Time to complete: <span>0 ms</span></div>
|
||||
<div class="cam_end">Camera end position: <span>00000</span></div>
|
||||
<div class="proj_end">Projector end position: <span>00000</span></div>
|
||||
<div class="seq_count"># of steps: <span>0</span></div>
|
||||
<div class="timing">To complete: <span>0 ms</span></div>
|
||||
<div class="cam_end">Camera end: <span>00000</span></div>
|
||||
<div class="proj_end">Projector end: <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">
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Reference in New Issue