December 7, 2010

SimonJudge SimonJudge
Lab Rat
70 posts

QML Resolution Independence

 

The examples and demos set the screen to be 320 × 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

11 replies

December 7, 2010

Alexander Kuchumov Alexander Kuchumov
Lab Rat
377 posts

  1.     QmlApplicationViewer viewer;
  2.     viewer.setOrientation(QmlApplicationViewer::Auto);
  3.     viewer.setMainQmlFile(QLatin1String("qml/test11/main.qml"));
  4.     viewer.showFullScreen();

and your first rect will equal screen size.

December 7, 2010

xsacha xsacha
Lab Rat
517 posts

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

 Signature 

- Sacha

December 7, 2010

anselmolsm anselmolsm
Ant Farmer
417 posts

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 [doc.qt.nokia.com] 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 [qt.gitorious.org] :-)

 Signature 

Anselmo L. S. Melo (anselmolsm)
www.anselmolsm.org

December 7, 2010

anselmolsm anselmolsm
Ant Farmer
417 posts

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.

 Signature 

Anselmo L. S. Melo (anselmolsm)
www.anselmolsm.org

December 7, 2010

xsacha xsacha
Lab Rat
517 posts

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.

 Signature 

- Sacha

March 12, 2012

Harry443 Harry443
Lab Rat
24 posts

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

March 12, 2012

xsacha xsacha
Lab Rat
517 posts

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.

 Signature 

- Sacha

March 12, 2012

Harry443 Harry443
Lab Rat
24 posts

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?

March 12, 2012

xsacha xsacha
Lab Rat
517 posts

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

So a 60 unit box will be 60 pixels.

 Signature 

- Sacha

March 12, 2012

Harry443 Harry443
Lab Rat
24 posts

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?

March 12, 2012

xsacha xsacha
Lab Rat
517 posts

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

It should all be fine :)

 Signature 

- Sacha

 
  ‹‹ QML Map Element      Shadow property for Rectangle ››

You must log in to post a reply. Not a member yet? Register here!