Mercurial > code > home > repos > light9

changeset 2374:9d47c44d4ae4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
experimental tiled-layout home page
author drewp@bigasterisk.com
date Thu, 08 Jun 2023 14:54:26 -0700
parents 86e569fa59c7
children 623836db99af
files light9/web/TiledHome.ts light9/web/index.html light9/web/style.css light9/web/vite.config.ts package.json pnpm-lock.yaml
diffstat 6 files changed, 144 insertions(+), 2 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/web/TiledHome.ts	Thu Jun 08 14:54:26 2023 -0700
@@ -0,0 +1,49 @@
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import * as FlexLayout from "flexlayout-react";
+export { Light9DeviceSettings } from "./live/Light9DeviceSettings";
+export { Light9CollectorUi } from "./collector/Light9CollectorUi";
+
+const config:FlexLayout.IJsonModel = {
+  global: {},
+  borders: [],
+  layout: {
+    type: "row",
+    weight: 100,
+    children: [
+      {
+        type: "tabset",
+        weight: 50,
+        children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],
+      },
+      {
+        type: "tabset",
+        weight: 50,
+        children: [{ type: "tab", name: "collector", component: "light9-collector-ui" }],
+      },
+    ],
+  },
+};
+
+const e = React.createElement;
+
+// see https://github.com/lit/lit/tree/main/packages/labs/react
+
+class Main extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { model: FlexLayout.Model.fromJson(config) };
+  }
+
+  factory = (node) => {
+    var component = node.getComponent();
+    return e(component, null, "");
+  };
+
+  render() {
+    return e(FlexLayout.Layout, { model: this.state.model, factory: this.factory });
+  }
+}
+
+const root = createRoot(document.getElementById("container")!);
+root.render(React.createElement(Main));
--- a/light9/web/index.html	Thu Jun 08 14:53:50 2023 -0700
+++ b/light9/web/index.html	Thu Jun 08 14:54:26 2023 -0700
@@ -4,7 +4,10 @@
     <title>light9 home</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="flexlayout-react/style/dark.css" />
+    <script type="module" src="TiledHome.ts"></script>
   </head>
   <body>
+    <div id="container"></div>
   </body>
 </html>
--- a/light9/web/style.css	Thu Jun 08 14:53:50 2023 -0700
+++ b/light9/web/style.css	Thu Jun 08 14:54:26 2023 -0700
@@ -1,9 +1,10 @@
 body {
   background: black;
   color: white;
+  --color-background: black;
+  --color-text: white;
   font-family: sans-serif;
 }
-
 h1 {
   margin: 0;
 }
--- a/light9/web/vite.config.ts	Thu Jun 08 14:53:50 2023 -0700
+++ b/light9/web/vite.config.ts	Thu Jun 08 14:54:26 2023 -0700
@@ -3,7 +3,7 @@
 export default defineConfig({
   base: "/",
   root: "./light9/web",
-  // publicDir: ".",
+  publicDir: "../../node_modules",
   server: {
     host: "0.0.0.0",
     strictPort: true,
--- a/package.json	Thu Jun 08 14:53:50 2023 -0700
+++ b/package.json	Thu Jun 08 14:54:26 2023 -0700
@@ -25,6 +25,7 @@
     "async": "^3.2.4",
     "d3": "^7.8.4",
     "debug": "^4.3.4",
+    "flexlayout-react": "^0.7.7",
     "fpsmeter": "^0.3.1",
     "immutable": "^4.3.0",
     "knockout": "^3.5.1",
@@ -32,6 +33,8 @@
     "n3": "^1.16.4",
     "onecolor": "^4.0.0",
     "parse-prometheus-text-format": "^1.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "reconnectingwebsocket": "^1.0.0",
     "sub-events": "^1.9.0",
     "sylvester": "^0.0.21",
@@ -40,5 +43,9 @@
     "vite": "^4.3.7",
     "vite-plugin-rewrite-all": "^1.0.1",
     "vitest": "^0.31.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.9",
+    "@types/react-dom": "^18.2.4"
   }
 }
--- a/pnpm-lock.yaml	Thu Jun 08 14:53:50 2023 -0700
+++ b/pnpm-lock.yaml	Thu Jun 08 14:54:26 2023 -0700
@@ -12,11 +12,14 @@
   '@types/fpsmeter': ^0.3.31
   '@types/n3': ^1.10.4
   '@types/node': ^20.2.0
+  '@types/react': ^18.2.9
+  '@types/react-dom': ^18.2.4
   '@types/reconnectingwebsocket': ^1.0.7
   '@types/underscore': ^1.11.4
   async: ^3.2.4
   d3: ^7.8.4
   debug: ^4.3.4
+  flexlayout-react: ^0.7.7
   fpsmeter: ^0.3.1
   immutable: ^4.3.0
   knockout: ^3.5.1
@@ -24,6 +27,8 @@
   n3: ^1.16.4
   onecolor: ^4.0.0
   parse-prometheus-text-format: ^1.1.1
+  react: ^18.2.0
+  react-dom: ^18.2.0
   reconnectingwebsocket: ^1.0.0
   sub-events: ^1.9.0
   sylvester: ^0.0.21
@@ -50,6 +55,7 @@
   async: 3.2.4
   d3: 7.8.4
   debug: 4.3.4
+  flexlayout-react: 0.7.7_biqbaboplfbrettd7655fr4n2y
   fpsmeter: 0.3.1
   immutable: 4.3.0
   knockout: 3.5.1
@@ -57,6 +63,8 @@
   n3: 1.16.4
   onecolor: 4.0.0
   parse-prometheus-text-format: 1.1.1
+  react: 18.2.0
+  react-dom: 18.2.0_react@18.2.0
   reconnectingwebsocket: 1.0.0
   sub-events: 1.9.0
   sylvester: 0.0.21
@@ -66,6 +74,10 @@
   vite-plugin-rewrite-all: 1.0.1_vite@4.3.7
   vitest: 0.31.1
 
+devDependencies:
+  '@types/react': 18.2.9
+  '@types/react-dom': 18.2.4
+
 packages:
 
   /@esbuild/android-arm/0.17.19:
@@ -871,10 +883,32 @@
     resolution: {integrity: sha512-3iD2jaCCziTx04uudpJKwe39QxXgSUnpxXSvRQjRvHPxFQfmfP4NXIm/NURVeNlTCc+ru4WqjYGTmpXrW9uMlw==}
     dev: false
 
+  /@types/prop-types/15.7.5:
+    resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
+    dev: true
+
+  /@types/react-dom/18.2.4:
+    resolution: {integrity: sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==}
+    dependencies:
+      '@types/react': 18.2.9
+    dev: true
+
+  /@types/react/18.2.9:
+    resolution: {integrity: sha512-pL3JAesUkF7PEQGxh5XOwdXGV907te6m1/Qe1ERJLgomojS6Ne790QiA7GUl434JEkFA2aAaB6qJ5z4e1zJn/w==}
+    dependencies:
+      '@types/prop-types': 15.7.5
+      '@types/scheduler': 0.16.3
+      csstype: 3.1.2
+    dev: true
+
   /@types/reconnectingwebsocket/1.0.7:
     resolution: {integrity: sha512-17pnIZsGi9P8YNp7c0ueY2WEauSxDivuFeGuMuPPJMA3qk34CnFgBHGqkxgun3HUifEuwNr8cf+9rU7vSd8i5g==}
     dev: false
 
+  /@types/scheduler/0.16.3:
+    resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
+    dev: true
+
   /@types/trusted-types/2.0.3:
     resolution: {integrity: sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==}
     dev: false
@@ -1023,6 +1057,10 @@
     engines: {node: '>=0.8'}
     dev: false
 
+  /csstype/3.1.2:
+    resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
+    dev: true
+
   /d3-array/3.2.3:
     resolution: {integrity: sha512-JRHwbQQ84XuAESWhvIPaUV4/1UYTBOLiOPGWqgFDHZS1D5QN9c57FbH3QpEnQMYiOXNzKUQyGTZf+EVO7RT5TQ==}
     engines: {node: '>=12'}
@@ -1356,6 +1394,16 @@
     resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
     dev: false
 
+  /flexlayout-react/0.7.7_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-BOS+lueEBdLVsrB2Jekr/z4WIuerMhkDhYcT+3E56o/ZHz6xkmv8YEkB9qimrGxRt2uAnozzH5VPUnxXMQCu0Q==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /fpsmeter/0.3.1:
     resolution: {integrity: sha512-i3zzNJwGkA+9WWIXpAtP0TCN64eO5VkKQgirYE7ZCVqyC3NfUPszU35R044fmSCjiMqefiBs5NiGKvD7lFJ87Q==}
     dev: false
@@ -1397,6 +1445,10 @@
     engines: {node: '>= 0.8'}
     dev: false
 
+  /js-tokens/4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+    dev: false
+
   /jsonc-parser/3.2.0:
     resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
     dev: false
@@ -1436,6 +1488,13 @@
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
     dev: false
 
+  /loose-envify/1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+    dependencies:
+      js-tokens: 4.0.0
+    dev: false
+
   /loupe/2.3.6:
     resolution: {integrity: sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==}
     dependencies:
@@ -1561,10 +1620,27 @@
       '@rdfjs/types': 1.1.0
     dev: false
 
+  /react-dom/18.2.0_react@18.2.0:
+    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
+    peerDependencies:
+      react: ^18.2.0
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.2.0
+      scheduler: 0.23.0
+    dev: false
+
   /react-is/17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
     dev: false
 
+  /react/18.2.0:
+    resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
   /readable-stream/4.4.0:
     resolution: {integrity: sha512-kDMOq0qLtxV9f/SQv522h8cxZBqNZXuXNyjyezmfAAuribMyVXziljpQ/uQhfE1XLg2/TLTW2DsnoE4VAi/krg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1599,6 +1675,12 @@
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: false
 
+  /scheduler/0.23.0:
+    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
+    dependencies:
+      loose-envify: 1.4.0
+    dev: false
+
   /semver/7.5.1:
     resolution: {integrity: sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==}
     engines: {node: '>=10'}