Resolution independent gui

prabhatjha

hey anyone tell me how to make resolution independent gui......that can fit on any resolution correctly....

sierdzio

With QtWidgets: use layouts. In QtQuick: use anchoring well (or Layouts from QtQuick.Controls). Qt will handle all the rest automatically for you.

prabhatjha

can we provide some example how to use layout.......actually i m new bie so i have no more idea.....

sierdzio

Get this "book":https://qt-project.org/books/view/c_gui_programming_with_qt_4_2nd_edition_the_official_c_qt_book and do some examples. You will get it in no time; layouts are easy.

Or dive into "Examples":http://qt-project.org/doc/qt-5/examples-layouts.html. Read about the "Qt Designer":http://qt-project.org/doc/qt-5/designer-layouts.html. And read the "basics":http://qt-project.org/doc/qt-5/layout.html.

Wahsekim

[quote author="sierdzio" date="1392208312"]With QtWidgets: use layouts. In QtQuick: use anchoring well (or Layouts from QtQuick.Controls). Qt will handle all the rest automatically for you.[/quote]

I don't get it. If we consider only QWidget, layouts are about global position of widgets in parent widget. But if I have a custom widget that does a lot of drawing in paintEvent() base on pixel. How can I make it resolution independent on different screens?

Jens

It's certainly not trivial with custom painting. You can however obtain physicalDotsPerInch using "QScreen":http://qt-project.org/doc/qt-5/qscreen.html. Having that it is a matter of multiplying all your constants using a scale factor you calculate based on it. Note that on IOS and Mac there is a logical pixel concept that automatically multiplies pixel sizes by two to support retina style displays implicitly.

A word of warning though. Some older screens or desktop environments actually report completely wrong values for physicalDotsPerInch so it might be a good idea to ifdef such scaling only on IOS and Android.

prabhatjha

@
QDesktopWidget* desk = new QDesktopWidget() ;

double width = desk->width();
double height = desk->height();
X_resolution = width/1600;(1600 is your present width of screen)
Y_resolution = height/900;(900 is your present height of screen)

@
after that you can set geometry for everything like this..
@
ui->Time_Vs_Amp_groupBox->setGeometry(static_cast<int>(ui->Time_Vs_Amp_groupBox->pos().x()*X_resolution), static_cast<int>(ui->Time_Vs_Amp_groupBox->pos().y()*Y_resolution), static_cast<int>(ui->Time_Vs_Amp_groupBox->size().width()*X_resolution), static_cast<int>(ui->Time_Vs_Amp_groupBox->size().height()*Y_resolution));
@

[sierdzio] Edit: enclose the code in '@' tags.

jiangcaiyang

In QML, you can use property binding to solve this problem. all the visual item named "Item" have x, y, width and height property, you can layout by setting the percentage of properties relative to their parents.

onek24

Hello,

certainly there is a very good way on how to create an resolution independent gui using for example the metric system and centimeters. You will have to import QtQuick.Window.
@import QtQuick 2.2
import QtQuick.Window 2.0@
Then you can just ask the class Screen for the pixelDensity of our screen:
@function cm(cm)
{
return cmScreen.pixelDensity10
}@
If we access the function that way: "... width: cm(1)", then the width will be 1 centimeter wide.