Problems with High-DPI Display for App Development

Nils

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

VRonin

@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);?

Nils

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

Nils

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

Acceleration Page

VRonin

@Nils Images links do not work unfortunately

Nils

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

This should be the settings page.

And this is the acceleration page.

GTDev

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

Nils

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

Qt Academy Launch in California!

Unsolved Problems with High-DPI Display for App Development