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!
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)
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();
}
//EOFIn above code, an image exists at tip of the slider. Put any image at
Images\WSH\head.png and it should work.
Thanks very much! I modified said code, a little. Here's what mine looks like now:
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?
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:
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.
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.
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
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.
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!
my WSH volume controler :
(http://xs233.xs.to/xs233/08465/wsh_volume_control319.png)
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
my WSH volume controler :
(http://xs233.xs.to/xs233/08465/wsh_volume_control319.png)
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?
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...
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!
bryan6376, post code of your final WSH Volume Bar.
Would be helpful to others searching for ideas regarding same.
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:
//--------
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
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!
Has anyone created vertical volume bars or could give me some hints how to do it?
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.
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...
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
Here is mine based on Br3tt's config, using logarithm, so adjusting volume should be more natural:
// 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
Here is mine based on Br3tt's config, using logarithm, so adjusting volume should be more natural:
// 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...
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
Here is mine based on Br3tt's config, using logarithm, so adjusting volume should be more natural:
// 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
Here's mine, painting itself with system colours and using logarithmic scale (much better than the CUI one)
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 xbullethammerIt looks like this (on my VS of course)
(http://img247.imageshack.us/img247/6315/volumebarsmallux3.png)
xbullethammer, it's perfect! any chance of using custom colors?
xbullethammer, it's perfect! any chance of using custom colors?
Replace this variables with the colors of your choice:
var hi_color = Syscolor("Hilight");
var bg_color = Syscolor("ActiveTitle");
var txt_color = Syscolor("HilightText");
sweeet... that's better ^^
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.
Here's my current scripts for those who need it.
VOLUME bar
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
//--------
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
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?
this thread was for wsh panel. i'm guessing you're using wsh panel mod. the syntax is different and that's why it doesn't work.
you really should stick with the newer mod version though as it's still being developed.
this thread was for wsh panel. i'm guessing you're using wsh panel mod. the syntax is different and that's why it doesn't work.
you really should stick with the newer mod version though as it's still being developed.
I see, thanks. Anyone want to share their volume bar using an algorithm made for wsh_panel_mod?
wsh panel mod already comes with sample code for a volume control. why not use that? it's right there when you add a new panel to a layout (or you can use the "reset default" button)