Updated gifs

vhs/capture.js

@@ -0,0 +1,43 @@
+const { chromium } = require('playwright');
+const fs = require('fs');
+
+const URLS = [
+  "http://localhost:5287",
+  "http://localhost:5287/cli",
+  "http://localhost:5287/yaml",
+  "http://localhost:5287/hardware/tree",
+  "http://localhost:5287/servers/list",
+  "http://localhost:5287/resources/hardware/proxmox-node01",
+  "http://localhost:5287/systems/list",
+  "http://localhost:5287/services/list"
+];
+
+(async () => {
+  const browser = await chromium.launch();
+  const page = await browser.newPage({
+    viewport: { width: 1366, height: 768 }
+  });
+
+  if (!fs.existsSync("./webui_screenshots"))
+    fs.mkdirSync("./webui_screenshots");
+
+  for (const url of URLS) {
+    const filename = url.replace(/^https?:\/\//, '').replace(/\//g, '_') + ".png";
+    console.log("Capturing", url);
+
+    await page.goto(url, {
+      waitUntil: "networkidle",
+      timeout: 30000
+    });
+
+    // extra settle time for SPA hydration
+    await page.waitForTimeout(2000);
+
+    await page.screenshot({
+      path: `webui_screenshots/${filename}`,
+      fullPage: false
+    });
+  }
+
+  await browser.close();
+})();

vhs/package-lock.json

@@ -0,0 +1,60 @@
+{
+  "name": "vhs",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "vhs",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "playwright": "^1.58.2"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
+      "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.58.2"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.58.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
+      "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    }
+  }
+}

vhs/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "vhs",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "playwright": "^1.58.2"
+  }
+}

vhs/webui_capture.sh

@@ -1,41 +1,11 @@
 #!/bin/bash
 
-# -----------------------------
-# Configuration
-# -----------------------------
-URLS=(
-  "http://localhost:5287"
-  "http://localhost:5287/hardware/tree"
-  "http://localhost:5287/servers/list"
-  "http://localhost:5287/resources/hardware/proxmox-node01"
-)
 
 RESOLUTION="1366,768"  # width,height
 OUTPUT_DIR="./webui_screenshots"
 GIF_OUTPUT="webui_screenshots/output.gif"
 DELAY=200  # delay between frames in GIF (ms)
 
-# -----------------------------
-# Prepare output folder
-# -----------------------------
-mkdir -p "$OUTPUT_DIR"
-
-# -----------------------------
-# Capture screenshots
-# -----------------------------
-echo "Capturing screenshots..."
-for URL in "${URLS[@]}"; do
-  # sanitize filename
-  FILENAME=$(echo "$URL" | sed 's~http[s]*://~~; s~/~_~g').png
-  echo " - $URL -> $FILENAME"
-  # headless Chrome screenshot
-  /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
-    --headless \
-    --disable-gpu \
-    --window-size=$RESOLUTION \
-    --screenshot="$OUTPUT_DIR/$FILENAME" \
-    "$URL"
-done
 
 # -----------------------------
 # Convert to GIF using ImageMagick