Images getting blurred inside GridLayout(Solved)

? Offline

**Hi,
I have used some images in a QML Gridlayout. I have seen that the images got distorted when i resized the whole application, below is the source code for adding the image "heading1.png" in the Gridlayout.
Is this the problem because of the image pixel size, the "heading1.png" is 144*28 pixel and bit depth is 32. Sorry i am not good in image properties.

@
GridLayout {
id: work_layout
anchors.top: work_screen.top
rows: 9
columns: 3

    rowSpacing: 5
    columnSpacing: 5

    //anchors.topMargin: 5
    flow: GridLayout.TopToBottom

    Image{
        id: radios
  
        source: "images/heading1.png"
        opacity: 1
        Layout.fillWidth: true
        Layout.row: 0
        Layout.column: 0
        Layout.columnSpan: 2
      
    }
    ...................
    ...................

}
@

Regards
Ansif

Eddy

Hi,

work_layout needs to know how much space is available. you only set the top anchor.

try : anchors.fill : parent in work_layout

also you use Layout.fillWidth which is not needed in the GridLayout

? Offline

[quote author="Eddy" date="1398153076"]Hi,

work_layout needs to know how much space is available. you only set the top anchor.

try : anchors.fill : parent in work_layout

also you use Layout.fillWidth which is not needed in the GridLayout[/quote]

Hi,

I changed the above code to anchor.fill: parent, but when i removed Layout.fillWidth, it didnt work for resizing. When i set Layout.fillWidth to true, it gets resized while minimize/maximise. But Images are still getting blurred while resizing. I think there is some thing else i need to do.

Ansif

Eddy

It was not clear to me you needed the images to stretch.

Why do you need the columnspan?

maybe a screenshot of what you get and what you want could help understanding the problem.

? Offline

i used two columns for the "heading1.png" image, so that i used Layout.columnSpan: 2 for this purpose. Actually i fixed this issue by putting a higher resolution image. But i worried if this is used in a big screen, then again the image will get blurried. Do you have any idea to solve this problem.
I dont have facility to upload the screenshot form here, because upload facility is blocked from our office :). Sorry for that.
Really this forum should provide some kind of screen shot upload facility.

? Offline

One more question,
Do we always need to use high pixel image for any application. Because i think for big screens, if we use lower pixel images it will get blurried or distorted.
Please correct me if i am wrong.

Eddy

It looks ok on my system.

if you use an image with 144*28 pixels and you want it to be stretched to eg. 10 times that size it's normal you get rectangles for every pixel and not more detail.

you could use vector images instead (svg). in that case the pixels are calculated, but i'm not sure this is the right direction to go.

what does your image represent? text, symbols?

Eddy

see the forum help "link":http://qt-project.org/wiki/ForumHelp#b642e0c67b7a32cc0b833ea119693dce

for some tips on using images on the forum

mlutken

I have the same problem. Hope it will be fixed soon :)
Great IDE!

? Offline

Thank you.
The images are coloured background images and i am using QML Text element for writing text above it. My friend asked me to use rectangle instead of images and give appropriate colours to these rectangles to make it similar to the previous images. Using rectangle is looking good and it resolves the resizing issue and all.
But i think using rectangles instead of images is not a professional way because we have used photoshop to create these images and it takes lots of efforts to do so. I think using images is the right way and it is what the UI/UX development meant for.
what do you think ?

Ansif

mlutken

Sorry wrong thread!

? Offline

[quote author="Eddy" date="1398159946"]see the forum help "link":http://qt-project.org/wiki/ForumHelp#b642e0c67b7a32cc0b833ea119693dce

for some tips on using images on the forum[/quote]

Hey,
I will definitely check this.

Ansif

Eddy

[quote author="ansifpi" date="1398160681"]Thank you.
The images are coloured background images and i am using QML Text element for writing text above it. My friend asked me to use rectangle instead of images and give appropriate colours to these rectangles to make it similar to the previous images. Using rectangle is looking good and it resolves the resizing issue and all.
But i think using rectangles instead of images is not a professional way because we have used photoshop to create these images and it takes lots of efforts to do so. I think using images is the right way and it is what the UI/UX development meant for.
what do you think ?

Ansif[/quote]

sounds good. just make sure you take an image with enough detail for yor target screens as you did.

? Offline

Thank you. I will make this thread as solved. Thanks again for your help.
See you..

Eddy

you're welcome

happy coding