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. QML Resolution Independence
Forum Updated to NodeBB v4.3 + New Features

QML Resolution Independence

Scheduled Pinned Locked Moved QML and Qt Quick
13 Posts 6 Posters 18.9k 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.
  • S Offline
    S Offline
    SimonJudge
    wrote on last edited by
    #1

    The examples and demos set the screen to be 320 x 480 with something like width: 320; height: 480. Other screens then place items using parent.width and parent.width and using anchors. However, 'real' devices have different resolutions. How should I cater for this in QML? How can I set the width and height of my first rectangle?

    Thanks

    Simon

    1 Reply Last reply
    0
    • A Offline
      A Offline
      alexander
      wrote on last edited by
      #2

      @ QmlApplicationViewer viewer;
      viewer.setOrientation(QmlApplicationViewer::Auto);
      viewer.setMainQmlFile(QLatin1String("qml/test11/main.qml"));
      viewer.showFullScreen();@

      and your first rect will equal screen size.

      1 Reply Last reply
      0
      • X Offline
        X Offline
        xsacha
        wrote on last edited by
        #3

        It doesn't matter what you set the width and height to, they'll scale up to whatever the system uses (when you made the QML app fullscreen as above).

        The problem is if you used fixed sizes rather than anchors and fractions of parent size.

        I made a wiki topic about this. Feel free to add to it.
        http://developer.qt.nokia.com/wiki/Qt_Quick_Donts

        • Sacha
        1 Reply Last reply
        0
        • A Offline
          A Offline
          anselmolsm
          wrote on last edited by
          #4

          A note for the beginners that may read this topic in the future and would ask Where/What is QmlApplicationViewer?

          QmlApplicationViewer is a subclass of "QDeclarativeView":http://doc.qt.nokia.com/4.7/qdeclarativeview.html added by Qt Creator as part of the Qt Quick Application template. For those who want to check its code, you can find it "here":http://qt.gitorious.org/qt-creator/qt-creator/blobs/master/share/qtcreator/templates/qmlapp/qmlapplicationviewer/qmlapplicationviewer.h :-)

          Anselmo L. S. Melo (anselmolsm)

          1 Reply Last reply
          0
          • A Offline
            A Offline
            anselmolsm
            wrote on last edited by
            #5

            Back to the topic.

            However, in certain situations, you would need a different approach. For example, when your app has so many images that would look strange depending on the aspect ratio difference across devices. In this scenario, loading different qml files and/or resource files for a better adjustment can help.

            Anselmo L. S. Melo (anselmolsm)

            1 Reply Last reply
            0
            • X Offline
              X Offline
              xsacha
              wrote on last edited by
              #6

              If you know your UI will be dominated by objects with a relatively fixed size (for example, items that can't be made any smaller or larger) then you may want to consider an alternative interface for much smaller or much larger devices.
              If you have only one fixed size item or other such scenarios, Qt will be able to automatically scale/shrink/stretch it for you if you give it hints.
              But I think we answered the OPs question.

              • Sacha
              1 Reply Last reply
              0
              • H Offline
                H Offline
                Harry443
                wrote on last edited by
                #7

                Hello,
                If i use width:320 and height:240......will it refer to pixel resolution of 320240???
                how can we set the width and height...???
                Are these dimensions related to LCD width and height or the resolution(320
                240)??

                1 Reply Last reply
                0
                • X Offline
                  X Offline
                  xsacha
                  wrote on last edited by
                  #8

                  It will be 320 and 240 'units'.
                  It depends on what size you specified for your main UI element. If you specified 640 for height, then 320 will take up half of that. If the UI is scaled to 1280 pixels, then your 320 height will correspond to 640 pixels.

                  Hope that helps.

                  The idea is that your application will be resolution independent so you don't need to work out pixels but instead ratios.

                  • Sacha
                  1 Reply Last reply
                  0
                  • H Offline
                    H Offline
                    Harry443
                    wrote on last edited by
                    #9

                    Thank you,

                           here,I had created a rectangle of 320*240 as a background.I am using a 320*240 resolution LCD.
                    

                    What is meant by scaling UI to 1280 pixels?
                    Ratios in the sense.....will it again depends on ratio of LCD width and height to Rectangle width and height?
                    And will our QML design be scaled to active display region of LCD?

                    1 Reply Last reply
                    0
                    • X Offline
                      X Offline
                      xsacha
                      wrote on last edited by
                      #10

                      If the QML viewer is scaling to fullscreen (320x240) and your main UI element is 320x240, then each unit will be 1 pixel :)

                      So a 60 unit box will be 60 pixels.

                      • Sacha
                      1 Reply Last reply
                      0
                      • H Offline
                        H Offline
                        Harry443
                        wrote on last edited by
                        #11

                        That is okay Sacha....
                        here i am not using QML viewer to scale it to full screen....
                        I am using QDeclarativeView to start my QML Application.Is it good approach to proceed or shall i use QML viewer? This is what my code is...

                        QDeclarativeView view;

                            Cppclass ptr;
                            view.rootContext()->setContextProperty("root", &ptr);
                            view.setSource(QUrl::fromLocalFile("main.qml");
                        

                        And also I m mostly using fixed sizes and positions rather than anchors.Can u plz suggest me on this?

                        1 Reply Last reply
                        0
                        • X Offline
                          X Offline
                          xsacha
                          wrote on last edited by
                          #12

                          When I say QML Viewer, I simply mean the window that displays your main QML item.

                          It should all be fine :)

                          • Sacha
                          1 Reply Last reply
                          0
                          • J Offline
                            J Offline
                            jimav
                            wrote on last edited by
                            #13

                            So how to control the size of the "window that displays your main QML item"?

                            Sure, on a phone the app will be full-screen so there is no choice to be made. But on a PC desktop, apps should normally not start full-screen by default, but at some reasonable size so it is "readable", probably either specified as actual preferred size (e.g. in inches), or as % of the physical screen size.

                            (I realize this is a very old thread, but the discussion is exactly relevant)

                            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