Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Blurry images in ListView on different screen resolutions

Blurry images in ListView on different screen resolutions

Scheduled Pinned Locked Moved Solved QML and Qt Quick
5 Posts 2 Posters 567 Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • C Offline
    C Offline
    Creaperdown
    wrote on last edited by Creaperdown
    #1

    I am trying to display images in a ListView. The images are generated just fine, but on certain screen sizes and e.g. on windows with the 125% (recommended) display zoom option, the images look blurry:
    504011fb-19a8-4a88-a4d5-9baf16d0910f-image.png

    How would I be able to prevent this?

    EDIT:
    Here is an example of how the generated image that was saved to a file and opened in a viewer application looks like (left) compared to how it looks when displayed in the ListView:
    0e556ad7-3004-444a-a491-241ee1d2a45c-image.png

    C 1 Reply Last reply
    0
    • C Creaperdown

      I think the problem might be the QQuickItem that is being scaled.
      I am constructing the QImage from the data that I am getting from the rendering library and then setting it as the texture of the QQuickItem using a QPainter which is then displayed in a qml ListView:

      auto image = m_pageController->renderPage();
      QPainter painter(&image);
      n->setTexture(window()->createTextureFromImage(image));
      n->setRect(boundingRect());
      
      A Offline
      A Offline
      Asperamanca
      wrote on last edited by
      #3

      @Creaperdown
      Are you using Qt 6?

      If so, be aware that logical pixels and physical pixels are a distinct concept there. So just because your item's boundingRect shows a width of 800, that doesn't mean you have 800 physical pixels. This would be my first guess on why you get scaled images.

      Using the QuickItem's global coordinates, get the corresponding QScreen (QGuiApplication::screenAt) and then look at the screen's devicePixelRatio. If it is not 1.0, you have found the cause of your issue.

      C 1 Reply Last reply
      0
      • C Creaperdown

        I am trying to display images in a ListView. The images are generated just fine, but on certain screen sizes and e.g. on windows with the 125% (recommended) display zoom option, the images look blurry:
        504011fb-19a8-4a88-a4d5-9baf16d0910f-image.png

        How would I be able to prevent this?

        EDIT:
        Here is an example of how the generated image that was saved to a file and opened in a viewer application looks like (left) compared to how it looks when displayed in the ListView:
        0e556ad7-3004-444a-a491-241ee1d2a45c-image.png

        C Offline
        C Offline
        Creaperdown
        wrote on last edited by Creaperdown
        #2

        I think the problem might be the QQuickItem that is being scaled.
        I am constructing the QImage from the data that I am getting from the rendering library and then setting it as the texture of the QQuickItem using a QPainter which is then displayed in a qml ListView:

        auto image = m_pageController->renderPage();
        QPainter painter(&image);
        n->setTexture(window()->createTextureFromImage(image));
        n->setRect(boundingRect());
        
        A 1 Reply Last reply
        1
        • C Creaperdown

          I think the problem might be the QQuickItem that is being scaled.
          I am constructing the QImage from the data that I am getting from the rendering library and then setting it as the texture of the QQuickItem using a QPainter which is then displayed in a qml ListView:

          auto image = m_pageController->renderPage();
          QPainter painter(&image);
          n->setTexture(window()->createTextureFromImage(image));
          n->setRect(boundingRect());
          
          A Offline
          A Offline
          Asperamanca
          wrote on last edited by
          #3

          @Creaperdown
          Are you using Qt 6?

          If so, be aware that logical pixels and physical pixels are a distinct concept there. So just because your item's boundingRect shows a width of 800, that doesn't mean you have 800 physical pixels. This would be my first guess on why you get scaled images.

          Using the QuickItem's global coordinates, get the corresponding QScreen (QGuiApplication::screenAt) and then look at the screen's devicePixelRatio. If it is not 1.0, you have found the cause of your issue.

          C 1 Reply Last reply
          0
          • A Asperamanca

            @Creaperdown
            Are you using Qt 6?

            If so, be aware that logical pixels and physical pixels are a distinct concept there. So just because your item's boundingRect shows a width of 800, that doesn't mean you have 800 physical pixels. This would be my first guess on why you get scaled images.

            Using the QuickItem's global coordinates, get the corresponding QScreen (QGuiApplication::screenAt) and then look at the screen's devicePixelRatio. If it is not 1.0, you have found the cause of your issue.

            C Offline
            C Offline
            Creaperdown
            wrote on last edited by
            #4

            @Asperamanca You are right, that is the problem. I have read through the docs about this issue and found another person who had a similar issue and said that they divided the size off the item through window()->devicePixelRatio to get the "original" size (at devicePixelRatio == 1).

            Is this a valid approach? How would I do that for my QQuickItem?

            A 1 Reply Last reply
            0
            • C Creaperdown

              @Asperamanca You are right, that is the problem. I have read through the docs about this issue and found another person who had a similar issue and said that they divided the size off the item through window()->devicePixelRatio to get the "original" size (at devicePixelRatio == 1).

              Is this a valid approach? How would I do that for my QQuickItem?

              A Offline
              A Offline
              Asperamanca
              wrote on last edited by
              #5

              @Creaperdown
              I cannot say much from your short code snippet. In short, render an image that scaled based the devicePixelRatio and use that. I currently do not have a better solution.

              1 Reply Last reply
              0
              • C Creaperdown has marked this topic as solved on

              • Login

              • Login or register to search.
              • First post
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved