[HELP] GUI Editor offsets

[Imposter]

Hey there,

I am currently using the GUI Editor Resource and am experiencing problems with offsets when using the code that is outputted. As you can clearly see below, the offsets from left and right (for the children of the scrollpane) should be 10px each.

  
GUIEditor = { 
    tab = {}, 
    staticimage = {}, 
    edit = {}, 
    tabpanel = {}, 
    label = {}, 
    button = {}, 
    scrollpane = {}, 
    gridlist = {}, 
    memo = {} 
} 
addEventHandler("onClientResourceStart", resourceRoot, 
    function() 
        local screenW, screenH = guiGetScreenSize() 
        GUIEditor.staticimage[1] = guiCreateStaticImage(screenW - 267 - 10, screenH - 484 - 10, 267, 484, "images/galaxys4.png", false) 
        GUIEditor.staticimage[2] = guiCreateStaticImage(20, 51, 227, 383, "images/white.png", false, GUIEditor.staticimage[1]); 
        GUIEditor.scrollpane[1] = guiCreateScrollPane(0, 0, 227, 383, false, GUIEditor.staticimage[2]) 
         
        GUIEditor.label[1] = guiCreateLabel(10, 10, 207, 43, "Email", false, GUIEditor.scrollpane[1]) 
        local font_0 = guiCreateFont(":SRR-Gamemode/fonts/srrheadfont.ttf") 
        guiSetFont(GUIEditor.label[1], font_0) 
        guiLabelSetColor(GUIEditor.label[1], 250, 195, 4) 
        guiLabelSetHorizontalAlign(GUIEditor.label[1], "center", false) 
        guiLabelSetVerticalAlign(GUIEditor.label[1], "center") 
        GUIEditor.tabpanel[1] = guiCreateTabPanel(10, 60, 207, 313, false, GUIEditor.scrollpane[1]) 
  
        GUIEditor.tab[1] = guiCreateTab("Inbox", GUIEditor.tabpanel[1]) 
  
        GUIEditor.memo[1] = guiCreateMemo(10, 114, 187, 165, "", false, GUIEditor.tab[1]) 
        GUIEditor.gridlist[1] = guiCreateGridList(9, 8, 188, 101, false, GUIEditor.tab[1]) 
        guiGridListAddColumn(GUIEditor.gridlist[1], "Subject", 0.4) 
        guiGridListAddColumn(GUIEditor.gridlist[1], "Sender", 0.4) 
  
        GUIEditor.tab[2] = guiCreateTab("Send", GUIEditor.tabpanel[1]) 
  
        GUIEditor.edit[1] = guiCreateEdit(6, 12, 191, 27, "Subject", false, GUIEditor.tab[2]) 
        GUIEditor.edit[2] = guiCreateEdit(6, 49, 191, 27, "Recipient(s) (Split by \", \")", false, GUIEditor.tab[2]) 
        GUIEditor.edit[3] = guiCreateEdit(8, 85, 189, 168, "", false, GUIEditor.tab[2]) 
        GUIEditor.button[1] = guiCreateButton(131, 259, 66, 20, "Send", false, GUIEditor.tab[2])     
    end 
) 
  

But this is what is shown.

As you can see, the offsets are totally incorrect, and this is not what I see when designing the GUI. Is this an MTA Bug when using staticimages? I would really appreciate it if someone with knowledge of this would help me out.

Thanks,

NooP

[Dealman]

Set the GUI Editor to output it with absolute values, then if you want it to work on other resolutions, read about this function; guiGetScreenSize.

[Imposter]

It is already absolute though, isn't it?

[Dealman]

It is already absolute though, isn't it?

Aye, except for one image, which seems to be using some kind of offset. He needs to divide the absolute values with his resolution.

[Imposter]

I don't know what you mean, the first one is relevant to the size of the screen, so it is always positioned screenW-width-10 etc.

Could you help me out Dealman?

[Dealman]

I usually do it like it's explained when reading about guiGetScreenSize. And most of the time, it yields perfect results, some things might need another way to do it though...

1. Import the Samsung picture via the GUI Editor and set it to the size you want.

2. Add the GUI Elements you want; Tab Panel with Tabs, Gridlists and so on. Use Absolute co-ordinates.

3. Then output the code and divide the X/Y positions and sizes with your resolution. For example;

Here you have those values;

  
local screenX, screenY = guiGetScreenSize() 
guiCreateStaticImage(20, 51, 227, 383, "images/white.png", false, GUIEditor.staticimage[1]) 
  

Position X: 20/1920 = 0.0104

Position Y: 51/1080 = 0.0472

Size X: 227/1920 = 0.1182

Size Y: 383/1080 = 0.3546

Then you should make it look like this;

  
local screenX, screenY = guiGetScreenSize() 
guiCreateStaticImage(screenX*0.0104, screenY*0.0472, screenX*0.1182, screenY*0.3546, "images/white.png", false, GUIEditor.staticimage[1]) 
  

Some people prefer not to use multiply since it returns a lot of numbers and can at some times be somewhat off unless you use all of it. It's accurate enough most of the time though.

You can of course use subtraction instead if it pleases you.

This is my own preferred way of doing it, if someone else knows of a more reliable/efficient way of doing it, do let him know