Thermostat

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

Light narrower screens

Light wider screen

Dark narrower screens

Dark wider screens

Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, see Qt Creator: Tutorial: Build and run.

Responsive Design

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. Constants.qml contains properties that specify the display size and control which layout is currently in use:

     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 are bound to the window height and width at application startup:

     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 components' properties, such as width, height, fontSize, position, and layout (column or row).

     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
             }
         }
     ]

Source files

Example project @ code.qt.io