Initial commit

2026-02-18 23:47:03 +01:00
commit 94757e8cc3
8 changed files with 421 additions and 0 deletions
--- a/static/image-view.html
+++ b/static/image-view.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Test of remote view</title>
+
+	<style>
+		html, body {
+			margin: 0;
+			width: 100%;
+			height: 100%;
+			background-color: #222;
+		}
+
+
+		body {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+
+
+  /* Two 50/50 linear gradients – one horizontal, one vertical */
+  background-image:
+    linear-gradient(0deg, #f1f1f1 0% 50%, #d1d1d1 50% 100%),
+    linear-gradient(90deg, #f1f1f1 0% 50%, #d1d1d1 50% 100%);
+
+  /* Each square is 8 px; the pattern repeats */
+  background-size: 16px 16px;
+  background-repeat: repeat;
+
+  /* Blend the two gradients – multiply gives a proper “XOR” look */
+  background-blend-mode: multiply;
+
+
+		}
+
+		body.full {
+			display: block;
+			width: none;
+			height: none;
+		}
+
+
+		#viewer-image {
+			display: block;
+			border: 1px solid #864;
+			max-width: 100vw;
+			max-height: 100vh;
+		}
+
+		body.full #viewer-image {
+			border: none;
+			max-width: none;
+			max-height: none;
+		}
+
+	</style>
+
+	<script type="module">
+		import { Subscription_Endpoint } from './subscription.mjs';
+
+		document.addEventListener('DOMContentLoaded', async () => {
+
+			const viewer_image = document.getElementById('viewer-image')
+
+			viewer_image.addEventListener('click', () => {
+				document.body.classList.toggle('full');
+			})
+
+
+			const ep = new Subscription_Endpoint();
+			await ep.connect('/subscription');
+
+			ep.subscribe('demo');
+
+			ep.addEventListener('message', (ev) => {
+				viewer_image.src = URL.createObjectURL(ev.detail);
+
+				console.log("Got image", ev.detail);
+			});
+
+		});
+
+	</script>
+</head>
+<body>
+
+	<img id="viewer-image">
+
+
+</body>
+</html>