Skip to content

Instantly share code, notes, and snippets.

@KTibow

KTibow/index.html

Last active January 16, 2022 19:18
Show Gist options
  • Save KTibow/75829f42a011b4478b265a4c3b82d1f7 to your computer and use it in GitHub Desktop.
Save KTibow/75829f42a011b4478b265a4c3b82d1f7 to your computer and use it in GitHub Desktop.
Download ZIP
Sends you a notification when your Prusa Mini+ finishes (change IP in server.py)
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Printer Notifier</title>
<style>
body {
background: #282233;
color: white;
font-family: system-ui, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
text-align: center;
}
button {
background: #383243;
color: white;
border: none;
cursor: pointer;
border-radius: 0.25em;
font-size: 2em;
padding: 1em;
width: fit-content;
margin: 0 auto;
}
p {
font-size: 2em;
}
span {
font-weight: bold;
}
.wrapper {
background: #383243;
width: min(33vmax, 100%);
margin: 0 auto;
border-radius: 0.25em;
position: relative;
}
.progress {
background: #7852b3;
height: 1em;
width: 0%;
border-radius: 0.25em;
}
.percent {
position: absolute;
top: 0;
left: 0;
right: 0;
}
</style>
<link rel="icon" href="https://img.icons8.com/fluency/344/3d-printer.png" />
</head>
<body>
<button onclick="Notification.requestPermission()" style="display: none">
Request Notification Permission
</button>
<p>Currently printing <span id="printName">loading...</span></p>
<div id="printStats" style="display: none">
<hr />
<i>You will be notified when the print is done (as long as this page is open).</i>
<p><span id="remaining"></span> more minutes (<span id="eta"></span>)</p>
<div class="wrapper">
<div class="progress"></div>
<span class="percent">0%</span>
</div>
</div>
<script>
const updateStatus = () => {
fetch("/status")
.then((resp) => resp.json())
.then((resp) => {
const currentlyPrinting = resp["project_name"];
document.querySelector("#printName").innerText = currentlyPrinting
? currentlyPrinting
: "nothing (idle)";
if (!currentlyPrinting && window.lastPrinting) {
if (Notification.permission === "granted") {
new Notification("Printer Notifier", {
body: "Printer is idle",
icon: "https://img.icons8.com/fluency/344/3d-printer.png",
});
} else {
alert("Please allow notifications to be shown");
}
}
if (currentlyPrinting) {
document.querySelector("#remaining").innerText = resp["time_est"] / 60;
document.querySelector("#eta").innerText = new Date(
new Date().getTime() + resp["time_est"] * 1000
).toLocaleTimeString();
document.querySelector(".progress").style.width = resp["progress"] + "%";
document.querySelector(".percent").innerText = resp["progress"] + "%";
} else {
document.querySelector(".progress").style.width = "0%";
document.querySelector(".percent").innerText = "0%";
}
document.querySelector("#printStats").style.display = currentlyPrinting ? "block" : "none";
window.lastPrinting = currentlyPrinting;
});
};
setInterval(updateStatus, 10000);
updateStatus();
if (Notification.permission !== "granted") {
document.querySelector("button").style.display = "block";
}
</script>
</body>
</html>
Raw
server.py
from sanic import Sanic, response
import requests
app = Sanic(__name__)
@app.route("/")
async def home(request):
return await response.file("index.html", mime_type="text/html")
@app.route("/status")
async def status(request):
printer_status = requests.get("http://192.168.1.53/api/telemetry").text
return response.text(printer_status)
app.run(host="0.0.0.0")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment