Skip to content

Instantly share code, notes, and snippets.

@foofoodog
Last active May 7, 2016 17:54
Show Gist options
  • Save foofoodog/bc8d5108976f12fbd4b9053c6bf45be9 to your computer and use it in GitHub Desktop.
Save foofoodog/bc8d5108976f12fbd4b9053c6bf45be9 to your computer and use it in GitHub Desktop.
OctoPrint monitoring starter
<html>
<head>
<script>
var printers = [
{name: "folger", key: "raspberry"},
{name: "simple", key: "raspberry"},
{name: "solid", key: "raspberry"},
{name: "printrbot", key: "raspberry"}
];
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
</head>
<body>
<!--UI-->
<div id="printers">
<div data-bind="template: { name: 'printer-template', foreach: printers }"></div>
</div>
<!--Template-->
<script type="text/html" id="printer-template">
<div>
<h2 data-bind="text: name"></h2>
<b>Printer:</b> <span data-bind="text: ko.toJSON($data.printer)"></span>
<hr />
<b>Connection:</b> <span data-bind="text: ko.toJSON($data.connection)"></span>
<hr />
<b>Job:</b> <span data-bind="text: ko.toJSON($data.job)"></span>
<hr />
<!--<b>Files:</b> <span data-bind="text: ko.toJSON($data.files)"></span><hr />-->
</div>
</script>
<!--Script-->
<script>
var api = {
interval: 5000,
calls: ["printer","job","connection" /*, "files" */],
printers: printers,
add: function (name, key) {
api.printers.push({name: name, key: key})
},
get: function(printer, call) {
var url = "http://" + printer.name + "/api/" + call + "?apikey=" + printer.key;
return $.get(url).done(function(data) {
printer[call] = data;
});
},
refresh: function() {
api.printers.forEach(function(printer) {
api.calls.forEach(function(call) {
api.get(printer, call).then(function() {
api.onRefresh(api.printers);
});
});
});
},
onRefresh: function() {} // default: NOOP
}
var viewModel = function(elementId) {
var self = this;
self.element = document.getElementById(elementId);
self.printers = ko.observableArray();
self.bind = function(printers) {
self.printers(printers);
ko.cleanNode(self.element); // hackish
ko.applyBindings(self, self.element) ;
}
api.onRefresh = function(printers) {self.bind(printers)};
api.refresh();
window.setInterval(api.refresh, api.interval);
}
var vm = new viewModel("printers");
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment