Fix web debug layout. Added command execution from web UI

code/espurna/config/general.h

@@ -95,14 +95,16 @@
 //------------------------------------------------------------------------------
 
 #ifndef DEBUG_WEB_SUPPORT
-#define DEBUG_WEB_SUPPORT    WEB_SUPPORT  // Enable web debug log if web is enabled too
+#define DEBUG_WEB_SUPPORT       WEB_SUPPORT  // Enable web debug log if web is enabled too
 #endif
 
 #if DEBUG_WEB_SUPPORT
 #undef WEB_SUPPORT
-#define WEB_SUPPORT             1         // Chicken and egg :)
+#define WEB_SUPPORT             1           // Chicken and egg :)
 #endif
 
+#define DEBUG_WEB_ENABLED       1           // Enable debug output by default
+
 //------------------------------------------------------------------------------
 
 // General debug options and macros

code/espurna/config/prototypes.h

@@ -63,6 +63,7 @@ template<typename T> String getSetting(const String& key, unsigned int index, T
 bool settingsGetJson(JsonObject& data);
 bool settingsRestoreJson(JsonObject& data);
 void settingsRegisterCommand(const String& name, void (*call)(Embedis*));
+void settingsInject(void *data, size_t len);
 
 // -----------------------------------------------------------------------------
 // I2C

code/espurna/debug.ino

@@ -62,15 +62,16 @@ void _debugSend(char * message) {
 
     #if DEBUG_WEB_SUPPORT
         #if DEBUG_ADD_TIMESTAMP
-            wsSend_P(PSTR("{\"weblog\": \"%s %s\"}"), timestamp, message);
+            wsSend_P(PSTR("{\"weblog\": \"%s%s\"}"), timestamp, message);
         #else
             wsSend_P(PSTR("{\"weblog\": \"%s\"}"), message);
         #endif
     #endif
 
-
 }
 
+// -----------------------------------------------------------------------------
+
 void debugSend(const char * format, ...) {
 
     va_list args;
@@ -106,6 +107,27 @@ void debugSend_P(PGM_P format_P, ...) {
 
 }
 
+#if DEBUG_WEB_SUPPORT
+
+void debugSetup() {
+
+    wsOnSendRegister([](JsonObject& root) {
+        root["dbgVisible"] = 1;
+    });
+
+    wsOnActionRegister([](uint32_t client_id, const char * action, JsonObject& data) {
+        if (strcmp(action, "dbgcmd") == 0) {
+            const char* command = data.get<const char*>("command");
+            char buffer[strlen(command) + 2];
+            snprintf(buffer, sizeof(buffer), "%s\n", command);
+            settingsInject((void*) buffer, strlen(buffer));
+        }
+    });
+
+}
+
+#endif // DEBUG_WEB_SUPPORT
+
 // -----------------------------------------------------------------------------
 // Save crash info
 // Taken from krzychb EspSaveCrash

code/espurna/espurna.ino

@@ -80,6 +80,9 @@ void setup() {
         webSetup();
         wsSetup();
         apiSetup();
+        #if DEBUG_WEB_SUPPORT
+            debugSetup();
+        #endif
     #endif
 
     // lightSetup must be called before relaySetup

code/espurna/ws.ino

@@ -275,7 +275,6 @@ void _wsOnStart(JsonObject& root) {
 
         root["wsAuth"] = getSetting("wsAuth", WS_AUTHENTICATION).toInt() == 1;
 
-
     }
 
 }
@@ -364,16 +363,6 @@ void wsSend(const char * payload) {
     }
 }
 
-/*
-void wsSend_P(PGM_P payload) {
-    if (_ws.count() > 0) {
-        char buffer[strlen_P(payload)];
-        strcpy_P(buffer, payload);
-        _ws.textAll(buffer);
-    }
-}
-*/
-
 void wsSend_P(PGM_P format_P, ...) {
     if (_ws.count() > 0) {
         char format[strlen_P(format_P)+1];

code/html/custom.css

@@ -121,6 +121,14 @@ div.state {
     text-align: right;
 }
 
+.terminal {
+    font-family: 'Courier New', monospace !important;
+    font-size: 80%  !important;
+    line-height: 100%  !important;
+    background-color: #000  !important;
+    color: #0F0 !important;
+}
+
 /* -----------------------------------------------------------------------------
     Buttons
    -------------------------------------------------------------------------- */
@@ -163,6 +171,7 @@ div.state {
 .button-ha-config,
 .button-settings-backup,
 .button-settings-restore,
+.button-dbgcmd,
 .button-apikey {
     background: rgb(0, 192, 0); /* green */
 }
@@ -175,6 +184,7 @@ div.state {
 }
 
 .button-upgrade-browse,
+.button-dbgcmd,
 .button-ha-add,
 .button-apikey,
 .button-upgrade {
@@ -281,19 +291,15 @@ span.slider {
 
 #haConfig,
 #scanResult {
-    color: #888;
-    font-family: 'Courier New', monospace;
-    font-size: 60%;
     margin-top: 10px;
+    display: none;
+    padding: 10px;
 }
 
 /* -----------------------------------------------------------------------------
     Logs
    -------------------------------------------------------------------------- */
+
 #weblog {
-  font-family: 'Courier New', monospace;
-  font-size: 60%;
-  resize: none;
-  height: 300px;
-  line-height: 100%;
+    height: 400px;
 }

code/html/custom.js

@@ -74,6 +74,17 @@ function magnitudeError(error) {
 // Utils
 // -----------------------------------------------------------------------------
 
+$.fn.enterKey = function (fnc) {
+    return this.each(function () {
+        $(this).keypress(function (ev) {
+            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
+            if (keycode == '13') {
+                fnc.call(this, ev);
+            }
+        })
+    })
+}
+
 function keepTime() {
     if (0 === now) { return; }
     var date = new Date(now * 1000);
@@ -523,6 +534,14 @@ function doHAConfig() {
     return false;
 }
 
+function doDebugCommand() {
+    var el = $("input[name='dbgcmd']");
+    var command = el.val();
+    el.val("");
+    sendAction("dbgcmd", {command: command});
+    return false;
+}
+
 // -----------------------------------------------------------------------------
 // Visualization
 // -----------------------------------------------------------------------------
@@ -1013,6 +1032,15 @@ function processData(data) {
 
         if ("scanResult" === key) {
             $("div.scan.loading").hide();
+            $("#scanResult").show();
+        }
+
+        // -----------------------------------------------------------------------------
+        // Home Assistant
+        // -----------------------------------------------------------------------------
+
+        if ("haConfig" === key) {
+            $("#haConfig").show();
         }
 
         // -----------------------------------------------------------------------------
@@ -1106,7 +1134,8 @@ function processData(data) {
         }
 
         if ("weblog" === key) {
-            document.getElementById("weblog").value += value;
+            $("#weblog").append(value);
+            $("#weblog").scrollTop($("#weblog")[0].scrollHeight - $("#weblog").height());
             return;
         }
 
@@ -1275,6 +1304,8 @@ $(function() {
     $(".button-reconnect").on("click", doReconnect);
     $(".button-wifi-scan").on("click", doScan);
     $(".button-ha-config").on("click", doHAConfig);
+    $(".button-dbgcmd").on("click", doDebugCommand);
+    $("input[name='dbgcmd']").enterKey(doDebugCommand);
     $(".button-settings-backup").on("click", doBackup);
     $(".button-settings-restore").on("click", doRestore);
     $(".button-settings-factory").on("click", doFactoryReset);

code/html/index.html

@@ -138,6 +138,10 @@
                             <a href="#" class="pure-menu-link" data="panel-admin">ADMIN</a>
                         </li>
 
+                        <li class="pure-menu-item module module-dbg">
+                            <a href="#" class="pure-menu-link" data="panel-dbg">DEBUG</a>
+                        </li>
+
                     </ul>
 
                     <div class="main-buttons">
@@ -180,6 +184,7 @@
                                 <div id="magnitudes"></div>
 
                                 <div class="pure-u-1 pure-u-lg-1-2 state">
+
                                     <div class="pure-u-1-2">Manufacturer</div>
                                     <div class="pure-u-11-24"><span class="right" name="manufacturer"></span></div>
 
@@ -207,16 +212,16 @@
                                     <div class="pure-u-1-2">Load average</div>
                                     <div class="pure-u-11-24"><span class="right" name="loadaverage"></span><span>%</span></div>
 
-                                    <div class="pure-u-1-2">Vcc</div>
+                                    <div class="pure-u-1-2">VCC</div>
                                     <div class="pure-u-11-24"><span class="right" name="vcc"></span><span>mV</span></div>
 
-
                                     <div class="pure-u-1-2">MQTT Status</div>
                                     <div class="pure-u-11-24"><span class="right" name="mqttStatus">NOT AVAILABLE</span></div>
 
                                 </div>
 
-                                <div class="pure-u-1 pure-u-lg-11-24">
+                                <div class="pure-u-1 pure-u-lg-11-24 state">
+
                                     <div class="pure-u-1-2">Wifi MAC</div>
                                     <div class="pure-u-11-24"><span class="right" name="mac"></span></div>
 
@@ -251,14 +256,6 @@
                                     <div class="pure-u-11-24"><span class="right" name="ago">?</span><span> seconds ago</span></div>
                                 </div>
 
-                                <div class="header">
-                                    <h2>Debug log</h2>
-                                </div>
-
-                                <div class="pure-g">
-                                    <textarea class="pure-u-1" readonly id="weblog" name="weblog" wrap="off"></textarea>
-                                </div>
-
                             </fieldset>
 
                         </form>
@@ -582,8 +579,7 @@
                                 </div>
 
                                 <div class="pure-g">
-                                    <div class="pure-u-0 pure-u-lg-1-4"></div>
-                                    <span class="pure-u-1 pure-u-lg-3-4" id="scanResult" name="scanResult"></span>
+                                    <span class="pure-u-1 terminal" id="scanResult" name="scanResult"></span>
                                 </div>
 
                                 <legend>Networks</legend>
@@ -857,8 +853,7 @@
                                     </div>
                                 </div>
                                 <div class="pure-g">
-                                    <div class="pure-u-0 pure-u-lg-1-4"></div>
-                                    <div class="pure-u-1 pure-u-lg-3-4"><span id="haConfig" name="haConfig"></span></div>
+                                    <span class="pure-u-1 terminal" id="haConfig" name="haConfig"></span>
                                 </div>
 
 
@@ -957,6 +952,37 @@
 
                     </div>
 
+                    <div class="panel" id="panel-dbg">
+
+                        <div class="header">
+                            <h1>DEBUG LOG</h1>
+                            <h2>
+                                Shows debug messages from the device
+                            </h2>
+                        </div>
+
+                        <div class="page">
+
+                            <fieldset>
+
+                                <div class="pure-g module module-telnet">
+                                    <div class="pure-u-1 hint">
+                                        Write a command and click send to execute it on the device. The output will be shown in the debug text area below.
+                                    </div>
+                                    <input name="dbgcmd" class="pure-u-3-4" type="text" tabindex="2" />
+                                    <div class=" pure-u-1-4 pure-u-lg-1-4"><button class="pure-button button-dbgcmd pure-u-23-24">Send</button></div>
+                                </div>
+
+                                <div class="pure-g">
+                                    <textarea class="pure-u-1 terminal" id="weblog" name="weblog" wrap="off" readonly></textarea>
+                                </div>
+
+                            </fieldset>
+
+                        </div>
+
+                    </div>
+
                     <div class="panel" id="panel-sensors">
 
                         <div class="header">