DX GUI

[Noki]

function dxCore() 
    bRecWin = dxDrawRectangle(507, 288, 264, 145, tocolor(67, 187, 157, 198), true) 
    wRecBtn = dxDrawRectangle(553, 321, 185, 66, tocolor(255, 255, 255, 255), true) 
    text = dxDrawText("Close dx GUI", 577, 340, 721, 372, tocolor(0, 0, 0, 255), 1.00, "default", left, top, false, false, true, false, false) 
end 
  
function openDxGui() 
    addEventHandler("onClientRender", root, dxCore) 
    showCursor(true) 
end 
addCommandHandler("dxgui", openDxGui) 
  
function closeDx() 
        removeEventHandler("onClientRender", root, dxCore) 
        showCursor(false) 
end 
addEventHandler("onClientClick", wRecBtn, closeDx) 

So, this is my first crack of a dx gui. I want to just get the hang of making them. I just want it to be able to open and close via a button. I will figure the rest of it out. I've been stuck here for a while now. I honestly have no idea what I'm doing here.

[myonlake]

Okay, well. First of all, DirectX shapes are not elements. This means you are not able to detect clicks on your defined "element", since dxDraw only returns a boolean. Use that onClientClick event to see if the click was executed inside the area of the button coordinates. So, if the cursor is between the startX and width, and between the startY and height, then do the click function and such.

[.:HyPeX:.]

Quote

Okay, well. First of all, DirectX shapes are not elements. This means you are not able to detect clicks on your defined "element", since dxDraw only returns a boolean. Use that onClientClick event to see if the click was executed inside the area of the button coordinates. So, if the cursor is between the startX and width, and between the startY and height, then do the click function and such.

Not completly true. You can actually create an aplha 0 gui button and combine Dx with Gui to make it easier.

[myonlake]

That's not logical to me, because you create an element on top of a drawn shape, which is just a waste of memory when you can just condition the position of the mouse cursor and drawn shape. Making GUIs just to detect a couple events is not too practical at all.

And not sure what you mean by "not completely true". I don't post to topics if I wouldn't know if it's true. I have a pretty long background in scripting so I think it's "true" to say you calculate whether or not was the click executed in between the positions. If you made your own game for example, you wouldn't necessarily have CEGUI to assist you in that, you'd have to just calculate and that's it.

Edited February 16, 2014 by Guest

[Noki]

@ myonlake:

Thank you for your help. I appreciate it. What functions would I use to do that? What if I wanted to create relative dx? Would I still be able to use your method of 2D pixels?

@Hypex:

I was going to do that with a CEGUI and create dx over it. But, I couldn't set the main window's alpha without it affecting its' children.

[Citizen]

Quote

Okay, well. First of all, DirectX shapes are not elements. This means you are not able to detect clicks on your defined "element", since dxDraw only returns a boolean. Use that onClientClick event to see if the click was executed inside the area of the button coordinates. So, if the cursor is between the startX and width, and between the startY and height, then do the click function and such.

Exactly and I would add that you can create your own elements with createElement function on which you can then set some element datas like x, y, width, height.

Then you can iterate over all your dx elements and render it according to its type (from the createElement function). You will obviously get the x, y, width, height for each dx elements to be able to render them.

Then you can also create your own events like "onClientDXClick", for example, by using generic events like onClientClick then you iterate over all your dx elements, getting their position and sizes and check if the click was over a dx element. If it was, you can then use the triggerEvent function to trigger "onClientDXClick" with that element as source of this event and some extra parameters if you want.

Once you did that, you will be able to do some addEventHandler for onClientDXClick and it will work as well as onClientGUIClick

It's gonna be really hardcore when you will want to support parenting and to recreate some hard elements like the gridlists (no problem for vertical scrolling, but the horizontal one is real pain ).

Quote

Not completly true. You can actually create an aplha 0 gui button and combine Dx with Gui to make it easier.

Myeah, I'm calling that hacks cuz that's cheating. That's my opinion though.

[.:HyPeX:.]

Myeah, I'm calling that hacks cuz that's cheating. That's my opinion though.

Saves some hours of works and makes the same result

[myonlake]

@Citizen: Indeed you could, but then again, I'd rather create a separate dxDraw resource and store all information in a table and fetch it from there whenever I need it. This way it's all almost native code and should work without issues with destroying and creating and setting.

@Hypex: Umm, no. It's not hard at all to make it this way, and is way more practical than the CEGUI + shape method.

@NOki: onClientClick has two mouse cursor parameters in it for absoluteX and absoluteY. Use that in combination with the size and position of the dxDraw shape like the following.

if ( absoluteX >= startX ) and ( absoluteY >= startY ) and ( absoluteX <= boxWidth ) and ( absoluteY <= boxHeight ) then 

You should make a separate function for checking click and hover events. This way you don't always need to recalculate it.

[Citizen]

Quote

@Citizen: Indeed you could, but then again, I'd rather create a separate dxDraw resource and store all information in a table and fetch it from there whenever I need it. This way it's all almost native code and should work without issues with destroying and creating and setting.

So you would use a table instead of creating elements ? But then you are going far from the cegui system, on which u can use events (giving dx elements as source etc)

[myonlake]

I would use a table, yes. An example of such system is mabako's paradise roleplay's GUI interface, which he made with dxDraw, with the use of tables as storage.