Update demos

zen-fs · Nov 7, 2024 · c0224cc · c0224cc
1 parent b314fc6
commit c0224cc
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 61 deletions.
diff --git a/demo/framebuffer.css b/demo/framebuffer.css
diff --git a/demo/framebuffer.html b/demo/framebuffer.html
@@ -1,11 +1,57 @@
 <html>
 	<head>
 		<title>ZenFS Devices Demo - Framebuffer</title>
-		<link rel="stylesheet" href="./framebuffer.css" />
+		<link rel="stylesheet" href="./styles.css" />
+		<style>
+			canvas {
+				width: 100%;
+			}
+		</style>
 	</head>
 	<body>
 		<p>Framebuffer demo</p>
 		<canvas id="fb"></canvas>
-		<script type="module" src="./framebuffer.js"></script>
+		<script type="module">
+			import { configure, fs } from '@zenfs/core';
+			import { framebuffer } from '@zenfs/devices';
+
+			const canvas = document.querySelector('#fb');
+			const { width, height } = canvas;
+
+			await configure({ addDevices: true });
+
+			fs.mounts.get('/dev').createDevice('/fb0', framebuffer({ canvas }));
+
+			// example: write gradient with changing hue to framebuffer
+			const screen = new Uint8Array(width * height * 4);
+
+			let hue = 0;
+
+			function hslToRgb(hue, saturation) {
+				const a = saturation / 2;
+				const f = n => {
+					const k = (n + hue / 30) % 12;
+					return 0.5 - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+				};
+				return [f(0) * 255, f(8) * 255, f(4) * 255];
+			}
+
+			function makeGradientFb() {
+				hue = (hue + 1) % 360; // Increment hue and keep it in the 0-359 range
+
+				for (let y = 0; y < height; y++) {
+					for (let x = 0; x < width; x++) {
+						const index = (y * width + x) * 4;
+						const gradientValue = (x / width) * 100; // Adjust the saturation and lightness effect
+						const [r, g, b] = hslToRgb(hue, gradientValue / 100, 0.5); // S=gradientValue, L=0.5 for vivid color
+
+						screen.set([r, g, b, 255], index);
+					}
+				}
+				fs.writeFileSync('/dev/fb0', screen, { flag: 'r+' });
+				requestAnimationFrame(makeGradientFb);
+			}
+			makeGradientFb();
+		</script>
 	</body>
 </html>
diff --git a/demo/framebuffer.js b/demo/framebuffer.js
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,10 @@
+<html>
+	<head>
+		<title>ZenFS Devices Demos</title>
+		<link rel="stylesheet" href="./styles.css" />
+	</head>
+	<body>
+		<h1>Demos:</h1>
+		<p><a href="./framebuffer">Framebuffer</a></p>
+	</body>
+</html>
diff --git a/demo/styles.css b/demo/styles.css
@@ -0,0 +1,5 @@
+body {
+	background-color: #222;
+	color: #ddd;
+	font-family: sans-serif;
+}