go/printctrl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source 
Signed-off-by: Thomas Klaehn <thomas.klaehn@perinet.io>
This commit is contained in:
Thomas Klaehn
2025-09-10 08:39:58 +02:00
commit 35bbcd7a6d
16 changed files with 944 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
webui/index.html Normal file
View File

@@ -0,0 +1,113 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/slider.css">
<title id="title">3D Drucker</title>
<script type="text/javaScript">
const POWER_STATE_URL = "/power/state";
const DATA_STATE_URL = "/data/state";
const PRINTER_STATE_URL = "/printer/state";
function init() {
get_state(PRINTER_STATE_URL, "printer_slider");
get_state(POWER_STATE_URL, "power_slider");
get_state(DATA_STATE_URL, "data_slider");
setInterval(poll, 1000);
}
function poll() {
get_state(PRINTER_STATE_URL, "printer_slider");
get_state(POWER_STATE_URL, "power_slider");
get_state(DATA_STATE_URL, "data_slider");
}
function get_state(url, target) {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
xhr.responseType = "json";
xhr.onload = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
let state = xhr.response
let btn = document.getElementById(target);
let chk = false;
if(state.state === "on") {
chk = true;
}
btn.checked = chk;
} else {
console.log(`Error: ${xhr.status}`);
}
};
}
function check(checkbox, name) {
var obj;
var url;
if(checkbox.checked) {
obj = '{"state":"on"}'
} else {
obj = '{"state":"off"}'
}
if(name === "power") {
url = POWER_STATE_URL;
} else if(name === "data") {
url = DATA_STATE_URL;
} else if(name === "printer") {
url = PRINTER_STATE_URL;
}
const xhr = new XMLHttpRequest();
xhr.open("PATCH", url);
xhr.setRequestHeader("Content-type", "application/json; charset=utf-8");
// xhr.onload = () => {
// var data = JSON.parse(xhr.responseText);
// if (xhr.readyState == 4 && xhr.status == "202") {
// console.log(data);
// } else {
// console.log(`Error: ${xhr.status}`);
// }
// };
xhr.send(obj);
}
</script>
</head>
<body onload=init()>
<div class="headercontainer">
<!-- <div class="meta">
<div class="left" style="line-height: 24px;font-weight: bold;" id="headline">Wasser</div>
<div class="middle"></div>
<div class="right"><span></span></div>
</div> -->
<!-- <div class="header" id="header_cnt">
<div class="headerlogo"><img src="images/logo_perinet.png" width="258" height="94" alt="" /></div>
</div> -->
</div>
<div id="content">
<h1>3D Drucker</h1>
<label class="switch">
<input id="printer_slider" type="checkbox" onchange="check(this, 'printer')">
<span class="slider round"></span>
</label>
<h2>Schalter</h2>
<table>
<tr>
<td>Strom:</td>
<td>
<label class="switch">
<input id="power_slider" type="checkbox" onchange="check(this, 'power')">
<span class="slider round"></span>
</label>
</td>
</tr>
<tr>
<td>Daten:</td>
<td>
<label class="switch">
<input id="data_slider" type="checkbox" onchange="check(this, 'data')">
<span class="slider round"></span>
</label>
</td>
</tr>
</table>
</div>
</body>
</html>