Introduce floating & fullscreen modes (#144)

* add fullscreen compositor demo

* Start experimenting with always fullscreen mode

* update deps

* update docs

* start adding wasm gtk4 build

* fix breakage due to emscripten change

* fix sdk bugs + get rid of examples http-proxy setup

* fix eslint

* remove pipx

* update yarn

* update docker file

.yarnrc.yml

@@ -1,9 +1,11 @@
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
+compressionLevel: mixed
+
+enableGlobalCache: false
 
-yarnPath: .yarn/releases/yarn-3.6.3.cjs
 nodeLinker: pnpm
+
 npmPublishAccess: public
+
 npmRegistryServer: "https://registry.npmjs.org/"
-#npmAuthToken: ${TOKEN}
+
+yarnPath: .yarn/releases/yarn-4.5.0.cjs

docker/Dockerfile

@@ -1,5 +1,5 @@
 # syntax=docker/dockerfile:1
-FROM debian:bookworm-20231030-slim as BUILD
+FROM debian:bookworm-20240904-slim AS build
 ARG TARGETARCH
 
 WORKDIR /app
@@ -25,12 +25,12 @@ COPY ["packages/compositor-proxy-cli/src/", "./packages/compositor-proxy-cli/src
 COPY ["docker/compositor-proxy-cli-build.sh", "./compositor-proxy-cli-build.sh"]
 RUN ./compositor-proxy-cli-build.sh
 
-FROM debian:bookworm-20231030-slim
+FROM debian:bookworm-20240904-slim
 
 WORKDIR /app
 
-COPY --from=BUILD ["/app/gstreamer/build/subprojects/gst-plugins-bad/sys/nvcodec/libgstnvcodec.so", "./libgstnvcodec.so"]
-COPY --from=BUILD ["/app/packages/compositor-proxy-cli/package/*", "./"]
+COPY --from=build ["/app/gstreamer/build/subprojects/gst-plugins-bad/sys/nvcodec/libgstnvcodec.so", "./libgstnvcodec.so"]
+COPY --from=build ["/app/packages/compositor-proxy-cli/package/*", "./"]
 COPY ["docker/docker-entrypoint.sh", "./docker-entrypoint.sh"]
 COPY ["packages/compositor-proxy-cli/wait-until-ready.sh", "./wait-until-ready.sh"]
 COPY ["docker/10_nvidia.json", "./10_nvidia.json"]

docker/compositor-proxy-cli-build.sh

@@ -36,13 +36,13 @@ apt-get install  -y --no-install-recommends  \
     flex \
     bison \
     liborc-0.4-dev-bin \
-    pipx
+    meson
 apt-get autoremove -y
 apt-get clean
 rm -rf /var/lib/apt/lists/*
 git clone --depth 1 --branch 1.20 https://gitlab.freedesktop.org/gstreamer/gstreamer.git
 cd gstreamer
-pipx run meson build \
+meson build \
         --buildtype=release \
         --strip \
         -Dgpl=enabled \

docs/Gemfile.lock

@@ -212,9 +212,9 @@ GEM
       jekyll-feed (~> 0.9)
       jekyll-seo-tag (~> 2.1)
     minitest (5.20.0)
-    nokogiri (1.15.4-arm64-darwin)
+    nokogiri (1.16.7-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.15.4-x86_64-linux)
+    nokogiri (1.16.7-x86_64-linux)
       racc (~> 1.4)
     octokit (4.25.1)
       faraday (>= 1, < 3)

docs/pages/getting_started/index.md

@@ -28,16 +28,17 @@ Inside the `greenfield` repository, we'll use `yarn` to install all dependencies
 > Greenfield works best with node.js 20 or greater. You can easily install it using [nvm](https://github.com/nvm-sh/nvm).
 
 {: .note }
-> Greenfield expects [yarn 3 or greater.](https://yarnpkg.com/getting-started/install)
+> Greenfield uses [yarn 4 or greater.](https://yarnpkg.com/getting-started/install)
 
 {: .important }
-> Greenfield requires the following packages to be installed on your build system: `autoconf libtool automake pipx ninja-build bison cmake build-essential gperf`.
+> Greenfield requires the following packages to be installed on your build system: `autoconf libtool automake meson ninja-build bison cmake build-essential gperf`.
 
 ```shell
 yarn install
-yarn workspaces foreach --parallel --topological-dev \
+yarn workspaces foreach --all --parallel --topological-dev \
 --exclude @gfld/compositor-proxy \
 --exclude @gfld/compositor-proxy-cli \
+--exclude @gfld/compositor-shell \
 run build
 ```
 
@@ -53,7 +54,12 @@ Open a browser and point it at [http://localhost:8080](http://localhost:8080).
 
 [![](img_small.jpg)](img.png){:target="_blank"}
 
-Unfortunately at this point we can't run any applications because there are none available. Let's fix that in the next steps.
+{: .note }
+> The compositor-shell is also hosted at [desktop.greenfield.app](https://desktop.greenfield.app)
+
+{: .note }
+>  There is also an experimental kiosk mode available in case you only need to access a single application. An implementation of this can be found under `/examples/compositor/experimental-fullscreen`
+
 
 ## Web Applications
 
@@ -63,23 +69,19 @@ Greenfield provides a few examples that we can use.
 - `examples/sdk` shows the usage of the [Greenfield WebAssembly SDK](/pages/sdk) in porting existing native desktop applications to Greenfield (experimental).
 - `examples/webapps` has some ready-to-run examples.
 
-We'll begin simple with `examples/webapps/simple-shm`.
+We'll begin simple and start the app from `examples/webapps/simple-shm`.
 
 ```shell
-yarn workspace @gfld/example-webapp-simple-shm start
+web:simple-shm-web/app.html
 ```
 
-The Greenfield Compositor Shell maps the URL `web:simple-shm` to `http://localhost:9001`, which is the 
-address of this example web app. Type this URL in the Greenfield address bar and some psychedelic circles should appear.
-To exit the application, press the `esc` key.
+Type this URL in the Greenfield address bar and some psychedelic circles should appear.
+Press the `esc` key to exit the application.
 
 [![](img_1_small.jpg)](img_1.png){:target="_blank"}
 
 {: .note }
-> The Compositor Shell uses a reverse proxy config to map `web:simple-shm` to `http://localhost:9001`.
-
-{: .note }
-> You might have noticed that `web:simple-shm` is not a normal looking URL as the hostname is missing. The reason for this is that
+> You might have noticed that `web:simple-shm-web/app.html` is not a normal looking URL as the hostname is missing. The reason for this is that
 > Greenfield web apps can only run inside same-origin iframes because of features like `SharedArrayBuffer`. Greenfield thus fills
 > in the hostname for you, so you don't having to type out the same hostname each time.
 
@@ -93,23 +95,19 @@ Inside `examples/sdk/weston`
 {: .important }
 > Building the WebAssembly examples require a working SDK. Head over to the SDK [documentation](/pages/sdk) to set it up.
 
-If all went well, a new `build/clients` directory has appeared with a bunch of `.html`, `.js` and `.wasm`. Spin up a web server so these can be served.
-
-```shell
-yarn workspace @gfld/example-weston-clients preview
-```
+If all went well, a new `build/clients` directory has appeared with a bunch of `.html`, `.js` and `.wasm`.
 
 Enter any of these in the URL bar to see a WebAssembly desktop application.
 
 ```shell
-web:weston-clients/weston-eventdemo.html
-web:weston-clients/weston-flower.html
-web:weston-clients/weston-fullscreen.html
-web:weston-clients/weston-resizor.html
-web:weston-clients/weston-scaler.html
-web:weston-clients/weston-smoke.html
-web:weston-clients/weston-stacking.html
-web:weston-clients/weston-transformed.html
+web:weston/weston-eventdemo.html
+web:weston/weston-flower.html
+web:weston/weston-fullscreen.html
+web:weston/weston-resizor.html
+web:weston/weston-scaler.html
+web:weston/weston-smoke.html
+web:weston/weston-stacking.html
+web:weston/weston-transformed.html
 ```
 
 [![](img_2_small.jpg)](img_2.png){:target="_blank"}

docs/pages/sdk/index.md

@@ -23,7 +23,7 @@ The SDK is located inside directory `sdk`. To use the SDK, we first need to buil
 > Make sure all required Greenfield packages are installed. These are listed in [Greenfield Getting Started](/pages/getting_started)  
 
 ```shell
-./build_sysroot.sh
+./build.sh
 ```
 
 This will build a sysroot with number of commonly used graphics libraries. 

examples/compositor/experimental-fullscreen/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

examples/compositor/experimental-fullscreen/README.md

@@ -0,0 +1,18 @@
+About
+=
+
+Example of a compositor running a single remote GTK4 demo application. The GTK4 demo application is expected to be
+provided externally by a compositor-proxy, e.g. `packages/compositor-proxy-cli` in this repo.
+
+Running
+=
+
+- `yarn install`
+- `yarn start`
+- Go to `http://localhost:8080`
+
+The remote url is hard-coded inside `src/index.ts` as `http://localhost:8081/gtk4-demo` but can easily be adjusted to e.g. `https://my.domain.com/someapp` in case
+you want to run your own remote compositor-proxy.
+
+The fullscreen application can be installed as a [Progressive Web App](https://en.wikipedia.org/wiki/Progressive_web_app) or PWA by browsers that support it.
+When installed as a PWA, the application will still be running remotely but will be integrated as it were a local application.

examples/compositor/experimental-fullscreen/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>New Application</title>
+    <link rel="manifest" href="/app.webmanifest">
+    <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/index.ts"></script>
+<canvas id="output"></canvas>
+</body>
+</html>

examples/compositor/experimental-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"
+  }
+}

examples/compositor/experimental-fullscreen/public/app.webmanifest

@@ -0,0 +1,11 @@
+{
+   "name": "gtk4-demo",
+   "display": "standalone",
+   "start_url": ".",
+   "icons": [
+     {
+       "src": "GTK_logo.svg",
+       "sizes": "any"
+     }
+   ]
+}

examples/compositor/experimental-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: 'experimental-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()
+}

examples/compositor/experimental-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"]
+}

examples/compositor/experimental-fullscreen/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  base: "./",
+  server: {
+    host: 'localhost',
+    port: 8080,
+    strictPort: true,
+    cors: false,
+    headers: {
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+    },
+  }
+});

examples/sdk/gtk4/.gitignore

@@ -0,0 +1 @@
+build

examples/sdk/gtk4/README.md

@@ -0,0 +1 @@
+Currently broken because of a stack overflow bug. If you're feeling adventurous you can enable the gtk4 build in the sdk and gives this example a try.

examples/sdk/gtk4/build-aux/meson/gen-demo-header.py

@@ -0,0 +1,26 @@
+#!/usr/bin/env python3
+
+import os
+import subprocess
+import sys
+
+repodir = sys.argv[1]
+profile = sys.argv[2]
+
+sys.stdout.write("/* This file is auto-generated. Do not edit. */\n")
+sys.stdout.write("#pragma once\n")
+sys.stdout.write("\n")
+sys.stdout.write(f"#define PROFILE \"{profile}\"\n")
+
+short_sha = os.environ.get('CI_COMMIT_SHORT_SHA')
+if short_sha is None:
+    cmd = ["git", "-C", repodir, "rev-parse", "--short", "HEAD"]
+    try:
+        with subprocess.Popen(cmd, stdout=subprocess.PIPE) as p:
+            short_sha = p.stdout.read().decode('utf-8').rstrip("\n")
+    except FileNotFoundError:
+        short_sha = ''
+        if profile != 'default':
+            short_sha = 'devel'
+
+sys.stdout.write(f"#define VCS_TAG \"{short_sha}\"\n")