1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
|
// deck-it - the K1C tab: a Klipper printer, read-only bar the emergency stop
// Copyright (C) 2026 Danilo M. <danix@danix.xyz>
//
// This program is free software; you can redistribute it and/or modify
// it under the terms of the GNU General Public License version 2 as
// published by the Free Software Foundation.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License along
// with this program; if not, write to the Free Software Foundation, Inc.,
// 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
import { offline } from "../offline.js";
// Holding the stop for this long fires it: fast in an emergency, but a
// stray touch on an always-on tablet cannot kill a print.
const HOLD_MS = 800;
const STATES = {
printing: ["Printing", "good"],
paused: ["Paused", "warn"],
complete: ["Complete", "good"],
cancelled: ["Cancelled", "warn"],
error: ["Error", "bad"],
standby: ["Idle", ""],
};
const temp = (h) => (h?.temp == null ? "—" : `${Math.round(h.temp)}°`);
const target = (h) => (h?.target ? `→ ${Math.round(h.target)}° · ${Math.round((h.power ?? 0) * 100)}%` : "off");
function dur(s) {
if (s == null) return "—";
s = Math.round(s);
const h = Math.floor(s / 3600);
const m = Math.floor((s % 3600) / 60);
return h ? `${h}h ${String(m).padStart(2, "0")}m` : `${m}m`;
}
function tile(label, value, sub) {
const d = document.createElement("div");
d.className = "mtile";
d.innerHTML = '<span class="mlabel"></span><span class="mvalue num"></span><span class="msub"></span>';
d.children[0].textContent = label;
d.children[1].textContent = value;
d.children[2].textContent = sub ?? "";
return d;
}
async function emergencyStop(btn) {
btn.classList.add("sent");
btn.querySelector(".estop-label").textContent = "Stopping…";
try {
const r = await fetch("/api/k1c/emergency_stop", { method: "POST", headers: { "Content-Type": "application/json" }, body: "{}" });
btn.querySelector(".estop-label").textContent = r.ok ? "Stop sent" : "Stop FAILED";
} catch {
btn.querySelector(".estop-label").textContent = "Stop FAILED";
}
setTimeout(() => {
btn.classList.remove("sent");
btn.querySelector(".estop-label").textContent = "Emergency stop";
}, 4000);
}
// Press and hold: the ring fills over HOLD_MS, releasing early cancels.
function armHold(btn) {
let timer = null;
const cancel = () => {
clearTimeout(timer);
timer = null;
btn.classList.remove("holding");
};
btn.addEventListener("pointerdown", (e) => {
e.preventDefault();
btn.setPointerCapture(e.pointerId);
btn.classList.add("holding");
timer = setTimeout(() => {
cancel();
emergencyStop(btn);
}, HOLD_MS);
});
btn.addEventListener("pointerup", cancel);
btn.addEventListener("pointercancel", cancel);
btn.style.setProperty("--hold", `${HOLD_MS}ms`);
}
export default {
title: "K1C",
tab: "K1C",
interval: 1,
mount(el) {
el.innerHTML = `<div class="k1c">
<div class="k1c-off"></div>
<div class="k1c-on">
<div class="k1c-head">
<span class="k1c-state"></span>
<span class="k1c-file"></span>
<button class="estop" aria-label="Emergency stop: press and hold">
<span class="estop-label">Emergency stop</span><span class="estop-hint">hold</span>
</button>
</div>
<div class="k1c-alert" hidden></div>
<div class="k1c-job">
<img class="k1c-thumb" alt="Model preview" hidden>
<div class="k1c-progress">
<div class="k1c-pct num"></div>
<div class="gbar"><i></i></div>
<div class="k1c-times"></div>
</div>
</div>
<div class="k1c-body">
<div class="stats k1c-tiles"></div>
<img class="k1c-cam" alt="Printer camera" hidden>
</div>
</div>
</div>`;
armHold(el.querySelector(".estop"));
},
update(st, el) {
const off = el.querySelector(".k1c-off");
const on = el.querySelector(".k1c-on");
off.hidden = !st.offline;
on.hidden = Boolean(st.offline);
if (st.offline) {
offline(off, st.unconfigured
? { icon: "/icons/prusa-slicer.svg", title: "No printer configured",
detail: "Set the K1C's Moonraker address on keystone's deck-it page." }
: { icon: "/icons/prusa-slicer.svg", title: "K1C is off",
detail: "Switch the printer on and its progress, temperatures and camera appear here." });
return;
}
// Klipper itself down (after an emergency stop, or a config error) wins
// over the print state, which then reads stale.
const klippyDown = st.klippy && st.klippy !== "ready";
const [label, cls] = klippyDown ? [st.klippy === "shutdown" ? "Stopped" : "Klipper " + st.klippy, "bad"]
: STATES[st.state] ?? [st.state ?? "?", ""];
const pill = el.querySelector(".k1c-state");
pill.textContent = label;
pill.className = `k1c-state ${cls}`;
el.querySelector(".k1c-file").textContent = st.file ? st.file.replace(/\.gcode$/i, "") : "no job";
const alert = el.querySelector(".k1c-alert");
alert.hidden = !klippyDown;
alert.textContent = klippyDown ? `${st.message || "Klipper is not ready"}` : "";
// The slicer's preview of the model, loaded from the printer like the
// camera; set only when the URL changes, so it does not reload each poll.
const thumb = el.querySelector(".k1c-thumb");
if (!st.thumbnail || !st.file) thumb.hidden = true;
else if (thumb.dataset.src !== st.thumbnail) {
thumb.dataset.src = st.thumbnail;
thumb.hidden = true;
thumb.onload = () => { thumb.hidden = false; };
thumb.onerror = () => { thumb.hidden = true; };
thumb.src = st.thumbnail;
} else if (thumb.complete && thumb.naturalWidth) thumb.hidden = false;
const active = st.state === "printing" || st.state === "paused";
const pct = Math.round((st.progress ?? 0) * 100);
el.querySelector(".k1c-progress").hidden = !active && !(st.state === "complete");
el.querySelector(".k1c-pct").textContent = `${pct}%`;
el.querySelector(".k1c-progress .gbar > i").style.width = `${pct}%`;
const eta = st.remaining != null
? new Date(Date.now() + st.remaining * 1000).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : null;
el.querySelector(".k1c-times").textContent = [
`elapsed ${dur(st.elapsed)}`,
st.remaining != null ? `left ${dur(st.remaining)} · done ${eta}` : null,
st.layers ? `layer ${st.layer ?? "?"} / ${st.layers}` : null,
].filter(Boolean).join(" · ");
const tiles = el.querySelector(".k1c-tiles");
tiles.textContent = "";
const [x, y, z] = st.position ?? [];
tiles.append(
tile("Nozzle", temp(st.extruder), target(st.extruder)),
tile("Bed", temp(st.bed), target(st.bed)),
tile("Part fan", st.fan == null ? "—" : `${Math.round(st.fan * 100)}%`),
tile("Speed", st.speed_factor == null ? "—" : `${Math.round(st.speed_factor * 100)}%`),
tile("Z", z == null ? "—" : `${z.toFixed(2)}`, x == null ? "" : `X ${x.toFixed(0)} · Y ${y.toFixed(0)}`),
tile("Filament", st.filament ? `${(st.filament / 1000).toFixed(2)} m` : "—"),
);
// The live MJPEG stream, which an <img> plays by itself, fetched by the
// tablet from the printer directly. Connected only while this tab is on
// screen: a hidden tab would keep the printer streaming for nothing.
// ponytail: needs the tablet on the printer's LAN; proxy it through the
// server if it ever is not.
const cam = el.querySelector(".k1c-cam");
const shown = st.camera && !document.hidden && el.offsetParent !== null;
if (shown && cam.dataset.src !== st.camera) {
cam.dataset.src = st.camera;
// Shown at once: a never-ending stream may never fire load. Dropped
// (camera restarted): hide it and forget it, so the next poll reconnects.
cam.onerror = () => { cam.hidden = true; delete cam.dataset.src; };
cam.src = st.camera;
cam.hidden = false;
} else if (!shown && cam.dataset.src) {
delete cam.dataset.src;
cam.removeAttribute("src");
cam.hidden = true;
}
},
};
|
