dxDrawRectangle like editbox

[Thorxx]

Heyo guys,

I have two rectangles for my login panel, but I need them like editboxes.

Can someone give me an example how to do it?

I tried this resource from community https://community.multitheftauto.com/in ... ls&id=2136

But it doesn't work.

    
       ["username"] = dxDrawRectangle(sX/6, sY/3.15, sX/6, sY/30, tocolor(255, 255, 255, 255), true),     
       ["password"] = dxDrawRectangle(sX/6, sY/2.50, sX/6, sY/30, tocolor(255, 255, 255, 255), true),    
  

Thank you for your answers

[Castillo]

It's not that easy, you'll have to create a script to do it.

[Thorxx]

I'm sure that it is not easy, but I can try it... Just give me an example please

[tosfera]

The easiest way to do this, is create a guiCreateEdit and change the style from it with a style.css file. ( I can not be 100% sure, but 90% sure it is. ) I've seen it alot these days!

[Thorxx]

tosfera,

Thank you for this tip, I will try it .

[xXMADEXx]

The easiest way to do this, is create a guiCreateEdit and change the style from it with a style.css file. ( I can not be 100% sure, but 90% sure it is. ) I've seen it alot these days!

MTA doesn't support css. CSS is for HTML, not Lua.

However, you can just put that dx resource on your server and export the dx functions.

[Thorxx]

And about this:

  
local isLoginVisible = false 
local WalkWay = nil 
local sX, sY = guiGetScreenSize() 
WalkWay = dxCreateFont( "WalkWay.ttf" )  
  
  
function LoginMain () 
showCursor ( true ) 
  
login = { 
       ["bg"] = dxDrawImage(0, 0, sX, sY, "images/bg.png", 0, 0, 0, tocolor(255, 255, 255, 255), false), 
       ["header"] = dxDrawRectangle(sX/6.5, sY/4, sX/3, sY/35, tocolor(85, 50, 205, 255), true), 
       ["window"] = dxDrawRectangle(sX/6.5, sY/3.6, sX/3, sY/3, tocolor(31, 31, 31, 255), false),   
        
       ["HT"] = dxDrawText("Login Panel", sX/3.4, sY/3.95, sX/2, sY/2, tocolor(255, 255, 255, 255), sX*0.0008, "default-bold", "left", "top", false, false, true, false, false), 
       ["ID"] = dxDrawText("Username", sX/6, sY/3.35, sX/2, sY/2, tocolor(255, 255, 255, 255), sX*0.0006, "default-bold", "left", "top", false, false, true, false, false), 
       ["PW"] = dxDrawText("Password", sX/6, sY/2.615, sX/2, sY/2, tocolor(255, 255, 255, 255), sX*0.0006, "default-bold", "left", "top", false, false, true, false, false), 
   
   
       ["username"] = dxDrawRectangle(sX/6, sY/3.15, sX/6, sY/30, tocolor(255, 255, 255, 255), false),     
       ["password"] = dxDrawRectangle(sX/6, sY/2.50, sX/6, sY/30, tocolor(255, 255, 255, 255), false),    
       } 
        
changelog = { 
       ["header"] = dxDrawRectangle(sX/1.7, sY/4, sX/4, sY/35, tocolor(85, 50, 205, 255), true), 
       ["window"] = dxDrawRectangle(sX/1.7, sY/3.6, sX/4, sY/3, tocolor(31, 31, 31, 255), true), 
        
       ["HT"] = dxDrawText("Changelog", sX/1.45, sY/3.95, sX/2, sY/2, tocolor(255, 255, 255, 255), sX*0.0008, "default-bold", "left", "top", false, false, true, false, false), 
       } 
        
       addEventHandler("onClientRender", root, LoginMain ) 
end 
addCommandHandler("test", LoginMain ) 
  

Why it makes big FPS drops?

[Cadell]

made mta support css

[csiguusz]

There are some problems with your script:

You are trying to add a new event handler at every frame, but this should give you an error message in debugscript.

Something like this doesn't have much sense:

username = dxDrawRectangle(...) 

Dx drawing functions return a boolean (true/false) wich just indicates if tha drawing was successful or not. They don't return an element like the gui functions.

Some other (general dx) optimization tips:

• Use local variables where possible, and avoid using/creating globals every frame.
  Avoid calculation of static values at every frame, use locals instead. This also makes things easier to change.
  Don't do something at every frame wich is enough to be done once.

local isLoginVisible = false 
local WalkWay = dxCreateFont( "WalkWay.ttf" ) 
local sX, sY = guiGetScreenSize() 
local color1 = tocolor(85, 50, 205, 255) 
local color2 = tocolor(255, 255, 255, 255) 
local color3 = tocolor(31, 31, 31, 255) 
  
function LoginMain () 
        dxDrawImage(0, 0, sX, sY, "images/bg.png", 0, 0, 0, color2, false) 
        dxDrawRectangle(sX/6.5, sY/4, sX/3, sY/35, color1, true) 
        dxDrawRectangle(sX/6.5, sY/3.6, sX/3, sY/3, color3, false) 
                
        dxDrawText("Login Panel", sX/3.4, sY/3.95, sX/2, sY/2, color2, sX*0.0008, "default-bold", "left", "top", false, false, true, false, false) 
        dxDrawText("Username", sX/6, sY/3.35, sX/2, sY/2, color2, sX*0.0006, "default-bold", "left", "top", false, false, true, false, false) 
        dxDrawText("Password", sX/6, sY/2.615, sX/2, sY/2, color2, sX*0.0006, "default-bold", "left", "top", false, false, true, false, false) 
          
          
        dxDrawRectangle(sX/6, sY/3.15, sX/6, sY/30, color2, false)    
        dxDrawRectangle(sX/6, sY/2.50, sX/6, sY/30, color2, false)  
               
  
        dxDrawRectangle(sX/1.7, sY/4, sX/4, sY/35, color1, true) 
        dxDrawRectangle(sX/1.7, sY/3.6, sX/4, sY/3, color3, true) 
                
        dxDrawText("Changelog", sX/1.45, sY/3.95, sX/2, sY/2, color2, sX*0.0008, "default-bold", "left", "top", false, false, true, false, false) 
end 
        
function toggle () 
    if isLoginVisible then 
        removeEventHandler("onClientRender", root, LoginMain ) 
    else 
        addEventHandler("onClientRender", root, LoginMain ) 
    end 
    isLoginVisible = not isLoginVisible 
    showCursor ( isLoginVisible ) 
end 
  
addCommandHandler ( "t", toggle ) 

And finnaly, my way to test the performance of a drawing:

function ptest() 
    local start = getTickCount () 
    for i = 1,30000 do 
        LoginMain () 
    end 
    outputChatBox ( "t: " .. (getTickCount () - start) ) 
end 
addCommandHandler("pt", ptest ) 
  

This calculates how much time is needed to draw 30000 frames. ( wich would be normally be drawn over 12.5 minutes at a framerate of 40)

Edited November 3, 2013 by Guest

[tosfera]

The easiest way to do this, is create a guiCreateEdit and change the style from it with a style.css file. ( I can not be 100% sure, but 90% sure it is. ) I've seen it alot these days!

MTA doesn't support css. CSS is for HTML, not Lua.

However, you can just put that dx resource on your server and export the dx functions.

MTA Does support css. You can just call the elements, you just can't give special tags to them. You can just call some of the gui functions. Alot of big servers are using css files to create a nice and smooth looking GUI login screen ( yeah, a GUI. Not DxDraw ) and just use css to make them look awesome.

[Thorxx]

There are some problems with your script:

You are trying to add a new event handler at every frame, but this should give you an error message in debugscript.

Something like this doesn't have much sense:

username = dxDrawRectangle(...) 

Dx drawing functions return a boolean (true/false) wich just indicates if tha drawing was successful or not. They don't return an element like the gui functions.

Some other (general dx) optimization tips:

• Use local variables where possible, and avoid using/creating globals every frame.
  Avoid calculation of static values at every frame, use locals instead. This also makes things easier to change.
  Don't do something at every frame wich is enough to be done once.

local isLoginVisible = false 
local WalkWay = dxCreateFont( "WalkWay.ttf" ) 
local sX, sY = guiGetScreenSize() 
local color1 = tocolor(85, 50, 205, 255) 
local color2 = tocolor(255, 255, 255, 255) 
local color3 = tocolor(31, 31, 31, 255) 
  
function LoginMain () 
        dxDrawImage(0, 0, sX, sY, "images/bg.png", 0, 0, 0, color2, false) 
        dxDrawRectangle(sX/6.5, sY/4, sX/3, sY/35, color1, true) 
        dxDrawRectangle(sX/6.5, sY/3.6, sX/3, sY/3, color3, false) 
                
        dxDrawText("Login Panel", sX/3.4, sY/3.95, sX/2, sY/2, color2, sX*0.0008, "default-bold", "left", "top", false, false, true, false, false) 
        dxDrawText("Username", sX/6, sY/3.35, sX/2, sY/2, color2, sX*0.0006, "default-bold", "left", "top", false, false, true, false, false) 
        dxDrawText("Password", sX/6, sY/2.615, sX/2, sY/2, color2, sX*0.0006, "default-bold", "left", "top", false, false, true, false, false) 
          
          
        dxDrawRectangle(sX/6, sY/3.15, sX/6, sY/30, color2, false)    
        dxDrawRectangle(sX/6, sY/2.50, sX/6, sY/30, color2, false)  
               
  
        dxDrawRectangle(sX/1.7, sY/4, sX/4, sY/35, color1, true) 
        dxDrawRectangle(sX/1.7, sY/3.6, sX/4, sY/3, color3, true) 
                
        dxDrawText("Changelog", sX/1.45, sY/3.95, sX/2, sY/2, color2, sX*0.0008, "default-bold", "left", "top", false, false, true, false, false) 
       addEventHandler("onClientRender", root, LoginMain ) 
end 
        
function toggle () 
    if isLoginVisible then 
        removeEventHandler("onClientRender", root, LoginMain ) 
    else 
        addEventHandler("onClientRender", root, LoginMain ) 
    end 
    isLoginVisible = not isLoginVisible 
    showCursor ( isLoginVisible ) 
end 
  
addCommandHandler ( "t", toggle ) 

And finnaly, my way to test the performance of a drawing:

function ptest() 
    local start = getTickCount () 
    for i = 1,30000 do 
        LoginMain () 
    end 
    outputChatBox ( "t: " .. (getTickCount () - start) ) 
end 
addCommandHandler("pt", ptest ) 
  

This calculates how much time is needed to draw 30000 frames. ( wich would be normally be drawn over 12.5 minutes at a framerate of 40)

Thank you

But there's a problem, login works correctly but debugscript says ERROR: 26: addEventHandler: 'onClientRender' with this function is already handled

[csiguusz]

Oops. Sorry, i forgot to remove a line... Copy my code again.

[myonlake]

The easiest way to do this, is create a guiCreateEdit and change the style from it with a style.css file. ( I can not be 100% sure, but 90% sure it is. ) I've seen it alot these days!

MTA doesn't support css. CSS is for HTML, not Lua.

However, you can just put that dx resource on your server and export the dx functions.

MTA Does support css. You can just call the elements, you just can't give special tags to them. You can just call some of the gui functions. Alot of big servers are using css files to create a nice and smooth looking GUI login screen ( yeah, a GUI. Not DxDraw ) and just use css to make them look awesome.

Do explain me how it works. Never saw an update about CSS support on MTA.

[xXMADEXx]

MTA doesn't support css. CSS is for HTML, not Lua.

However, you can just put that dx resource on your server and export the dx functions.

MTA Does support css. You can just call the elements, you just can't give special tags to them. You can just call some of the gui functions. Alot of big servers are using css files to create a nice and smooth looking GUI login screen ( yeah, a GUI. Not DxDraw ) and just use css to make them look awesome.

Do explain me how it works. Never saw an update about CSS support on MTA.

Im guessing it haves to be remotely called or something

https://forum.multitheftauto.com/viewtopic.php?f=102&t=31609

From the looks of it, the JavaScript returns the GUI elements.

[myonlake]

That's not even implemented yet. You can't quite just push in stylesheets when there is no compatibility for such. If I knew of it I would've used them hundred times already.