ColorPing/template.html

156 lines
4.2 KiB
HTML
Raw Permalink Normal View History

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");
2024-06-18 20:49:17 +08:00
canvas.width = 1024;
canvas.height = 1024;
const ctx = canvas.getContext("2d")
2024-06-18 20:49:17 +08:00
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";
// These properties get reset on resize
ctx.imageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
2024-06-18 20:49:17 +08:00
}
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>