How to resize images proportionally?

[Tails]

Hello,

I just started working on little GUI window that displays all kinds of images with different sizes.

I'm trying to make each one of them fit inside the window. How can I do this while keeping their aspect ratio?

Thanks in advance

[botder]

Do you mean something like this?

  
function getAspectRatio(width, height) 
    return (width / height) 
end 
  
function getHeightAfterResize(new_width, original_width, original_height) 
    local ratio = getAspectRatio(original_width, original_height) 
    return new_width, new_width / ratio 
end 

P.S. Greet Grace from me

[Tails]

Thanks, I will

How do I use these functions exactly?

  
function click() 
    if source == grid then 
        local image = guiGridListGetItemText(grid,guiGridListGetSelectedItem(grid),1) 
        if imagedisplay then destroyElement(imagedisplay) end 
        imagedisplay = guiCreateStaticImage(0.36, 0.12, 0.47, 0.86, "images/"..image,true,window) 
        local x,y = guiStaticImageGetNativeSize(imagedisplay) 
        outputChatBox(x..", "..y) 
        w,h = 300,445 
  
        function getAspectRatio(width, height) 
            return (width / height) 
        end 
  
        function getHeightAfterResize(new_width, original_width, original_height) 
            local ratio = getAspectRatio(original_width, original_height) 
            return new_width, new_width / ratio 
        end 
         
        w,h = getAspectRatio(w,h) 
        x,y = getHeightAfterResize(w) 
         
        guiSetSize(imagedisplay,x,y,false) 
        outputChatBox(w..", "..h) 
    end 
end 
addEventHandler("onClientGUIClick",grid,click) 

300,445 is max width and height in pixels, or one of these are: 0.36, 0.12, 0.47, 0.86, I think. The images should fit within that

Kinda lost here...

[botder]

Explanation

0.36, 0.12, 0.47, 0.86 

Those are relative sizes (x position, y position, width, height) of the image field.

 

How to use them

  
function getAspectRatio(width, height) 
    return (width / height) 
end 
  
function getHeightAfterResize(new_width, original_width, original_height) 
    local ratio = getAspectRatio(original_width, original_height) 
    return new_width, new_width / ratio 
end 
  
function getWidthAfterResize(new_height, original_width, original_height) 
    local ratio = getAspectRatio(original_width, original_height) 
    return new_height * ratio, new_width 
end 
  
-- Convert relative values to absolute values 
local screenWidth, screenHeight = guiGetScreenSize() 
local absoluteWidth, absoluteHeight = screenWidth * 0.47, screenHeight * 0.86 
  
-- Get the size of the new image 
local width, height = guiStaticImageGetNativeSize(imagedisplay) 
  
-- Problem: Check if we have to scale the width or height (which one is bigger) 
  
--[ Equal lengths ] 
if (width == height) then 
    -- In this case we can directly scale the size 
    width = absoluteWidth 
    height = absoluteHeight 
  
--[ Width is bigger ] 
elseif (width > height) then 
    height = getHeightAfterResize(absoluteWidth, width, height) 
    width = absoluteWidth 
  
--[ Height is bigger ] 
else 
    width = getWidthAfterResize(absoluteWidth, width, height) 
    height = absoluteWidth 
end 
  
guiSetSize(imagedisplay, width, height, false) 
  

[Tails]

Some images still don't fit and some lose their aspect ratio still

[botder]

Your window is 300 long and 445 tall?

Edit, try this one (untested):

  
function getAspectRatio(width, height) 
    return (width / height) 
end 
  
function getHeightAfterResize(new_width, original_width, original_height) 
    local ratio = getAspectRatio(original_width, original_height) 
    return new_width, new_width / ratio 
end 
  
function getWidthAfterResize(new_height, original_width, original_height) 
    local ratio = getAspectRatio(original_width, original_height) 
    return new_height * ratio, new_width 
end 
  
function click() 
    if source == grid then 
        local imagepath = guiGridListGetItemText(grid,guiGridListGetSelectedItem(grid),1) 
  
        if imagedisplay then  
            guiStaticImageLoadImage(imagedisplay, "images/".. imagepath) 
        else 
            imagedisplay = guiCreateStaticImage(0.36, 0.12, 0.47, 0.86, "images/".. imagepath, true, window) 
        end 
         
        -- Size of the image display 
        local maxWidth, maxHeight = 300, 445 
  
        -- Get the size of the new image 
        local width, height = guiStaticImageGetNativeSize(imagedisplay) 
         
        --[ Equal lengths ] 
        if (width == height) then 
            -- In this case we can directly scale the size 
            width = maxWidth 
            height = maxHeight 
          
        --[ Width is bigger ] 
        elseif (width > height) then 
            height = getHeightAfterResize(maxWidth, width, height) 
            width = maxWidth 
          
        --[ Height is bigger ] 
        else 
            width = getWidthAfterResize(maxWidth, width, height) 
            height = maxWidth 
        end 
          
        guiSetSize(imagedisplay, width, height, false) 
    end 
end 
addEventHandler("onClientGUIClick", grid, click, false) 
  

[Tails]

It's the area in my window where the picture can fit. 300 wide and 445 tall but might change in the future.

Actually it's the relative sizes 0.47, 0.86 like it says in the guiCreateStaticImage line. Those should be the boundaries. I got those 2 numbers after screenshotting the window and dragging a rectangle in photoshop so it's not very accurate... haha

It's still happening however, they all fit now, but a square image of 640x640 becomes a rectangle of 300x445. And some rectangle images, for example a 500x750 becomes 200x300.

Shouldn't the width of the image always be 300 no matter what? Then the height of the image should be adjusted relative to the image's dimensions and the maxHeight somehow.

[Saml1er]

  
addEventHandler("onClientRender",root, 
function () 
dxSetAspectRatioAdjustmentEnabled( true ) 
-- Now call dx functions 
dxDrawText(...) 
end) 
  

[botder]

Ok, try that this one:

  
function getAspectRatio(width, height) 
    return (width / height) 
end 
  
function getHeightAfterResize(new_width, original_width, original_height) 
    local ratio = getAspectRatio(original_width, original_height) 
    return new_width, new_width / ratio 
end 
  
function click() 
    if source == grid then 
        local imagepath = guiGridListGetItemText(grid,guiGridListGetSelectedItem(grid),1) 
  
        if imagedisplay then 
            guiStaticImageLoadImage(imagedisplay, "images/".. imagepath) 
        else 
            imagedisplay = guiCreateStaticImage(0.36, 0.12, 0.47, 0.86, "images/".. imagepath, true, window) 
        end 
         
        -- Size of the image display 
        local displayWidth, displayHeight = guiGetSize(imagedisplay, false) 
  
        -- Get the size of the new image 
        local width, height = guiStaticImageGetNativeSize(imagedisplay) 
        
        --[ Equal lengths ] 
        if (width == height) then 
            -- In this case we can directly scale the size 
            width = displayWidth 
            height = displayHeight 
        --[ Resize ] 
        else 
            height = getHeightAfterResize(displayWidth, width, height) 
            width = displayWidth 
        end 
          
        guiSetSize(imagedisplay, width, height, false) 
    end 
end 
addEventHandler("onClientGUIClick", grid, click, false) 
  

@Saml1er:

for the positioning of GUI and dxDraw calls to be automatically adjusted according to the client's aspect ratio setting

Might work for positioning, but not in scaling of images.

[Tails]

Now they are all the same size and square.

[botder]

Didn't see something through.

Try that:

  
function getAspectRatio(width, height) 
    return (width / height) 
end 
  
function getHeightAfterResize(new_width, original_width, original_height) 
    local ratio = getAspectRatio(original_width, original_height) 
    return new_width, new_width / ratio 
end 
  
-- Size of the image display 
local displayWidth, displayHeight = 0, 0 
  
function click() 
    if source == grid then 
        local imagepath = guiGridListGetItemText(grid,guiGridListGetSelectedItem(grid),1) 
  
        if imagedisplay then 
            guiStaticImageLoadImage(imagedisplay, "images/".. imagepath) 
        else 
            imagedisplay = guiCreateStaticImage(0.36, 0.12, 0.47, 0.86, "images/".. imagepath, true, window) 
            displayWidth, displayHeight = guiGetSize(imagedisplay, false) 
        end 
         
        -- Get the size of the new image 
        local width, height = guiStaticImageGetNativeSize(imagedisplay) 
        
        --[ Equal lengths ] 
        if (width == height) then 
            -- In this case we can directly scale the size 
            width = displayWidth 
            height = displayHeight 
        --[ Resize ] 
        else 
            height = getHeightAfterResize(displayWidth, width, height) 
            width = displayWidth 
        end 
          
        guiSetSize(imagedisplay, width, height, false) 
    end 
end 
addEventHandler("onClientGUIClick", grid, click, false) 
  

[Tails]

Square images become rectangles with that and others become square when they should be rectangular.

I managed to fix it with some help of Google and you too of course. So still many thanks for your help!

-- Grid function 
function click() 
    if source == grid then 
        local imagepath = guiGridListGetItemText(grid,guiGridListGetSelectedItem(grid),1) 
        guiSetText(header_info,"images/"..imagepath) 
        if imagedisplay then 
            guiStaticImageLoadImage(imagedisplay, "images/"..imagepath) 
        else 
            imagedisplay = guiCreateStaticImage(0.36, 0.12, 0.55, 0.86, "images/"..imagepath, true, window) 
            maxWidth, maxHeight = guiGetSize(imagedisplay, false) 
        end 
        width,height = guiStaticImageGetNativeSize(imagedisplay) 
        ratio = math.min(maxHeight/height,maxWidth/width) 
        newHeight = math.ceil(height*ratio) 
        newWidth = math.ceil(width*ratio) 
        guiSetSize(imagedisplay,newWidth,newHeight,false) 
    end 
end 
addEventHandler("onClientGUIClick", grid, click, false) 

Now I got to study this piece of code a bit more and find out what and why it's actually doing it. Never really paid attention at school when it came down to ceil and all the other stuff... hehe

Thanks again