Problems with High-DPI Display for App Development



  • Hi Qt-Folks,

    my name is Nils and I'm a master student from Germany. At the moment I try to develop a application for android and iOS which should read all the sensors on the smartphone.
    But I have a problem with the support of high-dpi display. As Smartphone I use my LG G3.
    The problem is that some elements like the TabBar are way to small presented and element like the GridLayout on the bottom of the screen are to big.
    I use Qml files with a ui.qml file for the design of the pages for each sensor.

    Her are some code snippets:
    main.cpp

    int main(int argc, char *) {
      QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
      QGuiApplication app(argc, argv);
    
      QQmlApplicationEngine engine;
      engine.load(QUrl(QLatin1String("qrc:/main.qml")));
    
      return app.exec();
    }
    

    My main.qml file:

    import QtQuick 2.6
    import QtQuick.Layouts 1.0
    import QtQuick.Controls 2.1
    
    ApplicationWindow  {
        visible: true
        width: 720
        height: 1280
    
        title: qsTr("SensorLog")
    
        SwipeView {
            id: swipeView
            anchors.fill: parent
            currentIndex: tabBar.currentIndex
    
            Accel {
            }
    
            AmbientLight {
            }
    
            Camera {
            }
    
            Gyro {
            }
    
            Location {
            }
    
            Magnet {
            }
    
            Microphone {
            }
    
            Motion {
            }
    
            Pressure {
            }
    
            Settings {
            }
        }
    
        header: TabBar {
            id: tabBar
            currentIndex: swipeView.currentIndex
            anchors.top: parent.top
    
            TabButton {
                text: qsTr("Accel")
            }
            TabButton {
                text: qsTr("Ambient")
            }
            TabButton {
                text: qsTr("Cam")
            }
            TabButton {
                text: qsTr("Gyro")
            }
            TabButton {
                text: qsTr("Loc")
            }
            TabButton {
                text: qsTr("Magnet")
            }
            TabButton {
                text: qsTr("Micro")
            }
            TabButton {
                text: qsTr("Motion")
            }
            TabButton {
                text: qsTr("Press")
            }
            TabButton {
                text: qsTr("Settings")
            }
        }
    }
    

    And as a example my Achel.qml file:

    import QtQuick 2.4
    import QtQuick.Controls 1.5
    import QtQuick.Layouts 1.3
    import QtQuick.Extras 1.4
    
    Item {
        id: item1
        width: 720
        height: 1280
    
        property alias recordButton: recordButton
        property alias folderButton: folderButton
        property alias settingsButton: settingsButton
        property alias statusIndicatorSensors: statusIndicatorSensors
    
        RowLayout {
            id: buttonLayout
            y: 600
            height: 50
            anchors.right: parent.right
            anchors.rightMargin: 20
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 20
            clip: false
    
            Button {
                id: recordButton
                text: qsTr("Record")
                Layout.fillWidth: true
                Layout.fillHeight: true
                checkable: true
            }
    
            Button {
                id: folderButton
                text: qsTr("Folder")
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
            }
    
            Button {
                id: settingsButton
                text: qsTr("Settings")
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
            }
        }
    
        GridLayout {
            id: infoLayout
            height: 100
            anchors.right: parent.right
            anchors.rightMargin: 20
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.bottom: buttonLayout.top
            anchors.bottomMargin: 20
            rows: 2
            columns: 4
            anchors.margins: 20
    
            Label {
                id: labelRecordedTime
                text: qsTr("Aufgenommene Zeit:")
                fontSizeMode: Text.Fit
                clip: false
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.pointSize: 11
                wrapMode: Text.WordWrap
                minimumPointSize: 14
            }
    
            Label {
                id: labelGetRecordedTime
                text: qsTr("@timeString")
                fontSizeMode: Text.Fit
                minimumPixelSize: 12
                minimumPointSize: 14
                Layout.fillWidth: false
            }
    
            Label {
                id: labelFramerate
                text: qsTr("Framerate:")
                fontSizeMode: Text.Fit
                minimumPointSize: 14
            }
    
            Label {
                id: labelGetFramerate
                text: qsTr("@framerateString")
                fontSizeMode: Text.Fit
                minimumPointSize: 14
            }
    
            Label {
                id: labelSaveToFile
                text: qsTr("Gespeichert in:")
                fontSizeMode: Text.Fit
                minimumPointSize: 14
            }
    
            Label {
                id: labelGetSaveToFile
                text: qsTr("@saveFileString")
                fontSizeMode: Text.Fit
                Layout.fillWidth: false
                Layout.fillHeight: false
                minimumPointSize: 14
            }
    
            Label {
                id: labelSensorStatus
                text: qsTr("Sensorstatus:")
                fontSizeMode: Text.Fit
                minimumPointSize: 14
            }
    
            StatusIndicator {
                id: statusIndicatorSensors
                active: false
            }
        }
    }
    

    The design for sensor page are identical. Only Settings is a bit different.

    I hope you can help me.
    Have a nice day.
    Nils



  • @Nils said in Problems with High-DPI Display for App Development:

    QGuiApplication::setAttribute(Qt::AA_DisableHighDpiScaling);

    You are explicitly disabling the High DPI scaling... did you mean QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);?



  • @VRonin Absolutely correct. That was a remnant from my first trail of fixing the problem.
    I change it in the code above but it dosen't change a thing in my app.



  • Here are two pictures of what the UI looks like on my phone.
    Setting Page

    Acceleration Page



  • @Nils Images links do not work unfortunately



  • @VRonin When I klick on them they work.
    I try again to upload the images with another site.

    This should be the settings page.
    settings page

    And this is the acceleration page.
    acceleration page



  • Hi Nils!

    You can also have a look at V-Play Engine for Qt-based mobile App and Game Development.
    The available QML components are already designed for screen resolution and density-independence. In addition it is possible to specify density-independent sizes for custom QML items with the usage of e.g. the App::dp() method.

    For a short guide about handling different screens and devices with the engine, please see the Resolution and Device Independence Tutorials.

    Cheers,
    GT



  • @GTDev Thanks for the reply.
    I will go on with V-Play and try to implement my app with V-Play for now. But if anybody has another idea why this happens I would be grateful for cheering.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.