Images getting blurred inside GridLayout(Solved)



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


  • Moderators

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


  • Moderators

    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.



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



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


  • Moderators

    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?


  • Moderators

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

    for some tips on using images on the forum



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



  • 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



  • Sorry wrong thread!



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


  • Moderators

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



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


  • Moderators

    you're welcome

    happy coding


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.