Dashing octoprint integration

Readme.md

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>

octoprint.coffee

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)

octoprint.html

<h1 class="title" data-bind="title"></h1>

<img data-bind-src="img-src"/>
<h2 data-bind="timeleft"></h2>
<p data-bind="state"></p>

octoprint.scss

// ----------------------------------------------------------------------------
// 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;
  }
}