Skip to content

Instantly share code, notes, and snippets.

@krichardsson
Created November 23, 2015 14:14
Show Gist options
  • Save krichardsson/063da4a2b41a0ffbf921 to your computer and use it in GitHub Desktop.
Save krichardsson/063da4a2b41a0ffbf921 to your computer and use it in GitHub Desktop.
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