Thermostat

A user interface for a home thermostat, implemented in Qt Quick. It demonstrates how to create responsive applications that scale from large desktop displays to mobile and small embedded displays.

Light theme	Dark theme

Thermostat demonstrates a sample thermostat application that is fully responsive. The example can be run and edited in both Qt Design Studio and Qt Creator. It shows how to implement different designs depending on the window size.

Responsive Design

As mentioned above, the application has support for a variety of display sizes. It can scale dynamically when the user changes the window size, or the application will select the correct sizes based on the available display on mobile targets. Properties that specify the display size and control which layout is currently in use have been created in Constants.qml to achieve this behavior.

    property bool isBigDesktopLayout: layout === Constants.Layout.Desktop
    property bool isSmallDesktopLayout: layout === Constants.Layout.SmallDesktop
    property bool isMobileLayout: layout === Constants.Layout.Mobile
    property bool isSmallLayout: layout === Constants.Layout.Small

In App.qml, the properties were bound to the window height and width at application startup. They are mutually exclusive.

    Component.onCompleted: {
        Constants.layout = Qt.binding(() => {
            let tall = window.height >= window.width
            if (window.width >= 1440 && window.height >= 520)
                return Constants.Layout.Desktop
            if (window.width >= 1024 && window.height >= 768)
                return Constants.Layout.SmallDesktop
            if (tall || (window.width >= 600 && window.height >= 380))
                return Constants.Layout.Mobile
            return Constants.Layout.Small
        })
    }

The states are then used to control the properties of the component such as width, height, fontSize, position, layout (column or row), etc.

    states: [
        State {
            name: "bigDesktopLayout"
            when: Constants.isBigDesktopLayout
            PropertyChanges {
                target: statistics
                leftPadding: 53
                rightPadding: 53
                topPadding: 23
                bottomPadding: 43
            }
            PropertyChanges {
                target: scrollView
                isBackgroundVisible: false
                delegateWidth: 350
                delegateHeight: 182
                statisticsChartWidth: grid.width
                statisticsChartHeight: 647
            }
            PropertyChanges {
                target: grid
                width: 1100
            }
        },
        State {
            name: "smallDesktopLayout"
            when:  Constants.isSmallDesktopLayout
            PropertyChanges {
                target: statistics
                leftPadding: 53
                rightPadding: 53
                topPadding: 23
                bottomPadding: 43
            }
            PropertyChanges {
                target: scrollView
                isBackgroundVisible: false
                delegateWidth: 290
                delegateHeight: 182
                statisticsChartWidth: grid.width
                statisticsChartHeight: 541
            }
            PropertyChanges {
                target: grid
                width: 918
            }
        },
        State {
            name: "mobileLayout"
            when: Constants.isMobileLayout
            PropertyChanges {
                target: statistics
                leftPadding: 0
                rightPadding: 0
                topPadding: 0
                bottomPadding: 0
            }
            PropertyChanges {
                target: scrollView
                isBackgroundVisible: false
                delegateWidth: 327
                delegateHeight: 110
                statisticsChartWidth: 346
                statisticsChartHeight: 383
            }
        },
        State {
            name: "smallLayout"
            when: Constants.isSmallLayout
            PropertyChanges {
                target: statistics
                leftPadding: 0
                rightPadding: 0
                topPadding: 0
                bottomPadding: 0
            }
            PropertyChanges {
                target: scrollView
                isBackgroundVisible: true
                delegateWidth: 332
                delegateHeight: 90
                statisticsChartWidth: 420
                statisticsChartHeight: 240
            }
        }
    ]

Example project @ code.qt.io

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.