You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

62 lines
1.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Draw draw draw</title>
<script src="wss.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Display</h1>
<div id="svg-container" class="destination">
<svg
class="hidden"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="svgElement"
x="0px"
y="0px"
width="200px"
height="200px"
viewBox="0 0 500 500"
enable-background="new 0 0 100 100"
preserveAspectRatio="none"
xml:space="preserve"
></svg>
</div>
<script>
const svgModel = document.querySelector("#svgElement");
const container = document.querySelector("#svg-container");
const socket = new ReconnectingWebSocket(location.origin.replace(/^http/, "ws"));
socket.onopen = (event) => {
socket.send(JSON.stringify({ type: "hello" }));
console.log("Connected as destination!");
};
socket.onmessage = (event) => {
let message;
try {
message = JSON.parse(event.data);
} catch (e) {}
if (message?.type == "drawings") {
let svg = svgModel.cloneNode();
svg.classList.remove("hidden");
let path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", message.paths);
path.setAttribute("fill", "none");
path.setAttribute("stroke", "currentColor");
path.setAttribute("stroke-width", 8);
svg.appendChild(path);
container.appendChild(svg);
}
};
</script>
</body>
</html>