Skip to main content

Notice

Please note that most of the software linked on this forum is likely to be safe to use. If you are unsure, feel free to ask in the relevant topics, or send a private message to an administrator or moderator. To help curb the problems of false positives, or in the event that you do find actual malware, you can contribute through the article linked here.
Topic: foo_uie_wsh_panel: Custom Volume Bar (Read 24132 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

foo_uie_wsh_panel: Custom Volume Bar

Currently, I have a nice looking seekbar due to some basic WSH Panel scripting.  However, I was wondering if anyone could offer some hints on how to create a custom volume bar!  If you coded it into your WSH Panel, maybe share some code?

I'm using the latest version of fooBar, with Columns UI, WSH Panel, Album List Panel, and NG Playlist.  Pretty basic setup, but it works for what I need it to do.

All I'm looking to do now is create a nice looking volume control bar.  The one that comes with Columns UI is too ugly!  Haha.

Thanks for your time!

foo_uie_wsh_panel: Custom Volume Bar

Reply #1
Here's a wsh volume bar.

Not my code, picked from a config, can't remember.
(If anybody knows, please mention so post can be edited for credits)

Code: [Select]
function RGB(r,g,b){ return (0xff000000|(r<<24)|(g<<16)|(b)); }

var g_drag = 0;

var g_btn_img1 = gdi.Image(fb.ComponentPath.replace("components","images") + "wsh/head.png");

function on_paint(gr){
var ww = window.Width;
var wh = window.Height;
var volume = fb.Volume;
var pos = window.Width * ((100+volume*2)/100);
var txt = "Vol";

gr.FillGradRect( 0, 0, ww, wh, 90, RGB(0,0,0), RGB(50,50,50));
gr.FillGradRect( 1, 1,    pos-2, wh - 2, 90, RGB(50,80,50), RGB(0,0,0));

gr.DrawImage(g_btn_img1,pos-6,0,6,6,0,0,6,6);

}
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/2 * (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();
}
//EOF

In above code, an image exists at tip of the slider. Put any image at Images\WSH\head.png and it should work.

foo_uie_wsh_panel: Custom Volume Bar

Reply #2
Thanks very much!  I modified said code, a little.  Here's what mine looks like now:
Code: [Select]
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)); }
function StrFmt(alignH,alignV,trim,flag){ return ((alignH<<28)|(alignV<<24)|(trim<<20)|flag); }

var g_font = gdi.Font(-12, weight_normal, italic_no, uline_no, "Segoe UI");
var g_titlefmt = fb.TitleFormat("Volume");
var g_fileinfo = null; 
var g_drag = 0;

function on_paint(gr){
var ww = window.Width;
var wh = window.Height;
var volume = fb.Volume;
var pos = window.Width * ((100+volume*2)/100);
var txt = "Volume";

gr.FillGradRect( 0, 0, ww, wh, 90, RGB(255,255,255), RGB(100,100,100));
gr.FillGradRect( 0, 1, pos, wh-3, 90, RGB(255,0,0), RGB(100,100,255));
gr.DrawRect(0,0, ww-1, wh-1, 1.0, RGB(0,0,0));


}
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/2 * (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();
}
//EOF

The last thing I'm interested in doing is outputting the word VOLUME in the slider.  I've been trying to use gr.DrawString(arguments) but am not sure how to go about it, as I don't know precisely how the DrawString function works.  All I know is that it comes w/ WSH panel and I got it to work for my seekbar.  Any suggestions?

foo_uie_wsh_panel: Custom Volume Bar

Reply #3
Try this:

gr.DrawString("VOLUME", g_font, RGB(r,g,b), x, y, w, h,StrFmt(alignH,alignV,trim,flag));

You need the text vars as well:

Code: [Select]
var weight_normal =400;
var weight_bold  =800;
var italic_no =0;
var italic    =1;
var uline_no  =0;
var uline    =1;
//--------
var align_top  =0;
var align_middle=1;
var align_bottom=2;

var align_left  =0;
var align_center=1;
var align_right =2;

var trim_no    =0;
var trim_chara  =1;
var trim_word  =2;
var trim_elips_chara =3;
var trim_elips_word  =4;
var trim_elips_path  =5;

var flag_rtl        =0x0001;
var flag_vert      =0x0002;
var flag_nofit      =0x0004;
var flag_dispctrl  =0x0020;
var flag_nofallback =0x0400;
var flag_trailspace =0x0800;
var flag_nowrap    =0x1000;
var flag_linelimit  =0x2000;
var flag_noclip    =0x4000;
var g_font = gdi.Font(-12, weight_bold, italic_no, uline_no, "Verdana");
function StrFmt(alignH,alignV,trim,flag){ return ((alignH<<28)|(alignV<<24)|(trim<<20)|flag); }

Replace the arguments of StrFmt with what you want (align_top, align_left etc...), and replace r,g,b,x,y,w,h with the numbers you want.

foo_uie_wsh_panel: Custom Volume Bar

Reply #4
I tried it, and it doesn't work.  My volume box just turns into a script error.  It seems like it should work, since it works with the seekbar, so I don't know.  Here's my entire code for the volume bar.  If you comment out the gr.DrawString line, it works perfectly.  However, when you put the line in, it breaks.  I added all the other stuff to the top.

Any ideas?  Thanks for your time.
Code: [Select]
var weight_normal =400;
var weight_bold  =800;
var italic_no =0;
var italic    =1;
var uline_no  =0;
var uline    =1;
//--------
var align_top  =0;
var align_middle=1;
var align_bottom=2;

var align_left  =0;
var align_center=1;
var align_right =2;

var trim_no    =0;
var trim_chara  =1;
var trim_word  =2;
var trim_elips_chara =3;
var trim_elips_word  =4;
var trim_elips_path  =5;

var flag_rtl        =0x0001;
var flag_vert      =0x0002;
var flag_nofit      =0x0004;
var flag_dispctrl  =0x0020;
var flag_nofallback =0x0400;
var flag_trailspace =0x0800;
var flag_nowrap    =0x1000;
var flag_linelimit  =0x2000;
var flag_noclip    =0x4000;


function StrFmt(alignH,alignV,trim,flag){ return ((alignH<<28)|(alignV<<24)|(trim<<20)|flag); }

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)); }

var g_font = gdi.Font(-12, weight_bold, italic_no, uline_no, "Verdana");
var g_titlefmt = fb.TitleFormat("Volume");
var g_fileinfo = null; 
var g_drag = 0;

function on_paint(gr){
var ww = window.Width;
var wh = window.Height;
var volume = fb.Volume;
var pos = window.Width * ((100+volume*2)/100);
var txt = "Volume";

gr.FillGradRect( 0, 0, ww, wh, 90, RGB(255,255,255), RGB(100,100,100));
gr.FillGradRect( 0, 1,    pos, wh-3, 90, RGB(255,0,0), RGB(100,100,255));
gr.DrawRect(0,0, ww-1, wh-1, 1.0, RGB(0,0,0));

gr.DrawString("VOLUME", g_font, RGB(0,0,0), 0, 0, ww, wh, StrFmt(alignH,alignV,trim,flag));

}
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/2 * (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();
}
//EOF

foo_uie_wsh_panel: Custom Volume Bar

Reply #5
Well, I found another set of code that works, so I'm ditching this one.  However, here's the final code that I'm using.  Very straight forward.  Nice looking green (may change color) volume bar, displays percent that volume is in the middle of the bar.
Code: [Select]
var weight_normal =400;
var weight_bold  =800;
var italic_no =0;
var italic    =1;
var uline_no  =0;
var uline    =1;
//--------
var align_top  =0;
var align_middle=1;
var align_bottom=2;

var align_left  =0;
var align_center=1;
var align_right =2;

var trim_no    =0;
var trim_chara  =1;
var trim_word  =2;
var trim_elips_chara =3;
var trim_elips_word  =4;
var trim_elips_path  =5;

var flag_rtl        =0x0001;
var flag_vert      =0x0002;
var flag_nofit      =0x0004;
var flag_dispctrl  =0x0020;
var flag_nofallback =0x0400;
var flag_trailspace =0x0800;
var flag_nowrap    =0x1000;
var flag_linelimit  =0x2000;
var flag_noclip    =0x4000;

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

var g_font = gdi.Font(-12, 400, 1, 0, "MeiryoKe_PGothic");
var g_drag = 0;

function on_paint(gr){
var ww = window.Width;
var wh = window.Height;
var volume = fb.Volume;
var pos = window.Width * ((100+volume)/100);
var txt = (Math.ceil(volume))+100;
gr.FillGradRect(  0, 0,    pos, wh, 90, RGB(240,240,240), RGB(100,230,100));
gr.FillGradRect(pos, 0, ww-pos, wh, 90, RGB(240,240,240), RGB(190,190,190));
gr.DrawString("Volume: " + txt +"%", g_font, RGB(64,64,128), 0, 0, ww, wh, 0x11005000);
gr.DrawRect(0,0, ww-1, wh-1, 1.0, RGB(150,150,150));
}
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();
}
//EOF

Hopefully this helps people!

foo_uie_wsh_panel: Custom Volume Bar

Reply #6
my WSH volume controler :



Code: [Select]
function RGB(r,g,b){ return (0xff000000|(r<<16)|(g<<8)|(b)); }

var g_drag = 0;
var g_btn_img1 = gdi.Image(fb.ComponentPath.replace("components","images") + "curacao/bt/volbutton50.png");
var g_btn_img2 = gdi.Image(fb.ComponentPath.replace("components","images") + "curacao/bt/voldot.png");

function on_paint(gr){
var ww = window.Width;
var wh = window.Height;
var volume = fb.Volume;

// Volume 'Round Button' by Br3tt (13-08-2008)
var pos = (31 * ((100+volume*2)/100));
var posA = (4.7 * ((100+volume*2)/100))-0.78;
var cosinusA = Math.cos(posA);
var sinusA = Math.sin(posA);
var posX = 25 - (cosinusA * 12) - 4 ;
var posY = 25 - (sinusA * 12) - 4 ;
// Bg display
gr.FillGradRect( 0, 0, ww, wh, 90, RGB(042,042,047), RGB(042,042,047));
gr.DrawImage(g_btn_img1,-4,-4,55,55,0,0,55,55);
// indicator display (dot)
gr.DrawImage(g_btn_img2,posX,posY,5,5,0,0,5,5);

}

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){
x = x-8;
var v = x / 30;
v = (v<0) ? 0 : (v<1) ? v : 1;
v = -100/2 * (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();
}

//EOF

foo_uie_wsh_panel: Custom Volume Bar

Reply #7
my WSH volume controler :



Code: [Select]
function RGB(r,g,b){ return (0xff000000|(r<<16)|(g<<8)|(b)); }

var g_drag = 0;
var g_btn_img1 = gdi.Image(fb.ComponentPath.replace("components","images") + "curacao/bt/volbutton50.png");
var g_btn_img2 = gdi.Image(fb.ComponentPath.replace("components","images") + "curacao/bt/voldot.png");

function on_paint(gr){
var ww = window.Width;
var wh = window.Height;
var volume = fb.Volume;

// Volume 'Round Button' by Br3tt (13-08-2008)
var pos = (31 * ((100+volume*2)/100));
var posA = (4.7 * ((100+volume*2)/100))-0.78;
var cosinusA = Math.cos(posA);
var sinusA = Math.sin(posA);
var posX = 25 - (cosinusA * 12) - 4 ;
var posY = 25 - (sinusA * 12) - 4 ;
// Bg display
gr.FillGradRect( 0, 0, ww, wh, 90, RGB(042,042,047), RGB(042,042,047));
gr.DrawImage(g_btn_img1,-4,-4,55,55,0,0,55,55);
// indicator display (dot)
gr.DrawImage(g_btn_img2,posX,posY,5,5,0,0,5,5);

}

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){
x = x-8;
var v = x / 30;
v = (v<0) ? 0 : (v<1) ? v : 1;
v = -100/2 * (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();
}

//EOF


Very cool.  Would you mind providing the image files?  Also, what folder do you store the images in?  /fooBar/images or /fooBar/components/images?

foo_uie_wsh_panel: Custom Volume Bar

Reply #8
fb.ComponentPath.replace("components","images") evaluates to foobar\images, the full directory being, for example, C:\Program Files\foobar2000\images\curacao\bt\volbutton50.png

Also, your code won't work as you haven't defined the arguments of StrFmt properly, you should replace StrFmt(alignH,alignV,trim,flag) with StrFmt(align_top,align_left,trim_no,flag_nowrap) for instance. alignH, alignV etc are just arguments of the StrFmt function. You could of course just write a hex value in, which is what StrFmt returns, and is what is in the second code you posted (0x11005000).

Another thing is you seem to have defined black text on a black background- gr.DrawRect(0,0, ww-1, wh-1, 1.0, RGB(0,0,0)); with a text colour of RGB(0,0,0). If you have a working volume bar this is all probably irrelevant, just thought you might be interested...

foo_uie_wsh_panel: Custom Volume Bar

Reply #9
fb.ComponentPath.replace("components","images") evaluates to foobar\images, the full directory being, for example, C:\Program Files\foobar2000\images\curacao\bt\volbutton50.png

Also, your code won't work as you haven't defined the arguments of StrFmt properly, you should replace StrFmt(alignH,alignV,trim,flag) with StrFmt(align_top,align_left,trim_no,flag_nowrap) for instance. alignH, alignV etc are just arguments of the StrFmt function. You could of course just write a hex value in, which is what StrFmt returns, and is what is in the second code you posted (0x11005000).

Another thing is you seem to have defined black text on a black background- gr.DrawRect(0,0, ww-1, wh-1, 1.0, RGB(0,0,0)); with a text colour of RGB(0,0,0). If you have a working volume bar this is all probably irrelevant, just thought you might be interested...



Thanks very much!  All of this is extremely helpful.  I'll play around both with your code and with my original volume bar.  Examples of WSH panels seem to be scarce, or else I'm bad at finding them.  You're awesome!

foo_uie_wsh_panel: Custom Volume Bar

Reply #10
bryan6376, post code of your final WSH Volume Bar.
Would be helpful to others searching for ideas regarding same.

foo_uie_wsh_panel: Custom Volume Bar

Reply #11
bryan6376, post code of your final WSH Volume Bar.
Would be helpful to others searching for ideas regarding same.


Here's my current SeekBar using WSH:
Code: [Select]
//--------
var weight_normal =400;
var weight_bold  =800;
var italic_no =0;
var italic    =1;
var uline_no  =0;
var uline    =1;
//--------
var align_top  =0;
var align_middle=1;
var align_bottom=2;

var align_left  =0;
var align_center=1;
var align_right =2;

var trim_no    =0;
var trim_chara  =1;
var trim_word  =2;
var trim_elips_chara =3;
var trim_elips_word  =4;
var trim_elips_path  =5;

var flag_rtl        =0x0001;
var flag_vert      =0x0002;
var flag_nofit      =0x0004;
var flag_dispctrl  =0x0020;
var flag_nofallback =0x0400;
var flag_trailspace =0x0800;
var flag_nowrap    =0x1000;
var flag_linelimit  =0x2000;
var flag_noclip    =0x4000;

function StrFmt(alignH,alignV,trim,flag){ return ((alignH<<28)|(alignV<<24)|(trim<<20)|flag); }
//--------
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)); }
//--------
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);
}
//----------------------------------------------------------------------------

var g_font = gdi.Font(-12, weight_normal, italic_no, uline_no, "Segoe UI");
var g_titlefmt = fb.TitleFormat("%playback_time% / %length%                %title% - %artist%");
var g_fileinfo = null; 

var g_drag = 0;
var g_drag_seek = 0;

function on_paint(gr){
var ww = window.Width;
var wh = window.Height;
var pos = 0;
var length = fb.PlaybackLength;
var txt;

if(length > 0){
if(g_drag){
pos = window.Width * g_drag_seek;
txt = "Seek " + TimeFmt(g_drag_seek * length) + " / " + TimeFmt(length);
}
else{
pos = window.Width * (fb.PlaybackTime / length);
txt = g_titlefmt.Eval();
}
}

gr.FillGradRect(  0, 0,    pos, wh, 90, RGB(255,0,0), RGB(130,130,255));
gr.FillGradRect(pos, 0, ww-pos, wh, 90, RGB(0,0,0), RGB(0,0,0));

gr.DrawString(txt, g_font, RGB(255,255,255), 0, 0, ww, wh,
StrFmt(align_center, align_middle, trim_no, flag_nowrap | flag_noclip));

gr.DrawRect(0,0, ww-1, wh-1, 1.0, RGB(0,0,0));
}
function on_size(){
}
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;
}
}
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);
}
//--------
function on_playback_starting(cmd, paused){
}
function on_playback_new_track(info){
window.Repaint();
}
function on_playback_stop(){
window.Repaint();
}
function on_playback_seek(time){
window.Repaint();
}
function on_playback_pause(state){
}
function on_playback_edited(){
}
function on_playback_dynamic_info(){
}
function on_playback_dynamic_info_track(){
}
function on_playback_time(time){
window.Repaint();
}
function on_volume_change(val){
}

//EOF


And here's my current Volume Bar for WSH Panel
Code: [Select]
var weight_normal =400;
var weight_bold  =800;
var italic_no =0;
var italic    =1;
var uline_no  =0;
var uline    =1;
//--------
var align_top  =0;
var align_middle=1;
var align_bottom=2;

var align_left  =0;
var align_center=1;
var align_right =2;

var trim_no    =0;
var trim_chara  =1;
var trim_word  =2;
var trim_elips_chara =3;
var trim_elips_word  =4;
var trim_elips_path  =5;

var flag_rtl        =0x0001;
var flag_vert      =0x0002;
var flag_nofit      =0x0004;
var flag_dispctrl  =0x0020;
var flag_nofallback =0x0400;
var flag_trailspace =0x0800;
var flag_nowrap    =0x1000;
var flag_linelimit  =0x2000;
var flag_noclip    =0x4000;

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

var g_font = gdi.Font(-12, 400, 1, 0, "MeiryoKe_PGothic");
var g_drag = 0;

function on_paint(gr){
var ww = window.Width;
var wh = window.Height;
var volume = fb.Volume;
var pos = window.Width * ((100+volume)/100);
var txt = (Math.ceil(volume))+100;
gr.FillGradRect(  0, 0,    pos, wh, 90, RGB(240,240,240), RGB(100,230,100));
gr.FillGradRect(pos, 0, ww-pos, wh, 90, RGB(240,240,240), RGB(190,190,190));
gr.DrawString("Volume: " + txt +"%", g_font, RGB(64,64,128), 0, 0, ww, wh, 0x11005000);
gr.DrawRect(0,0, ww-1, wh-1, 1.0, RGB(150,150,150));
}
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();
}
//EOF

Enjoy guys.  Any comments, etc are always enjoyed/taken under consideration!

foo_uie_wsh_panel: Custom Volume Bar

Reply #12
Has anyone created vertical volume bars or could give me some hints how to do it?

foo_uie_wsh_panel: Custom Volume Bar

Reply #13
You basically need to swap all x to y and widths to heights. Well perhaps not all else you'll just relabel the horizontal and vertical axes. Maybe just any arguments of functions (in round brackets). That might work.

foo_uie_wsh_panel: Custom Volume Bar

Reply #14
I've been playing around with the volume knob in Curacao, I thought I'd share it, I hope you don't mind Falstaff. Let me know if you want me to remove it.

I made it so it doesn't change the volume when you click on it, also it has a logarithmic scale, and you need to drag up or down to change the volume (not left to right). More knob like I think...

Code: [Select]
function RGB(r,g,b){ return (0xff000000|(r<<16)|(g<<8)|(b)); }

var g_drag = 0;
var g_btn_img1 = gdi.Image(fb.ComponentPath.replace("components","images") + "curacao/bt/volbutton50.png");
var g_btn_img2 = gdi.Image(fb.ComponentPath.replace("components","images") + "curacao/bt/voldot.png");

function on_paint(gr){
var ww = window.Width;
var wh = window.Height;
var volume = Math.exp(fb.Volume/15);
// Volume 'Round Button' by Br3tt (13-08-2008)
var posA = (4.7 * volume)-0.78;
var cosinusA = Math.cos(posA);
var sinusA = Math.sin(posA);
var posX = 25 - (cosinusA * 12) - 4 ;
var posY = 25 - (sinusA * 12) - 4 ;
gr.FillGradRect( 0, 0, ww, wh, 90, RGB(042,042,047), RGB(042,042,047));
gr.DrawImage(g_btn_img1,-4,-4,55,55,0,0,55,55);
gr.DrawImage(g_btn_img2,posX,posY,5,5,0,0,5,5);
}

var v;
var dy;
var i = 1;
var yi = new Array();

function on_mouse_lbtn_down(x,y){
g_drag = 1;
v = Math.exp(fb.Volume/15);
yi[0] = y;
}

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

function on_mouse_move(x,y){
if(g_drag){
yi[i] = y;
dy = yi[i-1]-yi[i];
v = v+(dy/60);
v = (v<Math.exp(-50)) ? Math.exp(-50) : (v<1) ? v : 1;
fb.Volume = 15*Math.log(v);
i=i+1;
}
}

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

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

//EOF

foo_uie_wsh_panel: Custom Volume Bar

Reply #15
Here is mine based on Br3tt's config, using logarithm, so adjusting volume should be more natural:
Code: [Select]
// Knob button by Br3tt
// Modified by T.P Wang
function RGB(r,g,b){ return (0xff000000|(r<<16)|(g<<8)|(b)); }

var g_drag = false;
// foobar path, SHOULD be replaced
var g_path = fb.TitleFormat("%foobar_path%").eval();
var g_btn_img1 = gdi.Image(g_path + "images/curacao/bt/volbutton50.png");
var g_btn_img2 = gdi.Image(g_path + "images/curacao/bt/voldot.png");
var g_angle = 270;
var g_R = 12;

function calc_theta(x,y){
x = x - 25.5;
y = y - 25.5;
theta = Math.atan2(y,x) / Math.PI * 180;
if (theta <= 90 && theta > 45)
return g_angle;
if (theta > 90 && theta < 135)
return 0;
if (theta >= 0) {
if (theta > 90)
return theta - 135;
else
return theta + 225;
} else {
return theta + 225;
}
}

function on_paint(gr){
ww = window.Width;
wh = window.Height;
theta = (Math.pow(10, fb.Volume / 50) - 0.01) / 0.99 * g_angle;
// Volume 'Round Button' by Br3tt (13-08-2008)
posA = (theta - 45) * Math.PI / 180;
cosinusA = Math.cos(posA);
sinusA = Math.sin(posA);
posX = 25 - (cosinusA * 12) - 4 ;
posY = 25 - (sinusA * 12) - 4 ;
gr.FillGradRect( 0, 0, ww, wh, 90, RGB(042,042,047), RGB(042,042,047));
gr.DrawImage(g_btn_img1,-4,-4,55,55,0,0,55,55);
gr.DrawImage(g_btn_img2,posX,posY,5,5,0,0,5,5);
}

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

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

function on_mouse_move(x,y){
if (g_drag){
// Calc Volume
d = calc_theta(x,y) / g_angle;
v = 50 * Math.log(0.99 * d + 0.01) / Math.LN10;
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();
}

//EOF

foo_uie_wsh_panel: Custom Volume Bar

Reply #16
Here is mine based on Br3tt's config, using logarithm, so adjusting volume should be more natural:
Code: [Select]
// Knob button by Br3tt
// Modified by T.P Wang
function RGB(r,g,b){ return (0xff000000|(r<<16)|(g<<8)|(b)); }

var g_drag = false;
// foobar path, SHOULD be replaced
var g_path = fb.TitleFormat("%foobar_path%").eval();
var g_btn_img1 = gdi.Image(g_path + "images/curacao/bt/volbutton50.png");
var g_btn_img2 = gdi.Image(g_path + "images/curacao/bt/voldot.png");
var g_angle = 270;
var g_R = 12;

function calc_theta(x,y){
x = x - 25.5;
y = y - 25.5;
theta = Math.atan2(y,x) / Math.PI * 180;
if (theta <= 90 && theta > 45)
return g_angle;
if (theta > 90 && theta < 135)
return 0;
if (theta >= 0) {
if (theta > 90)
return theta - 135;
else
return theta + 225;
} else {
return theta + 225;
}
}

function on_paint(gr){
ww = window.Width;
wh = window.Height;
theta = (Math.pow(10, fb.Volume / 50) - 0.01) / 0.99 * g_angle;
// Volume 'Round Button' by Br3tt (13-08-2008)
posA = (theta - 45) * Math.PI / 180;
cosinusA = Math.cos(posA);
sinusA = Math.sin(posA);
posX = 25 - (cosinusA * 12) - 4 ;
posY = 25 - (sinusA * 12) - 4 ;
gr.FillGradRect( 0, 0, ww, wh, 90, RGB(042,042,047), RGB(042,042,047));
gr.DrawImage(g_btn_img1,-4,-4,55,55,0,0,55,55);
gr.DrawImage(g_btn_img2,posX,posY,5,5,0,0,5,5);
}

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

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

function on_mouse_move(x,y){
if (g_drag){
// Calc Volume
d = calc_theta(x,y) / g_angle;
v = 50 * Math.log(0.99 * d + 0.01) / Math.LN10;
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();
}

//EOF

i'll try it


I've been playing around with the volume knob in Curacao, I thought I'd share it, I hope you don't mind Falstaff. Let me know if you want me to remove it.

I made it so it doesn't change the volume when you click on it, also it has a logarithmic scale, and you need to drag up or down to change the volume (not left to right). More knob like I think...

Code: [Select]
function RGB(r,g,b){ return (0xff000000|(r<<16)|(g<<8)|(b)); }

var g_drag = 0;
var g_btn_img1 = gdi.Image(fb.ComponentPath.replace("components","images") + "curacao/bt/volbutton50.png");
var g_btn_img2 = gdi.Image(fb.ComponentPath.replace("components","images") + "curacao/bt/voldot.png");

function on_paint(gr){
var ww = window.Width;
var wh = window.Height;
var volume = Math.exp(fb.Volume/15);
// Volume 'Round Button' by Br3tt (13-08-2008)
var posA = (4.7 * volume)-0.78;
var cosinusA = Math.cos(posA);
var sinusA = Math.sin(posA);
var posX = 25 - (cosinusA * 12) - 4 ;
var posY = 25 - (sinusA * 12) - 4 ;
gr.FillGradRect( 0, 0, ww, wh, 90, RGB(042,042,047), RGB(042,042,047));
gr.DrawImage(g_btn_img1,-4,-4,55,55,0,0,55,55);
gr.DrawImage(g_btn_img2,posX,posY,5,5,0,0,5,5);
}

var v;
var dy;
var i = 1;
var yi = new Array();

function on_mouse_lbtn_down(x,y){
g_drag = 1;
v = Math.exp(fb.Volume/15);
yi[0] = y;
}

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

function on_mouse_move(x,y){
if(g_drag){
yi[i] = y;
dy = yi[i-1]-yi[i];
v = v+(dy/60);
v = (v<Math.exp(-50)) ? Math.exp(-50) : (v<1) ? v : 1;
fb.Volume = 15*Math.log(v);
i=i+1;
}
}

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

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

//EOF

i don't mind, share mods

foo_uie_wsh_panel: Custom Volume Bar

Reply #17
Here is mine based on Br3tt's config, using logarithm, so adjusting volume should be more natural:
Code: [Select]
// Knob button by Br3tt
// Modified by T.P Wang
function RGB(r,g,b){ return (0xff000000|(r<<16)|(g<<8)|(b)); }

var g_drag = false;
// foobar path, SHOULD be replaced
var g_path = fb.TitleFormat("%foobar_path%").eval();
var g_btn_img1 = gdi.Image(g_path + "images/curacao/bt/volbutton50.png");
var g_btn_img2 = gdi.Image(g_path + "images/curacao/bt/voldot.png");
var g_angle = 270;
var g_R = 12;

function calc_theta(x,y){
x = x - 25.5;
y = y - 25.5;
theta = Math.atan2(y,x) / Math.PI * 180;
if (theta <= 90 && theta > 45)
return g_angle;
if (theta > 90 && theta < 135)
return 0;
if (theta >= 0) {
if (theta > 90)
return theta - 135;
else
return theta + 225;
} else {
return theta + 225;
}
}

function on_paint(gr){
ww = window.Width;
wh = window.Height;
theta = (Math.pow(10, fb.Volume / 50) - 0.01) / 0.99 * g_angle;
// Volume 'Round Button' by Br3tt (13-08-2008)
posA = (theta - 45) * Math.PI / 180;
cosinusA = Math.cos(posA);
sinusA = Math.sin(posA);
posX = 25 - (cosinusA * 12) - 4 ;
posY = 25 - (sinusA * 12) - 4 ;
gr.FillGradRect( 0, 0, ww, wh, 90, RGB(042,042,047), RGB(042,042,047));
gr.DrawImage(g_btn_img1,-4,-4,55,55,0,0,55,55);
gr.DrawImage(g_btn_img2,posX,posY,5,5,0,0,5,5);
}

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

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

function on_mouse_move(x,y){
if (g_drag){
// Calc Volume
d = calc_theta(x,y) / g_angle;
v = 50 * Math.log(0.99 * d + 0.01) / Math.LN10;
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();
}

//EOF

Excellent! thanx for this great mod  i keep it

foo_uie_wsh_panel: Custom Volume Bar

Reply #18
Here's mine, painting itself with system colours and using logarithmic scale (much better than the CUI one)

Code: [Select]
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)); }

function commonlog(n) {return (Math.log(n)/Math.log(10));}

function Syscolor(color_name) {
var Shell = new ActiveXObject("WScript.Shell");
var tempc;
var rgbcolor;
rgbcolor = Shell.RegRead("HKEY_CURRENT_USER\\Control Panel\\Colors\\" + color_name);
tempc = rgbcolor.split(" ");
return (0xff000000|(tempc[0]<<16)|(tempc[1]<<8)|(tempc[2]));
}

var g_font = gdi.Font(12, 400, 1, 0, "Calibri");
var g_drag = 0;
var hi_color = Syscolor("Hilight");
var bg_color = Syscolor("ActiveTitle");
var txt_color = Syscolor("HilightText");

function on_paint(gr){
var ww = window.Width;
var wh = window.Height;
var pos = Math.pow(10,(fb.volume/20)+2);
var x = Math.round(pos * (ww-12)/100 )+6;

gr.FillSolidRect( 0, 0, ww, wh, bg_color);
gr.FillSolidRect( 2, 2, ww-4, wh-4, RGBA(255,255,255,20));
gr.FillSolidRect( 2, 2, x-4, wh-4, hi_color);
gr.FillSolidRect( x-6, 0, 12, wh, hi_color);
gr.DrawRect( x-6, 0, 11, wh-1,1,RGBA(255,255,255,100));

if(fb.Volume == -100){
gr.DrawString("mute", g_font, txt_color, 0, 0, ww, wh, 0x11005000);
}
if(fb.Volume == 0){
gr.DrawString("max volume", g_font, txt_color, 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){
if(x < 10){
if(fb.Volume != -100){
fb.Volume = -100;
}
} else if((window.width-x) < 10){
if(fb.Volume != 100){
fb.Volume = 100;
}
} else {

var pos = (x-6) * 100 / (window.Width-12);
var v = -20*commonlog(pos/100);
v = (v<0) ? 0 : (v<100) ? v : 100;
v = -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();
}
//by xbullethammer

It looks like this (on my VS of course)

<insert signature here>

foo_uie_wsh_panel: Custom Volume Bar

Reply #19
xbullethammer, it's perfect! any chance of using custom colors?

foo_uie_wsh_panel: Custom Volume Bar

Reply #20
xbullethammer, it's perfect! any chance of using custom colors?


Replace this variables with the colors of your choice:

Code: [Select]
var hi_color = Syscolor("Hilight");
var bg_color = Syscolor("ActiveTitle");
var txt_color = Syscolor("HilightText");
<insert signature here>

foo_uie_wsh_panel: Custom Volume Bar

Reply #21
sweeet... that's better ^^

foo_uie_wsh_panel: Custom Volume Bar

Reply #22
2 short questions:

1.
How can I get 2 wsh-panels running?
For me is only working the VOLUME-panel  OR  the SEEKBAR-panel, but not both at the same time.

2.
Is there a wsh-panel-thread or help?
Didn't find anything.

foo_uie_wsh_panel: Custom Volume Bar

Reply #23
Here's my current scripts for those who need it.

VOLUME bar
Code: [Select]
function RGB(r,g,b){ return (0xff000000|(r<<16)|(g<<8)|(b)); }

var g_drag = 0;
var g_btn_img1 = gdi.Image(fb.ComponentPath.replace("components","images"));

function on_paint(gr){
var ww = window.Width;
var wh = window.Height;
var volume = fb.Volume;
var pos = window.Width * ((100+volume*2)/100);
var txt = "Vol";

gr.FillGradRect( 0,0,ww,wh,90,RGB(15,23,28), RGB(80,85,100));
gr.FillGradRect(1,1,pos-1,wh -1,90,RGB(80,85,100), RGB(15,23,28));

gr.DrawImage(g_btn_img1,pos-6,0,6,6,0,0,6,6);

}
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/2 * (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();
}
//EOF

SEEK bar
Code: [Select]
//--------
var weight_normal =400;
var weight_bold  =800;
var italic_no =0;
var italic    =1;
var uline_no  =0;
var uline    =1;
//--------
var align_top  =0;
var align_middle=1;
var align_bottom=2;

var align_left  =0;
var align_center=1;
var align_right =2;

var trim_no    =0;
var trim_chara  =1;
var trim_word  =2;
var trim_elips_chara =3;
var trim_elips_word  =4;
var trim_elips_path  =5;

var flag_rtl        =0x0001;
var flag_vert      =0x0002;
var flag_nofit      =0x0004;
var flag_dispctrl  =0x0020;
var flag_nofallback =0x0400;
var flag_trailspace =0x0800;
var flag_nowrap    =0x1000;
var flag_linelimit  =0x2000;
var flag_noclip    =0x4000;

function StrFmt(alignH,alignV,trim,flag){ return ((alignH<<28)|(alignV<<24)|(trim<<20)|flag); }
//--------
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)); }
//--------
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);
}
//----------------------------------------------------------------------------

var g_font = gdi.Font(-19, weight_bold, italic_no, uline_no, "Verdana");
var g_titlefmt = fb.TitleFormat("%playback_time% |$if(%ispaused%,ll,$if(%isplaying%,>,))| %playback_time_remaining%");
var g_fileinfo = null;

var g_drag = 0;
var g_drag_seek = 0;

var g_btn_img1 = gdi.Image(fb.ComponentPath.replace("components","images") + "wsh/head.png");

function on_paint(gr){
var ww = window.Width;
var wh = window.Height;
var pos = 0;
var length = fb.PlaybackLength;
var txt;

if(length > 0){
if(g_drag){
pos = window.Width * g_drag_seek;
txt = "Seek " + TimeFmt(g_drag_seek * length) + " / " + TimeFmt(length);
}
else{
pos = window.Width * (fb.PlaybackTime / length);
txt = g_titlefmt.Eval();
}
}

gr.FillGradRect(  0, 1,    pos, wh, 90, RGB(80,85,100), RGB(15,23,28));
gr.FillGradRect(pos,0, ww-pos, wh, 90, RGB(15,23,28),RGB(80,85,100));

gr.DrawString(txt, g_font, RGB(255,255,255), 0, 0, ww, wh,
StrFmt(align_center, align_middle, trim_no, flag_nowrap | flag_noclip));

}
function on_size(){
}
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;
}
}
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);
}
//--------
function on_playback_starting(cmd, paused){
}
function on_playback_new_track(info){
window.Repaint();
}
function on_playback_stop(){
window.Repaint();
}
function on_playback_seek(time){
window.Repaint();
}
function on_playback_pause(state){
}
function on_playback_edited(){
}
function on_playback_dynamic_info(){
}
function on_playback_dynamic_info_track(){
}
function on_playback_time(time){
window.Repaint();
}
function on_volume_change(val){
}

//EOF

foo_uie_wsh_panel: Custom Volume Bar

Reply #24
I keep getting a scripting error:

Scripting Engine Initialization Failed (GUID: 43E56FF1-1CF4-40E6-A453-3307BA3CC586, CODE: 0x8000ffff)
Check the console for more detailed information.

when trying to implement any of these... any ideas?