Instantly share code, notes, and snippets.

@jorkas /readme.md
Last active Dec 24, 2015

Embed
What would you like to do?
Current playing song for widget for Dashing

Current playing song widget for Dashing

Preview

Playing song

Usage

  1. Add trackprogress.js to your javascript directory
  2. Add widget code to a dashboard
  3. Copy the html, coffee and scss file to a "playingsong" directory
  4. Update the songtitle

Widget code

<li data-row="1" data-col="1" data-sizex="4" data-sizey="1">
    <div data-id="songtitle" data-view="Songtitle"></div>
    <i class="icon-music icon-background"></i>
</li>

Usage in our flower bot

HTTParty.post(Flower::Config.dashboard_widgets_url + "songtitle", body: {
      auth_token: Flower::Config.dashboard_auth_token,
      name:       current_track.name,
      artist:     current_track.artist,
      start:      0,
      length:     current_track.pointer.duration.to_i,
      image:      "data:image/jpg;base64," + Base64.encode64(current_track.album.cover.load.data)
    }.to_json)
class Dashing.Songtitle extends Dashing.Widget
timer = null
@accessor 'displayTime', ->
time = @get('length')
startInTrack = @get('start')
if time
timeInMs = time * 1000
TrackProgress.timer.init({
"barSelector" : "#track-progress",
"timeSelector" : "#displayTime",
"length" : time,
"start" : startInTrack
});
@accessor 'upcomingTrack', ->
upcoming_track_name = @get('upcoming_track_name')
if upcoming_track_name
$(".upcoming").show()
else
$(".upcoming").hide()
ready: ->
# This is fired when the widget is done being rendered
onData: (data) ->
# Handle incoming data
# You can access the html node of this widget with `@node`
# Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
<div id="wrapper">
<img data-bind-src="image">
<h2 data-bind="name | truncate 35"></h2>
<h3 data-bind="artist"></h3>
<div class="progress"><span data-bind="displayTime" id="displayTime"></span><div id="track-progress" class="bar timer">&#160;</div></div>
<div class="upcoming">
<span class="upcoming-label">Next:</span>
<span class="upcoming-track" data-bind="upcoming_track_name"></span>
<span class="upcoming-artist" data-bind="upcoming_track_artist"></span>
</div>
</div>
<div id="cover">
<img data-bind-src="image" class="filter">
</div>
.widget-songtitle {
background-color:#222;
overflow:hidden;
padding:0 !important;
#cover{
position:absolute;
top:0;
left: 0;
width: 100%;
z-index: 1;
max-height: 100%;
overflow: hidden;
img.filter{
margin-top:-40%;
-webkit-filter: blur(100px);
width:1600px; /*data image is 300x300px as default*/
}
}
#wrapper{
height: 100%;
z-index: 2;
padding:30px;
position: relative;
background-color:rgba(0,0,0,0.5);
img{
border:2px solid rgba(255,255,255,.2);
float:left;
margin-top: 10px;
height: 180px;
width: 180px;
margin-left: 10px;
}
}
h2 {
text-transform: none;
display: inline;
font-weight: 100;
font-size: 40px;
}
h3{
font-weight: 300;
}
.upcoming{
span{
font-size: 20px;
display: inline-block;
&.label{
font-weight: bold;
}
}
}
.progress{
margin:15px 30px;
width: 500px;
display: inline-block;
line-height: 32px;
text-align: right;
background:rgba(255,255,255,.15);
border:1px solid rgba(255,255,255,.1);
border-radius:5px;
overflow: hidden;
.bar{
border-radius:5px;
width:0%;
&.timer{
background:rgba(0,0,0,0.3);
max-width: 100%;
}
}
span{
float: right;
bottom: 0;
display: inline-block;
margin-right: 10px;
}
}
}
/*global jQuery:true, TrackProgress:true, document:true, window:true */
var TrackProgress = {};
TrackProgress.timer = (function($){
var _barElement = null,
_trackLength = 0,
_trackStart = 0,
_interval = 500,
_trackStartTime,
_trackEndTime,
_timer;
var updateTimer = function(){
var trackPosition = new Date();
var playedTime = trackPosition - _trackStartTime;
// Set the progress
var playedTimeInPercent = (playedTime / _trackLength) * 100;
playedTimeInPercent = playedTimeInPercent > 100 ? 100 : playedTimeInPercent;
if (playedTimeInPercent <= 100 ){
_barElement.css("width",playedTimeInPercent +"%");
var timeLeft = _trackEndTime - trackPosition;
timeLeft = timeLeft < 0 ? 0 : timeLeft;
_timeElement.html(formatTime(timeLeft));
}
if(playedTimeInPercent >= 100){
window.clearTimeout(_timer);
}else{
_timer = window.setTimeout(function(){
updateTimer();
},_interval);
}
};
var formatTime = function(timeInMs){
var time = timeInMs / 1000;
var minutes = Math.floor(time / 60);
time -= minutes * 60;
var seconds = parseInt(time % 60, 10);
if(seconds < 10){
seconds = "0" + seconds;
}
return minutes +":"+ seconds;
};
return{
init: function(settings){
_trackLength = parseInt(settings.length) * 1000;
_trackStart = parseInt(settings.start) * 1000;
_barElement = $(settings.barSelector);
_timeElement = $(settings.timeSelector);
var current = new Date();
_trackStartTime = new Date(current.getTime() - _trackStart);
_trackEndTime = new Date(_trackStartTime.getTime() + _trackLength);
updateTimer();
}
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment