[TUT] dxFunctions

Hi everybody!

Today, I will make a tutorial for this community...

This tutorial will teach you to click dxElements (dxDrawRectangle, dxDrawText etc.)

For the beginning, create variables

  
--For all screen sizes 
local screenW, screenH = guiGetScreenSize() 
local sW = (screenW / 640) 
local sH = (screenH / 480) 
local tS = (screenW / 640) * 0.5 --Text Size 
  
--dx Button variable 
local dx_button = { 
    --{x, y, width, height, color, text, output text after clicking} 
    {x = sW * 70, y = sH * 200, w = sW * 75, h = sH * 10, c = tocolor(0, 0, 0, 0), t = 'Login', o = 'Login button works is fine!'}, 
    {x = sW * 70, y = sH * 225, w = sW * 75, h = sH * 10, c = tocolor(0, 0, 0, 0), t = 'Register', o = 'Register button works is fine!'}, 
    {x = sW * 70, y = sH * 250, w = sW * 75, h = sH * 10, c = tocolor(0, 0, 0, 0), t = 'Exit', o = 'Exit button works is fine!'} 
} 
  
local isVisible = false 
  

Created? great!

Now we create function

  
--We need a (onClientRender, onClientCursorMove, onClientClick) functions 
--Create Menu and deMenu functions for rendering dxElements 
function Menu() 
    addEventHandler('onClientRender', root, Render) 
    addEventHandler('onClientCursorMove', root, Move) 
    addEventHandler('onClientClick', root, Click) 
end 
  
function deMenu() 
    removeEventHandler('onClientRender', root, Render) 
    removeEventHandler('onClientCursorMove', root, Move) 
    removeEventHandler('onClientClick', root, Click) 
end 
  
function Bind() 
    isVisible = (not isVisible) 
    showCursor(isVisible) 
    loadstring(('%s()'):format((isVisible and 'Menu' or 'deMenu')))() 
end 
bindKey('f', 'down', Bind) 
  

After creating the necessary functions

  
function Render() 
    for i = 1, #dx_button do 
        dxDrawRectangle(dx_button[i].x, dx_button[i].y, dx_button[i].w, dx_button[i].h, dx_button[i].c) 
        dxDrawText(dx_button[i].t, dx_button[i].x, dx_button[i].y, dx_button[i].x + dx_button[i].w, dx_button[i].y + dx_button[i].h, tocolor(255, 255, 255, 255), tS * 1, 'default', 'center', 'center') 
    end 
end 
  
function Move(_, _, x, y) 
    --Cursor x, y position 
    for i = 1, #dx_button do 
        --If the cursor position is equal to dx position, then change the color 
        if (x >= dx_button[i].x and x <= dx_button[i].x + dx_button[i].w) and (y > dx_button[i].y and y < dx_button[i].y + dx_button[i].h) then 
            dx_button[i].c = tocolor(150, 0, 0, 200) 
        else 
            dx_button[i].c = tocolor(0, 0, 0, 0) 
        end 
    end 
end 
  
function Click(b, s, x, y) 
    if (b == 'left' and s == 'up') then 
        for i = 1, #dx_button do 
            --If the dx position is equal to cursor click position, then output message 
            if (x >= dx_button[i].x and x <= dx_button[i].x + dx_button[i].w) and (y > dx_button[i].y and y < dx_button[i].y + dx_button[i].h) then 
                if (dx_button[i].o) then 
                    outputChatBox(dx_button[i].o) 
                end 
            end 
        end 
    end 
end 
  

All this it turns out so

  
local screenW, screenH = guiGetScreenSize() 
local sW = (screenW / 640) 
local sH = (screenH / 480) 
local tS = (screenW / 640) * 0.5 
  
local dx_button = { 
    {x = sW * 70, y = sH * 200, w = sW * 75, h = sH * 10, c = tocolor(0, 0, 0, 0), t = 'Login', o = 'Login button works is fine!'}, 
    {x = sW * 70, y = sH * 225, w = sW * 75, h = sH * 10, c = tocolor(0, 0, 0, 0), t = 'Register', o = 'Register button works is fine!'}, 
    {x = sW * 70, y = sH * 250, w = sW * 75, h = sH * 10, c = tocolor(0, 0, 0, 0), t = 'Exit', o = 'Exit button works is fine!'} 
} 
  
local isVisible = false 
  
function Menu() 
    addEventHandler('onClientRender', root, Render) 
    addEventHandler('onClientCursorMove', root, Move) 
    addEventHandler('onClientClick', root, Click) 
end 
  
function deMenu() 
    removeEventHandler('onClientRender', root, Render) 
    removeEventHandler('onClientCursorMove', root, Move) 
    removeEventHandler('onClientClick', root, Click) 
end 
  
function Bind() 
    isVisible = (not isVisible) 
    showCursor(isVisible) 
    loadstring(('%s()'):format((isVisible and 'Menu' or 'deMenu')))() 
end 
bindKey('f', 'down', Bind) 
  
function Render() 
    for i = 1, #dx_button do 
        dxDrawRectangle(dx_button[i].x, dx_button[i].y, dx_button[i].w, dx_button[i].h, dx_button[i].c) 
        dxDrawText(dx_button[i].t, dx_button[i].x, dx_button[i].y, dx_button[i].x + dx_button[i].w, dx_button[i].y + dx_button[i].h, tocolor(255, 255, 255, 255), tS * 1, 'default', 'center', 'center') 
    end 
end 
  
function Move(_, _, x, y) 
    for i = 1, #dx_button do 
        if (x >= dx_button[i].x and x <= dx_button[i].x + dx_button[i].w) and (y > dx_button[i].y and y < dx_button[i].y + dx_button[i].h) then 
            dx_button[i].c = tocolor(150, 0, 0, 200) 
        else 
            dx_button[i].c = tocolor(0, 0, 0, 0) 
        end 
    end 
end 
  
function Click(b, s, x, y) 
    if (b == 'left' and s == 'up') then 
        for i = 1, #dx_button do 
            if (x >= dx_button[i].x and x <= dx_button[i].x + dx_button[i].w) and (y > dx_button[i].y and y < dx_button[i].y + dx_button[i].h) then 
                if (dx_button[i].o) then 
                    outputChatBox(dx_button[i].o) 
                end 
            end 
        end 
    end 
end 
  

This way we are able to click dxElement

That's all!

p.s Do not judge strictly, this is my first tutorial

Nice Tutorial dude :D :D

Edit : well i use it and i got that error http://prntscr.com/7s3did

Nice Tutorial dude :D :D

Edit : well i use it and i got that error http://prntscr.com/7s3did

ohh. sorry) Update

  
local screenW, screenH = guiGetScreenSize() 
local sW = (screenW / 640) 
local sH = (screenH / 480) 
local tS = (screenW / 640) * 0.5 
  

good job now its work

good job now its work

thank you)

What's the point of using loadstring? all it is doing in your code, is execute one function or the other, there's no need to use loadstring to do that.

loadstring(('%s()'):format((isVisible and 'Menu' or 'deMenu')))() 

Well, I guess he wanted to use as less code as possible.

What's the point of using loadstring? all it is doing in your code, is execute one function or the other, there's no need to use loadstring to do that.

loadstring(('%s()'):format((isVisible and 'Menu' or 'deMenu')))() 

What then you propose to use?

And the code for the test

Well, I guess he wanted to use as less code as possible.

exactly

What's the point of using loadstring? all it is doing in your code, is execute one function or the other, there's no need to use loadstring to do that.

loadstring(('%s()'):format((isVisible and 'Menu' or 'deMenu')))() 

What is wrong with the use loadstring?

You can give more information?

do you call this TUT ? sorry nah

Maybe I made a mistake calling this tut, but this is my first tutorial) correct me if this is possible

do you call this TUT ? sorry nah

Whats wrong with having a little more advanced tutorial?

In my opinion, it's lame to have hundreds of easy tutorials

What's the point of using loadstring? all it is doing in your code, is execute one function or the other, there's no need to use loadstring to do that.

loadstring(('%s()'):format((isVisible and 'Menu' or 'deMenu')))() 

What is wrong with the use loadstring?

You can give more information?

It's both ugly and overcomplex. Also, I wouldn't call this a tutorial at all. Where is the explanation? Where is anything? You just put a bunch of lines of code there and expect people to understand it. Do not excuse yourself with "it's my first tutorial" - see, that is the problem with this section - you don't know what you're doing.

What's the point of using loadstring? all it is doing in your code, is execute one function or the other, there's no need to use loadstring to do that.

loadstring(('%s()'):format((isVisible and 'Menu' or 'deMenu')))() 

What is wrong with the use loadstring?

You can give more information?

It's both ugly and overcomplex. Also, I wouldn't call this a tutorial at all. Where is the explanation? Where is anything? You just put a bunch of lines of code there and expect people to understand it. Do not excuse yourself with "it's my first tutorial" - see, that is the problem with this section - you don't know what you're doing.

I said that perhaps was wrong calling this tutorial

And If you have not noticed, I described only in right places, I should describe each function? I am a newbie, but I know what features necessary for anything other.

Perhaps I am wrong...

Correct me, I need it in the future

You barely explained what your code was doing, other than a random few comments that won't help.

To begin, "For the beginning, create variables": you write 15 lines of code without explaining what anything is for (for your information, you forgot a closing bracket after the last element of dx_button)) - for example, how do the initial 6 lines help you in any way to accomplish what you were supposed to do? You aren't direct to the point, and add a bunch of code that will only confuse the person reading it. You could provide a working example separated from the explanation in the end of the post.

"Created? great! Now we create function": Yet again, you just provide a bunch of code without much explanation, expecting a beginner to understand the loadstring call or what that function even does. It would be much cleaner and easier to read as:

if ( isVisible ) then 
    Menu () 
else 
    deMenu () 
end 

Of course, then you could also give proper names to your variables and functions. For example, 'ShowMenu' and 'HideMenu', or simply 'SetMenuVisible' and rename your variable to 'isMenuVisible'.

And then you finally provide the code that is actually meaningful here - how to detect mouse hover/clicks on a DX rectangle. Again, without much explaining.

And that's about it, isn't it?

In the end, if you were to write a proper tutorial, it would all come down to a few lines of talk, one or two lines of code and an image to aid understanding the math for the mentally slow, as this is merely comparing whether the cursor is within a given rectangle (mouse_x >= rectangle_x && mouse_y >= rectangle_y && mouse_x <= (rectangle_x + rectangle_width) && mouse_y <= (rectangle_y + rectangle_height)). In fact, a beginner may have bigger chances of understanding how to do it by looking here: https://github.com/KennyShields/LoveFra ... il.lua#L36 than with this "tutorial".

You barely explained what your code was doing, other than a random few comments that won't help.

To begin, "For the beginning, create variables": you write 15 lines of code without explaining what anything is for (for your information, you forgot a closing bracket after the last element of dx_button)) - for example, how do the initial 6 lines help you in any way to accomplish what you were supposed to do? You aren't direct to the point, and add a bunch of code that will only confuse the person reading it. You could provide a working example separated from the explanation in the end of the post.

"Created? great! Now we create function": Yet again, you just provide a bunch of code without much explanation, expecting a beginner to understand the loadstring call or what that function even does. It would be much cleaner and easier to read as:

if ( isVisible ) then 
    Menu () 
else 
    deMenu () 
end 

Of course, then you could also give proper names to your variables and functions. For example, 'ShowMenu' and 'HideMenu', or simply 'SetMenuVisible' and rename your variable to 'isMenuVisible'.

And then you finally provide the code that is actually meaningful here - how to detect mouse hover/clicks on a DX rectangle. Again, without much explaining.

And that's about it, isn't it?

In the end, if you were to write a proper tutorial, it would all come down to a few lines of talk, one or two lines of code and an image to aid understanding the math for the mentally slow, as this is merely comparing whether the cursor is within a given rectangle (mouse_x >= rectangle_x && mouse_y >= rectangle_y && mouse_x <= (rectangle_x + rectangle_width) && mouse_y <= (rectangle_y + rectangle_height)). In fact, a beginner may have bigger chances of understanding how to do it by looking here: https://github.com/KennyShields/LoveFra ... il.lua#L36 than with this "tutorial".

I was mistaken, I apologize for my carelessness, and I thank for your help