Images getting blurred inside GridLayout(Solved)

[A Former User]

**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

[A Former User]

[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.

[A Former User]

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.

[A Former User]

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!

[A Former User]

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!

[A Former User]

[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.

[A Former User]

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

[Eddy]

you're welcome

happy coding