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. DPI-independent UI design with QML
Forum Updated to NodeBB v4.3 + New Features

DPI-independent UI design with QML

Scheduled Pinned Locked Moved QML and Qt Quick
6 Posts 4 Posters 11.3k Views 1 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.
  • H Offline
    H Offline
    Helbrass
    wrote on last edited by
    #1

    I've encountered this problem with Java Swing, and now I'm curious how this problem is/should be solved with QML.

    When you're designing a button or a toolbar, you're putting text onto it. Then some margins to make it look better. On Desktop computer, which still has around 96 DPI, you will make those margins 4 to 6 pixels. On 13" FullHD laptop you'll make that 8-10 pixels. And I have no idea what margin should there be on high-DPI android/iOS devices.

    So the question is, are QML margins measured in actual pixels, or to 1/72 of an inch (as in font design)? If they are measured in actual pixels - how do you overcome this problem?

    PS: links to documentation in case I missed them are appreciated.

    1 Reply Last reply
    0
    • H Offline
      H Offline
      Helbrass
      wrote on last edited by
      #2

      Anyone? I found following articles:
      http://blog.qt.digia.com/blog/2013/04/25/retina-display-support-for-mac-os-ios-and-x11/
      http://qt-project.org/doc/qt-4.8/scalability.html

      Which means that Qt+QML does support device-independent layouts, but there are absolutely no examples how to do it in QML. Someone on stackoverflow suggests to calculate scale factor in C++ part and multiply all dimensions to it, but that doesn't sound right.

      1 Reply Last reply
      0
      • V Offline
        V Offline
        Vincent007
        wrote on last edited by
        #3

        This page may help you "How to create mobile games for different screen sizes and resolutions":http://v-play.net/doc/vplay-different-screen-sizes.html

        1 Reply Last reply
        0
        • V Offline
          V Offline
          vkjr
          wrote on last edited by
          #4

          In Qt 5.2 I use the following approach for mobile development with QML:

          main.cpp:
          @
          qmlContext->setContextProperty("screenPixelDensity", QGuiApplication::primaryScreen()->physicalDotsPerInch());@

          style.qml:

          @function dp(dpVal) {
          var px = Math.round(dpVal * (screenPixelDensity / 160));

          if(Qt.platform.os == "windows" || Qt.platform.os == "mac")
              return px*2;
          else
              return px;
          

          }@

          All the sizes I specify with dp() function. F.ex. "width: dp(15)".
          This approach works good enough for me :)

          1 Reply Last reply
          1
          • X Offline
            X Offline
            Xander84
            wrote on last edited by
            #5

            Hi, you should multiply physicalDotsPerInch with devicePixelRatio instead of using the "if" in QML, that is more reliable and should result in the same value for mac and iOS (windows has set it to 1.0 though i guess). :)
            @
            qmlContext->setContextProperty("screenPixelDensity", QGuiApplication::primaryScreen()->physicalDotsPerInch() * QGuiApplication::primaryScreen()->devicePixelRatio());
            @

            Anyway I use a similar approach, just a few days ago I've written a post about that here in the forums somewhere.

            1 Reply Last reply
            0
            • V Offline
              V Offline
              vkjr
              wrote on last edited by
              #6

              Xander84, thanks for the tip but it doesn't really work for me. I develop mobile app and use windows/macos on non-retina displays just to make development faster. Standard 96dpi are to small and devicePixelRation is equal to 1 on non-retina, so I multiply by 2 to make everything bigger :)

              1 Reply Last reply
              0

              • Login

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