@randomuser
if your problem is the placement of those buttons on resize, for sure it will never place them in the middle of the panel until you edit script and click apply, why ? because placement is relative to x,y values that are only set outside of a function so only set when you launch the script and they never change after
solution below, add on_size() callback and set variable depending of the width and height of the panel in it
HTH
// vi:set ft=javascript ff=dos ts=4 sts=4 sw=4 et:
// ==PREPROCESSOR==
// @name "SimpleThemedButton"
// @author "T.P Wang"
// ==/PREPROCESSOR==
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));}
ButtonStates = {
normal: 0,
hover: 1,
down: 2,
hide: 3
}
var DT_TOP = 0x00000000;
var DT_CENTER = 0x00000001;
var DT_VCENTER = 0x00000004;
var DT_WORDBREAK = 0x00000010;
var DT_CALCRECT = 0x00000400;
var DT_NOPREFIX = 0x00000800;
var bcolora = RGBA(100,100,100,155)
var bcolorb = RGBA (0,0,0,155,155)
var bcolorc = RGBA(100,100,100,100)
var bcolorhover1 = RGBA(110,110,110,155)
var bcolorhover2 = RGBA(5,5,5,155)
var grad = 91
var ww, wh, x, y, w = 100, h, fsize = w / 5.83;
var g_font = gdi.Font("Guifx v2 Transports", fsize);
function SimpleButton(x, y, w, h, text, fonClick, state) {
this.state = state ? state : ButtonStates.normal;
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.text = text;
this.fonClick = fonClick;
this.containXY = function (x, y) {
return (this.x <= x) && (x <= this.x + this.w) && (this.y <= y) && (y <= this.y + this.h);
}
this.changeState = function (state) {
var old = this.state;
this.state = state;
return old;
}
this.draw = function (gr) {
if (this.state == ButtonStates.hide) return;
switch (this.state)
{
case ButtonStates.normal:
gr.FillGradRect(this.x, this.y, this.w, this.h, grad, bcolora, bcolorb );
gr.DrawRect(this.x, this.y, this.w-1, this.h-1, 1,bcolorc);
break;
case ButtonStates.hover:
gr.FillGradRect(this.x, this.y, this.w, this.h, grad, bcolorhover1, bcolorhover2 );
gr.DrawRect(this.x, this.y, this.w-1, this.h-1, 1,bcolorc);
break;
case ButtonStates.down:
gr.FillGradRect(this.x+1, this.y+1, this.w-2, this.h-2, grad, bcolora, bcolorb );
gr.DrawRect(this.x, this.y+1, this.w-1, this.h-2, 1,bcolorc);
break;
case ButtonStates.hide:
return;
}
gr.GdiDrawText(this.text, g_font, RGB(200,200,200), this.x, this.y, this.w, this.h, DT_CENTER| DT_VCENTER | DT_CALCRECT | DT_NOPREFIX);
}
this.onClick = function () {
this.fonClick && this.fonClick();
}
}
function drawAllButtons(gr) {
for (var i in $buttons) {
$buttons[i].draw(gr);
}
}
function chooseButton(x, y) {
for (var i in $buttons) {
if ($buttons[i].containXY(x, y) && $buttons[i].state != ButtonStates.hide) return $buttons[i];
}
return null;
}
var cur_btn = null;
var g_down = false;
// --------------------------
refreshPlayButton = function() {
$buttons = {
Previous: new SimpleButton(x-w-w/2-1, y, w, h, "5", function() {fb.prev();}),
PlayPause: new SimpleButton(x-w/2, y, w, h, (fb.IsPlaying ? (fb.IsPaused ? 1 : 2) : 1), function() { fb.PlayOrPause(); }),
Next: new SimpleButton(x+w/2+1, y, w, h, "6", function() {fb.next();})
}
window.Repaint();
}
refreshPlayButton();
// --- APPLICATION START
function on_size() {
ww = window.Width
wh = window.Height
if(!ww) return;
x = ww/2
y = wh/16
h = w*0.2
refreshPlayButton();
}
function on_paint(gr) {
gr.DrawRect(x-w-w/2-3, y-2, w*3+5, h+3, 1, RGB(60,60,63))
gr.FillSolidRect(x-w-w/2-2, y-1, w*3+4, h+2, RGBA(0,0,0,255))
drawAllButtons(gr);
}
function on_playback_stop() {
refreshPlayButton();
}
function on_playback_pause() {
refreshPlayButton();
}
function on_playback_starting() {
refreshPlayButton();
}
function on_mouse_move(x, y) {
var old = cur_btn;
cur_btn = chooseButton(x, y);
if (old == cur_btn) {
if (g_down) return;
} else if (g_down && cur_btn && cur_btn.state != ButtonStates.down) {
cur_btn.changeState(ButtonStates.down);
window.Repaint();
return;
}
old && old.changeState(ButtonStates.normal);
cur_btn && cur_btn.changeState(ButtonStates.hover);
window.Repaint();
}
function on_mouse_leave() {
g_down = false;
if (cur_btn) {
cur_btn.changeState(ButtonStates.normal);
window.Repaint();
}
}
function on_mouse_lbtn_down(x, y) {
g_down = true;
if (cur_btn) {
cur_btn.changeState(ButtonStates.down);
window.Repaint();
}
}
function on_mouse_lbtn_up(x, y) {
g_down = false;
if (cur_btn) {
cur_btn.onClick();
cur_btn.changeState(ButtonStates.hover);
window.Repaint();
}
}
// --- APPLICATION END