Your seek/status-bar looks really great !
Could you upload your script? Thanks in advance
Sure, let me document / beautify the code and I'll pop it on here.
It's pretty messy right now
Edit: Okay, here's the code.
// =========================
// Info Bar 0.1.2
// Copyright ©2010 Lediur
// --------------
// Completely rewritten from the stock WSH Panel progress bar script.
// Licensed under BSD License
// =========================
// =========================
// License bits
// ------------
// This script is considered an addon for WSH Panel Mod.
//
// WSH Panel Mod is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// WSH Panel Mod is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// =========================
// =========================
// Basic functions
// =========================
// =========================
// Evaluates color input
// INPUT: 3 values, RED GREEN BLUE;
// 4 values, RED GREEN BLUE ALPHA;
//
// RETURNS: Byte value representing the selected color
// =========================
function RGB(r,g,b){ return (0xff000000|(r<<16)|(g<<8)|(b)); }
function RGBA(r,g,b,a){ return ((a<<24)|(r<<16)|(g<<8)|(b)); }
// =========================
// Evaluates time from seconds
// INPUT: 1 value, SECONDS
//
// RETURNS: A formatted string representing the desired time.
// =========================
function TimeFmt(t){
var zpad = function(n){
var str = n.toString();
return (str.length<2) ? "0"+str : str;
}
var h = Math.floor(t/3600); t-=h*3600;
var m = Math.floor(t/60); t-=m*60;
var s = Math.floor(t);
if(h>0) return h.toString()+":"+zpad(m)+":"+zpad(s);
return m.toString()+":"+zpad(s);
}
//----------------------------------------------------------------------------
// =========================
// This is a "separation value" I found helpful for
// separating the "artist/album" and "title" displays.
//
// It is dependent on the size of these two displays (font size),
// which is modified in the UpdateSize() function.
//
// Please see the documentation for UpdateSize() for more info.
// =========================
var factor = 10;
// =========================
// String variables
// =========================
var title;
var artist;
var status;
var time;
// =========================
// Fonts
// =========================
var g_titlefont = gdi.Font("Arial", 32, 1);
var g_artistfont = gdi.Font("Arial", 32, 1);
var g_statusfont = gdi.Font("Arial", 24, 1);
var g_timefont = gdi.Font("Segoe UI", 28, 2);
// =========================
// Title Formats
// =========================
var g_title = fb.TitleFormat("%title%");
var g_artist = fb.TitleFormat("%artist% / %album%");
var g_time = fb.TitleFormat("%playback_time%/%length%");
var g_status = fb.TitleFormat("♥%rating% ♪%play_count% %codec% %samplerate%Hz $caps(%channels%) %bitrate%kbps");
// =========================
// Boolean variables for seek-checking
// =========================
var g_drag = 0;
var g_drag_seek = 0;
// =========================
// Gradient settings
// =========================
var c_progtop = RGB(0,150,255);
var c_progbot = RGB(0,50,200);
var c_proglead = RGBA(0,30,255,255);
// =========================
// Timer for updating progress bar and other items
// =========================
var f_timer;
function on_paint(gr){
var ww = window.Width;
var wh = window.Height;
var pos = 0;
var length = fb.PlaybackLength;
gr.SetTextRenderingHint(4);
// =========================
// Evaluation of information
// =========================
if(length > 0){
if(g_drag){
pos = window.Width * g_drag_seek;
title = "Seeking: ";
time = TimeFmt(g_drag_seek * length) + " / " + TimeFmt(length);
}
else{
pos = window.Width * (fb.PlaybackTime / length);
title = g_title.Eval();
artist = g_artist.Eval();
time = g_time.Eval();
status = g_status.Eval();
}
}
// =========================
// FillGradRect ( Starting X, Starting Y, Width, Height, Gradient Rotation, Starting Color, Ending Color )
// =========================
// Background Bar
gr.FillGradRect(pos, 0, ww-pos, wh, 90, RGB(0,0,0), RGB(11,22,32));
// Progress Bar
gr.FillGradRect( 0, 0, pos, wh, 90, c_progtop, c_progbot);
// Progress Bar Leader
gr.FillGradRect(pos-3, 0, 50, wh, 180, RGBA(0,0,0,0), c_proglead);
// Right Gradient
gr.FillGradRect(ww-100, 0, 250, wh, 0, RGBA(0,0,0,0), RGBA(17,66,170,255));
// =========================
// DrawString ( Output String, Output Font, Color, Starting X, Starting Y, Width, Height, Hex Values )
// =========================
// =========================
// /!\ NOTICE
// =========================
// These values were determined through trial and error.
// They work fine on my computer and resolution, but
// you might want to tweak them to fit your taste.
// -------------------------
// Unfortunately, I don't have documentation for the hex values.
// Here's what I figured out so far, though.
//
// 1: Alignment (0: left, 1: center, 2: right)
// =========================
gr.DrawString(title, g_titlefont, RGB(255,255,255), wh/4, -wh/5.7 + factor, ww-250, wh, 0x01000000);
gr.DrawString(artist, g_artistfont, RGB(255,255,255), wh/4, wh/4.5 - factor, ww-250, wh, 0x01000000);
gr.DrawString(time, g_timefont, RGB(255,255,255), 0-wh/6, -wh/6.5, ww, wh, 0x21000000);
gr.DrawString(status, g_statusfont, RGB(254,168,0), 0-wh/6, wh/4.5, ww, wh, 0x21000000);
}
// =========================
// Resizes the text in the info panel
// INPUT: WSH Panel HEIGHT, WSH Panel WIDTH,
//
// RETURNS: Byte value representing the selected color
// =========================
// =========================
// /!\ NOTICE
// =========================
// These values were determined through trial and error.
// They work fine on my computer and resolution, but
// you might want to tweak them to fit your taste.
// =========================
function updateSize(){
var font_size;
// ====== TITLE SIZE COMPENSATION ======
font_size = (window.Width - 50) / 30;
factor = (window.Width - 400) / 100;
// Upper-bound font size limiter
if(font_size > 36)
font_size = 36;
// If we don't check for this we get the JavaScript
// equivalent of a NullPointerException.
if (title != null){
font_size -= title.length / 100;
// Upper-bound width limiter
if(window.Width > 800) {
factor = 0;
font_size -= title.length / 100;
}
// Lower-bound width limiter
if(window.Width < 300)
font_size += window.Width / 70;
// Try to check for excessively long titles
if(title.length > 50)
font_size -= title.length / 7;
if(title.length > 70)
font_size -= title.length / 50;
}
g_titlefont = gdi.Font("Arial", font_size, 1);
// ====== ARTIST SIZE COMPENSATION ======
font_size = (window.Width - 50) / 50;
// Upper-bound font size limiter
if(font_size > 24)
font_size = 24;
// If we don't check for this we get the JavaScript
// equivalent of a NullPointerException.
if (artist != null){
// Upper-bound width limiter
if(window.Width > 800)
font_size -= artist.length / 120;
// Lower-bound width limiter
if(window.Width < 300)
font_size += window.Width / 90;
// Try to check for excessively long titles
if(artist.length > 80)
font_size -= artist.length / 22;
if(artist.length > 120)
font_size -= 6;
}
g_artistfont = gdi.Font("Arial", font_size, 2);
// ====== TIME SIZE COMPENSATION ======
font_size = (window.Height - 5) / 2;
g_timefont = gdi.Font("Arial", font_size, 2);
// ====== STATUS SIZE COMPENSATION ======
font_size = (window.Height - 5) / 4;
g_statusfont = gdi.Font("Arial", font_size, 1);
}
// =========================
// Some of this stuff may be redundant,
// but it works fine on everything I've listened
// to so far.
// =========================
function on_size(){
updateSize();
}
function on_focus(focused){
//fb.trace("focus " + focused);
}
function on_key_down(key){
//fb.trace("key " + key);
}
function on_mouse_lbtn_down(x,y){
g_drag = 1;
}
function on_mouse_lbtn_up(x,y){
if(g_drag){
g_drag = 0;
g_drag_seek = x / window.Width;
g_drag_seek = (g_drag_seek<0) ? 0 : (g_drag_seek<1) ? g_drag_seek : 1;
fb.PlaybackTime = fb.PlaybackLength * g_drag_seek;
}
}
// =========================
// Allow for seeking
// =========================
function on_mouse_move(x,y){
if(g_drag){
g_drag_seek = x / window.Width;
g_drag_seek = (g_drag_seek<0) ? 0 : (g_drag_seek<1) ? g_drag_seek : 1;
window.Repaint();
}
}
function on_mouse_wheel(delta){
//fb.trace("wheel " + delta);
}
// =========================
// Create a timer for updating the bar.
// =========================
// Change the timer interval to have the bar
// update more or fewer times per second.
// =========================
function on_playback_starting(cmd, paused){
f_timer = window.CreateTimerInterval(50);
}
// =========================
// Update information, repaint on new track.
// =========================
function on_playback_new_track(info){
c_progtop = RGB(0,150,255);
c_progbot = RGB(0,50,200);
c_proglead = RGBA(0,30,255,255);
title = g_title.Eval();
artist = g_artist.Eval();
time = g_time.Eval();
status = g_status.Eval();
updateSize();
window.Repaint();
}
// =========================
// Playback Stop
// =========================
function on_playback_stop(){
// CPU usage saver
if(f_timer){window.KillTimer(f_timer);}
updateSize();
window.Repaint();
}
// =========================
// Repaint every time we seek
// =========================
function on_playback_seek(time){
window.Repaint();
}
// =========================
// Changes the color of the bar based on the pause state.
// =========================
function on_playback_pause(state){
if(state){
if(f_timer){window.KillTimer(f_timer);}
} else {
f_timer = window.CreateTimerInterval(100);
}
c_progtop = state ? RGB(100,100,100) : RGB(0,150,255);
c_progbot = state ? RGB(60,60,60) : RGB(0,50,200);
c_proglead = state ? RGB(5,29,84) : RGBA(0,30,255,255);
window.Repaint();
}
// =========================
// Repaint every tick
// =========================
function on_timer(){
window.Repaint();
}
//EOF
For a version without terrible indenting: http://files.lediur.com/up/data/Current.js
The sizing algorithm could be better, but it works for everything except ridiculously long tags, so I'm not in a hurry to change it.
I'm currently running this cleaned version in my own player, so I'll put up some updates if there are any problems.
Enjoy!