Dashboard

A Dashboard or “home page” is a great place to welcome users and present the current state of play. Daily messages, facts and figures, performance charts, or simply some company branding can all help orient and focus the user. Let’s jazz up our Dashboard view a little and demonstrate how to display images to boot.

Grab an image of your choice that has a 1:1 aspect ratio, which means that the width is the same as the height. It’s not necessary to be square, it’s just simpler to manage the scaling for the purposes of this example. I have picked the Packt logo, which is 500 x 500 pixels, and which I have saved as packt-logo-500x500.jpg. Save it to cm/cm-ui/assets and add it to our assets.qrc resources:

<file alias="packt-logo-500x500">assets/packt-logo-500x500.jpg</file>

Add some new Style properties, leveraging our new scaling capabilities:

readonly property color colourDashboardBackground: "#f36f24"
readonly property color colourDashboardFont: "#ffffff"
readonly property int pixelSizeDashboard: tscale(36)
readonly property real sizeDashboardLogo: tscale(500)

Then, we can add our image to DashboardView:

Item {
    Rectangle {
        anchors.fill: parent
        color: Style.colourDashboardBackground
        Image {
            id: logo
            source: "qrc:/assets/packt-logo-500x500"
            anchors.centerIn: parent
            width: Style.sizeDashboardLogo
            height: Style.sizeDashboardLogo
        }
        Text {
            anchors {
                top: logo.bottom
                horizontalCenter: logo.horizontalCenter
            }
            text: "Client Management System"
            color: Style.colourDashboardFont
            font.pixelSize: Style.pixelSizeDashboard
        }
    }
}

Now, when we go to the Dashboard, we can see something a bit more stimulating: