|
|
|
<html> |
|
<head> |
|
<title>KD7BBC's 3d printing page</title> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script> |
|
<script src="/taz5/static/webassets/packed_client.js"></script> |
|
|
|
<script language="javascript"> |
|
var hosts = { |
|
mk2: '/mk2', |
|
mpmini: '/mpmini', |
|
taz5: '/taz5' |
|
}; |
|
var hostKeys = Object.keys(hosts); |
|
function getUpdater(printer) { |
|
return function() { |
|
UpdatePrinter(printer); |
|
}; |
|
} |
|
function OctoPrintFor(printer) { |
|
OctoPrint.options.apikey = APIKeys[printer]; |
|
OctoPrint.options.baseurl = hosts[printer]; |
|
return OctoPrint; |
|
} |
|
function formatTime(seconds) { |
|
dur = moment.duration(seconds, 'seconds'); |
|
return dur.humanize(); |
|
} |
|
function UpdatePrinter(printer) { |
|
return loadingDone.then(function() { |
|
var histDfd = OctoPrintFor(printer).printer.getFullState({history: false, exclude: ["sd"]}); |
|
var jobDfd = OctoPrintFor(printer).job.get(); |
|
$.when(histDfd, jobDfd).then(function(resp, job) { |
|
resp = resp[0]; job = job[0]; |
|
var status = ""; |
|
if (resp.state.flags.ready) { |
|
status = "Ready"; |
|
} |
|
if (resp.state.flags.printing) { |
|
status = job.progress.completion.toFixed(1) + "% done printing " + job.job.file.name + " <br/>"; |
|
if (job.progress.printTimeLeft) { |
|
status += "(ETL " + formatTime(job.progress.printTimeLeft) + " remaining.)"; |
|
} else { |
|
status += "(calculating estimated time left....)"; |
|
} |
|
} |
|
var printStatus = $("#" + printer), |
|
webCamCont = printStatus.find(".webcam"); |
|
// Clear out the current "things" and replace them |
|
webCamCont.find("div").remove(); |
|
// Add temperatures |
|
Object.keys(resp.temperature).forEach(function(tool) { |
|
webCamCont.prepend($("<div class='temp'>" + tool + ": " + resp.temperature[tool].actual.toFixed(1) + "°C -> " + resp.temperature[tool].target.toFixed(1) + "°C</div>")); |
|
}); |
|
webCamCont.append("<div class='status'>Status: " + status + "</div>"); |
|
setTimeout(getUpdater(printer), 10000); |
|
}, function(err) { |
|
var printStatus = $("#" + printer), |
|
webCamCont = printStatus.find(".webcam"); |
|
webCamCont.find("div.status").remove(); |
|
console.warn("Error getting state from printer:", printer, err); |
|
webCamCont.append("<div class='status'>Error getting status: " + err.responseText + "</div>"); |
|
setTimeout(getUpdater(printer), 60000); |
|
}); |
|
}); |
|
} |
|
var apiRegex = /UI_API_KEY = "([0-9A-Fa-f]*)"/; |
|
function getAPIKey(rootUrl) { |
|
var pageDfd = $.get(rootUrl).then(function(pageData) { |
|
pageData = pageData.substr(0,3072); |
|
return apiRegex.exec(pageData)[1]; |
|
}); |
|
return pageDfd; |
|
} |
|
var APIKeys = {}; |
|
var keyDfds = hostKeys.map(function(host) { return getAPIKey(hosts[host]); }); |
|
var loadingDone = $.when.apply($, keyDfds).then(function() { |
|
[].forEach.call(arguments, function(arg, i, arr) { |
|
APIKeys[hostKeys[i]] = arr[i]; |
|
UpdatePrinter(hostKeys[i]); |
|
}); |
|
}); |
|
</script> |
|
<style> |
|
.printer { |
|
display: block; width: 30%; min-width: 400px; float: left; border: 1px solid lightgray; padding: 10px; |
|
} |
|
.printer label { |
|
font-weight: bolder; font-size: 120%; text-align: center; display: block; |
|
} |
|
.printer img { |
|
max-width: 100%; display: block; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<div class="printer" id="mpmini"> |
|
<label>MonoPrice MP Mini Select</label> |
|
<div class="webcam"> |
|
<div class="temp">Hotend: N/A</div> |
|
<div class="temp">Bed: N/A</div> |
|
<img src="/mpmini/webcam/?action=stream&1483251353028" alt="No camera found"> |
|
<div class="status">Loading...</div> |
|
</div> |
|
</div> |
|
|
|
<div class="printer" id="mk2"> |
|
<label>Original Prusa I3 mk2</label> |
|
<div class="webcam"> |
|
<div class="temp">Hotend: N/A</div> |
|
<div class="temp">Bed: N/A</div> |
|
<img src="/mk2/webcam/?action=stream&1483251353028" alt="No camera found"> |
|
<div class="status">Loading...</div> |
|
</div> |
|
</div> |
|
|
|
<div class="printer" id="taz5"> |
|
<label>Heavily modified Lulzbot Taz 5</label> |
|
<div class="webcam"> |
|
<div class="temp">Hotend: N/A</div> |
|
<div class="temp">Bed: N/A</div> |
|
<img src="/taz5/webcam/?action=stream&1483251353028" alt="No camera found"> |
|
<div class="status">Loading...</div> |
|
</div> |
|
</div> |
|
|
|
</body> |
|
</html> |
Is there any way to adopt this to work in something like XAMPP?