Add Logger and Select widgets

examples/app.py

@@ -4,10 +4,10 @@
 
 def create():
     def handler(item):
-        ltk.find("#feedback").append(
-            ltk.LI(
-                ltk.Bold(f"Selected menu item: {item.label}")
-                    .css("margin", 10)))
+        ltk.LI(
+            ltk.Bold(f"Selected menu item: {item.label}")
+                .css("margin", 10)
+        ).appendTo(ltk.find("#feedback"))
 
     left_css = {
         "border-right": "2px solid lightgray",
@@ -40,6 +40,7 @@ def handler(item):
                     ltk.Text("Right Panel"),
                     ltk.UL().attr("id", "feedback"),
                     right_css)
-            ).css("border-top", "2px solid lightgray")
+            ).css("height", "100%")
         )
+        .css("height", "100%")
         .attr("name", "Application"))

examples/helloworld.py

@@ -3,16 +3,20 @@
 import ltk
 
 def create():
-    return ltk.HBox(
-        ltk.Text("Hello 🎉", {
-            "padding": 50,
-            "background-color": "orange",
-            "font-size": 42,
-        }),
+    return (
+        ltk.HBox(
+            ltk.Text("Hello 🎉", {
+                "padding": 50,
+                "background-color": "orange",
+                "font-size": 42,
+            }),
 
-        ltk.Text("World 🎉")
-            .css("padding", 50)
-            .css("background-color", "red")
-            .css("color", "white")
-            .css("font-size", 42)
-    ).attr("name", "Hello World")
+            ltk.Text("World 🎉")
+                .css("padding", 50)
+                .css("background-color", "red")
+                .css("color", "white")
+                .css("font-size", 42)
+        )
+        .css("height", "100%")
+        .attr("name", "Hello World")
+    )

kitchensink.py

@@ -1,6 +1,10 @@
+import ltk  # Load early on MicroPython, before logging
+
 import examples
 from pyscript import window as js # type: ignore
-import ltk
+import logging
+
+logger = logging.getLogger("kitchensink")
 
 
 def cleanup(src):
@@ -53,10 +57,12 @@ def setsource(src):
 def activate_tab(event, ui=None):
     index = tabs.active()
     ltk.set_url_parameter("tab", index, False)
+    logger.info("Switched to tab %s", index)
 
 tabs.activate(ltk.get_url_parameter("tab") or 0)
 
 ltk.body.append(
+    ltk.Logger().element,
     ltk.Div(
         tabs.css("margin-bottom", 24)
             .attr("id", "examples")
@@ -73,3 +79,4 @@ def activate_tab(event, ui=None):
     .css("margin", "auto")
 )
 
+logger.info("Kitchensink Ready")

ltk/__init__.py

@@ -1,7 +1,27 @@
 # LTK - Copyrights Reserved 2023 - chrislaffra.com - See LICENSE 
 
+import sys
+
+def fix_time():
+    import time
+
+    if not hasattr(time, "time"):
+        class MonkeyPatchedTimeModuleForMicroPython:
+            """ Monkey patch for time.time() for MicroPython """
+            pass
+
+        clone = MonkeyPatchedTimeModuleForMicroPython()
+        for key in dir(time):
+            setattr(clone, key, getattr(time, key))
+        setattr(clone, "time", lambda: time.ticks_ms() / 1000)
+        sys.modules["time"] = clone
+
+fix_time()
+
 from ltk.jquery import *
 from ltk.widgets import *
 
 inject_script("ltk/ltk.js")
 inject_css("ltk/ltk.css")
+
+from ltk.jquery import time

ltk/jquery.py

@@ -30,14 +30,16 @@ def find_list(selector):
     return [ elements.eq(n) for n in range(elements.length) ]
 
 def to_js(dict):
-    js.eval("window.to_js = json => JSON.parse(json);")
     return js.to_js(json.dumps(dict))
 
 def to_py(jsobj):
     try:
         return jsobj.to_py()
     except:
-        return json.loads(js.JSON.stringify(jsobj)) # Micropython has no built-in to_py
+        try:
+            return json.loads(js.to_py(jsobj)) # Micropython has no built-in to_py
+        except:
+            return str(jsobj)
 
 def number(s):
     return js.parseFloat(s)
@@ -66,7 +68,7 @@ def time():
 
 def post(route, data, handler):
     payload = js.encodeURIComponent(json.dumps(data))
-    wrapper = proxy(lambda data, status, xhr: handler(js.JSON.stringify(data)))
+    wrapper = proxy(lambda data, *rest: handler(js.JSON.stringify(data)))
     return jQuery.post(route, payload, wrapper, "json")
 
 def async_proxy(function):

ltk/ltk.css

@@ -37,7 +37,6 @@
 .ltk-container {
     margin: 0;
     padding: 0;
-    width: 100%;
 }
 
 .ltk-card {
@@ -135,4 +134,50 @@
     border: 0 solid lightgray;
     border-bottom-width: 1px;
     padding: 4px 8px;
+}
+
+.ltk-log-container {
+    position: fixed;
+    bottom: 3px;
+    width: 100vw;
+    height: 250px;
+    z-index: 1000;
+    overflow-y: auto;
+    background-color: white;
+}
+
+.ltk-log {
+    padding: 4px;
+    border-collapse: collapse;
+    border: 1px solid rgb(81, 81, 251);
+    background-color: rgb(225, 246, 253);
+    width: 100%;
+    overflow-y: auto;
+}
+
+.ltk-log::-webkit-scrollbar {
+    display: none;
+}
+
+.ltk-log td, th {
+    border: 0px solid rgb(185, 185, 255);
+    border-bottom-width: 1px;
+    padding: 8px;
+}
+
+.ltk-log th {
+    position: sticky;
+    top: -4px;
+    text-align: left;
+    background-color: lightgreen;
+    font-size: 14px;
+    z-index: 100;
+}
+
+.ltk-log pre {
+    margin: 0;
+}
+
+.ltk-log-row {
+    background-color: rgb(255, 255, 240);
 }

ltk/ltk.js

@@ -7,6 +7,23 @@
         return (new Date().getTime() - start)
     }
 
+    window.to_js = json => {
+        return JSON.parse(json)
+    }
+
+    window.to_py = obj => {
+        try {
+            return JSON.stringify(obj, null, 4)
+        } catch {
+            // handle cycles in obj
+            copy = {}
+            for (const key of Object.keys(obj)) {
+                copy[key] = `${obj[key]}`;
+            }
+            return JSON.stringify(copy, null, 4);
+        }
+    }
+
     window.table = () => {
         return $("<table>").addClass("ltk-table");
     }
@@ -51,4 +68,38 @@
     window.tableSet = (table, column, row, value) => {
         tableCell(table, column, row).text(value)
     }
+})()
+
+(function vislog() {
+
+    KB = 1024
+    MB = KB * KB
+    GB = MB * MB
+
+    function toHuman(byteCount) {
+        if (byteCount > GB) return `${(byteCount / GB).toFixed()}GB`;
+        if (byteCount > MB) return `${(byteCount / MB).toFixed()}MB`;
+        if (byteCount > KB) return `${(byteCount / KB).toFixed()}KB`;
+        return byteCount
+    }
+
+    new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+            const type = entry.initiatorType[0].toUpperCase() + entry.initiatorType.slice(1);
+            const log = entry.decodedBodySize === 0 ? console.error : console.log
+            const kind = entry.decodedBodySize === 0 ? "ERROR" : "INFO"
+            log(
+                kind,
+                type,
+                toHuman(entry.encodedBodySize),
+                toHuman(entry.decodedBodySize),
+                `${entry.duration.toFixed()}ms`,
+                entry.name
+            )
+        }
+    }).observe({
+        type: "resource",
+        buffered: true,
+    });
+
 })()