Seekbar with Dynamic text? Options

[wy2sl0]

Hi there, sorry if this is in the wrong spot. I have been working on trying to find this answer searching for a few days now, but I can't find the code for it.

I use foobar for the frontend in my Car PC, so screen real estate at 800x480 is a premium. I am trying to make a seekbar that is like semi transparent like this gentlemen has done http://macarych.deviantart.com/art/foobar2...audio-332543558

I couldn't find out how to do it though. I just want %artist% and %title% to be displayed in the seekbar. Any help would be immensely appreciated, thank you.

This post has been edited by wy2sl0: Feb 13 2013, 02:30

[ojdo]

Such panels can be realised with WSH Panel Mod. The download includes several examples. I take the liberty to link you to my collection of panel scripts. Another good ressource is the thread WSH Panel Mod script discussion/help in this forum.

[EpicForever]

Just look on that page - there's link to whole configuration (on the rigt side of the screen):

" Download File
ZIP download, 7.5 MB "

Here's the link:

http://www.deviantart.com/download/3325435...ych-d5hzk92.zip

[wy2sl0]

Just look on that page - there's link to whole configuration (on the rigt side of the screen):

" Download File
ZIP download, 7.5 MB "

Here's the link:

http://www.deviantart.com/download/3325435...ych-d5hzk92.zip

Yeah I did, I went through it. The gentleman is using a background that has the information on it (which I can't find the code for) and then he supercedes that information with a transparent seekbar. I don't know how to do that :-S

[wy2sl0]

Got it working.



Thanks for everyone's help.

This post has been edited by wy2sl0: Feb 14 2013, 19:56

[db1989]

Good to hear! But it’s always nice to explain how, in case anyone else reads this in the future; I’m sure you’d have been glad if someone had already explained it.

[wy2sl0]

Absolutely!

Ok so for the Seekbar with track information, here is the code. In Bold [edited to green so it shows better ] is colour adjustment, and text adjustment

CODE

var DT_CENTER = 0x00000001;

DT_CALCRECT = 0x00000400;
DT_NOPREFIX = 0x00000800;

var g_font = gdi.Font("Segoe UI", 15, 0);
var g_drag = 0;
var g_bar_height = 15;
var g_cycles = 0;
var ww = 0,
wh = 0;
var top = 0;
var g_pos = 0;
var g_drag_seek = 0;
var g_timer, txt;

function RGB(r,g,b) {
return (0xff000000|(r<<16)|(g<<8)|(b));
}

function on_size() {
ww = window.Width;
wh = window.Height;
}

function on_paint(gr) {
gr.FillSolidRect(0, 0, ww, wh, RGB(240,240,240));
gr.FillSolidRect(0, 0, ww, wh+2, RGB(67,90,203));
if(fb.IsPlaying) {
if(fb.PlaybackLength > 0) {
if(g_drag){
t = fb.PlaybackLength * g_drag_seek;
h = Math.floor(t/3600)
m = Math.floor((t-=h*3600)/60);
s = Math.floor(t-=m*60);
pos = ww * g_drag_seek;
txt = (h > 0 ? h + ":" + (m <10 ? "0" + m : m) : m) + ":" + (s < 10 ? "0" + s : s) + " / " + length;
} else {
pos = ww * (fb.PlaybackTime / fb.PlaybackLength);
txt = fb.IsPaused ? "Paused" : fb.titleformat("%artist% - %title%").Eval();
}
gr.FillSolidRect(0, 0, pos, wh+2, RGB(0,44,190));
} else if(fb.PlaybackTime > 0.1) {
txt = fb.IsPaused ? "Paused" : fb.titleformat("%playback_time%").Eval() + " /LIVE";
}
gr.GdiDrawtext(txt, g_font, RGB(255,255,255), 0, 3, ww-8, wh, DT_CENTER | DT_CALCRECT | DT_NOPREFIX);
}
gr.FillSolidRect(0, 0, ww, 0, RGB(50,52,133));
}

function on_mouse_lbtn_down(x,y){
if(fb.IsPlaying && fb.PlaybackLength > 0) g_drag = 1;
}

function on_mouse_lbtn_up(x,y){
if(g_drag) {
g_drag = 0;
g_drag_seek = x < 0 ? 0 : x > window.Width ? 1 : x / window.Width;
fb.PlaybackTime = fb.PlaybackLength * g_drag_seek;
}
}

function on_mouse_move(x,y){
if(y > wh) g_drag = 0;
if(g_drag) {
g_drag_seek = x < 0 ? 0 : x > window.Width ? 1 : x / window.Width;
window.Repaint();
}
}

function on_playback_new_track() {
length = fb.TitleFormat("%length%").Eval();
g_timer = window.CreateTimerInterval(100);
}

function on_playback_stop() {
if(g_timer) window.KillTimer(g_timer);
window.Repaint();
CollectGarbage();
}

function on_playback_seek(time){
window.Repaint();
}

function on_timer(id){
window.Repaint();
}

function on_mouse_wheel(delta) {
fb.PlaybackTime = fb.PlaybackTime + delta;
}

if(fb.isplaying) on_playback_new_track();

VOLUME BAR

CODE

// vi:set ft=javascript ff=dos ts=4 sts=4 sw=4 et:

function RGB(r, g, b) {
return (0xff000000 | (r << 16) | (g << 8) | (b));
}

// gdi.Font is changed, the last parameter is style flags
// FontStyleRegular = 0,
// FontStyleBold = 1,
// FontStyleItalic = 2,
// FontStyleBoldItalic = 3,
// FontStyleUnderline = 4,
// FontStyleStrikeout = 8
// Here is 0, means FontStyleRegular
var g_font = gdi.Font("Segoe UI", 15, 0);
var g_drag = 0;


function on_paint(gr) {
gr.SetTextRenderingHint(5);
var ww = window.Width;
var wh = window.Height;
var volume = fb.Volume;
var pos = window.Width * ((100 + volume) / 100);
var txt = (Math.ceil(volume)) + (" dB");
gr.FillSolidRect(0, 0, ww, wh+2, RGB(0,44,190))
gr.FillSolidRect (pos, 0, ww - pos, wh, RGB(67,90,203));
gr.DrawString(txt, g_font, RGB(255, 255, 255), 0, 0, ww, wh, 0x11005000);
}

function on_mouse_lbtn_down(x, y) {
g_drag = 1;
}

function on_mouse_lbtn_up(x, y) {
on_mouse_move(x, y);
g_drag = 0;
}

function on_mouse_move(x, y) {
if (g_drag) {
var v = x / window.Width;
v = (v < 0) ? 0 : (v < 1) ? v : 1;
v = -100 * (1 - v);
if (fb.Volume != v) fb.Volume = v;
}
}

function on_mouse_wheel(delta) {
if (delta > 0) fb.VolumeUp();
else fb.VolumeDown();
}

function on_volume_change(val) {
window.Repaint();
}

This post has been edited by db1989: Feb 14 2013, 22:58

[carpman]

My spider senses foresee a coming codebox edit.

C.

[db1989]

I was going to, but then I remembered that codeboxes don’t support formatting, so I didn’t, but then I remembered that I had misremembered, so I did.

Thanks for posting the code. Someone may find it useful!

This post has been edited by db1989: Feb 14 2013, 23:00

[carpman]

Thanks for posting the code. Someone may find it useful!

Someone has found it useful.

Thanks wy2sl0.

C.