[Help] dxDrawRectangle Mouse Hover

[Ben_Sherman]

Hello everyone,

I've searched around the forums and internet for some kinda clue how to create a function to change the color for a dxDrawRectangle when you hover over it with your mouse. I've found some kinda clue with getCursorPosition() and I've found a few examples for it but none of them are working and quite frankly I'm problem why it's not working. Not use to work with dxDrawRectangle so I have no clue how to make a hover function for it. Maybe some one out here could give me an idea or show me and example of doing so? Would be really helpful.

My source code, sorry about the mess, learning and testing new things

function RandomTest() 
    local now = getTickCount() 
    local elapsedTime = now - start 
    local endTime = start + 500 
    local duration = endTime - start 
    local progress = elapsedTime / duration 
    local x1, y1, z1 = interpolateBetween ( 0, 0, 0, dSizew, dSizeH, 255, progress, "InOutQuad") 
    dxDrawRectangle(lx, ly, x1, dSizeH, tocolor(0,0,0,204), false) 
     
    local butW, butH = 226, dSizeH / totalButtons - 2.5 
    local bx,by = ax+2, ay+2 
    local x2, y2, z2 = interpolateBetween ( 0, 0, 0, butW,butH, 255, progress, "InOutQuad") 
    for i = 1,totalButtons do 
        dxDrawRectangle(bx,by,x2,butH,tocolor(23,23,23,204),false) -- Trying to make a hover function for this one. 
        by = by + butH+2 
    end 
end 

Sincerely,

Ben

[.:HyPeX:.]

Hey Ben

First of all, thanks for asking politely (i really like when people do so).

Now, regarding to your problem:

  
function CheckPosition(sx,sy,ex,ey) 
local cx,cy = getCursorPositon() 
if cx > sx and cy > sy then 
if cx < ex and cy < ey then 
return true 
else 
return nil 
end 
end 
  

Now coming to your case (after you got this down in your code)

  
if CheckPosition(bx,by,bx + x2, by + butH) then 
end 
  

PD: This supposes that you work over relative values, as you should, and write it down like this:

  
local x,y = guiGetScreenSize() 
dxDrawRectangle(bx * x,by * y,x2 * x,butH * y,tocolor(23,23,23,204),false) 
  

Else, just do some maths to get the relative values over screen position (0-1)

Greets

HyPeX

EDIT: About the example, this is a part of my BF3 Gamemode Team-Selection part:

  
CursorX, CursorY = getCursorPosition() 
if not CursorX then 
return 
end 
if CursorX > 0.12 and CursorY > 0.33 then 
if CursorX < 0.37 and CursorY < 0.38 then 
color = tocolor(150,200,0,255) 
else 
color = tocolor(100,150,0,150) 
end 
else 
color = tocolor(100,150,0,150) 
end 
if CursorX > 0.12 and CursorY > 0.38 then 
if CursorX < 0.37 and CursorY < 0.43 then 
color2 = tocolor(0,200,200,255) 
else 
color2 = tocolor(0,150,150,200) 
end 
else 
color2 = tocolor(0,150,150,200) 
end 
local now = getTickCount() 
local End = StartTime + 800 
local elapsed = now - StartTime 
local duration = End - StartTime 
local progress = elapsed / duration 
local XValue, XValue2 = interpolateBetween(0,0,0, x/4, x/3,0, progress, "Linear") 
if now - StartTime <= 800 then 
dxDrawRectangle(x/8, y/3.5, XValue, y/20, tocolor(0,0,0,200)) 
dxDrawText(drawText..Players.." / 32", x/5.8, y/3.4, XValue2, y/10, tocolor(0, 150, 255, 200), 1.5 /( ( 1360 / x ) * ( 768 / y ) ), "default-bold", "left","top", true,true ) 
elseif now - StartTime >= 800 and now - StartTime <= 1300 then 
local StartTime2 = StartTime + 800 
local End2 = End + 800 - 500 
local elapsed2 = now - StartTime2 
local duration2 = End2 - StartTime2 
local progress2 = elapsed2 / duration2 
local YValue, YValue2 = interpolateBetween(0, 0,0, y/20, y/50,0, progress2, "Linear") 
dxDrawRectangle(x/8, y/3.5, x/4, y/20, tocolor(0,0,0,200)) 
dxDrawText(drawText..Players.." / 32", x/7.8, y/3.4, x/3, y/10, tocolor(0, 150, 255, 200), 1.5 /( ( 1360 / x ) * ( 768 / y ) ), "default-bold") 
dxDrawRectangle(x/8, y/2.98,x/4, YValue, color) 

[Ben_Sherman]

Hey .:HyPeX:.

Thanks alot for your reply, and trust me I know about people not really asking for the help just expect to get help without really asking polite. Anyhow your examples sounds and looks great however nothing happens for me. I think it's due to the fact that my GUI is changing it self pending on how many buttons it have access to. It's going to be a system that interact with players like adding buttons that says "Add to friendlist" and more, so if there is a button thats not available for just you it wont be there. Not quite sure if it has to do with that. Like the buttons itself is dynamic however I have no clue it that might case the issue or not. But I'd guess thats why it's not working...

Best Regards,

Ben

EDIT: If i use onClientMouseEnter event on a label switching the color via that it works the problem is like I said it's dynamic so it colors all of the button and not just the one that I'm hover over. So I'll guess it works must be me that are doing it wrong I'll guess.

[xXMADEXx]

You can check how I did it in my dx login panel, using the event onClientCursorMove

https://community.multitheftauto.com/index.php?p= ... ls&id=7970

[Ben_Sherman]

You can check how I did it in my dx login panel, using the event onClientCursorMove

https://community.multitheftauto.com/index.php?p= ... ls&id=7970

Thank you xXMADEXx,

Going to start in a few minutes and see if I can get something to work. Btw that was one hell of a great login screen. Looks amazing!

EDIT:

Well some how I cant define the value to the table so it can define it's dynamic position and so on for the mouse cursor and other propertis so right now it's not working. Think it's the tables thats wrong. Can't find the issue here.

Tables:

local data = { 
    value[1] = { 
        posX = 0, 
        posY = 0, 
        posW = 0, 
        posH = 0, 
        hovering = false, 
        colors = { 23,23,23,204 } 
    }, 
    value[2] = { 
        posX = 0, 
        posY = 0, 
        posW = 0, 
        posH = 0, 
        hovering = false, 
        colors = { 23,23,23,204 } 
    }, 
    value[3] = { 
        posX = 0, 
        posY = 0, 
        posW = 0, 
        posH = 0, 
        hovering = false, 
        colors = { 23,23,23,204 } 
    } 
} 

Dynamic Section:

function RandomDynamicSystem() 
    local now = getTickCount() 
    local elapsedTime = now - start 
    local endTime = start + 500 
    local duration = endTime - start 
    local progress = elapsedTime / duration 
    local x1, y1, z1 = interpolateBetween ( 0, 0, 0, dSizew, dSizeH, 255, progress, "InOutQuad") 
    local r,g,b,a = 23,23,23,204 
    dxDrawRectangle(lx, ly, x1, dSizeH, tocolor(0,0,0,204), false) 
     
    local butW, butH = 226, dSizeH / totalButtons - 2.5 
    local bx,by = ax+2, ay+2 
    local x2, y2, z2 = interpolateBetween ( 0, 0, 0, butW,butH, 255, progress, "InOutQuad") 
    for i = 1,totalButtons do 
        data.value[i].posX = bx 
        data.value[i].posY = by 
        data.value[i].posW = butW 
        data.value[i].posH = butH 
        local r, g, b, a = unpack ( data.value[i].colors ) 
        dxDrawRectangle(data.value[i].posX,data.value[i].posY,data.value[i].posW,data.value[i].posH,tocolor(r, g, b, a),false) 
        by = by + butH+2 
    end 
  
end 

[xXMADEXx]

You can just do something like this:

local data = { 
    [1] = { 
        posX = 0, 
        posY = 0, 
        posW = 0, 
        posH = 0, 
        hovering = false, 
        colors = { 23,23,23,204 } 
    }, 
    [2] = { 
        posX = 0, 
        posY = 0, 
        posW = 0, 
        posH = 0, 
        hovering = false, 
        colors = { 23,23,23,204 } 
    }, 
    [3] = { 
        posX = 0, 
        posY = 0, 
        posW = 0, 
        posH = 0, 
        hovering = false, 
        colors = { 23,23,23,204 } 
    } 
} 
  
  
addEventHandler ( "onClientCursorMove", root, function ( _, _, cx, cy ) 
    for i, v in pairs ( data ) do 
        local x, y, w, h = v.posX, v.posY, v.posW, v.posH; 
        if ( cx >= x and cx <= x+w and cy >= y and cy <= y+h ) then 
            data[i].hovering = true 
        else 
            data[i].hovering = false 
        end 
    end 
end ) 

[Ben_Sherman]

You can just do something like this:

local data = { 
    [1] = { 
        posX = 0, 
        posY = 0, 
        posW = 0, 
        posH = 0, 
        hovering = false, 
        colors = { 23,23,23,204 } 
    }, 
    [2] = { 
        posX = 0, 
        posY = 0, 
        posW = 0, 
        posH = 0, 
        hovering = false, 
        colors = { 23,23,23,204 } 
    }, 
    [3] = { 
        posX = 0, 
        posY = 0, 
        posW = 0, 
        posH = 0, 
        hovering = false, 
        colors = { 23,23,23,204 } 
    } 
} 
  
  
addEventHandler ( "onClientCursorMove", root, function ( _, _, cx, cy ) 
    for i, v in pairs ( data ) do 
        local x, y, w, h = v.posX, v.posY, v.posW, v.posH; 
        if ( cx >= x and cx <= x+w and cy >= y and cy <= y+h ) then 
            data[i].hovering = true 
        else 
            data[i].hovering = false 
        end 
    end 
end ) 

OMG I love you man, it works perfect! THank you so much!