IPB

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
Need help with WSH Panel, Display progress in per cent
tedgo
post Nov 20 2008, 13:01
Post #1





Group: Members
Posts: 1089
Joined: 16-April 04
From: Bavaria, Germany
Member No.: 13548



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
/--------
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.

This post has been edited by tedgo: Nov 20 2008, 13:18
Go to the top of the page
+Quote Post
TomBarlow
post Nov 20 2008, 14:18
Post #2





Group: Members
Posts: 585
Joined: 30-July 07
Member No.: 45750



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
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
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.

This post has been edited by TomBarlow: Nov 20 2008, 14:19
Go to the top of the page
+Quote Post
tedgo
post Nov 20 2008, 14:53
Post #3





Group: Members
Posts: 1089
Joined: 16-April 04
From: Bavaria, Germany
Member No.: 13548



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

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 wink.gif)

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?

This post has been edited by tedgo: Nov 20 2008, 15:42
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



RSS Lo-Fi Version Time is now: 16th April 2014 - 18:31