start adding fullscreen compositor demo

udevbe · Aug 16, 2024 · 5b5cce3 · 5b5cce3
1 parent f847b8e
commit 5b5cce3
Show file tree

Hide file tree

Showing 7 changed files with 437 additions and 46 deletions.
diff --git a/examples/compositor/fullscreen/README.md b/examples/compositor/fullscreen/README.md
@@ -1,9 +1,16 @@
-JavaScript port of Weston's demo client "simple-shm".
+About
+=
+
+Example of a compositor running a single remote GTK4 demo application. The GTK4 demo application is expected to be
+provided externally by e.g. `packages/compositor-proxy-cli` in this repo.
+
+Running
+=
 
 - `yarn install`
 - `yarn start`
+- Go to `http://localhost:8080`
 
-The demo-compositor will now be able to launch this demo webapp.
-
-Type `web://localhost:9002` in the compositor URL bar and press enter to launch it
+The remote application can be installed as a [Progressive Web App](https://en.wikipedia.org/wiki/Progressive_web_app) by browsers that support it.
+When installed as a PWA the application will still be running remotely but will be integrated as a local application.
 
diff --git a/examples/compositor/fullscreen/index.html b/examples/compositor/fullscreen/index.html
@@ -1,43 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="utf-8"/>
-    <title>Greenfield Canvas Compositor Demo</title>
+    <meta charset="UTF-8">
+    <title>New Application</title>
+    <link rel="manifest" href="/app.webmanifest">
     <style>
-        body {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-            background-color: #f0f0f0;
-        }
-
-        .container {
-            display: flex;
-            gap: 20px;
-        }
-
-        .tile {
-            width: 200px;
-            height: 200px;
-            background-color: #4CAF50;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            color: white;
-            font-size: 20px;
-            font-family: Arial, sans-serif;
-            border-radius: 10px;
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-        }
+        * { margin:0; padding:0; }
+        html, body { width:100%; height:100%; }
+        canvas { height: 100vh; width: 100vw; display:block; }
     </style>
 </head>
 <body>
-<div class="container">
-    <button class="tile" onclick="window.open('app.html?type=remote&url=http%3Alocalhost%3A8081%2Fgtk4-demo', '_blank', 'popup')">gtk4-demo</button>
-    <button class="tile" onclick="window.open('app.html?type=remote&url=http%3Alocalhost%3A8081%2Fkwrite', '_blank', 'popup')">KWrite</button>
-    <button class="tile" onclick="window.open('app.html?type=remote&url=http%3Alocalhost%3A8081%2Fxterm', '_blank', 'popup')">xterm</button>
-</div>
+<script type="module" src="src/index.ts"></script>
+<canvas id="output"></canvas>
 </body>
-</html>
+</html>
diff --git a/examples/compositor/fullscreen/public/GTK_logo.svg b/examples/compositor/fullscreen/public/GTK_logo.svg
diff --git a/examples/compositor/fullscreen/public/app.webmanifest b/examples/compositor/fullscreen/public/app.webmanifest
@@ -0,0 +1,11 @@
+{
+   "name": "gtk4-demo",
+   "display": "standalone",
+   "start_url": ".",
+   "icons": [
+     {
+       "src": "GTK_logo.svg",
+       "sizes": "any"
+     }
+   ]
+}
diff --git a/examples/compositor/fullscreen/src/index.ts b/examples/compositor/fullscreen/src/index.ts
@@ -0,0 +1,40 @@
+import { createAppLauncher, createCompositorSession, initWasm } from '@gfld/compositor'
+
+const wasmLibs = initWasm()
+
+async function main() {
+  await wasmLibs
+
+  // create new compositor context
+  const session = await createCompositorSession({ mode: 'fullscreen' })
+  // notify user of errors
+  session.userShell.events.notify = (variant: string, message: string) => window.alert(message)
+
+  // Get an HTML5 canvas for use as an output for the compositor.
+  const canvas = document.getElementById('output') as HTMLCanvasElement
+  // hook up the canvas to our compositor
+  session.userShell.actions.initScene(() => ({ canvas, id: canvas.id }))
+  // make compositor global protocol objects available to client
+  session.globals.register()
+
+  const appContext = createAppLauncher(session, 'remote').launch(new URL('http://localhost:8081/gtk4-demo'), (childAppContext) => {
+    childAppContext.onStateChange = (state) => {
+      // log child app state
+      console.log(`Child app is ${state}`)
+    }
+  })
+
+  // log app state
+  appContext.onStateChange = (state) => {
+    console.log(`App state is ${state}`)
+  }
+
+  appContext.onNameChanged = (name) => {
+    window.document.title = name
+  }
+  window.document.title = appContext.name
+}
+
+window.onload = () => {
+  main()
+}
diff --git a/examples/compositor/fullscreen/vite.config.ts b/examples/compositor/fullscreen/vite.config.ts
@@ -2,13 +2,6 @@ import { defineConfig } from "vite";
 
 export default defineConfig({
   base: "./",
-  build: {
-    rollupOptions: {
-      input: {
-        app: './app.html'
-      }
-    }
-  },
   server: {
     host: 'localhost',
     port: 8080,