Merge pull request #181 from vkottler/dev/ui

Dev/UI

.github/workflows/python-package.yml

@@ -68,7 +68,7 @@ jobs:
 
       - run: |
           mk python-release owner=vkottler \
-                            repo=runtimepy version=3.11.0
+                            repo=runtimepy version=3.11.1
         if: |
           matrix.python-version == '3.11'
           && matrix.system == 'ubuntu-latest'

.gitignore

@@ -15,3 +15,5 @@ coverage*.xml
 tags
 mklocal
 docs
+compile_commands.json
+src

.vimrc

@@ -1,2 +1,5 @@
 let g:ale_linters["javascript"] = ["eslint"]
 let g:ale_fixers["javascript"] = ["clang-format"]
+
+let g:ale_c_cc_executable = 'emcc'
+let g:ale_c_cc_options = ''

README.md

@@ -2,11 +2,11 @@
     =====================================
     generator=datazen
     version=3.1.4
-    hash=16b2cf0b2122fb98367ad624135dcbb3
+    hash=bedc870d38c09f3340b08f2d190a45f6
     =====================================
 -->
 
-# runtimepy ([3.11.0](https://pypi.org/project/runtimepy/))
+# runtimepy ([3.11.1](https://pypi.org/project/runtimepy/))
 
 [![python](https://img.shields.io/pypi/pyversions/runtimepy.svg)](https://pypi.org/project/runtimepy/)
 ![Build Status](https://github.com/vkottler/runtimepy/workflows/Python%20Package/badge.svg)

local/configs/package.yaml

@@ -6,7 +6,7 @@ entry: {{entry}}
 
 requirements:
   - vcorelib>=3.2.0
-  - svgen>=0.5.2
+  - svgen>=0.6.0
   - websockets
   - "windows-curses; sys_platform == 'win32' and python_version < '3.12'"
 

local/variables/package.yaml

@@ -1,5 +1,5 @@
 ---
 major: 3
 minor: 11
-patch: 0
+patch: 1
 entry: runtimepy

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta:__legacy__"
 
 [project]
 name = "runtimepy"
-version = "3.11.0"
+version = "3.11.1"
 description = "A framework for implementing Python services."
 readme = "README.md"
 requires-python = ">=3.11"

runtimepy/__init__.py

@@ -1,7 +1,7 @@
 # =====================================
 # generator=datazen
 # version=3.1.4
-# hash=b07cee45d00e3ed8152c5fef04b7d2c9
+# hash=d7d74df416629b2e2b52a6f7acab3ddc
 # =====================================
 
 """
@@ -10,7 +10,7 @@
 
 DESCRIPTION = "A framework for implementing Python services."
 PKG_NAME = "runtimepy"
-VERSION = "3.11.0"
+VERSION = "3.11.1"
 
 # runtimepy-specific content.
 METRICS_NAME = "metrics"

runtimepy/data/css/bootstrap_extra.css

@@ -0,0 +1,20 @@
+.flex-column-scroll-bodge {
+  height: 100%;
+  flex-wrap: nowrap;
+  overflow-y: scroll;
+  flex-shrink: 0;
+}
+
+.tab-content-scroll-bodge {
+  width: 100%;
+  height: 100%;
+  overflow: scroll;
+}
+
+.button-bodge {
+  text-align: left;
+}
+
+.collapsing {
+  transition: none !important;
+}

runtimepy/data/css/main.css

@@ -13,15 +13,6 @@ body > :first-child {
   height: 100%;
 }
 
-.flex-column-scroll-bodge {
+#runtimepy {
   height: 100%;
-  flex-wrap: nowrap;
-  overflow: scroll;
-  flex-shrink: 0;
-}
-
-.tab-content-scroll-bodge {
-  width: 100%;
-  height: 100%;
-  overflow: scroll;
 }

runtimepy/data/js/JsonConnection.js

@@ -11,13 +11,19 @@ class JsonConnection {
     this.conn.binaryType = "arraybuffer";
 
     /* State. */
-    this.connected = false;
+    this.connected = new Promise((resolve, reject) => {
+      this.resolve = resolve;
+      this.reject = reject
+    });
 
     /* Register handlers. */
     this.conn.onclose = this.onclose.bind(this);
     this.conn.onerror = this.onerror.bind(this);
     this.conn.onmessage = this.onmessage.bind(this);
     this.conn.onopen = this.onopen.bind(this);
+
+    /* Individual message handlers. */
+    this.message_handlers = {};
   }
 
   /*
@@ -39,12 +45,19 @@ class JsonConnection {
       }
     }
 
-    // handle any keys we haven't handled yet
-    console.log(data);
+    for (const key in data) {
+      if (key in this.message_handlers) {
+        this.message_handlers[key](data[key]);
+      } else if (!(key in response)) {
+        console.log(`(not handled) ${key}:`);
+        console.log(data[key]);
+      }
+    }
 
     /* Send our response. */
-    if (response) {
+    for (const _ in response) {
       this.send_json(response);
+      return;
     }
   }
 
@@ -82,13 +95,12 @@ class JsonConnection {
 
   onopen(event) {
     console.log(`Connection ${this.toString()} open.`);
-    this.connected = true;
-    /* Should run some initialization method here. */
+    this.resolve();
   }
 
   onclose(event) {
     console.log(`Connection ${this.toString()} closed.`);
-    this.connected = false;
+    this.reject();
   }
 
   onerror(event) {

runtimepy/data/js/env.js

@@ -0,0 +1,15 @@
+console.log("env.js");
+
+/*
+tab.container.querySelector("button").onclick = async event => {
+  //
+  tab.send_message({kind : "button.pressed"});
+  //
+};
+
+tab.message_handlers.push((data) => {
+  console.log("-----" + tab.name + "-----");
+  console.log(data);
+  console.log("---------------------------");
+});
+ */

runtimepy/data/js/main.js

@@ -1,19 +1,3 @@
-function worker_message(event) {
-  console.log(`Main thread received: ${event.data}.`);
-}
-
-/*
- * Do some heinous sh*t to create a worker from our 'text/js-worker' element.
- */
-const worker = new Worker(window.URL.createObjectURL(new Blob(
-    Array.prototype.map.call(
-        document.querySelectorAll("script[type='text\/js-worker']"),
-        (script) => script.textContent,
-        ),
-    {type : "text/javascript"},
-    )));
-worker.onmessage = worker_message;
-
 function worker_config(config) {
   let worker_cfg = {};
 
@@ -35,20 +19,58 @@ function worker_config(config) {
   return worker_cfg;
 }
 
-function main(config) {
-  /* Send configuration data to the worker. */
-  config["worker"] = worker_config(config);
-  worker.postMessage(config);
+function bootstrap_init() {
+  /*
+   * Enable tooltips.
+   * https://getbootstrap.com/docs/5.3/components/tooltips/#overview
+   */
+  const tooltipTriggerList = document.querySelectorAll(".has-tooltip");
+  const tooltipList = [...tooltipTriggerList ].map(
+      tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
+}
+
+class App {
+  constructor(config, worker) {
+    this.config = config;
+    this.worker = worker;
+
+    this.config["worker"] = worker_config(this.config);
+  }
+
+  async main() {
+    /*
+     * Run application initialization when the worker thread responds with an
+     * expected value.
+     */
+    worker.addEventListener("message", async (event) => {
+      if (event.data == 0) {
+        /* Run tab initialization. */
+        for await (const init of inits) {
+          await init();
+        }
+
+        /* Prepare worker message handler. */
+        this.worker.onmessage = async (event) => {
+          for (const key in event.data) {
+            /* Handle forwarding messages to individual tabs. */
+            if (key in tabs) {
+              tabs[key].onmessage(event.data[key]);
+            }
+          }
+        };
+      }
+    }, {once : true});
+
+    /* Start worker. */
+    this.worker.postMessage(this.config);
 
-  /* Canvas. */
-  // let ctx = document.getElementById("canvas").getContext("2d");
-  // ctx.lineWidth = 10;
-  // ctx.strokeRect(20, 20, 40, 40);
+    bootstrap_init();
+  }
 }
 
 /* Load configuration data then run application entry. */
-window.onload = () => {
-  fetch(window.location.origin + "/json")
-      .then((value) => { return value.json(); })
-      .then((value) => { main(value); });
+window.onload = async () => {
+  await (new App(await (await fetch(window.location.origin + "/json")).json(),
+                 worker))
+      .main();
 };

runtimepy/data/js/setup_tabs.js

@@ -0,0 +1,44 @@
+/* An array of initialization methods to run. */
+let inits = [];
+let tabs = {};
+
+/*
+ * Define class for generated code to use (instead of generating so many
+ * methods).
+ */
+class TabInterface {
+  constructor(name, _worker) {
+    this.name = name;
+    this.worker = _worker;
+
+    /* Relevant elements. */
+    this.button = document.getElementById("runtimepy-" + this.name + "-tab");
+    this.container = document.getElementById("runtimepy-" + this.name);
+
+    this.message_handlers = [];
+
+    this.button.addEventListener("hidden.bs.tab",
+                                 this.hidden_handler.bind(this));
+    this.button.addEventListener("shown.bs.tab", this.shown_handler.bind(this));
+
+    tabs[this.name] = this;
+
+    if (bootstrap.Tab.getInstance(this.button)) {
+      this.shown_handler();
+    }
+  }
+
+  send_message(data) {
+    this.worker.postMessage({name : this.name, event : data});
+  }
+
+  shown_handler() { this.send_message({kind : "tab.shown"}); }
+
+  hidden_handler() { this.send_message({kind : "tab.hidden"}); }
+
+  onmessage(data) {
+    for (const handler of this.message_handlers) {
+      handler(data);
+    }
+  }
+}

runtimepy/data/js/setup_worker.js

@@ -0,0 +1,10 @@
+/*
+ * Do some heinous sh*t to create a worker from our 'text/js-worker' element.
+ */
+const worker = new Worker(window.URL.createObjectURL(new Blob(
+    Array.prototype.map.call(
+        document.querySelectorAll("script[type='text\/js-worker']"),
+        (script) => script.textContent,
+        ),
+    {type : "text/javascript"},
+    )));

runtimepy/data/js/unused/pyodide.js

@@ -0,0 +1,38 @@
+/* Just an example. */
+
+function import_pyodide() {
+  importScripts("https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js");
+}
+
+import_pyodide();
+
+const script = `
+import js
+import js_local
+from runtimepy.primitives import create
+
+print(create("uint8"))
+
+# can send messages to main thread
+js.postMessage("What's good bud!")
+
+# can access connection and config state
+print(js_local.config.config.app)
+`;
+
+/* Worker entry. */
+async function start(config) {
+  /* Run pyodide. */
+  let pyodide = await loadPyodide();
+  await pyodide.loadPackage("micropip");
+  const micropip = pyodide.pyimport("micropip");
+
+  /* Install packages. */
+  await micropip.install("runtimepy");
+
+  /* Register namespace for local state. */
+  pyodide.registerJsModule(
+      "js_local", {config : config, conns : create_connections(config)});
+
+  await pyodide.runPythonAsync(script);
+}