[REL] GUI Classes v1.0 (scripting GUI MADE EASY!)

[50p]

GUI Classes v1.0

Introduction:

The title speaks for itself. If you've ever had problems with making nice user interface for your gamemode or RPG server then this library is for you! Making "log in" window now is as easy as picking your nose!

Description:

I've read lots of topics where people were having problems with scripting GUI even after reading the scripting GUI tutorial on the wiki so I decided to make those GUI classes to make scripting GUI easier then ever before. Now, it's pretty easy to make almost anything you like even with a little knowledge of scripting. These classes have a few features that are missing in MTA, like "click'n'drag", you can click and drag the control where you want. You can make GridLists with a few lines (an example is included in "test.lua") not even using AddRow, AddColumn, etc.

Example:

This is a simple example of how to create an image and swap it over with a different image when a user clicks it:

addEventHandler( "onClientResourceStart", getResourceRootElement( getThisResource() ), 
    function( ) 
        -- lets make it in the middle of the screen 
        local screenSize = { guiGetScreenSize( ) }; 
        img = StaticImage:Create( screenSize[ 1 ] / 2 - 200, screenSize[ 2 ] / 2 - 200, 400, 400, "images/0.png" ); 
        img:AddOnClick( clickedAnImage ); 
        -- clickedAnImage function will be called when you click an image 
    end 
) 
  
local click_count = 0 
function clickedAnImage( ) 
    click_count = click_count + 1; 
    img:LoadImage( "images/" .. tostring( click_count % 2 ) .. ".png" ); 
end 

This is easy to make even without my classes but it shows you a new way of scripting. There is even more examples in "test.lua" file. They show how to create a "Log in" window, complex gridlists and dragable controls.

Documentation:

Currently, there is a short documentation that just tells you what functions are used to create specific controls. Because of that, I do expect people that would like to know a function for this, for that, etc. If you want to know what function is responsible for something, just ask here and I'll reply as soon as I see the post. HERE is work-in-progress documentation. You can find all the functions there but only a few are documented.

Download:

Click ME!

BUG REPORT:

If you find any bugs, and I'm 99% sure there will be a bug, just speak up! Don't keep it for yourself! I'll try to fix it and release a new version with the bug fixed.

Edited March 1, 2009 by Guest

[CodeMaster]

Looks quite nice, of course, like everything else you made.

Came from the probably most advanced gui scripter.

Too bad you didn't release it earlier, so I'd implement it to my Mass Warfare GM, but maybe I'll do so, since current GUI sucks

Cheers

Nidza

[niemi]

Why doesn't this work:

function createWindow( ) 
    myWindow = Window:Create( 0.02, 0.3, 0.6, 0.6, "Test", true ); 
    btnCls = myWindow:AddButton ( 0.1, 0.9, 0.2, 0.05, "Close", true ); 
    myWindow:Visible ( true ); 
    myWindow:Movable ( false ); 
    myWindow:Sizable ( false ); 
    showCursor( true ); 
    btnCls:AddOnClick( hide ); 
    img = StaticImage:Create( 0.3, 0.4, 0.3, 0.3, "image.png", false, myWindow ); 
end 
addEventHandler( "onPlayerJoin", getResourceRootElement( getThisResource() ), createWindow ); 
addEventHandler( "onClientResourceStart", getResourceRootElement( getThisResource() ), createWindow ); 
  
  
function hide( button ) 
     
        myWindow:Visible ( false ); 
        showCursor( false ); 
     
end 
addCommandHandler("close", hide) 
  
  
function show( ) 
    myWindow:Visible ( true ); 
    showCursor( true ); 
end 
addCommandHandler( "open", show ) 
  

Gui works, but the image wont show, and i want the image to be in the Window. What is wrong??

[darkdreamingdan]

Why doesn't this work:

  
    img = StaticImage:Create( 0.3, 0.4, 0.3, 0.3, "image.png", false, myWindow ); 
  

You're using relative arguments while specifying "false" for whether it is relative. Just set the "relative" parameter from false to true and it should work.

[50p]

niemi, you can also use:

img = myWindow:AddStaticImage( .3, .4, .3, .3, "image.png", true ) 

Also, your code may not work even if you do what Talidan suggested because you pass a Window object (myWindow) where it should be a GUI element (myWindow.gui). Can be something like this:

img = StaticImage:Create( 0.3, 0.4, 0.3, 0.3, "image.png", true, myWindow.gui ); 

I'd suggest using AddStaticImage() method which sets image as a child of the window itself, so you don't have to worry about setting parent. That's why I made Add(StaticImage, Label, etc.) functions which simply add new gui element as a child.

[DutchCaffeine]

Hello,

Support 50p by helping him to create some documentation. I already started creating it at the wiki!

You will need a mta community account to help creating the documentation.

The url to the documentation:

http://development.mtasa.com/index.php? ... UI_Classes

[niemi]

Thx, it works now.

[50p]

Thanks Alexander for actually starting it... I don't know when I would start it myself but once you started I had an inspiration and made a lot of new pages, templated, etc.. even fully documented 3 methods

[DutchCaffeine]

Your welcome. I will create some documentation also.

I hope that other poeple also create some pages!

I builded this morning a nice, and usefull function for this nice set of gui classes!

Much servers are using this trick, it is called fadeGui, it is not a standard mta function. But with a little help of a event you can create it.

But now it is availible for gui classes also!

I created it, and i might say im proud of my work!

To install it open up sharedfuncs_class.lua, and put somewhere in that file:

  
function GUISharedFuncs:Fade(fadeIn, maxAlpha) 
    maxAlpha = maxAlpha or 1.0 
    if(type(self) ~= "table") then 
        outputDebugString( "calling method incorrectly ( object.method() )! use object:method()", 1 ); 
        return false 
    end 
     
    fFadeIn = function() 
        currentAlpha = tonumber(string.format('%.2f', guiGetAlpha(self.gui))); 
         
        if(currentAlpha == maxAlpha) then 
            guiSetAlpha(self.gui, maxAlpha); 
            removeEventHandler("onClientRender", self.gui, fFadeIn); 
        else 
            guiSetAlpha(self.gui, currentAlpha+0.1); 
        end 
    end 
     
    fFadeOut = function() 
        currentAlpha = tonumber(string.format('%.2f', guiGetAlpha(self.gui))); 
         
        if(currentAlpha == 0.0) then 
            guiSetAlpha(self.gui, 0.0); -- just to be sure. 
            guiSetVisible(self.gui, false); 
            removeEventHandler("onClientRender", self.gui, fFadeOut); 
        else 
            guiSetAlpha(self.gui, currentAlpha-0.1); 
        end 
    end 
     
    if(type(fadeIn) == "boolean") then 
        self.maxAlpha = maxAlpha; 
     
        if fadeIn == true then 
            guiSetAlpha(self.gui, 0.0); 
            guiSetVisible(self.gui, true); 
            addEventHandler("onClientRender", self.gui, fFadeIn) 
        elseif(fadeIn == false) then 
            addEventHandler("onClientRender", self.gui, fFadeOut) 
        end 
    end 
     
    return "fading" 
end 
  

offcourse you can replace the whole file with the new function:

http://mta.pastebin.com/f6f81d402

To use it:

  
-- just a simple window 
wnd = Window:Create( 10, 200, 200, 110, "" ); 
wnd:Visible(false); -- offcourse you may not see the window  
  
-- then 
function toggleWnd(cmd) 
    if wnd:Visible() == false then 
        wnd:Fade(true, 0.8); -- Fade it in, and the max alpha is 0.8. If you don't fill out the alpha it will be 1.0 standard. 
    else 
        wnd:Fade(false); -- Max alpha is not important! 
    end 
end 
  
addCommandHandler('tw', toggleWnd); 
  

Syntax:

Object:Fade(bool fadeIn, Float maxAlpha = 1.0); 

Good luck with it, and have a beer for me

And now i going to unban my self from my private server. I banned the serial 0000-0000-0000-0000 for fun. But what happend my stupid server banned me, and not that serial. I just getting crazy. Or am i stupid to ban that serial. Hmmmm....

Alexander

[50p]

That function isn't bad, but I'll combine arc_'s animation class for gui with mine so it will be possible to slide, fade in/out, resize (animated resizing), etc. For now you can use that function. I would not recommend using string.format() in onClientRender because that function is slow and may drop down FPS.

BTW, if you use DP2.3 and you never had a serial then your serial must be 0000-0000-0000-0000. If you banned that serial you banned yourself too.. that must have been "fun" for you. Anyway, I'm not sure how much time I can get to do more wiki stuff, but hopefully will do some today.

[DutchCaffeine]

I need to use string.format. Order way i need to enter a bunch of numbers. And it won't end then.

And where can i find arc_'s class?

Edit

In GUIColection.lua on line 23 there is function called showCursor( true );

I think it need to be deleted?

[50p]

I need to use string.format. Order way i need to enter a bunch of numbers. And it won't end then.

And where can i find arc_'s class?

Edit

In GUIColection.lua on line 23 there is function called showCursor( true );

I think it need to be deleted?

Yeah, it shouldn't be there, I wrote it there to test the scripts. I'll remove it and release a new version with some small bugs fixed too.

The animation class is in some resource, can't remember which one though. I copied it looong time ago to my gamemode which was never released.

[DutchCaffeine]

Oke,

Im interested in that animation script. It is hard to find, i searched on arc (the username) and can't find a release topic. Also searched with it on the comminity home, but still came up empty.

So i hope a new version of the classes will be out soon.

[Mr.Hankey]

http://code.google.com/p/multitheftauto ... m.lua?r=34 is probably what you're looking for. But note that this is for 1.0

[DutchCaffeine]

Yes it is, but the code it self. So far i can read you can use it on dp2.3 servers also!

Edited March 1, 2009 by Guest

[50p]

Yes it is, but the code it self. I think it is incomplete.

I think it's the one that I'm going to include. It may be not finished but fade in/out and sliding works fine.

And it works with DP2.x too, Mr.Hankey.

[SpZ]

Those functions work on DP2.X too, but Mr.Hankey meant you can't use animations..

[DutchCaffeine]

It are gui animations. Not player animations.

[Mr.Hankey]

i was just too lazy to read through the code and see if there is any dp2 incompatiblity that might occur so just incase i decided to mention that it was taken from the 1.0 resource svn

[DutchCaffeine]

Hello all,

I have a little modification for this:

Open the file window_class.lua

Find: (line: ~18)

function Window:Create( x, y, width, height, text, relative )

Replace width:

function Window:Create( x, y, width, height, text, relative )	
if y == nil or y == false and relative == false then
local scr = {guiGetScreenSize()};
if x == "centered" then
		x = (scr[0]/2)-(width/2);
		y = (scr[1]/2)-(height/2);
elseif x == "top-center" then
		x = (scr[0]/2)-(width/2);
		y = 0;
elseif x == " bottom-center" then
		x = (scr[0]/2)-(width/2);
		y = scr[1]-height;
end
end

What this does, is easy:

Centered window:

Window:Create("centered", nil, 500, 300, "login to our server!", false);

Window at the top of the screen centered:

Window:Create("top-center", nil, 500, 60, "Some information here.", false);

Window at the bottom of the screen centered:

Window:Create("bottom-center", nil, 500, 60, "Some information here.", false);

Offcourse you enter just the x and y values. Example:

Window:Create(50, 100, 500, 300, "Title",  false);

Now it is easy to create a centered window. And you don't need to calculate it on your own.

Alexander

Edited August 11, 2009 by Guest

[50p]

Alexander, you can't have variable number of arguments if "..." is used as first parameter. It always MUST be at the end of parameters. I don't know how you could make it and didn't give you any errors.

... - this contains every next parameter passed to the function. So, if you use it as the first parameter the next parameters would never be used and therefore Lua would throw an error.

Besides, why do you create a new table of arguments and another one to get the number of arguments if arg (the table with parameters) exists when ... is used?

HERE is some Lua reference that might be useful for you.

[DutchCaffeine]

Alexander, you can't have variable number of arguments if "..." is used as first parameter. It always MUST be at the end of parameters. I don't know how you could make it and didn't give you any errors.

... - this contains every next parameter passed to the function. So, if you use it as the first parameter the next parameters would never be used and therefore Lua would throw an error.

Besides, why do you create a new table of arguments and another one to get the number of arguments if arg (the table with parameters) exists when ... is used?

HERE is some Lua reference that might be useful for you.

I don't need that sorry.

But i havn't tested yet, but i saw it. My fault. Just created it without my head.

I edit my message.

And also

if var = "value" then

Wont work either that little mistake i got on two places

[50p]

...

But i havn't tested yet, but i saw it. My fault. Just created it without my head.

...

Don't make things without your head because one day you'll wake up with an unexpected baby next to you.

Also, please post suggestions not the code because I'll probably won't use that code anyway.

[DutchCaffeine]

...

But i havn't tested yet, but i saw it. My fault. Just created it without my head.

...

Don't make things without your head because one day you'll wake up with an unexpected baby next to you.

Also, please post suggestions not the code because I'll probably won't use that code anyway.

Maybe people will edit there file? So if you include it or not, i'll post the code, only for people who are interested!

And i love baby's! So that aint a problem also. Anymore problems?

[50p]

One more... Find bugs in this library please No, seriously now, please make sure the code works before you post it because I don't want people here complaining about your code, you don't want it either do you? Anyway, I have to thank you for actually using it