Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

Forums

Overview › Felgo 3 Support (Qt 5) › Screen Density! How?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 23, 2018 at 15:10 #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?

    March 23, 2018 at 18:59 #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

    March 23, 2018 at 19:34 #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

}

     

    March 23, 2018 at 19:42 #18757

    Alex
    Felgo Team

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

    Cheers,
    Alex

    March 23, 2018 at 19:53 #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%.

    March 30, 2018 at 17:58 #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.

Sign Up

Log In

Felgo Community
Felgo

Sign Up and Download for Free

By signing up, you consent to Felgo processing your data & contacting you to fulfill your request. For more information on how we are committed to protecting & respecting your privacy, please review our privacy policy.
Already have a Felgo account? Login here.
Want to find out if Felgo is a good fit for your company?

As part of the free Business evaluation, we offer a free welcome call for companies, to talk about your requirements, and how the Felgo SDK & Services can help you. Just sign up and schedule your call.

Sign up now to start your free Business evaluation:

  • Free personal evaluation call
  • Access to all Felgo Business license features
  • Up to 5 hours of free professional services
  • Private Slack channel
  • Priority support via Email or screen sharing
Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded