CLI Tab rework

tabs/cli old.css

@@ -0,0 +1,53 @@
+.tab-cli {
+    height: 100%;
+}
+.tab-cli p {
+    padding: 5px;
+    border: 1px dotted silver;
+}
+.tab-cli .backdrop {
+    border: 1px solid silver;
+    background-color: rgba(0,0,0,0.75);
+
+    margin-top: 10px;
+    height: calc(100% - 80px); /* - (p, textarea) */
+    background-image: url("../images/light-wide-1.svg");
+    background-repeat: no-repeat;
+    background-position: 50% 80%;
+    background-size: 600px;
+}
+.tab-cli .window {
+    height:100%;
+    padding: 5px;
+
+    overflow-y: scroll;
+    overflow-x: hidden;
+
+    font-family: monospace;
+    color: white;
+
+    box-sizing: border-box;
+    -webkit-user-select: text;
+}
+.tab-cli textarea {
+    -webkit-box-sizing: border-box;
+
+    width: 100%;
+
+    margin-top: 8px;
+
+    height: 22px;
+    line-height: 20px;
+
+    padding-left: 5px;
+
+    border: 1px solid silver;
+
+    resize: none;
+}
+.tab-cli #content-watermark {
+    z-index:0;
+}
+.tab-cli .window .wrapper {
+    white-space: pre-wrap;
+}

tabs/cli old.html

@@ -0,0 +1,10 @@
+<div class="tab-cli">
+    <p i18n="cliInfo">
+    </p>
+    <div class="backdrop">
+      <div class="window">
+          <div class="wrapper"></div>
+      </div>
+    </div>
+    <textarea name="commands" i18n_placeholder="cliInputPlaceholder" rows="1" cols="0"></textarea>
+</div>

tabs/cli old.js

@@ -0,0 +1,202 @@
+'use strict';
+
+TABS.cli = {
+    'validateText': "",
+    'sequenceElements': 0
+};
+
+TABS.cli.initialize = function (callback) {
+    var self = this;
+
+    if (GUI.active_tab != 'cli') {
+        GUI.active_tab = 'cli';
+        googleAnalytics.sendAppView('CLI');
+    }
+
+    $('#content').load("./tabs/cli.html", function () {
+        // translate to user-selected language
+        localize();
+
+        CONFIGURATOR.cliActive = true;
+
+        // Enter CLI mode
+        var bufferOut = new ArrayBuffer(1);
+        var bufView = new Uint8Array(bufferOut);
+
+        bufView[0] = 0x23; // #
+
+        serial.send(bufferOut);
+
+        var textarea = $('.tab-cli textarea');
+
+        textarea.keypress(function (event) {
+            if (event.which == 13) { // enter
+                event.preventDefault(); // prevent the adding of new line
+
+                var out_string = textarea.val();
+                var out_arr = out_string.split("\n");
+                self.history.add(out_string.trim());
+
+                var timeout_needle = 0;
+                for (var i = 0; i < out_arr.length; i++) {
+                    self.sendSlowly(out_arr, i, timeout_needle++);
+                }
+
+                textarea.val('');
+            }
+        });
+
+        textarea.keyup(function (event) {
+            var keyUp = {38: true},
+                keyDown = {40: true};
+
+            if (event.keyCode in keyUp) {
+                textarea.val(self.history.prev());
+            }
+
+            if (event.keyCode in keyDown) {
+                textarea.val(self.history.next());
+            }
+        });
+
+        // give input element user focus
+        textarea.focus();
+
+        if (callback) callback();
+    });
+};
+
+TABS.cli.history = {
+    history: [],
+    index:  0
+};
+
+TABS.cli.history.add = function (str) {
+    this.history.push(str);
+    this.index = this.history.length;
+};
+TABS.cli.history.prev = function () {
+    if (this.index > 0) this.index -= 1;
+    return this.history[this.index];
+};
+TABS.cli.history.next = function () {
+    if (this.index < this.history.length) this.index += 1;
+    return this.history[this.index - 1];
+};
+
+TABS.cli.sendSlowly = function (out_arr, i, timeout_needle) {
+    GUI.timeout_add('CLI_send_slowly', function () {
+        var bufferOut = new ArrayBuffer(out_arr[i].length + 1);
+        var bufView = new Uint8Array(bufferOut);
+
+        for (var c_key = 0; c_key < out_arr[i].length; c_key++) {
+            bufView[c_key] = out_arr[i].charCodeAt(c_key);
+        }
+
+        bufView[out_arr[i].length] = 0x0D; // enter (\n)
+
+        serial.send(bufferOut);
+    }, timeout_needle * 5);
+};
+
+TABS.cli.read = function (readInfo) {
+    /*  Some info about handling line feeds and carriage return
+
+        line feed = LF = \n = 0x0A = 10
+        carriage return = CR = \r = 0x0D = 13
+
+        MAC only understands CR
+        Linux and Unix only understand LF
+        Windows understands (both) CRLF
+        Chrome OS currenty unknown
+    */
+    var data = new Uint8Array(readInfo.data),
+        text = "";
+
+    for (var i = 0; i < data.length; i++) {
+        if (CONFIGURATOR.cliValid) {
+            if (data[i] == 27 || this.sequenceElements > 0) { // ESC + other
+                this.sequenceElements++;
+
+                // delete previous space
+                if (this.sequenceElements == 1) {
+                    text = text.substring(0, text.length -1);
+                }
+
+                // Reset
+                if (this.sequenceElements >= 5) {
+                    this.sequenceElements = 0;
+                }
+            }
+
+            if (this.sequenceElements == 0) {
+                switch (data[i]) {
+                    case 10: // line feed
+                        if (GUI.operating_system != "MacOS") {
+                            text += "<br />";
+                        }
+                        break;
+                    case 13: // carriage return
+                        if (GUI.operating_system == "MacOS") {
+                            text += "<br />";
+                        }
+                        break;
+                    case 60:
+                        text += '&lt';
+                        break;
+                    case 62:
+                        text += '&gt';
+                        break;
+                        
+                    default:
+                        text += String.fromCharCode(data[i]);
+                }
+            }
+        } else {
+            // try to catch part of valid CLI enter message
+            this.validateText += String.fromCharCode(data[i]);
+        }
+    }
+
+    if (!CONFIGURATOR.cliValid && this.validateText.indexOf('CLI') != -1) {
+        CONFIGURATOR.cliValid = true;
+        this.validateText = "";
+
+        text = "Entering CLI Mode, type 'exit' to return, or 'help'<br /><br /># ";
+    }
+
+    $('.tab-cli .window .wrapper').append(text);
+    $('.tab-cli .window').scrollTop($('.tab-cli .window .wrapper').height());
+
+    // there seems to be some sort of initial rendering glitch in 33+, we will force redraw/refill
+    $('.tab-cli .window .wrapper').css('webkitTransform', 'scale(1)');
+};
+
+TABS.cli.cleanup = function (callback) {
+    if (!CONFIGURATOR.connectionValid) {
+        if (callback) callback();
+        return;
+    }
+
+    var bufferOut = new ArrayBuffer(5);
+    var bufView = new Uint8Array(bufferOut);
+
+    bufView[0] = 0x65; // e
+    bufView[1] = 0x78; // x
+    bufView[2] = 0x69; // i
+    bufView[3] = 0x74; // t
+    bufView[4] = 0x0D; // enter
+
+    serial.send(bufferOut, function (writeInfo) {
+        // we could handle this "nicely", but this will do for now
+        // (another approach is however much more complicated):
+        // we can setup an interval asking for data lets say every 200ms, when data arrives, callback will be triggered and tab switched
+        // we could probably implement this someday
+        GUI.timeout_add('waiting_for_bootup', function waiting_for_bootup() {
+            CONFIGURATOR.cliActive = false;
+            CONFIGURATOR.cliValid = false;
+
+            if (callback) callback();
+        }, 5000); // if we dont allow enough time to reboot, CRC of "first" command sent will fail, keep an eye for this one
+    });
+};

tabs/cli.css

@@ -2,22 +2,29 @@
     height: 100%;
 }
 .tab-cli p {
-    padding: 5px;
-    border: 1px dotted silver;
+    padding: 0px;
+    border: 0px dotted silver;
 }
 .tab-cli .backdrop {
     border: 1px solid silver;
     background-color: rgba(0,0,0,0.75);
 
-    margin-top: 10px;
-    height: calc(100% - 80px); /* - (p, textarea) */
-    background-image: url("../images/light-wide-1.svg");
-    background-repeat: no-repeat;
+    margin-top: 0px;
+    height: calc(100% - 90px); /* - (p, textarea) */
+   /* background-image: url("../images/light-wide-1.svg");*/
+  	background-image: url("../images/cli_backdrop.png");
+    /*background-repeat: no-repeat;
     background-position: 50% 80%;
-    background-size: 600px;
+    background-size: 600px;*/
+    border-radius: 5px;
+   /* box-shadow: inset 0px 0px 30px rgba(0,0,0,0.80);*/
+   float:left;
+       width:100%;
+
 }
 .tab-cli .window {
     height:100%;
+    width:100%;
     padding: 5px;
 
     overflow-y: scroll;
@@ -28,6 +35,8 @@
 
     box-sizing: border-box;
     -webkit-user-select: text;
+       float:left;
+
 }
 .tab-cli textarea {
     -webkit-box-sizing: border-box;

tabs/cli.html

@@ -1,6 +1,9 @@
 <div class="tab-cli">
-    <p i18n="cliInfo">
-    </p>
+    
+    <div class="note" style="margin-bottom:20px;">
+          <div class="note_spacer"><p i18n="cliInfo"></p></div>
+        </div>     
+         
     <div class="backdrop">
       <div class="window">
           <div class="wrapper"></div>