Skip to content

Instantly share code, notes, and snippets.

@paulusm

paulusm/volumio-smashing-widget.md

Last active April 10, 2022 07:30
Download ZIP

Revisions

  1. paulusm revised this gist Apr 10, 2022. 2 changed files with 1 addition and 1 deletion.
    0 readme.md → volumio-smashing-widget.md
    View file
    File renamed without changes.
    2 changes: 1 addition & 1 deletion volumio.coffee
    View file
    Original file line number Diff line number Diff line change
    @@ -24,7 +24,7 @@ class Dashing.Volumio extends Dashing.Widget
    #console.log @playingdata
    @set('song', @playingdata.title)
    @set('artist', @playingdata.artist)
    @set('cover', (if @playingdata.trackType == "mp3" then @volumioServer else "") + @playingdata.albumart)
    @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
  2. paulusm revised this gist Apr 9, 2022. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,7 @@
    # Volumio Now Playing Widget

    Using the excellent [Volumio websocket APIs](https://volumio.github.io/docs/API/WebSocket_APIs.html)

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

    ![image](https://user-images.githubusercontent.com/808541/162487435-b8fb277d-1acc-4e09-9211-bfffdbd246bb.png)
  3. paulusm revised this gist Apr 9, 2022. 3 changed files with 12 additions and 5 deletions.
    6 changes: 5 additions & 1 deletion readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -13,4 +13,8 @@ Tested with Music Library, Spotify Connect, Webradio, Mixcloud.
    <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?
    6 changes: 4 additions & 2 deletions volumio.coffee
    View file
    Original file line number Diff line number Diff line change
    @@ -1,15 +1,16 @@

    class Dashing.Volumio extends Dashing.Widget

    ready: ->
    # Change this to your Volumio server address
    @volumioServer = 'http://localhost:8030'
    @volumioServer = 'http://192.168.0.88:3000'

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

    @playingdata = {"title":"Not Playing", "artist":"No Artist"}
    @playingdata = {"title":"Inactive", "artist":"Volumio"}
    @socket.on("pushState", @pushData)
    setInterval(@nowPlaying, 500)

    @@ -32,3 +33,4 @@ class Dashing.Volumio extends Dashing.Widget
    mins = Math.floor(secs / 60)
    remainder = secs - (mins * 60)
    return mins + (Math.round(remainder) / 100)

    5 changes: 3 additions & 2 deletions volumio.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    <h1 class="title" data-bind="artist"></h1>
    <img data-bind-src="cover" src="" />
    <img data-bind-src="cover" data-showif="cover" src="" />
    <h3 class="song" data-bind="song"></h3>
    <p class="more-info"><span data-bind="position"></span> / <span data-bind="duration"></span></p>
    <p class="more-info"><span data-bind="position" data-showif="position"></span>
    / <span data-bind="duration" data-showif="duration"></span></p>
  4. paulusm revised this gist Apr 8, 2022. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -5,8 +5,9 @@ Tested with Music Library, Spotify Connect, Webradio, Mixcloud.
    ![image](https://user-images.githubusercontent.com/808541/162487435-b8fb277d-1acc-4e09-9211-bfffdbd246bb.png)

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

    ```html
    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
  5. paulusm revised this gist Apr 8, 2022. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,6 @@
    # Volumio Widget
    # Volumio Now Playing Widget

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

    ![image](https://user-images.githubusercontent.com/808541/162487435-b8fb277d-1acc-4e09-9211-bfffdbd246bb.png)

  6. paulusm revised this gist Apr 8, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@

    1. Add files to smashing/widgets/volumio
    2. Also need [socket.io v1.7.1](https://github.com/socketio/socket.io/releases/tag/1.7.1) (socket.io.min.js) in your smashing/assets/javascripts folder
    3. Add this snipped to dashboard definition
    3. Add this snippet to your dashboard definition

    ```html
    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
  7. paulusm revised this gist Apr 8, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    ![image](https://user-images.githubusercontent.com/808541/162487435-b8fb277d-1acc-4e09-9211-bfffdbd246bb.png)

    1. Add files to smashing/widgets/volumio
    2. Also need socket.io in your smashing/assets/javascripts folder
    2. Also need [socket.io v1.7.1](https://github.com/socketio/socket.io/releases/tag/1.7.1) (socket.io.min.js) in your smashing/assets/javascripts folder
    3. Add this snipped to dashboard definition

    ```html
  8. paulusm revised this gist Apr 8, 2022. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,7 @@
    # Volumio Widget

    ![image](https://user-images.githubusercontent.com/808541/162487435-b8fb277d-1acc-4e09-9211-bfffdbd246bb.png)

    1. Add files to smashing/widgets/volumio
    2. Also need socket.io in your smashing/assets/javascripts folder
    3. Add this snipped to dashboard definition
  9. paulusm revised this gist Apr 8, 2022. 2 changed files with 9 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,8 @@
    # Volumio Widget

    1. Add files to smashing/widgets/volumio
    2. Also need socket.io in your smashing/assets/javascripts folder
    3. Add this snipped to dashboard definition

    ```html
    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
    4 changes: 4 additions & 0 deletions volumio.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    <h1 class="title" data-bind="artist"></h1>
    <img data-bind-src="cover" src="" />
    <h3 class="song" data-bind="song"></h3>
    <p class="more-info"><span data-bind="position"></span> / <span data-bind="duration"></span></p>
  10. paulusm revised this gist Apr 8, 2022. 2 changed files with 54 additions and 0 deletions.
    34 changes: 34 additions & 0 deletions volumio.coffee
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,34 @@
    class Dashing.Volumio extends Dashing.Widget

    ready: ->
    # Change this to your Volumio server address
    @volumioServer = 'http://localhost:8030'

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

    @playingdata = {"title":"Not Playing", "artist":"No Artist"}
    @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" 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)
    20 changes: 20 additions & 0 deletions volumio.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    // ----------------------------------------------------------------------------
    // 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%;
    }
  11. paulusm created this gist Apr 8, 2022.
    6 changes: 6 additions & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@

    ```html
    <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>
    ```