2023-03-07 02:02:36 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
2024-06-18 20:49:17 +08:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
<title>IPV6 Canvas</title>
|
2023-03-07 02:02:36 +08:00
|
|
|
<style>
|
2024-06-18 20:49:17 +08:00
|
|
|
body {
|
2023-03-07 02:02:36 +08:00
|
|
|
background-color: lightslategrey;
|
|
|
|
|
}
|
2024-06-18 20:49:17 +08:00
|
|
|
|
|
|
|
|
#display {
|
2023-03-07 02:02:36 +08:00
|
|
|
margin-right: auto;
|
|
|
|
|
margin-left: auto;
|
2024-06-18 20:49:17 +08:00
|
|
|
margin-top: 2em;
|
2023-03-07 02:02:36 +08:00
|
|
|
display: block;
|
|
|
|
|
border: black 2px;
|
|
|
|
|
}
|
2024-06-18 20:49:17 +08:00
|
|
|
|
|
|
|
|
.information {
|
|
|
|
|
& {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
color: white;
|
|
|
|
|
background-color: rgb(100, 100, 200);
|
|
|
|
|
/* Collapsed */
|
|
|
|
|
max-width: 10em;
|
|
|
|
|
top: 0;
|
|
|
|
|
opacity: 84%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
& > :first-child {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
& > :nth-child(2) {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
2023-03-07 02:02:36 +08:00
|
|
|
}
|
2024-06-18 20:49:17 +08:00
|
|
|
|
|
|
|
|
.information.active {
|
|
|
|
|
& {
|
|
|
|
|
max-width: 30em;
|
|
|
|
|
top: 1em;
|
|
|
|
|
opacity: 80%;
|
|
|
|
|
padding-left: 0.6em;
|
|
|
|
|
padding-right: 0.6em;
|
|
|
|
|
padding-bottom: 0.6em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
& > :first-child {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
& > :nth-child(2) {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
2023-03-07 02:02:36 +08:00
|
|
|
}
|
2024-06-18 20:49:17 +08:00
|
|
|
|
2023-03-07 02:02:36 +08:00
|
|
|
.dot {
|
|
|
|
|
height: 25px;
|
|
|
|
|
width: 25px;
|
|
|
|
|
background-color: #ff8200;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
}
|
2024-06-18 20:49:17 +08:00
|
|
|
|
|
|
|
|
.text-center {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.text-underline {
|
|
|
|
|
text-decoration: underline;
|
2023-03-07 02:02:36 +08:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div>
|
2024-06-18 20:49:17 +08:00
|
|
|
<div class="information active" id="information">
|
|
|
|
|
<div>
|
|
|
|
|
<h2>IPv6 Canvas</h2>
|
|
|
|
|
<div style="overflow-x: auto">
|
|
|
|
|
<b>ping {{.BaseIP}}XXXX:YYYY:11RR:GGBB</b>
|
|
|
|
|
<br>Substitute coordinates and color, then ping. Values are hexadecimal.
|
|
|
|
|
</div>
|
|
|
|
|
<br>Canvas size: {{.CanvasWidth}}x{{.CanvasHeight}}<br>
|
|
|
|
|
Connection status: <span id="connectionStatus" class="dot"></span>
|
|
|
|
|
<span style="float: right">
|
|
|
|
|
<a class="text-underline" onclick="infoHandler()">Collapse</a>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text-center">
|
|
|
|
|
<a class="text-underline" onclick="infoHandler()">Show information</a>
|
|
|
|
|
</div>
|
2023-03-07 02:02:36 +08:00
|
|
|
</div>
|
2024-06-18 20:49:17 +08:00
|
|
|
|
|
|
|
|
<canvas id="display"></canvas>
|
2023-03-07 02:02:36 +08:00
|
|
|
</div>
|
|
|
|
|
</body>
|
|
|
|
|
<script>
|
|
|
|
|
const canvas = document.getElementById("display");
|
|
|
|
|
const ctx = canvas.getContext("2d")
|
|
|
|
|
ctx.imageSmoothingEnabled = false;
|
|
|
|
|
ctx.mozImageSmoothingEnabled = false;
|
|
|
|
|
ctx.webkitImageSmoothingEnabled = false;
|
|
|
|
|
|
2024-06-18 20:49:17 +08:00
|
|
|
canvas.width = 1024;
|
|
|
|
|
canvas.height = 1024;
|
|
|
|
|
|
|
|
|
|
async function resizeCanvas() {
|
|
|
|
|
let desiredSize = document.documentElement.clientWidth - 20;
|
|
|
|
|
if (desiredSize > 1024) {
|
|
|
|
|
desiredSize = 1024
|
|
|
|
|
}
|
|
|
|
|
canvas.style.width = desiredSize.toString() + "px";
|
|
|
|
|
canvas.style.height = desiredSize.toString() + "px";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
window.onresize = resizeCanvas;
|
|
|
|
|
|
|
|
|
|
resizeCanvas()
|
|
|
|
|
|
2023-03-07 02:02:36 +08:00
|
|
|
ctx.fillStyle = "#000000";
|
|
|
|
|
ctx.font = "30px Arial";
|
2024-06-18 20:49:17 +08:00
|
|
|
ctx.fillText("Please wait...", 0, 200, 170);
|
|
|
|
|
|
|
|
|
|
const evtSource = new EventSource("/stream");
|
2023-03-07 02:02:36 +08:00
|
|
|
evtSource.addEventListener("u", (event) => {
|
|
|
|
|
let img = new Image();
|
|
|
|
|
img.src = "data:image/png;base64," + event.data;
|
|
|
|
|
img.onload = function () {
|
|
|
|
|
ctx.drawImage(img, 0, 0, 1024, 1024);
|
|
|
|
|
};
|
|
|
|
|
img.onerror = function (error) {
|
|
|
|
|
console.log("Img Onerror:", error);
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
evtSource.onerror = (err) => {
|
|
|
|
|
console.log(err)
|
2024-06-18 20:49:17 +08:00
|
|
|
document.getElementById("connectionStatus").style.setProperty("background-color", "#d20000")
|
2023-03-07 02:02:36 +08:00
|
|
|
};
|
|
|
|
|
evtSource.onopen = () => {
|
2024-06-18 20:49:17 +08:00
|
|
|
document.getElementById("connectionStatus").style.setProperty("background-color", "#00a30e")
|
2023-03-07 02:02:36 +08:00
|
|
|
};
|
2024-06-18 20:49:17 +08:00
|
|
|
|
|
|
|
|
function infoHandler() {
|
|
|
|
|
document.getElementById("information").classList.toggle("active");
|
|
|
|
|
window.scrollTo({top: 0})
|
2023-03-07 02:02:36 +08:00
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</html>
|
