start adding fullscreen compositor demo

udevbe · Aug 14, 2024 · e81e3ba · e81e3ba
1 parent cc64118
commit e81e3ba
Show file tree

Hide file tree

Showing 11 changed files with 208 additions and 7 deletions.
diff --git a/examples/compositor/fullscreen/.gitignore b/examples/compositor/fullscreen/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/examples/compositor/fullscreen/README.md b/examples/compositor/fullscreen/README.md
@@ -0,0 +1,9 @@
+JavaScript port of Weston's demo client "simple-shm".
+
+- `yarn install`
+- `yarn start`
+
+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
+
diff --git a/examples/compositor/fullscreen/app.html b/examples/compositor/fullscreen/app.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>New Application</title>
+    <style>
+        * { margin:0; padding:0; }
+        html, body { width:100%; height:100%; }
+        canvas { height: 100vh; width: 100vw; display:block; }
+    </style>
+</head>
+<body>
+<script type="module" src="src/fullscreen-compositor.ts"></script>
+<canvas id="output"></canvas>
+</body>
+</html>
diff --git a/examples/compositor/fullscreen/index.html b/examples/compositor/fullscreen/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <title>Greenfield Canvas Compositor Demo</title>
+    <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);
+        }
+    </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>
+</body>
+</html>
diff --git a/examples/compositor/fullscreen/package.json b/examples/compositor/fullscreen/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@gfld/example-canvas-compositor",
+  "version": "1.0.0-rc1",
+  "type": "module",
+  "description": "HTML5 Wayland Demo Web Client Simple Shm",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/udevbe/greenfield.git"
+  },
+  "keywords": [
+    "wayland",
+    "html5",
+    "client",
+    "demo",
+    "web"
+  ],
+  "author": "Erik De Rijcke <[email protected]> (http://www.udev.be)",
+  "license": "AGPL-3.0",
+  "bugs": {
+    "url": "https://github.com/udevbe/greenfield/issues"
+  },
+  "homepage": "https://github.com/udevbe/greenfield#readme",
+  "scripts": {
+    "start": "yarn run vite dev",
+    "build": "yarn run vite build",
+    "preview": "yarn run vite preview"
+  },
+  "dependencies": {
+    "@gfld/compositor": "workspace:^"
+  },
+  "devDependencies": {
+    "typescript": "^5.5.2",
+    "vite": "^5.3.1",
+    "vite-plugin-glsl": "^1.3.0"
+  }
+}
diff --git a/examples/compositor/fullscreen/src/fullscreen-compositor.ts b/examples/compositor/fullscreen/src/fullscreen-compositor.ts
@@ -0,0 +1,52 @@
+import { CompositorClient, createAppLauncher, createCompositorSession, initWasm } from '@gfld/compositor'
+
+const wasmLibs = initWasm()
+
+const urlSearchParams = new URLSearchParams(window.location.search);
+const appType = urlSearchParams.get('type')
+const appURL = urlSearchParams.get('url')
+
+async function main() {
+  if(appType === null) {
+    console.error('Missing type search param')
+    return
+  }
+  if(appType !== 'remote' && appType !== 'web') {
+    console.error('Missing type search param')
+    return
+  }
+  if(appURL === null) {
+    console.error('Missing URL search param')
+    return
+  }
+
+  await wasmLibs
+
+  // create new compositor context
+  const session = await createCompositorSession({ mode: 'fullscreen' })
+
+  const appLauncher = createAppLauncher(session, appType)
+
+  session.userShell.events.surfaceTitleUpdated = (compositorSurface, title) => {
+    window.document.title = title
+  }
+
+  session.userShell.events.notify = (variant: string, message: string) => window.alert(message)
+
+  // Get an HTML5 canvas for use as an output for the compositor. Multiple outputs can be used.
+  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 = appLauncher.launch(new URL(appURL), (childAppContext) => {
+    // handle child context here
+  })
+
+  // handle app context here
+}
+
+window.onload = () => {
+  main()
+}
diff --git a/examples/compositor/fullscreen/tsconfig.json b/examples/compositor/fullscreen/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "Node16",
+    "target": "es2018",
+    "module": "esnext",
+    "esModuleInterop": true,
+    "strict": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ]
+  },
+  "include": ["src"]
+}
diff --git a/examples/compositor/fullscreen/vite.config.ts b/examples/compositor/fullscreen/vite.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  base: "./",
+  build: {
+    rollupOptions: {
+      input: {
+        app: './app.html'
+      }
+    }
+  },
+  server: {
+    host: 'localhost',
+    port: 8080,
+    strictPort: true,
+    cors: false,
+    headers: {
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+    },
+  }
+});
diff --git a/package.json b/package.json
@@ -2,7 +2,8 @@
   "workspaces": [
     "libs/*",
     "packages/*",
-    "examples/webapps/*"
+    "examples/webapps/*",
+    "examples/compositor/*"
   ],
   "packageManager": "[email protected]",
   "resolutions": {

diff --git a/packages/compositor-proxy/native/encoding/src/gst_frame_encoder.c b/packages/compositor-proxy/native/encoding/src/gst_frame_encoder.c
@@ -27,7 +27,8 @@
 const GstMetaInfo *gfBufferContentSerialMetaInfo = NULL;
 
 static const char *opaque_fragment_shader =
-        "#version 330\n"
+        "#version 300 es\n"
+        "precision mediump float;\n"
         "in vec2 v_texcoord;\n"
         "out vec4 color;\n"
         "uniform sampler2D tex;\n"
@@ -36,7 +37,8 @@ static const char *opaque_fragment_shader =
         "}";
 
 static const char *alpha_fragment_shader =
-        "#version 330\n"
+        "#version 300 es\n"
+        "precision mediump float;\n"
         "in vec2 v_texcoord;\n"
         "out vec4 color;\n"
         "uniform sampler2D tex;\n"
@@ -46,7 +48,8 @@ static const char *alpha_fragment_shader =
         "}";
 
 static const char *vertex_shader =
-        "#version 330\n"
+        "#version 300 es\n"
+        "precision mediump float;\n"
         "in vec4 a_position;\n"
         "in vec2 a_texcoord;\n"
         "out vec2 v_texcoord;\n"

diff --git a/packages/compositor/src/browser/dnd.ts b/packages/compositor/src/browser/dnd.ts
@@ -30,9 +30,9 @@ export function createDnd(canvas: HTMLCanvasElement, seat: Seat, outputId: strin
     throw new Error('Browser does not support 2d canvas.')
   }
   cursorCanvas.style.background = '#00000000'
-  cursorCanvas.style.position = 'absolute'
-  cursorCanvas.style.left = `-${maxCursorWidth}px`
-  cursorCanvas.style.top = `-${maxCursorHeight}px`
+  cursorCanvas.style.position = 'fixed'
+  cursorCanvas.style.left = `-65000px`
+  cursorCanvas.style.top = `-65000px`
   document.body.appendChild(cursorCanvas)
 
   dnd = new BrowserDnD(cursorCanvas, cursorCanvasContext, seat, canvas, outputId)