Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dashing octoprint integration

Simple octoprint integration for dashing

The status and remaining time is pulled in from octoprint by the client. An image is taken from a webcam and added as background for the widget.

Add to your dashboard

<li data-sizex="1" data-sizey="1">
  <div data-id="octoprint" data-view="Octoprint" data-title="3D printer"></div>
</li>
class Dashing.Octoprint extends Dashing.Widget
ready: ->
setInterval(@checkStatus, 5000)
checkStatus: =>
@updateImage()
$.ajax 'http://my.octoprint.url/api/job',
type: 'GET'
dataType: 'json'
headers: {
'X-Api-Key': 'my-octoprint-api-key'
}
context: this
error: (jqXHR, status, error) ->
@set('state', "Not available")
@set('timeleft', "")
success: (job, textStatus, jqXHR) ->
@set('state', job.state)
@printTime(job.progress.printTimeLeft)
printTime: (seconds) =>
h = Math.floor(seconds / 3600)
m = Math.floor((seconds - h * 3600) / 60)
s = seconds - h * 3600 - m * 60
@set('timeleft', h + ":" + @formatTime(m) + ":" + @formatTime(s))
formatTime: (i) ->
if i < 10 then "0" + i else i
updateImage: ->
date = new Date
src = 'http://my.webcam.url/image.jpg?' + date.getTime()
@set('img-src', src)
<h1 class="title" data-bind="title"></h1>
<img data-bind-src="img-src"/>
<h2 data-bind="timeleft"></h2>
<p data-bind="state"></p>
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #505050;
// ----------------------------------------------------------------------------
// Widget-octoprint styles
// ----------------------------------------------------------------------------
.widget-octoprint {
background-color: $background-color;
img {
position: absolute;
top: 135px;
left: 0px;
opacity: 0.3;
}
p {
margin-bottom: 170px;
}
h1 {
margin-bottom: 0px;
}
h2 {
font-size: 52px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment