Jump to content

[REL] GUI Editor 3.1.3


Remp

Recommended Posts

Ok, it works.

It's nice and very simple. Great work!

EDIT:

I've scripted a login form with my UI created by this resource, but I have some issues. In fact it appears a damaged UI with no buttons and no labels...

This is the code:

function welcomeForm() 
    initScreen = guiCreateWindow(101,55,1123,631,"",false) 
        initScreen_Label[1] = guiCreateLabel(108,12,875,45,"Corsair Roleplay Project - Welcome to our server!",false,initScreen) 
            guiLabelSetColor(initScreen_Label[1],150, 150, 170) 
            guiSetFont(initScreen_Label[1],"sa-header") 
        initScreen_Label[2] = guiCreateLabel(504,142,127,22,"work in progress...",false,initScreen) 
            guiLabelSetColor(initScreen_Label[2],255, 15, 15) 
            guiSetFont(initScreen_Label[2],"clear-normal") 
        initScreenSplash = guiCreateGridList(26,174,1072,389,false,initScreen) 
            guiGridListSetSelectionMode(initScreenSplash,2) 
            initScreen_Label[4] = guiCreateLabel(40,44,66,18,"Username",false,initScreenSplash) 
                guiSetFont(initScreen_Label[4],"clear-normal") 
            initScreen_LoginForm_usernameInput = guiCreateEdit(116,38,285,33,"",false,initScreenSplash) 
                guiEditSetMaxLength(initScreen_LoginForm_usernameInput, 50) 
            initScreen_Label[5] = guiCreateLabel(40,108,66,18,"Password",false,initScreenSplash) 
                guiSetFont(initScreen_Label[5],"clear-normal") 
            initScreen_LoginForm_passwordInput = guiCreateEdit(116,99,285,33,"",false,initScreenSplash) 
                guiEditSetMaxLength(initScreen_LoginForm_passwordInput, 50) 
    initScreen_Label[3] = guiCreateLabel(8,573,1115,18,"______________________________________________________________________________________________________________________________________________________________",false,initScreen) 
        guiSetAlpha(initScreen_Label[3],1) 
        guiLabelSetColor(initScreen_Label[3],100, 150, 255) 
        guiSetFont(initScreen_Label[3],"clear-normal") 
    initScreen_LoginButton = guiCreateButton(1010,594,88,27,"Login",false,initScreen) 
     
    guiSetVisible(initScreen, false) 
end 
addEventHandler("onClientGUIClick", initScreen_LoginButton, clientSubmitLogin, false) 
  
addEventHandler("onClientResourceStart",resourceRoot, 
    function() 
        welcomeForm() 
  
        if (initScreen ~= nil) then 
            guiSetVisible(initScreen, true) 
        else 
            outputChatBox("Error on creating the GUI.") 
            outputConsole("Error on creating the GUI.") 
        end 
  
            showCursor(true) 
  
            guiSetInputEnabled(true) 
    end 
) 

And this is the result:

http://i39.tinypic.com/zn7vwy.png

Link to comment
Ok, it works.

It's nice and very simple. Great work!

EDIT:

I've scripted a login form with my UI created by this resource, but I have some issues. In fact it appears a damaged UI with no buttons and no labels...

This is the code:

function welcomeForm() 
    initScreen = guiCreateWindow(101,55,1123,631,"",false) 
        initScreen_Label[1] = guiCreateLabel(108,12,875,45,"Corsair Roleplay Project - Welcome to our server!",false,initScreen) 
            guiLabelSetColor(initScreen_Label[1],150, 150, 170) 
            guiSetFont(initScreen_Label[1],"sa-header") 
        initScreen_Label[2] = guiCreateLabel(504,142,127,22,"work in progress...",false,initScreen) 
            guiLabelSetColor(initScreen_Label[2],255, 15, 15) 
            guiSetFont(initScreen_Label[2],"clear-normal") 
        initScreenSplash = guiCreateGridList(26,174,1072,389,false,initScreen) 
            guiGridListSetSelectionMode(initScreenSplash,2) 
            initScreen_Label[4] = guiCreateLabel(40,44,66,18,"Username",false,initScreenSplash) 
                guiSetFont(initScreen_Label[4],"clear-normal") 
            initScreen_LoginForm_usernameInput = guiCreateEdit(116,38,285,33,"",false,initScreenSplash) 
                guiEditSetMaxLength(initScreen_LoginForm_usernameInput, 50) 
            initScreen_Label[5] = guiCreateLabel(40,108,66,18,"Password",false,initScreenSplash) 
                guiSetFont(initScreen_Label[5],"clear-normal") 
            initScreen_LoginForm_passwordInput = guiCreateEdit(116,99,285,33,"",false,initScreenSplash) 
                guiEditSetMaxLength(initScreen_LoginForm_passwordInput, 50) 
    initScreen_Label[3] = guiCreateLabel(8,573,1115,18,"______________________________________________________________________________________________________________________________________________________________",false,initScreen) 
        guiSetAlpha(initScreen_Label[3],1) 
        guiLabelSetColor(initScreen_Label[3],100, 150, 255) 
        guiSetFont(initScreen_Label[3],"clear-normal") 
    initScreen_LoginButton = guiCreateButton(1010,594,88,27,"Login",false,initScreen) 
     
    guiSetVisible(initScreen, false) 
end 
addEventHandler("onClientGUIClick", initScreen_LoginButton, clientSubmitLogin, false) 
  
addEventHandler("onClientResourceStart",resourceRoot, 
    function() 
        welcomeForm() 
  
        if (initScreen ~= nil) then 
            guiSetVisible(initScreen, true) 
        else 
            outputChatBox("Error on creating the GUI.") 
            outputConsole("Error on creating the GUI.") 
        end 
  
            showCursor(true) 
  
            guiSetInputEnabled(true) 
    end 
) 

And this is the result:

http://i39.tinypic.com/zn7vwy.png

Try to add

initScreen_Label = {} 
initScreen = {} 
initScreen_LoginForm_usernameInput = {} 
initScreen_LoginForm_passwordInput = {} 

Before welcomeForm function.

Link to comment
  • 11 months later...

9208.png

GUI Editor 3.0 update

I have rewritten the GUI Editor from the ground up, fixing some of the more clumsy design choices in the original version and introducing some extra features that should make GUI editing a bit easier.

Check the community gallery for some preview images.

Some of the main features now include:

- completely redone right click menu based navigation

- tight integration of GUI attributes and their individual right click menus

- creation of all GUI elements (including comboboxes)

- loading of existing GUI into the editor

- more robust and complete loading of Lua code

- ability to preview what your GUI will look like in any resolution

- ability to use basic Lua code to position your gui elements (ie: to always be in the middle of the screen)

I would encourage anyone to redo the in-game tutorial to get up to speed on the new features

MTA Community link

The editor requires the ACL permissions: general.ModifyOtherObjects for some functions, and function.callRemote for update checking

Please let me know of any bugs/errors that you get

Link to comment
suggestions ..

(buttons)

1- search for image (it will search for the images and put it to the resource so you can browse them)

2- Make resource (it will make the meta.xml and the client.lua)

You might want it to make whole scripts for you too, maybe?

i don't use this ..

or by other words .. i don't use GUI .. only dx

but my suggestion for beginners

Link to comment
suggestions ..

(buttons)

1- search for image (it will search for the images and put it to the resource so you can browse them)

2- Make resource (it will make the meta.xml and the client.lua)

1 - it will already scan for images in the resources folder and lets you browse them, or did you mean something else?

2 - I did play around with writing an in-game code editor too so you could write click handlers and things for the gui elements, but i decided that this is fundamentally a gui editor and not a code editor - the same applies to generating things like meta.xml, which aren't really related to gui

Uploaded version 3.0.2:

- fixed some issues with code generation when using custom fonts on a dx text

Link to comment

Needs more replies! This is freaking awesome, me and karthik are gonna go crazy over this! Great UI, love the combo-box addition and the resolution I got a few suggestions for you:

  • Allow custom gui UI's
  • DX Text Effects - Shadow, outline
  • DX Rectangle Effects - Shadow and outline

The effects I listed are time savers and will be pretty dang popular. Thank you for this update it has made a lot of people happy ^^.

Link to comment
Needs more replies! This is freaking awesome, me and karthik are gonna go crazy over this! Great UI, love the combo-box addition and the resolution I got a few suggestions for you:

  • Allow custom gui UI's
  • DX Text Effects - Shadow, outline
  • DX Rectangle Effects - Shadow and outline

The effects I listed are time savers and will be pretty dang popular. Thank you for this update it has made a lot of people happy ^^.

- Do you mean DX gui implementations? I suppose there is no reason someone couldn't write a skinner that just reskins regular gui elements, but actually using 'dx gui' wouldn't work because the editor is so fundamentally based around things being gui elements rather than just rudimentary shapes (like dx items are)

- Those text effects should be pretty easy, i will try to look at that sometime soon

can add for new version absolute and relative position for dx??

Relative positions can be done using the 'Position Code' option, which just does the same thing using maths. I am not sure how useful it is to be able to make dx elements size relative to something, but i will have a look at it if i can

Bugs:

  • Resizing will not snapping to position.
  • Loading GUI's which have had the pos modified using the formula option will not load, returns an error.

- Snapping ignores resizing deliberately, unfortunately there are various technical problems with it. Since it works by moving ('snapping') elements into line with others, if it is being resized according to your cursor position at the same time as snapping it is having it's position and size manipulated every frame by 2 completely different functions (and in 2 completely different ways). This means you end up with your elements getting badly warped out of shape and moved around the screen without actually wanting them to be, which is not very pleasant and makes the whole thing pretty much useless

- Can you send me the gui code that you are trying to load so i can reproduce the problem?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...