Volumio now playing widget for Smashing dashboard

volumio-smashing-widget.md

Volumio Now Playing Widget

Using the excellent Volumio websocket APIs

Tested with Music Library, Spotify Connect, Webradio, Mixcloud.

1. Add files to smashing/widgets/volumio
2. Change line 5 of volumio.coffee to the LAN address of your Volumio device
3. Also need socket.io v1.7.1 (socket.io.min.js) in your smashing/assets/javascripts folder
4. Add this snippet to your dashboard definition

   <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
      <div data-id="volumio" data-view="Volumio" data-title="Now Playing"></div>
   </li>

TODO:

• Fix rounding bugs
• Play queue?
• Multiroom?

volumio.coffee

class Dashing.Volumio extends Dashing.Widget
  
  ready: ->
    # Change this to your Volumio server address
    @volumioServer = 'http://192.168.0.88:3000'

    @socket = io(@volumioServer)
    @socket.on('connect', () ->
      console.log 'connected to server' 
      return)

    @playingdata = {"title":"Inactive", "artist":"Volumio"}
    @socket.on("pushState", @pushData)
    setInterval(@nowPlaying, 500)
    
  pushData:(data) => 
    #console.log data  
    @playingdata = data
    return

  nowPlaying: =>
    @socket.emit("getState","")
    #console.log @playingdata
    @set('song', @playingdata.title)
    @set('artist', @playingdata.artist)
    @set('cover',  (if @playingdata.trackType == "mp3" || @playingdata.trackType == "flac" then @volumioServer else "")  +  @playingdata.albumart)
    @set('position', @minSec(@playingdata.seek / 1000))
    @set('duration', @minSec(@playingdata.duration))
    return

  minSec: (secs) ->
    mins = Math.floor(secs / 60)
    remainder = secs - (mins * 60)
    return mins + (Math.round(remainder) / 100)

volumio.html

<h1 class="title" data-bind="artist"></h1>
<img data-bind-src="cover" data-showif="cover" src="" />
<h3 class="song" data-bind="song"></h3>
<p class="more-info"><span data-bind="position" data-showif="position"></span> 
    / <span data-bind="duration" data-showif="duration"></span></p>

volumio.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #9664C8;
$title-color:       rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-volumio styles
// ----------------------------------------------------------------------------
.widget-volumio {
  background-color: $background-color;
}

.title, .more-info {
  color: $title-color;
}

img{
  width: 50%;
}