QML Resolution Independence

[SimonJudge]

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

[alexander]

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

and your first rect will equal screen size.

[xsacha]

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

[anselmolsm]

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

[anselmolsm]

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.

[xsacha]

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.

[Harry443]

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(320240)??

[xsacha]

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.

[Harry443]

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?

[xsacha]

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.

[Harry443]

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?

[xsacha]

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

It should all be fine :)

[jimav]

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)