Thermostat | Qt 6.11
Description: The Thermostat example demonstrates how to implement different designs depending on the window size.

- Qt 6.11
- Thermostat
- Qt 6.11.2 Reference Documentation

# Thermostat

The Thermostat example demonstrates how to implement different designs depending on the window size.

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

You can 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.

- Qt Extension for Visual Studio Code

  Run the Qt: Open Qt examples command from the Command Palette, and select the example from the list. For more information, see Qt Extension for Visual Studio Code: 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

See also All Qt Examples and Qt Quick Examples and Tutorials.