Forums

OverviewFelgo 2 Support (Qt 5) › Screen Density! How?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #18748

    Niyazi

    Hi,

    I follow the example from: https://felgo.com/doc/vplay-supporting-multiple-screens-and-screen-densities/ 

     

    I create a test app for Samsung Galaxy S7 Edge.  The W/H: 1440 x 2560. And use such as “height: parent.height * 0.3

    I test my app in Samsung 8 which has W/H: 1080 x 2220. The result was different. In my app I use this:

     

     Item {
                        width: parent.width
                        height:  dp(app.Height * 0.04) // Meaning: Use %4 of the hight
    }
    

     

    It seems I need some sort code such as Device Pixel Ratio, DPI Coefficient etc.. calculation.

    How to I do that?

    #18754

    Alex
    Felgo Team

    If you use 4% of the height of something, it is 4% of the height. On different heights, 4% of the different heights will of course also be different.

    What are you trying to achieve? Do you want it to be 4% of the height, or a fixed size like 2cm no matter on which device?

    Cheers,
    Alex

    #18756

    Niyazi

    Hi Alex,

    I understand what you saying. But something is missing. I cant post a picture in here to show it.  Let me explain in this; If I use

    height: dp(app.Height * 0.04)  in my app (4%) it looks like these;

     

    W/H: 1440 x 2560         height looks 4 cm

    W/H: 1080 x 2220         height looks 3 or 3.5 cm

    I put 10 item. All the item height  has different % but in total there % 100. In my first phone (W/H: 1440 x 2560) it covers like a full screen top to bottom. But in second phone (W/H: 1080 x 2220) all the item covers only 70% of the screen.

    I know I have to calculate for each phone using resolution dpi, density, scale density or pixel ratio. And I know Felgo has dp() and sp() for these. but I cannot make it to work in both phone. I look google a lot and simply I couldn’t find anything.

     

    I dont want to use 2 cm. I need to use like 4%. So it looks same different screen size mobile. but I dont know how to use the ratio staff so I can build my app for all screen size mobile. In https://felgo.com/doc/vplay-supporting-multiple-screens-and-screen-densities/ state that we can use % for Scalable Layout in Qt. Also states that;

    This can be sufficient for most use cases. But for devices that have a more “square” aspect ratio, like the iPad with 1024×768 pixels (a 4:3 ratio), the elements will appear higher than for example on a 16:9 device. It gets even more extreme in a portrait resolution (most of the screen is covered with the header and footer not with the white content area).

     

    So how to use % for Scalable Layout and calculate the ratio so my rectangle or item such as in my examples looks same.

     

    Full examples that shows differently for both Galaxy s7 edge and  S8 using % and no calculation for any ratio.

     

    
    // TestMain.qml
    
    App {
        //licenseKey: "<generate one from https://felgo.com/licenseKey>"
        id: app
    	
    	
        onInitTheme: {
            Theme.platform = "ios"
            settings.language = "tr_TR"
            uiScale: 1  // (1) for Mobiles and (2) for Desktops
            Theme.colors.statusBarStyle = Theme.colors.statusBarStyleHidden
            Theme.navigationBar.backgroundColor = "#386082"
            Theme.navigationBar.height = dp(10)
            Theme.navigationBar.titleTextSize = sp(6)
            Theme.navigationBar.titleColor = "#ffffff"
    
            CbStyle.appWidth =  app.width
            CbStyle.appHeight = app.height
    
            // property var ntms: app.dpScale //dpiCoefficient()
        }
    	
    	// App Font
        FontLoader {
            id: normalFont
            source: "../assets/fonts/Lato-Light.ttf"
        }
    
        // App BG
        Image {
            id: bgImage
            anchors.fill: parent
            source: "../assets/BgTemplate/1.jpg"
        } // App Login BG
    
        TestMainPage {
            anchors.fill: parent
        }
    
        // Main Loader
        Loader {
            id: mainLoader
            anchors.fill: parent
        }
    }
    
    // TestMainPage.qml
    
    
    Item {
        id: mainBgPage
        anchors.fill: parent
    
        AppFlickable {
            id: scroll
            anchors.fill: parent
            contentHeight: mainColumn.height
    
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    scroll.forceActiveFocus()
                }
            }
    
            Item {
                id: mainItem
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                width: parent.width
    
                Column {
                    id: mainColumn
                    width: parent.width
                    anchors.horizontalCenter: parent.horizontalCenter
                    spacing: dp(CbStyle.appHeight * 0.01)
    
    
                    // Header (* 0.15) *****************************************************
                    Item {
                        width: parent.width
                        height:  dp(CbStyle.appHeight * 0.04) //* 0.15
                        //color: "#00000000"
    
                        // Background Rectangle for Header
                        Rectangle {
                            id: rectBGHeader
                            width: parent.width
                            height: dp(CbStyle.appHeight * 0.04) //* 0.15
                            color: "#000000"
                            opacity: 0.1
                            layer.enabled: true
                            layer.effect: DropShadow {
                                transparentBorder: true
                                spread: 0.0
                                radius: 8
                                samples: 17
                                color: "#000000"
                                horizontalOffset: 4
                                verticalOffset: 4
                            }
                        }
    
                        Text {
                            id: atmText
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.left: parent.left
                            anchors.leftMargin: dp(5)
                            font.pixelSize: sp(12)
                            text: qsTr("ATM")
    
                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    mainLoader.source = "mainui/AtmWidget.qml"
                                    mainLoader.Top
                                    console.debug("onClicked Loader Fired")
                                }
                            }
                        }
    
                        Text {
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.left: atmText.right
                            anchors.leftMargin: dp(10)
                            font.pixelSize: sp(12)
                            text: qsTr("ŞUBE")
    
                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    mainLoader.source = "mainui/AtmWidget.qml"
                                    mainLoader.Top
                                    console.debug("onClicked Loader Fired")
                                }
                            }
                        }
    
                        Text {
                            id: timeLable
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.verticalCenter: parent.verticalCenter
                            font.pixelSize: sp(14)
                            font.bold: CbStyle.headerFontBold
                            Timer {
                                running: true
                                interval: 1000 * 30
                                triggeredOnStart: true
                                repeat: true
                                onTriggered: {
                                    timeLable.text = new Date().toLocaleTimeString(Qt.locale(), Locale.ShortFormat)
                                    //timeLable.color = "#ffffff"
                                }
                            }
                        }
    
                        Text {
                            id: rusLabel
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.right: parent.right
                            anchors.rightMargin: dp(5)
                            font.pixelSize: sp(12)
                            text: qsTr("RU")
    
                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    nativeUtils.displayMessageBox(qsTr("Dil RU olarak değişti"), "", 1);
                                }
                            }
                        }
    
                        Text {
                            id: engLabel
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.right: rusLabel.left
                            anchors.rightMargin: dp(10)
                            font.pixelSize: sp(12)
                            text: qsTr("EN")
    
                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    nativeUtils.displayMessageBox(qsTr("Dil EN olarak değişti"), "", 1);
                                }
                            }
                        }
    
                        Text {
                            id: turLabel
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.right: engLabel.left
                            anchors.rightMargin: dp(10)
                            font.pixelSize: sp(12)
                            text: qsTr("TR")
    
                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    nativeUtils.displayMessageBox(qsTr("Dil TR olarak değişti"), "", 1);
                                }
                            }
                        }
                    }
                    // Header (* 0.15) *****************************************************
    
    
    
                    // Logo (* 0.3) ********************************************************
                    Item {
                        anchors.horizontalCenter: mainColumn.horizontalCenter
                        width: parent.width
                        height: dp(CbStyle.appHeight * 0.08)
                        //color: "#000000"
    
                        AppImage {
                            id: logoImage
                            width: dp(250)
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.verticalCenter: parent.verticalCenter
                            fillMode: Image.PreserveAspectFit
                            source: "../assets/LogoWhite.png"
                            layer.enabled: true
                            layer.effect: DropShadow {
                                transparentBorder: true
                                spread: 0.0
                                radius: 8
                                samples: 17
                                color: "#000000"
                                horizontalOffset: 4
                                verticalOffset: 4
                            }
                        }
                    }
                    // Logo (* 0.3) ********************************************************
    
    
    
                    // User Picture (* 0.3) ************************************************
                    Item {
                        anchors.horizontalCenter: mainColumn.horizontalCenter
                        width: dp(CbStyle.appHeight * 0.08)
                        height: width
                        //color: "green"
    
                        // UserImage    nativeUtils
                        UserImage {
                            id: userImage
                            property string iconFontName: Theme.iconFont.name
                            width: dp(CbStyle.appHeight * 0.08)
                            height: width
                            //anchors.horizontalCenter: parent.horizontalCenter
    
                            placeholderImage: "\uf007"
                            source: ""
    
                            editable: true
                            editBackgroundColor: Theme.tintLightColor //.tintColor
    
                            property bool shownEditPhotoDialog: false
    
    
                            onEditClicked: {
                                if (system.desktopPlatform) {
                                    nativeUtlis.displayImagePicker(qsTr("Choose Photo"))
                                }
                                else {
                                    shownEditPhotoDialog = true
                                    nativeUtils.displayAlertSheet("", [qsTr("Choose Photo"), qsTr("Take Photo"), qsTr("Reset Photo")], true)
                                }
                            }
    
                            Connections {
                                target: nativeUtils
                                onAlertSheetFinished: {
                                    if (userImage.shownEditPhotoDialog) {
                                        if (index == 0)
                                            nativeUtils.displayImagePicker("Choose Photo")
                                        else if (index == 1)
                                            nativeUtils.displayCameraPicker()
                                        else if (index == 2)
                                            UserImage.source = ""
    
                                        userImage.shownEditPhotoDialog = false
                                    }
                                }
    
                                // Resim Seç
                                onImagePickerFinished: {
                                    if(accepted)
                                        userImage.source = Qt.resolvedUrl(path)
    
                                    userImage.placeholderImage = ""
                                    userImage.editable = false
                                }
    
                                // Resim Çek
                                onCameraPickerFinished: {
                                    if(accepted)
                                        userImage.source = Qt.resolvedUrl(path)
    
                                    userImage.placeholderImage = ""
                                    userImage.editable = false
                                }
    
                            } // Connections
                        } // UserImage
    
                        DropShadow {
                            anchors.fill: userImage
                            horizontalOffset: 1
                            verticalOffset: 1
                            radius: 10
                            samples: 17
                            color: "#ffffff"
                            source: userImage
                        }
    
                    }
                    // User Picture (* 0.3) ************************************************
    
    
    
                    // User Name (* 0.15) ****************************************************
                    Item {
                        width: parent.width
                        height: dp(CbStyle.appHeight * 0.04)
                        anchors.horizontalCenter: mainColumn.horizontalCenter
                        //color: "lightgreen"
    
                        Text {
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.verticalCenter: parent.verticalCenter
                            font.pixelSize: sp(12)
                            font.bold: true
                            text: qsTr("User Name")
                            layer.enabled: true
                            layer.effect: DropShadow {
                                transparentBorder: true
                                horizontalOffset: 1
                                verticalOffset: 1
                                radius: 10
                                samples: 17
                                color: "#ffffff"
    
                            }
                        }
                    }
                    // User Name (* 0.15) ****************************************************
    
    
    
                    // Login Button (* 0.15) ************************************************
                    Item {
                        width: parent.width
                        height: dp(CbStyle.appHeight * 0.04)
                        //color: "lightgreen"
    
                        Row {
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.verticalCenter: parent.verticalCenter
                            spacing:dp(CbStyle.appHeight * 0.03)
    
                            Rectangle {
                                width: dp(90)
                                height: dp(CbStyle.appHeight * 0.04)
                                radius: 10
                                color: "#8aaa25"
                                border.color: "darkgreen"
    
                                Text {
                                    id: PersonalLogin
                                    anchors.horizontalCenter: parent.horizontalCenter
                                    anchors.verticalCenter: parent.verticalCenter
                                    color: "#000000"
                                    font.bold: true
                                    font.pixelSize: sp(12)
                                    text: qsTr("Personal")
                                    MouseArea {
                                        anchors.fill: parent
                                        onClicked: {
                                            nativeUtils.displayMessageBox(qsTr("Personal Sayfasına Gidiyor"), "", 1);
                                        }
                                    }
                                }
                            }
    
                            Rectangle {
                                id: rectPersonal
                                width: dp(90)
                                height: dp(CbStyle.appHeight * 0.04)
                                radius: 10
                                color: "#8aaa25"
                                border.color: "darkgreen"
    
                                Text {
                                    id: CooperateLogin
                                    anchors.horizontalCenter: parent.horizontalCenter
                                    anchors.verticalCenter: parent.verticalCenter
                                    color: "#000000"
                                    font.bold: true
                                    font.pixelSize: sp(12)
                                    text: qsTr("Cooperate")
                                    MouseArea {
                                        anchors.fill: parent
                                        onClicked: {
                                            nativeUtils.displayMessageBox(qsTr("Cooperate Sayfasına Gidiyor"), "", 1);
                                        }
    
                                        onPressed: {
    
                                        }
                                    }
                                }
                            }
                        }
    
                    }
                    // Login Button (* 0.15) ************************************************
    
    
    
                    // Forgot Password (* 0.15) *********************************************
                    Item {
                        anchors.horizontalCenter: mainColumn.horizontalCenter
                        width: dp(120)
                        height: dp(CbStyle.appHeight * 0.04)
                        //color: "red"
    
                        Text {
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.verticalCenter: parent.verticalCenter
                            font.pixelSize: sp(12)
                            color: "white"
                            text: qsTr("Lost Password")
                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    nativeUtils.displayMessageBox(qsTr("Lost Password Sayfasına Gidiyor"), "", 1);
                                }
                            }
                        }
                    }
                    // Forgot Password (* 0.15) *********************************************
    
    
    
    
                    // Döviz (* 0.57) *******************************************************
                    Rectangle {
                        anchors.horizontalCenter: mainColumn.horizontalCenter
                        width: parent.width - dp(20)
                        height: dp(CbStyle.appHeight * 0.10)
                        color: "#00000000"
                        border.color: "yellow"
    
                        Text {
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.verticalCenter: parent.verticalCenter
                            font.pixelSize: sp(12)
                            text: "Currency"
                        }
                    }
                    // Döviz (* 0.57) *******************************************************
    
    
    
                    // Weather (* 0.93)  ****************************************************
                    Rectangle {
                        anchors.horizontalCenter: mainColumn.horizontalCenter
                        width: parent.width - dp(20)
                        height:  dp(CbStyle.appHeight * 0.20)
                        color: "#00000000"
                        border.color: "orange"
    
                        Text {
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.verticalCenter: parent.verticalCenter
                            font.pixelSize: sp(12)
                            text: "Weather"
                        }
                    }
                    // Weather (* 0.93)  ****************************************************
    
    
                    // Copyright (* 0.08)  **************************************************
                    Item {
                        anchors.horizontalCenter: mainColumn.horizontalCenter
                        width: parent.width
                        height: dp(CbStyle.appHeight * 0.01)
    
                        Text {
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.verticalCenter: parent.verticalCenter
                            font.pixelSize: sp(7)
                            text: "Copyright © 2012-2018 NTMS"
                        }
                    }
                    // Copyright (* 0.08)  **************************************************
    
                } // Column
            } // Item
        } // AppFlickable
    
    
    } // main Page
    
    
    
    // CbStyle.qml
    
    pragma Singleton
    import QtQuick 2.10
    
    QtObject {
        // app scale
        property real appWidth: 0
        property real appHeight: 0
    
    }
    

     

    #18757

    Alex
    Felgo Team

    You can upload the images on free services like https://imgur.com/ and post the link here.

    Cheers,
    Alex

    #18759

    Niyazi

    https://imgur.com/Q0LCva5    // Second Image
    https://imgur.com/YFTDKFM   // First Image

     

    In first image right hand side of the mobile is in full screen and also shows the copyright. Second image shows in left hand side mobile to see copyright I must scroll the app. But everything in % like 4%.

    #18800

    Günther
    Felgo Team

    Hi,

    the issue is probably that you use

     height:  dp(app.Height * 0.04) 

     

    When creating density independent layouts, you can choose to either

    • Use a dynamic, relative size, like e.g. 4% of the height (app.Height * 0.04)
    • Use a density-independent and fixed size, like e.g. dp(200) -> meaning 200 density-independent pixels
      For example, this is then 200 px on a 1 dpi screen, and 400 px on a 2 dpi screen. -> this will result in the same physical size on both screens

    Combining the two as you do does make any sense:

    • E.g. on a screen with 1000 px height the expression dp(app.Height * 0.0.4) leads to dp(40)
    • This will be okay on a 1 dpi screen, as dp(40) = 40 px = 4% of height
    • But it will be messed up on a 2 dpi screen, as dp(40) = 80 px = 8% of height then

    Best,
    Günther

Viewing 6 posts - 1 through 6 (of 6 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support