Debug interface: Add log and handle disconnections.

diff --git a/controlpi_plugins/web/Debug/controlpi-debug.css b/controlpi_plugins/web/Debug/controlpi-debug.css
index e8e015f05150c8cdf9d6b7179ec2ddd406274794..dd7a1e51f976156ec511462796dd21638ea297a0 100644 (file)
--- a/controlpi_plugins/web/Debug/controlpi-debug.css
+++ b/controlpi_plugins/web/Debug/controlpi-debug.css
@@ -1,14 +1,29 @@
+/* *** */
+/* Log */
+/* *** */
+.log {
+    margin: 5px;
+    padding: 5px;
+    border: 1px solid blue;
+    border-radius: 5px;
+    max-height: 300px;
+    overflow: scroll;
+    font-family: monospace;
+    font-size: 8pt;
+    white-space: pre;
+}
+
 /* ************************************************** */
 /* Client container, clients and interface containers */
 /* ************************************************** */
-.clientcontainer {
+.container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     padding-right: 5px;
     padding-bottom: 5px;
 }
-.clientcontainer > * {
+.container > * {
     margin-top: 5px;
     margin-left: 5px;
 }

diff --git a/controlpi_plugins/web/Debug/controlpi-debug.js b/controlpi_plugins/web/Debug/controlpi-debug.js
index c7656b805ba3e07153bfe68d118bd98d054da6cc..f6e06228bdb753f9498048ae75e9ee7aae8c481c 100644 (file)
--- a/controlpi_plugins/web/Debug/controlpi-debug.js
+++ b/controlpi_plugins/web/Debug/controlpi-debug.js
@@ -1,24 +1,59 @@
-// Open Websocket back to ControlPi we were loaded from:
-const websocket = new WebSocket("ws://" + window.location.host)
+var timeout = 125
 
-// When Websocket is ready request all clients from bus:
-websocket.addEventListener('open', function (event) {
-    websocket.send(JSON.stringify({target: '', command: 'get clients'}))
-})
+function connect() {
+    // Open websocket back to ControlPi we were loaded from:
+    const ws = new WebSocket("ws://" + window.location.host)
 
-// When receiving message from ControlPi through Websocket:
-websocket.addEventListener('message', function (event) {
-    const message = JSON.parse(event.data)
-    if (message['sender'] == '') {
-        processBusMessage(message)
-    } else {
-        processClientMessage(message)
-    }
-})
+    // When websocket is ready request all clients from bus:
+    ws.addEventListener('open', function (e) {
+        timeout = 125
+        ws.send(JSON.stringify({target: '', command: 'get clients'}))
+    })
+
+    // When websocket goes away delete all clients from the container and
+    // try to reconnect:
+    ws.addEventListener('close', function (e) {
+        const container = document.getElementById('web-debug-container')
+        while (container.firstChild) {
+            container.removeChild(container.lastChild);
+        }
+        const log = document.getElementById('web-debug-log')
+        log.innerHTML += `Connection closed: ${e.reason}<br />`
+        if (timeout < 8000) {
+            timeout *= 2
+        }
+        log.innerHTML += `Trying to reconnect in ${timeout/1000} s …<br />`
+        log.scrollTop = log.scrollHeight
+        setTimeout(function() {
+            connect()
+        }, timeout)
+    })
+    ws.addEventListener('error', function (e) {
+        const log = document.getElementById('web-debug-log')
+        log.innerHTML += `Error: ${e.message} <br />`
+        log.innerHTML += "Closing connection …<br />"
+        log.scrollTop = log.scrollHeight
+        ws.close()
+    })
+
+    // When receiving message from ControlPi through websocket process it:
+    ws.addEventListener('message', function (e) {
+        const message = JSON.parse(e.data)
+        if (message['sender'] == '') {
+            processBusMessage(message, ws)
+        } else {
+            processClientMessage(message)
+        }
+        const log = document.getElementById('web-debug-log')
+        log.innerHTML += JSON.stringify(message, null, 4) + '<br />'
+        log.scrollTop = log.scrollHeight
+    })
+}
+connect()
 
 // Remove (if unregistered) or create (if not existent) elements for
 // clients and update interface information:
-function processBusMessage(message) {
+function processBusMessage(message, ws) {
     if (message['event'] == 'unregistered') {
         // On deregistration delete client element if it exists:
         const clientElement = document.getElementById(message['client'])
@@ -30,16 +65,16 @@ function processBusMessage(message) {
         const clientElement = document.getElementById(message['client'])
         if (clientElement == null) {
             // Create element for client if not existent:
-            const main = document.getElementById('ControlPi Debug')
-            main.appendChild(createClient(message['client'],
-                                             message['plugin']))
+            const container = document.getElementById('web-debug-container')
+            container.appendChild(createClient(message['client'],
+                                               message['plugin']))
         }
         // Crate message elements for receives interface:
         const receiveContainer = document.getElementById(message['client'] + ' Receives')
         receiveContainer.innerHTML = ''
         for (const template of message['receives']) {
             if (template['command'] != null) {
-                receiveContainer.appendChild(createForCommand(template))
+                receiveContainer.appendChild(createForCommand(template, ws))
             } else {
                 receiveContainer.appendChild(createObject(template, 'template'))
             }
@@ -59,8 +94,8 @@ function processClientMessage(message) {
     const clientElement = document.getElementById(message['sender'])
     if (clientElement == null) {
         // Create section for client if not existent:
-        const main = document.getElementById('ControlPi Debug')
-        main.appendChild(createClient(message.sender, ''))
+        const container = document.getElementById('web-debug-container')
+        container.appendChild(createClient(message.sender, ''))
     }
     // Update last received message:
     const lastContainer = document.getElementById(message['sender'] + ' Last')
@@ -265,7 +300,7 @@ function createSchema(schema) {
 }
 
 // Create div, form and table for command template:
-function createForCommand(template) {
+function createForCommand(template, ws) {
     const div = document.createElement('div')
     div.setAttribute('class', 'object')
     const form = document.createElement('form')
@@ -289,7 +324,7 @@ function createForCommand(template) {
                 }
             }
         }
-        websocket.send(JSON.stringify(data))
+        ws.send(JSON.stringify(data))
     })
     const table = document.createElement('table')
     for (const key in template) {

diff --git a/controlpi_plugins/web/Debug/index.html b/controlpi_plugins/web/Debug/index.html
index f6d6ff578bfecfeaf5e52e42324adc80626ec506..b9ece42e4eb96181b8eb358c57aa1f4eb1a706b5 100644 (file)
--- a/controlpi_plugins/web/Debug/index.html
+++ b/controlpi_plugins/web/Debug/index.html
@@ -25,7 +25,7 @@
             <span class="Graph">Graph-</span><span class="IT">IT</span>
         </header>
         <h1>ControlPi Debug</h1>
-        <main id="ControlPi Debug" class="clientcontainer">
-        </main>
+        <div id="web-debug-log" class="log"></div>
+        <div id="web-debug-container" class="container"></div>
     </body>
 </html>