Refactor mscript GUI code into Typescript

app/lib/mscript/index.d.ts

@@ -0,0 +1,243 @@
+/** @module lib/mscript */
+interface RGB extends Array<number> {
+    [index: number]: number;
+}
+/** class Mscript */
+export declare class Mscript {
+    output: any;
+    lines: string[];
+    cam: number;
+    cam2: number;
+    proj: number;
+    proj2: number;
+    color: string;
+    loops: any[];
+    rec: number;
+    two: string;
+    three: string;
+    four: string;
+    arr: any[];
+    meta: string[];
+    target: number;
+    dist: number;
+    variables: any;
+    /**
+     * @constructor
+     * Create new Mscript interpreter
+     **/
+    constructor();
+    /**
+     * Clear the state of the script
+     */
+    clear(): void;
+    /**
+     * Main function, accepts multi-line string, parses into lines
+     * and interprets the instructions from the text. Returns an array
+     * of steps to be fed into the mcopy sequence.
+     *
+     * @param {string} text  Mscript text to interpret
+     * @param {function} callback Function to call when string is interpreted
+     *
+     * @returns {object} if callback is not provided
+     */
+    interpret(text: string, callback?: Function): any;
+    /**
+     * Interprets variables for complex sequence behavior.
+     * TODO: Fully implement, add test coverage
+     *
+     * @param {string} line Line containing a variable assignment
+     *
+     **/
+    variable(line: string): void;
+    /**
+     * Replace variable with value at time of interpretation
+     * TODO: Implement this please
+     *
+     * @param {string} line Line containing variable to be replaced with value
+     *
+     * @returns {string} New string to be interpreted
+     **/
+    variable_replace(line: string): string;
+    /**
+     * Interpret a basic two character command
+     *
+     * @param {string} line Line of script to interpret
+     * @param {string} short The short command to use
+     */
+    basic_cmd(line: string, short: string): void;
+    /**
+     * Start a new loop
+     *
+     * @param {string} line  	Line to evaluate as either loop or fade
+     * @param {boolean} fade 	Flag as true if fade
+     */
+    new_loop(line: string, fade?: boolean): void;
+    /**
+     * Close the most recent loop
+     *
+     * @param {string} line Line to interpret
+     */
+    end_loop(line: string): void;
+    /**
+     * Move camera to explicitly-defined frame
+     *
+     * @param {string} line Line to interpret with camera move statement
+     */
+    move_cam(line: string): void;
+    /**
+     * Move secondary camera to explicitly-defined frame
+     *
+     * @param {string} line Line to interpret with camera move statement
+     */
+    move_cam2(line: string): void;
+    /**
+     * Move projector to explicitly-defined frame
+     *
+     * @param {string} line Line containing `move` statement to interpret
+     */
+    move_proj(line: string): void;
+    /**
+     * Move projector to explicitly-defined frame
+     *
+     * @param {string} line Line containing `move` statement to interpret
+     */
+    move_proj2(line: string): void;
+    /**
+     * Set the state of either the cam or projector
+     *
+     * @param line {string} String containing set statement
+     */
+    set_state(line: string): void;
+    /**
+     * Return the last loop
+     *
+     * @returns {object}
+     */
+    last_loop(): any;
+    /**
+     * Return the second-last loop
+     *
+     * @returns {object} Loop array
+     */
+    parent_loop(): any;
+    /**
+     * Extract the loop count integer from a LOOP cmd
+     *
+     * @returns {integer} Loop count in string parsed into integer
+     */
+    loop_count(str: string): number;
+    /**
+     * Execute a fade of frame length, from color to another color
+     *
+     * @param {string} line Line containing a fade initiator
+     */
+    fade(line: string): void;
+    /**
+     * Extract the fade length integer from a FADE cmd
+     *
+     * @param {string} str Line containing the length of fade in frames
+     */
+    fade_count(str: string): number;
+    /**
+     * Extract the start color from a string
+     *
+     * @param {string} str Line containing the start color value in a fade initiator
+     *
+     * @returns {array} Array containing RGB color values
+     */
+    fade_start(str: string): RGB;
+    /**
+     * Extract the end color from a string
+     *
+     * @param {string} str Line containing the end color value in a fade initiator
+     *
+     * @returns {array} Array containing RGB color values
+     */
+    fade_end(str: string): RGB;
+    /**
+     * Determine the state of a fade at a particular frame in the sequence, x
+     *
+     * @param {array} start Color the fade starts at
+     * @param {array} end Color the fade finishes at
+     * @param {integer} len Total length of the fade in frames
+     * @param {integer} x Position of the fade to get color value of
+     *
+     * @returns {array} Array containing RGB color values
+     */
+    fade_rgb(start: RGB, end: RGB, len: number, x: number): string;
+    /**
+     * Parse string into array of RGB color values. 0-255 octet.
+     *
+     * @param {string} str String containing only color values as `#,#,#`
+     **/
+    rgb(str: string): RGB;
+    /**
+     *  Cast RGB color values as string
+     *
+     * @param {array} arr Array to join into string
+     *
+     * @returns {string} String of RGB values
+     **/
+    rgb_str(arr: RGB): string;
+    /**
+     * Increase the state of a specific object, such as the camera/projector,
+     * by the value defined in val.
+     *
+     * @param {string} cmd String representing command to interpret and update state
+     */
+    update(cmd: string, val?: number): void;
+    /**
+     * Split string on command, turn into array of commands
+     * as long as count variable. Default 1.
+     *
+     * @param {string} str String to split
+     * @param {string} cmd String representing command to split at
+     *
+     * @returns {array} Array containing commands
+     */
+    str_to_arr(str: string, cmd: string): string[];
+    /**
+     * Split a string on a command to extract data for light array
+     *
+     * @param {string} str String containing light command
+     * @param {string} cmd String representing command
+     *
+     * @returns {array} An RGB array containing the color values
+     */
+    light_to_arr(str: string, cmd: string): RGB;
+    /**
+     * Split a string to extract an rgb color value
+     *
+     * @param {string} Color string assign to color property
+     */
+    light_state(str: string): void;
+    /**
+     * Interpret a pause command
+     *
+     * @param {string} line String containing pause command
+     **/
+    pause(line: string): void;
+    /**
+    * Interpret an alert command
+    *
+    * @param {string} line String containing pause command
+    **/
+    alert(line: string): void;
+    /**
+     * Throw an error with specific message
+     *
+     * @param {string} msg Error message to print
+     */
+    fail(msg: string): void;
+    /**
+     * Determine if array contains matching elements of
+     * another array
+     *
+     * @param {Array} arr Original array to compare
+     * @param {Array} arr2 Array to compare elements from
+     *
+     * @returns {boolean} Whether arr contains elements in arr2
+     **/
+    contains(arr: string[], arr2: string[]): boolean;
+}
+export {};

app/lib/mscript/index.js

@@ -1,4 +1,6 @@
 'use strict';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mscript = void 0;
 const BLACK = '0,0,0';
 const WHITE = '255,255,255';
 const CMD = [
@@ -122,7 +124,7 @@ class Mscript {
      *
      * @returns {object} if callback is not provided
      */
-    interpret(text, callback) {
+    interpret(text, callback = null) {
         this.clear();
         if (typeof text === 'undefined') {
             return this.fail('No input');
@@ -200,7 +202,7 @@ class Mscript {
         if (this.contains(this.arr, PROJECTOR_SECONDARY)) {
             this.output.proj2 = this.proj2;
         }
-        if (typeof callback !== 'undefined') {
+        if (typeof callback !== 'undefined' && callback != null) {
             //should only be invoked by running mscript.tests()
             callback(this.output);
         }
@@ -967,5 +969,6 @@ class Mscript {
         return arr.some(r => arr2.includes(r));
     }
 }
+exports.Mscript = Mscript;
 module.exports = Mscript;
 //# sourceMappingURL=index.js.map

app/lib/ui/mscript.js

@@ -1,37 +1,54 @@
-const mse = {};
+'use strict';
-
+Object.defineProperty(exports, "__esModule", { value: true });
+/// <reference path ="jquery.d.ts"/> 
+const mscript_1 = require("mscript");
 /******
     Mscript GUI
 *******/
-mse.mscript = {};
+class MscriptGUI {
-mse.mscript.editor = {};
+    constructor() {
-mse.mscript.data = {};
+        this.editor = {};
-mse.mscript.raw = '';
+        this.data = {};
-mse.mscript.init = function () {
+        this.raw = '';
-	'use strict';
+    }
-	$('#editor').val('CF 1\nPF 1');
+    /**
-	mse.mscript.editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
+     * Initializes the mscript GUI. Sets up CodeMirror instance,
+     * binds events and sets height of editor.
+     **/
+    init() {
+        const startingScript = `CF 1
+PF 1`;
+        const editorHeight = $(window).height() - $('footer').eq(0).height() - 30;
+        const editorElem = document.getElementById('editor');
+        const editorConfig = {
             lineNumbers: true,
             mode: 'python',
             matchBrackets: true,
             theme: 'monokai'
-	});
+        };
-	mse.mscript.editor.setSize(null, $(window).height() - $('footer').eq(0).height() - 30);
+        $('#editor').val(startingScript);
-	mse.mscript.editor.on('change', function (e) {
+        this.editor = CodeMirror.fromTextArea(editorElem, editorConfig);
-		//
+        this.editor.setSize(null, editorHeight);
-	});
+        this.editor.on('change', (e) => { });
         $(document).on('resize', function (e) {
-		mse.mscript.editor.setSize(null, $(window).height() - $('footer').eq(0).height() - 30);
+            this.editor.setSize(null, editorHeight);
-	});
+        }.bind(this));
-};
+    }
-mse.mscript.open = function () {
+    /**
-	'use strict';
+     * Callback for when open event occurs.
-	mse.mscript.editor.setSize(null, $(window).height() - $('footer').eq(0).height() - 30);
+     **/
-	mse.mscript.editor.refresh();
+    open() {
-};
+        //recalcuate in case resize has occurred needed
-mse.mscript.fromSequence = function () {
+        const editorHeight = $(window).height() - $('footer').eq(0).height() - 30;
-	//ehhhhh
+        this.editor.setSize(null, editorHeight);
-	'use strict';
+        this.editor.refresh();
+    }
+    /**
+     * Create script from the sequencer's current state.
+     * Previous comment: ehhhh
+     * TODO: Make this smarter.
+     **/
+    fromSequence() {
         let str;
         let tmp = [];
         let cont;
@@ -39,195 +56,225 @@ mse.mscript.fromSequence = function () {
         //str = seq.grid.map(step => { return step.cmd }).join('\n'); //quick hack
         //console.dir(seq.grid);
         for (let step of seq.grid) {
-		if (!step || !step.cmd) continue;
+            if (!step || !step.cmd) {
+                continue;
+            }
             cmd = step.cmd;
             if (tmp.length > 0 && tmp[tmp.length - 1].cmd === cmd) {
                 tmp[tmp.length - 1].num++;
                 continue;
             }
-		tmp.push({ cmd : cmd, num : 1 });
+            tmp.push({ cmd, num: 1 });
         }
         tmp = tmp.map(line => {
-		return `${line.cmd} ${line.num}`
+            return `${line.cmd} ${line.num}`;
-	})
+        });
-	//console.dir(tmp)
         if (seq.gridLoops > 1) {
             tmp.map(line => {
                 return `	${line}`;
-		})
+            });
             tmp.reverse();
             tmp.push(`LOOP ${seq.gridLoops}`);
             tmp.reverse();
             tmp.push('END');
         }
-
         str = tmp.join('\n');
-
         nav.change('script');
         cont = confirm(`Are you sure you want to over-write the current sequence?`);
         if (cont) {
-		mse.mscript.editor.getDoc().setValue(str);
+            this.editor.getDoc().setValue(str);
         }
-};
+    }
-mse.mscript.toGUI = function () {
+    /**
-	'use strict';
+     * Take current compiled mscript state and send it to the sequencer
+     * GUI. TODO: Add confirm step if sequence is longer than X steps.
+     * TODO: Make this smarter (detect outer non-fade loop and assign to loop counter)
+     **/
+    toGUI() {
         let c;
         let step;
-	for (let x = 0; x < mse.mscript.data.arr.length; x++) {
+        for (let x = 0; x < this.data.arr.length; x++) {
-		c = mse.mscript.data.arr[x];
+            c = this.data.arr[x];
             seq.set(x, c);
             if (c === 'CF' || c === 'CB') {
-			if (typeof mse.mscript.data.meta[x] !== 'undefined' && mse.mscript.data.meta[x] !== '') {
+                if (typeof this.data.meta[x] !== 'undefined' && this.data.meta[x] !== '') {
-				seq.setLight(x, mse.mscript.data.meta[x]);
+                    seq.setLight(x, this.data.meta[x]);
-			} else {
+                }
+                else {
                     seq.setLight(x, light.color);
                 }
-		} else {
+            }
+            else {
                 //unset light?
             }
             grid.state(x);
         }
-};
+    }
-mse.mscript.toSequence = function () {
+    /**
-	'use strict';
+     * Handles compilation of mscript and switches to sequencer
-	const data = mse.mscript.editor.getValue();
+     * GUI after confirmation questions.
-	let cont;
+     **/
-	if (data !== mse.mscript.raw) {
+    toSequence() {
+        const data = this.editor.getValue();
+        let cont = false;
+        if (data !== this.raw) {
             cont = confirm(`Current script has not been compiled. Compile first?`);
             if (cont) {
-			mse.mscript.compile()
+                this.compile();
             }
         }
         mse.console.print(`Sending compiled script to GUI sequencer...`);
         seq.clear();
-	mse.mscript.toGUI();
+        this.toGUI();
         grid.refresh();
         seq.stats();
         return nav.change('sequencer');
     }
-mse.mscript.compile = function () {
+    /**
-	'use strict';
+     * Compiles text in editor using the Mscript library.
-	const data = mse.mscript.editor.getValue();
+     *
-	const mscript = new Mscript();
+     **/
-	let output = mscript.interpret(data);
+    compile() {
-	let len = output.arr.length;
+        const data = this.editor.getValue();
+        const mscript = new mscript_1.Mscript();
+        const output = mscript.interpret(data);
+        const len = output.arr.length;
         const cam2 = typeof output.cam2 !== 'undefined' ? `, CAM2 : ${output.cam2}` : '';
         const proj2 = typeof output.proj2 !== 'undefined' ? `, PROJ2 : ${output.proj2}` : '';
-	
+        const report = `Sequence contains ${len} step${(len === 1 ? '' : 's')}, CAM: ${output.cam}, PROJ: ${output.proj}${cam2}${proj2}`;
-	mse.mscript.raw = data;
+        this.raw = data;
-	mse.mscript.data = output;
+        this.data = output;
         //mse.console.print(JSON.stringify(output, null, '\t') + '\n')
-	mse.console.print(`Sequence contains ${len} step${(len === 1 ? '' : 's')}, CAM: ${output.cam}, PROJ: ${output.proj}${cam2}${proj2}`);
+        mse.console.print(report);
-};
+    }
-
+    /**
-mse.mscript.prepare = function () {
+     * This function re-writes the optional "meta" attribute
-	'use strict';
+     * of an mcopy command object to "light". TODO: change this.
+     * Do not re-write this object and improve the consumers
+     * of the compiled data.
+     **/
+    prepare() {
         const arr = [];
         let obj;
-	for (let i = 0; i < mse.mscript.data.arr.length; i++) {
+        for (let i = 0; i < this.data.arr.length; i++) {
             obj = {
-			cmd : mse.mscript.data.arr[i]
+                cmd: this.data.arr[i]
             };
-		if (typeof mse.mscript.data.meta[i] !== 'undefined' && mse.mscript.data.meta[i] !== '') {
+            if (typeof this.data.meta[i] !== 'undefined' && this.data.meta[i] !== '') {
-			obj.light = mse.mscript.data.meta[i];
+                obj.light = this.data.meta[i];
-		} else {
+            }
+            else {
                 obj.light = light.color.join(',');
             }
             arr.push(obj);
         }
         return arr;
-};
+    }
-
+    /**
-mse.mscript.run = function () {
+     * Method which compiles script if needs and then runs as a sequence.
-	'use strict';
+     **/
-	const data = mse.mscript.editor.getValue();
+    run() {
+        const data = this.editor.getValue();
         let arr;
-	let cont;
+        let cont = false;
-	if (data !== mse.mscript.raw) {
+        if (data !== this.raw) {
             cont = confirm(`Current script has not been compiled. Compile first?`);
             if (cont) {
-			mse.mscript.compile();
+                this.compile();
             }
         }
-	arr = mse.mscript.prepare();
+        arr = this.prepare();
         mse.console.print(`Started running compiled sequence...`);
         gui.overlay(true);
         gui.spinner(true, `Running mscript sequence...`, true, true);
         return seq.exec(arr, 1);
-};
+    }
-
+}
 /*******
- *   gui console
+ *   Mscript GUI Console
  *******/
-mse.console = {};
+class MscriptConsole {
-mse.console.elem = {};
+    /**
-mse.console.init = function () {
+     * Initializes the console by creating the element
-	'use script';
+     * containing the output text and binding to
-	mse.console.elem = $('#console textarea');
+     * keyup event.
-	mse.console.elem.on('keyup', function (e) {
+     **/
+    init() {
+        this.elem = $('#console textarea');
+        this.elem.on('keyup', function (e) {
             var code = e.keyCode || e.which;
             if (code === 13) {
-			mse.console.exec();
+                this.exec();
                 e.preventDefault();
                 return false;
             }
-	});
+        }.bind(this));
-};
+    }
-mse.console.lines = [];
+    /**
-mse.console.parse = function () {
+     * Parse the current state of the console and get the last
-	'use strict';
+     * line to add to the current state array.
-	const lines = mse.console.elem.val().split('\n');
+     **/
+    parse() {
+        const lines = (this.elem.val() + '').split('\n');
         const line = lines[lines.length - 2].replace('>', '').trim();
-	mse.console.lines.push(line);
+        this.lines.push(line);
-};
+    }
-
+    /**
-mse.console.exec = function () {
+     * Executes the command in the last line of the console.
-	'use strict';
+     * TODO: implement the remaining commands. Currently only camera
+     * forward and backward will be executed.
+     **/
+    exec() {
         let command;
-	mse.console.parse();
+        this.parse();
-	command = mse.console.lines[mse.console.lines.length - 1].replace('>', '').trim();
+        command = this.lines[this.lines.length - 1].replace('>', '').trim();
         log.info(command);
-	mse.console.newLine();
+        this.newLine();
         if (mscript.cmd.indexOf(command) !== -1) {
             if (command === 'CF') {
                 cmd.camera_forward(light.color);
-		} else if (cmd === 'CB') {
+            }
+            else if (cmd === 'CB') {
                 cmd.camera_backward(light.color);
             }
         }
-
         if (command === 'compile') {
             mse.mscript.compile();
-	} else if (command === 'run') {
+        }
+        else if (command === 'run') {
             mse.mscript.run();
         }
-};
+    }
-
+    /**
-mse.console.newLine = function () {
+     * Adds a new line to the console after an event
-	'use strict';
+     * and re-establishes the height of the array. Animates
-	let current = mse.console.elem.val();
+     * the console to scroll down to last line.
+     **/
+    newLine() {
+        let current = (this.elem.val() + '');
         let height;
         current += '> ';
-	mse.console.elem.val(current);
+        this.elem.val(current);
-	height = mse.console.elem[0].scrollHeight;
+        height = this.elem[0].scrollHeight;
-	mse.console.elem.animate({
+        this.elem.animate({
             scrollTop: height
         }, 'normal');
-};
+    }
-
+    /**
-mse.console.print = function (str) {
+     * Print string to the console and add new line
-	'use strict'
+     **/
-	let current = mse.console.elem.val();
+    print(str) {
+        let current = (this.elem.val() + '');
         let height;
         current += str;
-	current += '\n> ';
         mse.console.elem.val(current);
         mse.console.elem.focus();
-
+        this.newLine();
-	height = mse.console.elem[0].scrollHeight;
+    }
-	mse.console.elem.animate({
+}
-	    scrollTop : height
+const mse = {
-	},'normal');
+    mscript: new MscriptGUI(),
+    console: new MscriptConsole()
 };
-
 module.exports = mse;
+//# sourceMappingURL=mscript.js.map

app/package-lock.json

@@ -51,6 +51,7 @@
         "winston": "^3.7.2"
       },
       "devDependencies": {
+        "@types/codemirror": "^5.60.5",
         "@types/jquery": "^3.5.14",
         "chai": "^4.3.6",
         "electron": "^19.0.1",
@@ -1045,12 +1046,27 @@
         "@types/responselike": "*"
       }
     },
+    "node_modules/@types/codemirror": {
+      "version": "5.60.5",
+      "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.5.tgz",
+      "integrity": "sha512-TiECZmm8St5YxjFUp64LK0c8WU5bxMDt9YaAek1UqUb9swrSCoJhh92fWu1p3mTEqlHjhB5sY7OFBhWroJXZVg==",
+      "dev": true,
+      "dependencies": {
+        "@types/tern": "*"
+      }
+    },
     "node_modules/@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
       "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
       "devOptional": true
     },
+    "node_modules/@types/estree": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
+      "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
+      "dev": true
+    },
     "node_modules/@types/fs-extra": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.1.tgz",
@@ -1120,6 +1136,15 @@
       "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==",
       "dev": true
     },
+    "node_modules/@types/tern": {
+      "version": "0.23.4",
+      "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.4.tgz",
+      "integrity": "sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
     "node_modules/@types/yauzl": {
       "version": "2.9.1",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.1.tgz",
@@ -12125,12 +12150,27 @@
         "@types/responselike": "*"
       }
     },
+    "@types/codemirror": {
+      "version": "5.60.5",
+      "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.5.tgz",
+      "integrity": "sha512-TiECZmm8St5YxjFUp64LK0c8WU5bxMDt9YaAek1UqUb9swrSCoJhh92fWu1p3mTEqlHjhB5sY7OFBhWroJXZVg==",
+      "dev": true,
+      "requires": {
+        "@types/tern": "*"
+      }
+    },
     "@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
       "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
       "devOptional": true
     },
+    "@types/estree": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
+      "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
+      "dev": true
+    },
     "@types/fs-extra": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.1.tgz",
@@ -12200,6 +12240,15 @@
       "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==",
       "dev": true
     },
+    "@types/tern": {
+      "version": "0.23.4",
+      "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.4.tgz",
+      "integrity": "sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "*"
+      }
+    },
     "@types/yauzl": {
       "version": "2.9.1",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.9.1.tgz",

app/package.json

@@ -35,6 +35,7 @@
   },
   "homepage": "https://github.com/sixteenmillimeter/mcopy#readme",
   "devDependencies": {
+    "@types/codemirror": "^5.60.5",
     "@types/jquery": "^3.5.14",
     "chai": "^4.3.6",
     "electron": "^19.0.1",

app/src/lib/ui/mscript.ts

@@ -0,0 +1,320 @@
+'use strict';
+
+/// <reference path ="jquery.d.ts"/> 
+
+import { Mscript } from 'mscript';
+
+declare var nav : any;
+declare var gui : any;
+declare var CodeMirror : any;
+declare var mscript : any;
+declare var cmd : any;
+
+interface MSE {
+	mscript : MscriptGUI,
+	console : MscriptConsole
+}
+
+/******
+	Mscript GUI
+*******/
+
+class MscriptGUI {
+	public editor : any = {};
+	public data : any = {};
+	public raw : string = '';
+
+	constructor () {
+
+	}
+
+	/**
+	 * Initializes the mscript GUI. Sets up CodeMirror instance,
+	 * binds events and sets height of editor.
+	 **/
+	public init () {
+		const startingScript : string = `CF 1
+PF 1`; 
+		const editorHeight : number = $(window).height() - $('footer').eq(0).height() - 30;
+		const editorElem : HTMLTextAreaElement = document.getElementById('editor') as HTMLTextAreaElement;
+		const editorConfig : any = {
+			lineNumbers: true,
+			mode: 'python',
+			matchBrackets: true,
+			theme: 'monokai'
+		};
+		$('#editor').val(startingScript);
+		this.editor = CodeMirror.fromTextArea(editorElem, editorConfig);
+		this.editor.setSize(null, editorHeight);
+		this.editor.on('change', (e : Event) => { });
+		$(document).on('resize', function (e : Event) {
+			this.editor.setSize(null, editorHeight);
+		}.bind(this));
+	}
+
+	/**
+	 * Callback for when open event occurs.
+	 **/
+	public open () {
+		//recalcuate in case resize has occurred needed
+		const editorHeight : number = $(window).height() - $('footer').eq(0).height() - 30;
+		this.editor.setSize(null, editorHeight);
+		this.editor.refresh();
+	}
+
+	/**
+	 * Create script from the sequencer's current state.
+	 * Previous comment: ehhhh
+	 * TODO: Make this smarter.
+	 **/
+	 fromSequence () {
+		let str : string;
+		let tmp : any[] = [];
+		let cont : boolean;
+		let cmd : string;
+		
+		//str = seq.grid.map(step => { return step.cmd }).join('\n'); //quick hack
+		//console.dir(seq.grid);
+
+		for (let step of seq.grid) {
+			if (!step || !step.cmd) {
+				continue;
+			}
+			cmd = step.cmd;
+			if (tmp.length > 0 && tmp[tmp.length - 1].cmd === cmd) {
+				tmp[tmp.length - 1].num++;
+				continue;
+			}
+			tmp.push({ cmd, num : 1 });
+		}
+
+		tmp = tmp.map(line => {
+			return `${line.cmd} ${line.num}`
+		})
+
+		if (seq.gridLoops > 1) {
+			tmp.map(line => {
+				return `	${line}`;
+			})
+			tmp.reverse();
+			tmp.push(`LOOP ${seq.gridLoops}`);
+			tmp.reverse();
+			tmp.push('END');
+		}
+
+		str = tmp.join('\n');
+
+		nav.change('script');
+		cont = confirm(`Are you sure you want to over-write the current sequence?`);
+		if (cont) {
+			this.editor.getDoc().setValue(str);
+		}
+	}
+
+	/**
+	 * Take current compiled mscript state and send it to the sequencer
+	 * GUI. TODO: Add confirm step if sequence is longer than X steps.
+	 * TODO: Make this smarter (detect outer non-fade loop and assign to loop counter)
+	 **/ 
+	toGUI () {
+		let c : string;
+		let step : string;
+		for (let x : number = 0; x < this.data.arr.length; x++) {
+			c = this.data.arr[x];
+			seq.set(x, c);
+			if (c === 'CF' || c === 'CB') {
+				if (typeof this.data.meta[x] !== 'undefined' && this.data.meta[x] !== '') {
+					seq.setLight(x, this.data.meta[x]);
+				} else {
+					seq.setLight(x, light.color);
+				}
+			} else {
+				//unset light?
+			}
+			grid.state(x);
+		}
+	}
+
+	/**
+	 * Handles compilation of mscript and switches to sequencer
+	 * GUI after confirmation questions.
+	 **/
+	 toSequence () {
+		const data : string = this.editor.getValue();
+		let cont : boolean = false;
+		if (data !== this.raw) {
+			cont = confirm(`Current script has not been compiled. Compile first?`);
+			if (cont) {
+				this.compile()
+			}
+		}
+		mse.console.print(`Sending compiled script to GUI sequencer...`);
+		seq.clear();
+		this.toGUI();
+		grid.refresh();
+		seq.stats();
+		return nav.change('sequencer');
+	}
+
+	/**
+	 * Compiles text in editor using the Mscript library.
+	 * 
+	 **/
+	 compile () {
+		const data : string = this.editor.getValue();
+		const mscript : Mscript = new Mscript();
+		const output : any = mscript.interpret(data);
+		const len : number = output.arr.length;
+		const cam2 : string = typeof output.cam2 !== 'undefined' ? `, CAM2 : ${output.cam2}` : '';
+		const proj2 : string = typeof output.proj2 !== 'undefined' ? `, PROJ2 : ${output.proj2}` : '';
+		const report : string = `Sequence contains ${len} step${(len === 1 ? '' : 's')}, CAM: ${output.cam}, PROJ: ${output.proj}${cam2}${proj2}`;
+
+		this.raw = data;
+		this.data = output;
+		//mse.console.print(JSON.stringify(output, null, '\t') + '\n')
+		mse.console.print(report);
+	}
+
+	/**
+	 * This function re-writes the optional "meta" attribute
+	 * of an mcopy command object to "light". TODO: change this.
+	 * Do not re-write this object and improve the consumers
+	 * of the compiled data.
+	 **/
+	prepare () {
+		const arr : any[] = [];
+		let obj : any;
+		for (let i : number = 0; i < this.data.arr.length; i++) {
+			obj = {
+				cmd : this.data.arr[i]
+			};
+			if (typeof this.data.meta[i] !== 'undefined' && this.data.meta[i] !== '') {
+				obj.light = this.data.meta[i];
+			} else {
+				obj.light = light.color.join(',');
+			}
+			arr.push(obj);
+		}
+		return arr;
+	}
+
+	/**
+	 * Method which compiles script if needs and then runs as a sequence.
+	 **/
+	run () {
+		const data : string = this.editor.getValue();
+		let arr : any[];
+		let cont : boolean = false;
+		if (data !== this.raw) {
+			cont = confirm(`Current script has not been compiled. Compile first?`);
+			if (cont) {
+				this.compile();
+			}
+		}
+		arr = this.prepare();
+		mse.console.print(`Started running compiled sequence...`);
+		gui.overlay(true);
+		gui.spinner(true, `Running mscript sequence...`, true, true);
+		return seq.exec(arr, 1);
+	}
+}
+
+
+/*******
+ *   Mscript GUI Console
+ *******/
+
+class MscriptConsole {
+	public elem : JQuery;
+	private lines : string[];
+	
+
+	/**
+	 * Initializes the console by creating the element
+	 * containing the output text and binding to
+	 * keyup event.
+	 **/
+	public init () {
+		this.elem = $('#console textarea');
+		this.elem.on('keyup', function (e : KeyboardEvent) {
+			var code : number = e.keyCode || e.which;
+			if (code === 13) {
+				this.exec();
+				e.preventDefault();
+				return false;
+			}
+		}.bind(this));
+	}
+	
+	/**
+	 * Parse the current state of the console and get the last
+	 * line to add to the current state array.
+	 **/
+	parse () {
+		const lines : string[] = (this.elem.val() + '').split('\n');
+		const line : string = lines[lines.length - 2].replace('>', '').trim();
+		this.lines.push(line);
+	}
+
+	/**
+	 * Executes the command in the last line of the console.
+	 * TODO: implement the remaining commands. Currently only camera
+	 * forward and backward will be executed.
+	 **/
+	exec () {
+		let command : string;
+		this.parse();
+		command = this.lines[this.lines.length - 1].replace('>', '').trim();
+		log.info(command);
+		this.newLine();
+		if (mscript.cmd.indexOf(command) !== -1) {
+			if (command === 'CF') {
+				cmd.camera_forward(light.color);
+			} else if (cmd === 'CB') {
+				cmd.camera_backward(light.color);
+			}
+		}
+
+		if (command === 'compile') {
+			mse.mscript.compile();
+		} else if (command === 'run') {
+			mse.mscript.run();
+		}
+	}
+
+	/**
+	 * Adds a new line to the console after an event
+	 * and re-establishes the height of the array. Animates
+	 * the console to scroll down to last line.
+	 **/
+	newLine () {
+		let current : string = (this.elem.val() + '');
+		let height : number;
+		current += '> ';
+		this.elem.val(current);
+		height = this.elem[0].scrollHeight;
+		this.elem.animate({
+		    scrollTop : height
+		}, 'normal');
+	}
+
+	/**
+	 * Print string to the console and add new line
+	 **/
+	print (str : string) {
+		let current : string = (this.elem.val() + '');
+		let height : number;
+		current += str;
+		mse.console.elem.val(current);
+		mse.console.elem.focus();
+
+		this.newLine();
+	}
+}
+
+const mse : MSE = {
+	mscript : new MscriptGUI(),
+	console : new MscriptConsole()
+};
+
+module.exports = mse;

app/tsconfig.json

@@ -11,7 +11,8 @@
         "outDir": "./",
         "rootDir" : "./src/",
         "paths" : {
-            "log" : ["./lib/log"]
+            "log" : ["./lib/log"],
+            "mscript" : ["./lib/mscript"]
         }
     },
     "exclude" : [

src/mscript/index.ts

@@ -72,8 +72,8 @@ const ALTS : any = {
     'PBPF' : [ ]
 };
 
-const PAUSE = 'PAUSE';
+const PAUSE : string = 'PAUSE';
-const ALERT = 'ALERT';
+const ALERT : string = 'ALERT';
 
 /** helper functions */
 
@@ -86,20 +86,24 @@ const ALERT = 'ALERT';
  **/
 function startsWith (str : string, target : string, position? : number) : boolean {
 	const { length } = str;
+
 	position = position == null ? 0 : position;
+
 	if (position < 0) {
 		position = 0;
 	} else if (position > length) {
 		position = length;
 	}
+
 	target = `${target}`;
+
 	return str.slice(position, position + target.length) == target;
 }
 
 /** class Mscript */
-class Mscript {
+export class Mscript {
 	output : any;
-	lines : any[];
+	lines : string[];
 	cam : number;
 	cam2 : number;
 	proj : number;
@@ -159,7 +163,7 @@ class Mscript {
 	 *
 	 * @returns {object} if callback is not provided
 	 */
-	interpret (text : string, callback : Function) {
+	interpret (text : string, callback : Function = null) {
 		this.clear()
 
 		if (typeof text === 'undefined') {
@@ -228,7 +232,7 @@ class Mscript {
 			this.output.proj2 = this.proj2;
 		}
 
-		if (typeof callback !== 'undefined') {
+		if (typeof callback !== 'undefined' && callback != null) {
 			//should only be invoked by running mscript.tests()
 			callback(this.output);
 		} else {

tsconfig.json

@@ -7,6 +7,7 @@
         "moduleResolution": "node",
         "sourceMap": true,
         "removeComments" : false,
+        "declaration" : true,
         "baseUrl" : "lib",
         "outDir": "./lib/",
         "rootDir" : "./src/",