Skip to main content

Topic: Seekbar with Dynamic text? (Read 1213 times) previous topic - next topic

0 Members and 1 Guest are viewing this topic.
  • wy2sl0
  • [*]
Seekbar with Dynamic text?
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.
  • Last Edit: 12 February, 2013, 08:30:17 PM by wy2sl0

  • ojdo
  • [*][*][*][*][*]
Seekbar with Dynamic text?
Reply #1
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
  • [*][*][*][*][*]
Seekbar with Dynamic text?
Reply #2
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
  • [*]
Seekbar with Dynamic text?
Reply #3
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
  • [*]
Seekbar with Dynamic text?
Reply #4
Got it working.



Thanks for everyone's help.
  • Last Edit: 14 February, 2013, 01:56:27 PM by wy2sl0

  • db1989
  • [*][*][*][*][*]
  • Global Moderator
Seekbar with Dynamic text?
Reply #5
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
  • [*]
Seekbar with Dynamic text?
Reply #6
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: [Select]
var DT_CENTER = 0x00000001;

DT_CALCRECT = 0x00000400;
DT_NOPREFIX = 0x00000800;

var g_font = gdi.Font([color=green]"Segoe UI", 15, 0[/color]);
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) {
[color=green]gr.FillSolidRect(0, 0, ww, wh, RGB(240,240,240));
gr.FillSolidRect(0, 0, ww, wh+2, RGB(67,90,203));[/color]
   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([color=green]"%artist% - %title%"[/color]).Eval();
}
           gr.FillSolidRect(0, 0, pos, wh+2, RGB(0,44,190));
} else if(fb.PlaybackTime > 0.1) {
txt = fb.IsPaused ? "Paused" : fb.titleformat[color=green]("%playback_time%"[/color]).Eval() + " /LIVE";
}
[color=green]gr.GdiDrawtext(txt, g_font, RGB(255,255,255), 0, 3, ww-8, wh, DT_CENTER | DT_CALCRECT | DT_NOPREFIX);[/color]
}
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: [Select]
// 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)) + [color=green](" dB")[/color];
[color=green]    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);[/color]
}

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();
}
  • Last Edit: 14 February, 2013, 04:58:42 PM by db1989

  • carpman
  • [*][*][*][*][*]
  • Developer
Seekbar with Dynamic text?
Reply #7
My spider senses foresee a coming codebox edit. 

C.
PC = TAK + LossyWAV  ::  Portable = Lame MP3

  • db1989
  • [*][*][*][*][*]
  • Global Moderator
Seekbar with Dynamic text?
Reply #8
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!
  • Last Edit: 14 February, 2013, 05:00:40 PM by db1989

  • carpman
  • [*][*][*][*][*]
  • Developer
Seekbar with Dynamic text?
Reply #9
Thanks for posting the code. Someone may find it useful!

Someone has found it useful. 

Thanks wy2sl0.

C.
PC = TAK + LossyWAV  ::  Portable = Lame MP3