164 lines
4.9 KiB
PHP
164 lines
4.9 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
</head>
|
|
|
|
<body>
|
|
<button id="btnRefresh">RefreshInfos</button>
|
|
|
|
<h2>Printer temperatures</h2>
|
|
<h3>
|
|
Hot end : <div id="lblHotEndTemp">NaN</div>
|
|
Target : <div id="lblHotEndTempTarget">NaN</div>
|
|
</h3>
|
|
<h3>
|
|
Bed :<div id="lblBedTemp">NaN</div>
|
|
Target : <div id="lblBedTempTarget">NaN<div>
|
|
</h3>
|
|
|
|
<label for="inptBedTempTarget">Bed temp target :</label><input type="number" min="0" id="tbxBedTempTarget">
|
|
</br>
|
|
<label for="inptHotEndTempTarget">Hot end temp target :</label><input type="number" min="0" id="tbxHotEndTempTarget">
|
|
</br>
|
|
<button id="btnSetNewTemps">confirm</button>
|
|
</body>
|
|
|
|
</html>
|
|
<script>
|
|
"use strict";
|
|
|
|
let btnRefresh = document.getElementById("btnRefresh");
|
|
let btnSetNewTemps = document.getElementById("btnSetNewTemps");
|
|
|
|
let tbxBedTemp = document.getElementById("tbxBedTempTarget");
|
|
let tbxHotEndTemp = document.getElementById("tbxHotEndTempTarget");
|
|
|
|
let loading = true;
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
load();
|
|
});
|
|
var timer = window.setInterval(function() {
|
|
RecoverPrinterInfos();
|
|
}, 1000)
|
|
btnRefresh.addEventListener('click', event => {
|
|
RecoverPrinterInfos();
|
|
});
|
|
btnSetNewTemps.addEventListener('click', event => {
|
|
let bedTemp = parseInt(tbxBedTemp.value);
|
|
let hotEndTemp = parseInt(tbxHotEndTemp.value);
|
|
setNewBedTemps(bedTemp);
|
|
setNewHotEndTemps(hotEndTemp);
|
|
});
|
|
|
|
|
|
async function fetchData(url, options = {}) {
|
|
const defaultOptions = {
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
};
|
|
const combinedOptions = {
|
|
...defaultOptions,
|
|
...options
|
|
};
|
|
try {
|
|
const response = await fetch(url, combinedOptions);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
const data = await response.json();
|
|
return data;
|
|
} catch (error) {
|
|
console.error(error);
|
|
return error;
|
|
}
|
|
}
|
|
|
|
function load(){
|
|
RecoverPrinterInfos();
|
|
}
|
|
function RecoverPrinterInfos() {
|
|
const temperaturesRoute = 'http://192.168.50.239/api/printer';
|
|
const headers = {
|
|
'X-Api-Key': 'AB36FE568344446D92F87BACD84F02CB'
|
|
};
|
|
fetchData(temperaturesRoute, {
|
|
headers
|
|
}).then(data => {
|
|
DisplayTemperatures(data);
|
|
})
|
|
.catch(error => {
|
|
//alert(error);
|
|
console.error(error);
|
|
});
|
|
}
|
|
|
|
function sendPostRequest(url, json) {
|
|
var myHeaders = new Headers();
|
|
myHeaders.append("X-Api-Key", "AB36FE568344446D92F87BACD84F02CB");
|
|
myHeaders.append("Content-Type", "application/json");
|
|
|
|
var raw = JSON.stringify(json);
|
|
|
|
var requestOptions = {
|
|
method: 'POST',
|
|
headers: myHeaders,
|
|
body: raw,
|
|
redirect: 'follow'
|
|
};
|
|
|
|
fetch(url, requestOptions)
|
|
.then(response => response.text())
|
|
.then(result => console.log(result))
|
|
.catch(error => console.log('error', error));
|
|
}
|
|
|
|
function setNewBedTemps(temp) {
|
|
let url = "http://192.168.50.239/api/printer/bed";
|
|
let json = {
|
|
"command": "target",
|
|
"target": temp
|
|
}
|
|
sendPostRequest(url, json);
|
|
}
|
|
|
|
function setNewHotEndTemps(temp) {
|
|
let url = "http://192.168.50.239/api/printer/tool";
|
|
let json = {
|
|
"command": "target",
|
|
"targets": {
|
|
"tool0": temp
|
|
}
|
|
}
|
|
sendPostRequest(url, json);
|
|
}
|
|
|
|
function DisplayTemperatures(data) {
|
|
var bedTemp = data["temperature"]["bed"]["actual"];
|
|
var bedTempTarget = data["temperature"]["bed"]["target"];
|
|
var hotEndTemp = data["temperature"]["tool0"]["actual"];
|
|
var hotEndTempTarget = data["temperature"]["tool0"]["target"]
|
|
|
|
var lblBedTemp = document.getElementById("lblBedTemp");
|
|
var lblBedTempTarget = document.getElementById("lblBedTempTarget");
|
|
var lblHotEndTemp = document.getElementById("lblHotEndTemp");
|
|
var lblHotEndTempTarget = document.getElementById("lblHotEndTempTarget");
|
|
|
|
if (loading) {
|
|
tbxBedTemp.value = bedTempTarget;
|
|
tbxHotEndTemp.value = hotEndTempTarget;
|
|
loading = false;
|
|
}
|
|
|
|
lblBedTemp.innerHTML = bedTemp;
|
|
lblBedTempTarget.innerHTML = bedTempTarget;
|
|
lblHotEndTemp.innerHTML = hotEndTemp;
|
|
lblHotEndTempTarget.innerHTML = hotEndTempTarget;
|
|
}
|
|
</script> |