UII cleanup, bug fixing

Author: mirkosertic

README.md

@@ -23,6 +23,8 @@ It comes with the hardware schematics, production files and the Megahub firmware
 - **Web-based Interface**: Configure and program your hub through an intuitive Web UI
 - **ROS(Robot Operating System)**: Micro ROS support is comming soon...
 - **MQTT**: MQTT support is comming soon...
+- **Gamepad**: Bluetooth Gamepad support is comming soon...
+- **BT/WiFi switch**: Allow configuration over Bluetooth API instead of Restful HTTP API
 
 ## How It Differs from Existing Solutions
 

frontend/src/components/blockly/component.js

@@ -689,6 +689,26 @@ const customBlocks = {
             return "ui.showvalue(\"" + labelCode + "\", " + styleCode + ", " + valueCode + ")\n";
         }
     },
+
+    "mh_debug_free_heap": {
+        category: 'Debug',
+        colour: 230,
+        blockdefinition: {
+            "type": "mh_debug_free_heap",
+            "message0": "Get free HEAP memory",
+            "args0": [
+            ],
+            "output": null,
+            "colour": 230,
+            "tooltip": "Get free HEAP memory",
+            "helpUrl": ""
+        },
+        generator: (block, generator) => {
+            const command = "deb.freeHeap()";
+
+            return [command, 0];
+        }
+    },    
 };
 
 function generateToolbox(definitions) {

frontend/src/components/logger/component.js

@@ -1,4 +1,5 @@
 import template from './component.html?raw';
+import styleSheet from './style.css?raw';
 
 const MAX_LOG_ENTRIES = 50;
 
@@ -7,23 +8,32 @@ class LoggerHTMLElement extends HTMLElement {
   logCount = 0;
 
   connectedCallback() {
-    this.innerHTML = template;
+    const shadow = this.attachShadow({ mode: 'open' })
+    
+    // Create adoptable stylesheet
+    const sheet = new CSSStyleSheet()
+    sheet.replaceSync(styleSheet)
+    shadow.adoptedStyleSheets = [sheet]
+    
+    shadow.innerHTML = template
   };
 
   addToLog(message) {
     const logEntry = document.createElement('div');
     logEntry.className = 'log-entry';
 
     logEntry.textContent = `${message}`;
-    
+        
+    const container = this.shadowRoot;    
+
     // Add new entry at the top
-    this.insertBefore(logEntry, this.firstChild);
+    container.insertBefore(logEntry, container.firstChild);
     this.logCount++;
 
     // Remove oldest entry if limit exceeded
     if (this.logCount > MAX_LOG_ENTRIES) {
-        this.removeChild(this.lastChild);
-        logCount--;
+        container.removeChild(container.lastChild);
+        this.logCount--;
     }
   };
 };

frontend/src/components/logger/style.css

@@ -0,0 +1,42 @@
+:host {
+    background-color: #252526;
+    border: 1px solid #3e3e42;
+    border-radius: 4px;
+    padding: 10px;
+    overflow-y: auto;
+    font-size: 12px;
+    line-height: 1.4;
+    color: #d4d4d4;
+    font-family: 'Courier New', monospace;
+    grid-area: log;
+
+    &::-webkit-scrollbar {
+        width: 10px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: #1e1e1e;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: #424242;
+        border-radius: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+        background: #4e4e4e;
+    }
+}
+
+.log-entry {
+    padding: 4px 0;
+    border-bottom: 1px solid #2d2d30;
+}
+
+.log-entry:first-child {
+    color: #4ec9b0;
+}
+
+.log-entry:last-child {
+    border-bottom: none;
+}

frontend/src/components/luapreview/component.js

@@ -6,7 +6,6 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers'
 import 'prismjs/themes/prism-tomorrow.css'
 import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
 
-
 class LuaPreviewHTMLElement extends HTMLElement {
 
   connectedCallback() {

frontend/src/components/ui/component.js

@@ -1,9 +1,17 @@
 import template from './component.html?raw';
+import styleSheet from './style.css?raw';
 
 class UIHTMLElement extends HTMLElement {
 
   connectedCallback() {
-    this.innerHTML = template;
+    const shadow = this.attachShadow({ mode: 'open' })
+    
+    // Create adoptable stylesheet
+    const sheet = new CSSStyleSheet()
+    sheet.replaceSync(styleSheet)
+    shadow.adoptedStyleSheets = [sheet]
+    
+    shadow.innerHTML = template
   };
 
   processUIEvent(event) {
@@ -12,15 +20,17 @@ class UIHTMLElement extends HTMLElement {
         const format = event.format || "FORMAT_SIMPLE";
         const value = event.value || 0;
 
-        var element = this.querySelector('[data-label="' + label + '"]');
+        const container = this.shadowRoot;   
+      
+        var element = container.querySelector('[data-label="' + label + '"]');
         if (element === null) {
             // Create new element
             element = document.createElement('div');
             element.className = 'ui-value-entry';
             element.setAttribute('data-label', label);
             element.innerHTML = `${value}`;
 
-            this.appendChild(element);
+            container.appendChild(element);
         } else {
             element.innerHTML = `${value}`;
         }
@@ -29,7 +39,7 @@ class UIHTMLElement extends HTMLElement {
   };
 
   clear() {
-    this.innerHTML = template;
+    this.shadowRoot.innerHTML = template;
   }
 };
 

frontend/src/components/ui/style.css

@@ -0,0 +1,17 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: stretch;
+    align-content: stretch;
+}
+
+.ui-value-entry {
+    flex: 0 1 auto;
+}
+
+.ui-value-entry::before {
+    content: attr(data-label) ": ";
+    font-weight: bold;
+}

frontend/src/project.js

@@ -103,7 +103,7 @@ function saveToLocalStorage(key) {
                 },
             })
             .then((response) => {
-                console.log("Got response from backend : " + response);
+                console.log("Got response from backend : " + JSON.stringify(response));
             });
 
             const luaCode = generateCode();
@@ -116,7 +116,7 @@ function saveToLocalStorage(key) {
                 },
             })
             .then((response) => {
-                console.log("Got response from backend : " + response);
+                console.log("Got response from backend : " + JSON.stringify(response));
             });
         }