234 lines
7.5 KiB
PHP
234 lines
7.5 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 display: inline>
|
|
<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>
|
|
|
|
<h2>Job</h2>
|
|
<h3>Status : </h3>
|
|
<h3 id="lblJobStatus">NaN</h3>
|
|
<h3>Completion : </h3>
|
|
<h3 id="lblCompletion">NaN</h3>
|
|
<h3>Print time : </h3>
|
|
<h3 id="lblPrintTime">NaN</h3>
|
|
<h3>Time left : </h3>
|
|
<h3 id="lblPrintTimeLeft">NaN</h3>
|
|
|
|
<h2>Print</h2>
|
|
<h3>Estimated print time :</h3>
|
|
<h3 id="lblEstimatedPrintTime">NaN</h3>
|
|
|
|
<h3><b>Filament</b></h3>
|
|
<h3>length :</h3>
|
|
<h3 id="lblFilamentLength">NaN</h3>
|
|
<h3>volume :</h3>
|
|
<h3 id="lblFilamentVolume">NaN</h3>
|
|
|
|
<h3><b>File</b></h3>
|
|
<h3>Filename :</h3>
|
|
<h3 id="lblJobFileName">NaN</h3>
|
|
<h3>Last print time :</h3>
|
|
<h3 id="lblJobFileLastPrintedTime">NaN</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>
|
|
|
|
<h3>Monitor</h3>
|
|
<iframe src="http://192.168.50.239/webcam/?action=stream" title="webcam stream" frameborder="0" width="640" height="480">></iframe>
|
|
</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();
|
|
RecoverJobInfos();
|
|
}, 1000)
|
|
btnRefresh.addEventListener('click', event => {
|
|
RecoverPrinterInfos();
|
|
});
|
|
btnSetNewTemps.addEventListener('click', event => {
|
|
let bedTemp = parseInt(tbxBedTemp.value);
|
|
let hotEndTemp = parseInt(tbxHotEndTemp.value);
|
|
setNewBedTemps(bedTemp);
|
|
setNewHotEndTemps(hotEndTemp);
|
|
});
|
|
|
|
//Helpers
|
|
async function fetchData(url) {
|
|
const defaultOptions = {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-Api-Key': 'AB36FE568344446D92F87BACD84F02CB'
|
|
}
|
|
};
|
|
try {
|
|
const response = await fetch(url, defaultOptions);
|
|
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 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));
|
|
}
|
|
|
|
//Methods
|
|
function load() {
|
|
RecoverPrinterInfos();
|
|
}
|
|
|
|
function RecoverPrinterInfos() {
|
|
const temperaturesRoute = 'http://192.168.50.239/api/printer';
|
|
fetchData(temperaturesRoute).then(data => {
|
|
DisplayTemperatures(data);
|
|
})
|
|
.catch(error => {
|
|
console.error(error);
|
|
});
|
|
}
|
|
|
|
function RecoverJobInfos() {
|
|
let url = "http://192.168.50.239/api/job";
|
|
fetchData(url).then(data => {
|
|
DisplayJob(data);
|
|
})
|
|
.catch(error => {
|
|
console.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);
|
|
}
|
|
|
|
//Vue
|
|
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;
|
|
}
|
|
|
|
function DisplayJob(data) {
|
|
///console.log(data.state);
|
|
///console.log(data.progress);
|
|
///console.log(data.job);
|
|
let lblJobStatus = document.getElementById("lblJobStatus");
|
|
|
|
let lblCompletion = document.getElementById("lblCompletion");
|
|
let lblPrintTime = document.getElementById("lblPrintTime");
|
|
let lblPrintTimeLeft = document.getElementById("lblPrintTimeLeft");
|
|
|
|
let lblEstimatedPrintTime = document.getElementById("lblEstimatedPrintTime");
|
|
let lblFilamentLength = document.getElementById("lblFilamentLength");
|
|
let lblFilamentVolume = document.getElementById("lblFilamentVolume");
|
|
let lblJobFileName = document.getElementById("lblJobFileName");
|
|
let lblJobFileLastPrintedTime = document.getElementById("lblJobFileLastPrintedTime");
|
|
|
|
lblJobStatus.innerHTML = data.state;
|
|
|
|
lblCompletion.innerHTML = Math.floor(data.progress.completion * 100) / 100;
|
|
lblCompletion.innerHTML += "%";
|
|
lblPrintTime.innerHTML = Math.floor((data.progress.printTime / 3600) * 100) / 100;
|
|
lblPrintTime.innerHTML += "H";
|
|
lblPrintTimeLeft.innerHTML = Math.floor((data.progress.printTimeLeft / 3600) * 100) / 100;
|
|
lblPrintTimeLeft.innerHTML += "H";
|
|
|
|
lblEstimatedPrintTime.innerHTML = data.job.estimatedPrintTime;
|
|
if (data.job.filament != null) {
|
|
lblFilamentLength.innerHTML = data.job.filament.length;
|
|
lblFilamentVolume.innerHTML = data.job.filament.volume;
|
|
}
|
|
|
|
lblJobFileName.innerHTML = data.job.file.name;
|
|
lblJobFileLastPrintedTime = data.job.lastPrintTime;
|
|
}
|
|
</script> |