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

Resolution independent gui

Scheduled Pinned Locked Moved QML and Qt Quick
9 Posts 6 Posters 6.2k 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.
  • P Offline
    P Offline
    prabhatjha
    wrote on last edited by
    #1

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

    1 Reply Last reply
    0
    • sierdzioS Offline
      sierdzioS Offline
      sierdzio
      Moderators
      wrote on last edited by
      #2

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

      (Z(:^

      1 Reply Last reply
      0
      • P Offline
        P Offline
        prabhatjha
        wrote on last edited by
        #3

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

        1 Reply Last reply
        0
        • sierdzioS Offline
          sierdzioS Offline
          sierdzio
          Moderators
          wrote on last edited by
          #4

          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.

          (Z(:^

          1 Reply Last reply
          0
          • W Offline
            W Offline
            Wahsekim
            wrote on last edited by
            #5

            [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?

            1 Reply Last reply
            0
            • J Offline
              J Offline
              Jens
              wrote on last edited by
              #6

              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.

              1 Reply Last reply
              0
              • P Offline
                P Offline
                prabhatjha
                wrote on last edited by
                #7

                @
                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.

                1 Reply Last reply
                0
                • J Offline
                  J Offline
                  jiangcaiyang
                  wrote on last edited by
                  #8

                  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.

                  1 Reply Last reply
                  0
                  • O Offline
                    O Offline
                    onek24
                    wrote on last edited by
                    #9

                    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.

                    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