Help: dxEditBox? (Another problem)

[Hadif]

How do I create edit box with DX?

Edited September 16, 2015 by Guest

[John Smith]

viewtopic.php?f=108&t=84376

[Hadif]

https://forum.multitheftauto.com/viewtopic.php?f=108&t=84376

Hmhhh, how do I make my own? I don't want to includes the other resource. Any idea? By the way, thanks!

[Malak]

        function onDeleteCharacter() 
    if editBoxState == true then 
        textEdited = string.sub(textEdited,1,string.len(textEdited)-1) 
    end 
end 
bindKey("backspace", "down", onDeleteCharacter) 
function onEditCharacter(character) 
    if editBoxState == true then 
        local count =  string.len(textEdited) 
        if count < 23 then 
            textEdited = textEdited..character 
        end 
    end 
end 
addEventHandler("onClientCharacter", getRootElement(), onEditCharacter) 

u just add to add ur variable textEdited on ur dxDrawText and make your click state (focus on edit box)

[John Smith]

https://forum.multitheftauto.com/viewtopic.php?f=108&t=84376

Hmhhh, how do I make my own? I don't want to includes the other resource. Any idea? By the way, thanks!

Perhaps you could download that resource, check the code and see how it works?

[LabiVila]

You need to have quite some big knowledge of how lua works to be able to write your own dx edit boxes, and it has to do with a lot of math. I suggest you to use the link given above, it's one of the bests (if not the best) out there

[Hadif]

        function onDeleteCharacter() 
    if editBoxState == true then 
        textEdited = string.sub(textEdited,1,string.len(textEdited)-1) 
    end 
end 
bindKey("backspace", "down", onDeleteCharacter) 
function onEditCharacter(character) 
    if editBoxState == true then 
        local count =  string.len(textEdited) 
        if count < 23 then 
            textEdited = textEdited..character 
        end 
    end 
end 
addEventHandler("onClientCharacter", getRootElement(), onEditCharacter) 

u just add to add ur variable textEdited on ur dxDrawText and make your click state (focus on edit box)

More explanation pls, it looks useful!

[Hadif]

https://forum.multitheftauto.com/viewtopic.php?f=108&t=84376

Hmhhh, how do I make my own? I don't want to includes the other resource. Any idea? By the way, thanks!

Perhaps you could download that resource, check the code and see how it works?

im not understand deutch language

[Syntrax#]

How do I create edit box with DX?

  
  
UsernameLogin = guiCreateEdit(0.24, 0.72, 0.17, 0.04, "", true) 
guiSetAlpha(UsernameLogin, 0.00) 
  
function DrawEditbox() 
local text = guiGetText(UsernameLogin) 
dxDrawRectangle(screenW * 0.2360, screenH * 0.7161, screenW * 0.1699, screenH * 0.0443, tocolor(255, 255, 255, 255), true) 
dxDrawText(text.."_", screenW * 0.2434, screenH * 0.7161, screenW * 0.3919, screenH * 0.7604, tocolor(0, 0, 0, 255), 0.80, "bankgothic", "left", "center", false, false, true, false, false) 
end 

[LabiVila]

Using guiGetText wouldn't really make a proper edit box. You can do it one this way, you declare an empty string, so you have to get mouse's position, if mouse is within the specified rectangle, and it clicks, then you start using onClientCharacter, which would look like this:

  
addEventHandler ("onClientCharacter", getRootElement(), 
function (key) 
yourstring = yourstring .. key 
end 
) 
  

then draw the text with onclientrender, this is the way I do it

[Syntrax#]

Using guiGetText wouldn't really make a proper edit box. You can do it one this way, you declare an empty string, so you have to get mouse's position, if mouse is within the specified rectangle, and it clicks, then you start using onClientCharacter, which would look like this:

  
addEventHandler ("onClientCharacter", getRootElement(), 
function (key) 
yourstring = yourstring .. key 
end 
) 
  

then draw the text with onclientrender, this is the way I do it

Well it does Create A DX Editbox but you aren't actually creating a Editbox,you are just using the gui editbox to get the input data from.But this thing works pretty great

[Hadif]

Using guiGetText wouldn't really make a proper edit box. You can do it one this way, you declare an empty string, so you have to get mouse's position, if mouse is within the specified rectangle, and it clicks, then you start using onClientCharacter, which would look like this:

  
addEventHandler ("onClientCharacter", getRootElement(), 
function (key) 
yourstring = yourstring .. key 
end 
) 
  

then draw the text with onclientrender, this is the way I do it

I guess this way is what I want, but... Can you explain more?

[LabiVila]

  
addEventHandler ("onClientResourceStart", getRootElement(), 
function () 
local word = "" 
showCursor (true) 
end 
) 
  
function isMouseInPosition ( x, y, width, height ) 
    if ( not isCursorShowing ( ) ) then 
        return false 
    end 
  
    local sx, sy = guiGetScreenSize ( ) 
    local cx, cy = getCursorPosition ( ) 
    local cx, cy = ( cx * sx ), ( cy * sy ) 
    if ( cx >= x and cx <= x + width ) and ( cy >= y and cy <= y + height ) then 
        return true 
    else 
        return false 
    end 
end 
  
function drawing () 
    dxDrawRectangle (300, 300, 200, 100, tocolor (255, 255, 255)) 
    dxDrawText (word, 310, 305, 200, 100, tocolor (255, 255, 255)) 
end 
addEventHandler ("onClientRender", getRootElement(), drawing) 
  
addEventHandler ("onClientClick", getRootElement(), 
    function () 
        if isMouseInPosition (300, 300, 200, 100) then 
            outputChatBox ("You have clicked the rectangle, start writing") 
            addEventHandler ("onClientCharacter", getRootElement(), writeInBox) 
        end 
    end 
) 
  
function writeInBox (key) 
    word = word .. key 
end 
  

It is somehow like this

[Hadif]

  
addEventHandler ("onClientResourceStart", getRootElement(), 
function () 
local word = "" 
showCursor (true) 
end 
) 
  
function isMouseInPosition ( x, y, width, height ) 
    if ( not isCursorShowing ( ) ) then 
        return false 
    end 
  
    local sx, sy = guiGetScreenSize ( ) 
    local cx, cy = getCursorPosition ( ) 
    local cx, cy = ( cx * sx ), ( cy * sy ) 
    if ( cx >= x and cx <= x + width ) and ( cy >= y and cy <= y + height ) then 
        return true 
    else 
        return false 
    end 
end 
  
function drawing () 
    dxDrawRectangle (300, 300, 200, 100, tocolor (255, 255, 255)) 
    dxDrawText (word, 310, 305, 200, 100, tocolor (255, 255, 255)) 
end 
addEventHandler ("onClientRender", getRootElement(), drawing) 
  
addEventHandler ("onClientClick", getRootElement(), 
    function () 
        if isMouseInPosition (300, 300, 200, 100) then 
            outputChatBox ("You have clicked the rectangle, start writing") 
            addEventHandler ("onClientCharacter", getRootElement(), writeInBox) 
        end 
    end 
) 
  
function writeInBox (key) 
    word = word .. key 
end 
  

It is somehow like this

This example works without edit nothing?

Edited September 17, 2015 by Guest

[Hadif]

Thanks, that example works but.. I have another problem, when I click and try to type, the character appears in both edit field. How do I solve this?

addEventHandler("onClientRender", getRootElement(), 
    function() 
        panelLogin() 
    end 
) 
  
local font = {"title", "subtitle", "display", "button"} 
... 
font["display"] = dxCreateFont("file/ttf/roboto-regular.ttf", 9) 
... 
local word = {"username", "password"} 
word["username"] = "" 
word["password"] = "" 
  
function panelLogin() 
    ... 
    local display = {} 
    ... 
    display[5] = dxDrawText(word["username"], 603, 366, 843, 382, tocolor(255, 255, 255, 255), 1.00, font["display"], "left", "center", false, false, false, false, false) 
    display[6] = dxDrawText(word["password"], 603, 392, 843, 408, tocolor(255, 255, 255, 255), 1.00, font["display"], "left", "center", false, false, false, false, false) 
    ... 
end 
  
function isMouseInPosition(absoluteX, absoluteY, screenW, screenH) 
    if (not isCursorShowing()) then 
        return false 
    end 
    local screenX, screenY = guiGetScreenSize() 
    local cursorX, cursorY = getCursorPosition() 
    local cursorX, cursorY = (cursorX * screenX), (cursorY * screenY) 
    if (cursorX >= absoluteX and cursorX <= absoluteX + screenW) and (cursorY >= absoluteY and cursorY <= absoluteY + screenH) then 
        return true 
    else 
        return false 
    end 
end 
  
addEventHandler("onClientClick", getRootElement(), 
    function() 
        onClientClickEditPassword() 
        onClientClickEditUsername() 
    end 
) 
  
function onClientClickEditUsername() 
    if isMouseInPosition(603, 366, 240, 16) then 
        addEventHandler("onClientCharacter", getRootElement(), onClientEditUsername) 
    end 
end 
  
function onClientEditUsername(character) 
    word["username"] = word["username"]..character 
end 
  
function onClientClickEditPassword() 
    if isMouseInPosition(603, 366, 240, 16) then 
        addEventHandler("onClientCharacter", getRootElement(), onClientEditPassword) 
    end 
end 
  
function onClientEditPassword(character) 
    word["password"] = word["password"]..character 
end 

And by the way, how do I simplify the function? I think that my edit field will have a lot in my script and I don't want to repeat the script, there must be the way to make it own function, any help will be appreciate. Thank you for your time, may god bless your kindness and make you more genius!