Here is the code. buttons working but when you drag the window larger then click inside the large rectangle and you see where my problem is.
//COVERS
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("Segoe UI", 16, 0);
var g_img = null;
Buttons = [];
function Button( title, x, y, w, h, func) {
this.left = x ;
this.top = y;
this.w = w;
this.h = h;
this.right = x + w;
this.bottom = y + h;
this.func = func;
Buttons.push(this);
this.onMove = function (x, y) {
(((this.left < x+180) && (x+180 < this.right) && (this.top < y) && (y < this.bottom)) ? this.hover1 = true : this.hover1 = false);
(((this.left < x+120) && (x+120 < this.right) && (this.top < y) && (y < this.bottom)) ? this.hover2 = true : this.hover2 = false);
(((this.left < x+60) && (x+60 < this.right) && (this.top < y) && (y < this.bottom)) ? this.hover3 = true : this.hover3 = false);
(((this.left < x) && (x < this.right) && (this.top < y) && (y < this.bottom)) ? this.hover4 = true : this.hover4 = false);
}
this.draw = function (gr) {
var wh=window.height-60;
var normal=RGB(170, 170, 0);
var hover=RGB(100, 100, 100);
var lw=2;
(this.hover1 ? color1 = normal : color1 = hover );
(this.hover2 ? color2 = normal : color2 = hover );
(this.hover3 ? color3 = normal : color3 = hover );
(this.hover4 ? color4 = normal : color4 = hover );
gr.DrawRect(window.width/2-115, wh, this.w, this.h, lw,color1);
gr.DrawRect(window.width/2-55, wh, this.w, this.h, lw, color2);
gr.DrawRect(window.width/2+5, wh, this.w, this.h, lw, color3);
gr.DrawRect(window.width/2+65, wh, this.w, this.h, lw, color4);
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////
this.onClick = function (x, y) {
if (this.hover1,this.hover2,this.hover3,this.hover4) {
this.func && this.func();
}
}
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function on_size() {
var ww=window.Width;
var wh=window.Height;
var x=ww/2;
var y=wh-60;
var w=50;
var h=50;
new Button("Front",x-115, y, w, h, function (){
if (a == 0)
a = 1;
a=1,b=0,c=0,d=0;
})
a = 1;
new Button("Back",x-55, y, w, h, function (){
if (b == 0)
b = 1;
a=1,b=1,c=0,d=0;
})
b = null;
new Button("CD",x+5, y, w, h, function (){
if (c == 0)
c = 1;
a=1,b=0,c=1,d=0;
})
c = null;
new Button("Artist",x+65, y, w, h, function (){
if (d == 0)
d = 0;
a=0,b=0,c=0,d=1;
})
d = null;
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function on_paint(gr) {
gr.DrawRect(window.Width/2-120, window.Height-65, 240, 60, 2, RGB(200,200,0));
gr.GdiDrawText("Front", g_font, RGB(100,100,100), window.Width/2-108,window.Height-45, 100, 20, format = 0);
gr.GdiDrawText("Back", g_font, RGB(100,100,100), window.Width/2-46,window.Height-45, 100, 20, format = 0);
gr.GdiDrawText("CD", g_font, RGB(100,100,100), window.Width/2+20,window.Height-45, 100, 20, format = 0);
gr.GdiDrawText("Artist", g_font, RGB(100,100,100), window.Width/2+71,window.Height-45, 100, 20, format = 0);
var ww=window.Width-10;
var wh=window.Height-80;
var scale_w = ww / 200;
var scale_h = wh / 200;
var scale = Math.min(scale_w, scale_h);
var pos_x = 0, pos_y = 0;
if (scale_w < scale_h)
pos_y = (wh - 200 * scale) / 2;
else if (scale_w > scale_h)
pos_x = (ww - 200 * scale) / 2;
if (a==1) {
var color1=RGB(250,0,0);
var color2=RGB(50,50,50);
}
if (b==1) {
var color1=RGB(0,250,0);
var color2=RGB(50,50,50);
}
if (c==1) {
var color1=RGB(0,0,250);
var color2=RGB(50,50,50);
}
if (d==1) {
var color1=RGB(150,150,150);
var color2=RGB(50,50,50);
}
gr.DrawRect(pos_x+5, pos_y+5, 200 * scale, 200 * scale, 5, color1);
if (g_img) {
// Keep aspect ratio
var scale_w = ww / g_img.Width;
var scale_h = wh / g_img.Height;
var scale = Math.min(scale_w, scale_h);
var pos_x = 0, pos_y = 0;
if (scale_w < scale_h)
pos_y = (wh - g_img.height * scale) / 2;
else if (scale_w > scale_h)
pos_x = (ww - g_img.Width * scale) / 2;
gr.DrawImage(g_img, pos_x+8, pos_y+8, g_img.Width * scale-5, g_img.Height * scale-5, 0, 0, g_img.Width, g_img.Height);
}
buttonsDraw(gr);
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function buttonsDraw(gr) {
for (i in Buttons) {
Buttons[i].draw(gr);
}
}
function on_mouse_move(x, y) {
for (i in Buttons ) {
Buttons [i].onMove(x, y);
}
window.RepaintRect(window.Width/2-120, window.Height-65, 240, 60);
//window.RepaintRect(0, window.height-65, window.width, 60);
//window.Repaint();
}
function on_mouse_lbtn_down(x, y) {
for (i in Buttons ) {
Buttons [i].onClick(x,y);
}
//window.RepaintRect(this.left, this.top, this.w, this.h);
window.Repaint();
}
function on_focus(is_focused) {
window.Repaint();
}
Topic: WSH Panel Mod (Read 815784 times)
previous topic - next topic