Need help with WSH Panel

2008-11-20 12:01:40

I created a seekbar with wsh panel (from the sample shipped with it).
As i don't know anything about JScript i need a bit help for displaying the progress in per cent.

My code now looks like this:

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(-10, weight_bold, italic_no, uline_no, "Arial");
var g_titlefmt = fb.TitleFormat("<<   $div($mul(100,%playback_time_seconds%),%length_seconds%).$num($div($mul($mod($mul(100,%playback_time_seconds%),%length_seconds%),10),%length_seconds%),0) '%'   >>");
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(76,121,153), RGB(12,20,25));
	gr.FillGradRect(pos, 0, ww-pos, wh, 90, RGB(12,20,25), RGB(31,50,63));

	gr.DrawString(txt, g_font, RGB(128,192,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

Displayed as:

My code for the progress in per cent is very large (based on titleformatting).
Is there another way to do this? And if so, can anybody help me doing this?

And another question:
As you can see on the screenshot, i have drawn an image (placed with $imageabs() in panel stack splitter) under the panel with a slight rounded grey border at the right and the bottom of the panel.
Is it possible to draw such borders in WSH panel itself?

EDIT:
Seems that on imageshack the screenshot isn't shown, only the thumbnail here...
Strange.
Sorry

EDIT2:
Hosted again.

Need help with WSH Panel

Reply #1 – 2008-11-20 13:18:44

You don't need to use titleformatting, WSH panel receives the length and playback time as properties of the fb object. Remove line 53 (with the titleformatting) and replace line 73 (txt = g_titlefmt.Eval();) with:

Code: [Select]

var percentage = 100*fb.PlaybackTime/fb.PlaybackLength;
txt = "<<   " + percentage.toString().substr(0,4) + "%   >>";

I don't think you can draw rounded rectangles. You can draw images though, use this:

Code: [Select]

var imagename = gdi.Image("C:\\path\\to\\image.jpg");
gr.DrawImage( imagename, x, y, w, h, 0, 0, imagename.width, imagename.height);

You need two backslashes to escape the escape character \ Also don't forget the "

The last 4 arguments of gr.DrawImage crop the image, the first two being the x and y positions of where you want to start drawing from, the last two being the width and height of the cropped bit.

Need help with WSH Panel

Reply #2 – 2008-11-20 13:53:04

@TomBarlow
Thank you! Your code works.
Maybe i'll understand what i did one day

But if i only can draw images instead of drawing a rounded rectangle i'll stay on panel stack splitter for that purpose (i have other images and rectangles drawn in it too).

Btw. this is my complete foobar (currently, still in progress )

Maybe i use WSH Panel for some other stuff, if i once understand how to use it...

EDIT:
If i decide to draw the image as "background" in wsh panel, i have to pad the progress bar at about 2 pixels from each side. How can i do this?

Notice