qiurui
/
qtdoc
mirror of https://github.com/qt/qtdoc.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Revamp Thermostat example 2 

The new responsive design of Thermostat Example is implemented.
The application is prepared to look good on desktop, mobile and small displays.

In the current state only part of the application is prepared.
Schedule View is not ready.

What is done:
1. Rooms View
2. Thermostat Control View
3. Statistics View
4. Dark/Light mode

Pick-to: 6.5.2 6.5 6.6
Change-Id: I52d07b7001b1f78025d74ab827e58b5d23b2dedb
Reviewed-by: <kaj@spyro-soft.com>
Reviewed-by: Kimmo Leppälä <kimmo.leppala@qt.io>
Reviewed-by: Jani Heikkinen <jani.heikkinen@qt.io>
This commit is contained in:
Kamil Hajdukiewicz 2023-06-20 08:03:50 +02:00
parent 5459b18fd7
commit 3f9c25bdb7
130 changed files with 7516 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/demos/CMakeLists.txt
View File

@ -29,8 +29,10 @@ if(TARGET Qt6::Widgets)
endif()
if(TARGET Qt::Quick AND TARGET Qt::QuickControls2 AND TARGET Qt::Quick3D)
qt_internal_add_example(robotarm)
qt_internal_add_example(FX_Material_Showroom)
endif()
if(TARGET Qt::Quick AND TARGET Qt::QuickControls2 AND TARGET Qt::Multimedia)
qt_internal_add_example(mediaplayer)
endif()
if(TARGET Qt6::Quick AND TARGET Qt6::QuickControls2 AND TARGET Qt6::Charts)
qt_internal_add_example(thermostat)
endif()

43
examples/demos/thermostat/CMakeLists.txt Normal file
View File

@ -0,0 +1,43 @@
# Copyright (C) 2023 The Qt Company Ltd.
# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
cmake_minimum_required(VERSION 3.16)
set(BUILD_QDS_COMPONENTS ON CACHE BOOL "Build design studio components")
set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/demos/thermostat")
project(ThermostatApp LANGUAGES CXX)
find_package(Qt6 6.5 REQUIRED COMPONENTS Gui Qml Quick QuickControls2 Svg Charts)
qt_standard_project_setup(REQUIRES 6.5)
qt_add_executable(ThermostatApp src/main.cpp)
qt_add_resources(ThermostatApp "configuration"
PREFIX "/"
FILES
qtquickcontrols2.conf
)
if (${BUILD_QDS_COMPONENTS})
include(qmlcomponents)
endif ()
include(qmlmodules)
target_link_libraries(ThermostatApp PRIVATE
Qt6::Core
Qt6::Gui
Qt6::Quick
Qt6::Qml
Qt6::Svg
Qt6::Charts
Qt6::QuickControls2
)
install(TARGETS ThermostatApp
RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}"
BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}"
LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}"
)

8
examples/demos/thermostat/Main.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import content
App {
}

96
examples/demos/thermostat/Thermostat.qmlproject Normal file
View File

@ -0,0 +1,96 @@
import QmlProject
Project {
mainFile: "content/App.qml"
mainUiFile: "content/HomePageForm.ui.qml"
/* Include .qml, .js, and image files from current directory and subdirectories */
QmlFiles {
directory: "content"
}
QmlFiles {
directory: "imports"
}
JavaScriptFiles {
directory: "content"
}
JavaScriptFiles {
directory: "imports"
}
ImageFiles {
directory: "content"
}
Files {
filter: "*.conf"
files: ["qtquickcontrols2.conf"]
}
Files {
filter: "qmldir"
directory: "."
}
Files {
filter: "qmldir"
directory: "imports/CustomControls"
}
Files {
filter: "*.ttf;*.otf"
}
Files {
filter: "*.wav;*.mp3"
}
Files {
filter: "*.mp4"
}
Files {
filter: "*.glsl;*.glslv;*.glslf;*.vsh;*.fsh;*.vert;*.frag"
}
Files {
filter: "*.qsb"
}
Environment {
QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
QML_COMPAT_RESOLVE_URLS_ON_ASSIGNMENT: "1"
}
qt6Project: true
/* List of plugin directories passed to QML runtime */
importPaths: [ "imports" ]
/* Required for deployment */
targetDirectory: "/opt/thermostat"
qdsVersion: "4.1"
quickVersion: "6.5"
/* If any modules the project imports require widgets (e.g. QtCharts), widgetApp must be true */
widgetApp: true
/* args: Specifies command line arguments for qsb tool to generate shaders.
files: Specifies target files for qsb tool. If path is included, it must be relative to this file.
Wildcard '*' can be used in the file name part of the path.
e.g. files: [ "content/shaders/*.vert", "*.frag" ] */
ShaderTool {
args: "-s --glsl \"100 es,120,150\" --hlsl 50 --msl 12"
files: [ "content/shaders/*" ]
}
multilanguageSupport: true
supportedLanguages: ["en"]
primaryLanguage: "en"
}

38
examples/demos/thermostat/content/App.qml Normal file
View File

@ -0,0 +1,38 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
import Thermostat
Window {
id: window
width: Constants.width
height: Constants.height
minimumHeight: 272
minimumWidth: Qt.PrimaryOrientation === Qt.LandscapeOrientation ? 480 : 360
visible: true
title: "Thermostat"
HomePage {
id: mainScreen
anchors.fill: parent
}
Component.onCompleted: function() {
Constants.isBigDesktopLayout = Qt.binding( function(){
return window.width >= Constants.width && window.width >= window.height
})
Constants.isSmallDesktopLayout = Qt.binding( function(){
return window.width >= 647 && window.width < Constants.width && window.width >= window.height
})
Constants.isMobileLayout = Qt.binding( function(){
return window.width < window.height
})
Constants.isSmallLayout = Qt.binding( function(){
return window.width < 647 && window.width >= window.height
})
}
}

8
examples/demos/thermostat/content/BottomBar.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
BottomBarForm {
}

62
examples/demos/thermostat/content/BottomBarForm.ui.qml Normal file
View File

@ -0,0 +1,62 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import Thermostat
TabBar {
id: root
required property var roomsList
property alias menuOptions: repeater.model
contentHeight: 56
background: Rectangle {
color: Constants.accentColor
border.color: Constants.accentTextColor
radius: 12
}
Repeater {
id: repeater
delegate: TabButton {
id: menuItem
required property string name
required property string view
required property string iconSource
readonly property bool active: Constants.currentView == menuItem.view
background: Rectangle {
color: "transparent"
}
icon.width: 24
icon.height: 24
icon.source: "images/" + menuItem.iconSource
icon.color: menuItem.active ? "#2CDE85" : Constants.accentTextColor
Connections {
function onClicked() {
if (menuItem.view != "SettingsView"
&& menuItem.view != Constants.currentView) {
stackView.replace(menuItem.view + ".qml", {
"roomsList": roomsList
}, StackView.Immediate)
Constants.currentView = menuItem.view
}
}
}
}
}
}

98
examples/demos/thermostat/content/CMakeLists.txt Normal file
View File

@ -0,0 +1,98 @@
# Copyright (C) 2023 The Qt Company Ltd.
# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
qt_add_library(content STATIC)
qt_add_qml_module(content
URI "content"
VERSION 1.0
QML_FILES
App.qml
BottomBar.qml
BottomBarForm.ui.qml
EnergyInfo.qml
EnergyInfoForm.ui.qml
HomePage.qml
HomePageForm.ui.qml
HumidityInfo.qml
HumidityInfoForm.ui.qml
RoomItem.qml
RoomItemForm.ui.qml
RoomOption.qml
RoomOptionForm.ui.qml
RoomsScrollView.qml
RoomsScrollViewForm.ui.qml
RoomsSwipeView.qml
RoomsSwipeViewForm.ui.qml
RoomsView.qml
RoomsViewForm.ui.qml
ScheduleScrollView.qml
ScheduleScrollViewForm.ui.qml
ScheduleSwipeView.qml
ScheduleSwipeViewForm.ui.qml
ScheduleView.qml
ScheduleViewForm.ui.qml
SideBar.qml
SideBarForm.ui.qml
StatisticsScrollView.qml
StatisticsScrollViewForm.ui.qml
StatisticsStackView.qml
StatisticsStackViewForm.ui.qml
StatisticsSwipeView.qml
StatisticsSwipeViewForm.ui.qml
StatisticsView.qml
StatisticsViewForm.ui.qml
TemperatureInfo.qml
TemperatureInfoForm.ui.qml
TemperatureSetter.qml
TemperatureSetterDesktopView.qml
TemperatureSetterDesktopViewForm.ui.qml
TemperatureSetterForm.ui.qml
TemperatureSetterMobileView.qml
TemperatureSetterMobileViewForm.ui.qml
TemperatureSetterSmallView.qml
TemperatureSetterSmallViewForm.ui.qml
ThermostatInfo.qml
ThermostatInfoForm.ui.qml
ThermostatScrollView.qml
ThermostatScrollViewForm.ui.qml
ThermostatSettings.qml
ThermostatSettingsForm.ui.qml
ThermostatStackView.qml
ThermostatStackViewForm.ui.qml
ThermostatSwipeView.qml
ThermostatSwipeViewForm.ui.qml
ThermostatView.qml
ThermostatViewForm.ui.qml
TimeSchedule.qml
TimeScheduleForm.ui.qml
RESOURCES
images/arrow.svg
images/Auto.svg
images/bedroom.svg
images/circle.svg
images/Cool.svg
images/down.svg
images/drop.svg
images/Dry.svg
images/Eco.svg
images/edit.svg
images/energy.svg
images/Fan.svg
images/Heat.svg
images/home.svg
images/kid_room.svg
images/kitchen.svg
images/living_room.svg
images/logo.png
images/maxTemp.svg
images/minTemp.svg
images/more.svg
images/power.svg
images/schedule.svg
images/settings.svg
images/stats.svg
images/temperature.svg
images/theme.svg
images/thermostat.svg
images/up.svg
)

12
examples/demos/thermostat/content/EnergyInfo.qml Normal file
View File

@ -0,0 +1,12 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
EnergyInfoForm {
Component.onCompleted: function() {
for (let i = 0; i < energyValuesModel.count; ++i) {
totalEnergy += energyValuesModel.get(i).enrg
}
}
}

24
examples/demos/thermostat/content/EnergyInfoForm.ui.qml Normal file
View File

@ -0,0 +1,24 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
ThermostatInfo {
required property var energyValuesModel
property int totalEnergy: 0
property real costOf1KWH: 0.23
title: qsTr("Energy Usage")
leftIcon: "images/energy.svg"
topLabel: qsTr("Total: %1 KWH".arg(totalEnergy))
bottomLeftLabel: qsTr("Estimeted Cost: $%1".arg(totalEnergy * costOf1KWH))
}

8
examples/demos/thermostat/content/HomePage.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
HomePageForm {
}

234
examples/demos/thermostat/content/HomePageForm.ui.qml Normal file
View File

@ -0,0 +1,234 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Thermostat
Page {
id: root
header: ToolBar {
id: toolBar
background: Rectangle {
color: Constants.accentColor
}
RowLayout {
anchors.fill: parent
Image {
id: qtLogo
Layout.topMargin: 6
Layout.bottomMargin: 6
Layout.leftMargin: 38
source: "images/logo"
sourceSize.height: 50
}
Item {
Layout.fillWidth: true
}
Image {
id: themeTapButton
source: "images/theme.svg"
sourceSize.height: Constants.isSmallLayout ? 15 : 20
sourceSize.width: Constants.isSmallLayout ? 15 : 20
Layout.rightMargin: Constants.isSmallLayout ? 5 : 19
visible: Constants.isSmallLayout || Constants.isMobileLayout
TapHandler {
onTapped: AppSettings.isDarkTheme = !AppSettings.isDarkTheme
}
}
}
}
background: Rectangle {
color: Constants.accentColor
}
StackView {
id: stackView
anchors.left: sideMenu.right
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
initialItem: RoomsView {
roomsList: roomsList
}
}
SideBar {
id: sideMenu
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.topMargin: 63
height: parent.height
menuOptions: menuItems
roomsList: roomsList
}
BottomBar {
id: bottomMenu
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
width: parent.width
visible: false
position: TabBar.Footer
menuOptions: menuItems
roomsList: roomsList
}
RoomsModel {
id: roomsList
}
ListModel {
id: menuItems
ListElement {
name: qsTr("Rooms")
view: "RoomsView"
iconSource: "home.svg"
}
ListElement {
name: qsTr("Thermostat Control")
view: "ThermostatView"
iconSource: "thermostat.svg"
}
ListElement {
name: qsTr("Stats")
view: "StatisticsView"
iconSource: "stats.svg"
}
ListElement {
name: qsTr("Settings")
view: "SettingsView"
iconSource: "settings.svg"
}
}
states: [
State {
name: "mobileLayout"
when: Constants.isMobileLayout
PropertyChanges {
target: sideMenu
visible: false
}
PropertyChanges {
target: bottomMenu
visible: true
}
PropertyChanges {
target: stackView
anchors.leftMargin: 0
}
PropertyChanges {
target: qtLogo
Layout.leftMargin: 19
sourceSize.height: 25
Layout.topMargin: 7
Layout.bottomMargin: 7
}
PropertyChanges {
target: toolBar
height: 39
}
AnchorChanges {
target: stackView
anchors.left: parent.left
anchors.bottom: bottomMenu.top
}
},
State {
name: "desktopLayout"
when: Constants.isBigDesktopLayout || Constants.isSmallDesktopLayout
PropertyChanges {
target: sideMenu
visible: true
anchors.topMargin: 63
}
PropertyChanges {
target: bottomMenu
visible: false
}
PropertyChanges {
target: stackView
anchors.leftMargin: 5
}
PropertyChanges {
target: qtLogo
Layout.leftMargin: 38
sourceSize.height: 50
Layout.topMargin: 6
Layout.bottomMargin: 6
}
PropertyChanges {
target: toolBar
height: 56
}
AnchorChanges {
target: stackView
anchors.left: sideMenu.right
anchors.bottom: parent.bottom
}
},
State {
name: "smallLayout"
when: Constants.isSmallLayout
PropertyChanges {
target: sideMenu
visible: true
anchors.topMargin: 24
}
PropertyChanges {
target: bottomMenu
visible: false
}
PropertyChanges {
target: stackView
anchors.leftMargin: 5
}
PropertyChanges {
target: qtLogo
Layout.leftMargin: 5
sourceSize.height: 18
Layout.topMargin: 5
Layout.bottomMargin: 0
}
PropertyChanges {
target: toolBar
height: 24
}
AnchorChanges {
target: stackView
anchors.left: sideMenu.right
anchors.bottom: parent.bottom
}
}
]
}

21
examples/demos/thermostat/content/HumidityInfo.qml Normal file
View File

@ -0,0 +1,21 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
HumidityInfoForm {
Component.onCompleted: function() {
var hmd = []
var sum = 0
var count = humidityValuesModel.count
for (let i = 0; i < count; ++i) {
sum += humidityValuesModel.get(i).hmd
hmd.push(humidityValuesModel.get(i).hmd)
}
humidityAvg = sum / count
humidityDiff = 100 * ( humidityValuesModel.get(count-1).hmd /
humidityValuesModel.get(count-2).hmd - 1)
humidityValues = hmd
isMore = humidityDiff > 0
}
}

26
examples/demos/thermostat/content/HumidityInfoForm.ui.qml Normal file
View File

@ -0,0 +1,26 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
ThermostatInfo {
required property var humidityValuesModel
property var humidityValues
property int humidityAvg
property int humidityDiff
property bool isMore
title: qsTr("Humidity")
leftIcon: "images/drop.svg"
topLabel: qsTr("Avarage: %1 %".arg(humidityAvg))
bottomLeftLabel: isMore ? qsTr("%1 % more than Last Month".arg(humidityDiff)) :
qsTr("%1 % less than Last Month".arg(Math.abs(humidityDiff)))
bottomLeftIcon: isMore ? "images/up" : "images/down"
}

8
examples/demos/thermostat/content/RoomItem.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
RoomItemForm {
}

308
examples/demos/thermostat/content/RoomItemForm.ui.qml Normal file
View File

@ -0,0 +1,308 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Effects
import CustomControls
import Thermostat
Pane {
id: root
property bool isSmallLayout: false
property alias isEnabled: toggle.checked
property alias toggle: toggle
required property string name
required property string floor
required property string iconName
required property int temp
required property int humidity
required property int energy
required property bool active
required property var model
width: internal.width
height: internal.height
topPadding: 12
leftPadding: internal.leftPadding
bottomPadding: 0
rightPadding: 16
background: Rectangle {
radius: 12
color: Constants.accentColor
}
RowLayout {
id: header
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.rightMargin: internal.switchMargin
spacing: 16
Item {
Layout.preferredWidth: internal.iconSize
Layout.preferredHeight: internal.iconSize
Layout.alignment: Qt.AlignTop
Image {
id: icon
source: "images/" + root.iconName
sourceSize.width: internal.iconSize
sourceSize.height: internal.iconSize
}
MultiEffect {
anchors.fill: icon
source: icon
colorization: 1
colorizationColor: Constants.iconColor
}
}
Column {
id: title
Layout.fillWidth: true
spacing: internal.titleSpacing
Label {
text: root.name
font.pixelSize: !root.isSmallLayout ? 24 : 18
font.weight: 600
font.family: "Titillium Web"
color: Constants.primaryTextColor
}
Label {
text: root.floor
font.pixelSize: 10
font.weight: 400
font.family: "Titillium Web"
color: Constants.accentTextColor
}
}
CustomSwitch {
id: toggle
checked: root.active
onCheckedChanged: model.active = toggle.checked
}
}
Column {
id: column
spacing: internal.spacing
anchors.left: parent.left
anchors.leftMargin: internal.columnMargin
anchors.top: header.bottom
anchors.topMargin: !root.isSmallLayout ? 10 : 8
Repeater {
model: [qsTr("Humidity: %1%".arg(humidity)), qsTr(
"Energy Usage: %1 KM/H".arg(energy))]
Label {
text: modelData
font.pixelSize: !root.isSmallLayout ? 14 : 12
font.weight: 400
font.family: "Titillium Web"
color: toggle.checked ? Constants.primaryTextColor : "#898989"
}
}
}
TemperatureLabel {
id: temp
anchors.verticalCenter: column.verticalCenter
anchors.right: parent.right
anchors.rightMargin: internal.rightMargin
isEnabled: root.isEnabled
isHeating: root.model.thermostatTemp > root.model.temp
tempValue: root.temp
}
Rectangle {
id: separator
anchors.bottom: menu.top
anchors.left: parent.left
anchors.right: parent.right
height: 1
color: "#DCDCDC"
}
ListModel {
id: roomOptions
ListElement {
name: "Cool"
}
ListElement {
name: "Heat"
}
ListElement {
name: "Dry"
}
ListElement {
name: "Fan"
}
ListElement {
name: "Eco"
}
ListElement {
name: "Auto"
}
}
RowLayout {
id: menu
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.rightMargin: !root.isSmallLayout ? 24 : 0
Repeater {
model: roomOptions
RoomOption {
id: roomOption
Layout.fillWidth: true
Layout.fillHeight: true
isEnabled: root.isEnabled
isSmallLayout: root.isSmallLayout
isActive: root.model.mode === roomOption.name
Connections {
function onClicked() {
root.model.mode = roomOption.name
}
}
}
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredWidth: 30
}
Item {
Layout.preferredWidth: !root.isSmallLayout ? 24 : 20
Layout.preferredHeight: !root.isSmallLayout ? 24 : 20
Layout.alignment: Qt.AlignBottom
Layout.bottomMargin: !root.isSmallLayout ? 19 : 7
Image {
id: icon2
source: "images/more.svg"
sourceSize.width: !root.isSmallLayout ? 24 : 20
}
MultiEffect {
anchors.fill: icon2
source: icon2
colorization: 1
colorizationColor: root.isEnabled ? Constants.accentTextColor : "#898989"
}
}
}
QtObject {
id: internal
property int width: 530
property int height: 276
property int rightMargin: 60
property int leftPadding: 16
property int titleSpacing: 8
property int spacing: 16
property int columnMargin: 7
property int iconSize: 34
property int switchMargin: 9
}
states: [
State {
name: "desktopLayout"
when: Constants.isBigDesktopLayout || Constants.isSmallDesktopLayout
PropertyChanges {
target: root
isSmallLayout: false
}
PropertyChanges {
target: internal
width: 530
height: 276
rightMargin: 53
leftPadding: 16
spacing: 16
titleSpacing: 8
columnMargin: 7
iconSize: 34
switchMargin: 9
}
},
State {
name: "mobileLayout"
when: Constants.isMobileLayout
PropertyChanges {
target: internal
width: 306
height: 177
rightMargin: 12
leftPadding: 8
spacing: 6
titleSpacing: 4
columnMargin: 17
iconSize: 24
switchMargin: 2
}
PropertyChanges {
target: root
isSmallLayout: true
}
},
State {
name: "smallLayout"
when: Constants.isSmallLayout
PropertyChanges {
target: root
isSmallLayout: true
}
PropertyChanges {
target: internal
width: 340
height: 177
rightMargin: 34
leftPadding: 8
spacing: 3
titleSpacing: 2
columnMargin: 7
iconSize: 24
switchMargin: 9
}
}
]
}

8
examples/demos/thermostat/content/RoomOption.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
RoomOptionForm {
}

56
examples/demos/thermostat/content/RoomOptionForm.ui.qml Normal file
View File

@ -0,0 +1,56 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import Thermostat
Button {
id: root
required property string name
required property bool isSmallLayout
required property bool isEnabled
required property bool isActive
leftPadding: 0
rightPadding: 0
topPadding: root.isSmallLayout ? 7 : 12
bottomPadding: root.isSmallLayout ? 7 : 20
spacing: root.isSmallLayout ? 5 : 10
enabled: root.isEnabled
checked: root.isActive && root.isEnabled
checkable: true
flat: true
autoExclusive: true
display: AbstractButton.TextUnderIcon
text: root.name
icon.source: "images/" + root.name + ".svg"
icon.width: root.isSmallLayout ? 20 : 32
icon.height: root.isSmallLayout ? 20 : 32
palette.brightText: "#2CDE85"
palette.dark: "transparent"
palette.windowText: root.isEnabled ? Constants.accentTextColor : "#898989"
font.family: "Titillium Web"
font.pixelSize: !root.isSmallLayout ? 12 : 10
font.weight: 600
Image {
anchors.topMargin: 2
anchors.top: root.top
anchors.horizontalCenter: root.horizontalCenter
source: "images/circle.svg"
visible: (root.down || root.checked) && !root.isSmallLayout
}
}

8
examples/demos/thermostat/content/RoomsScrollView.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
RoomsScrollViewForm {
}

47
examples/demos/thermostat/content/RoomsScrollViewForm.ui.qml Normal file
View File

@ -0,0 +1,47 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
ScrollView {
id: scrollView
clip: true
contentWidth: availableWidth
property alias model: repeater.model
property alias columns: gridLayout.columns
property alias gridWidth: gridLayout.width
property alias gridHeight: gridLayout.height
required property int delegatePreferredHeight
required property int delegatePreferredWidth
GridLayout {
id: gridLayout
columnSpacing: 24
rowSpacing: 25
Repeater {
id: repeater
RoomItem {
id: roomItem
Layout.preferredHeight: scrollView.delegatePreferredHeight
Layout.preferredWidth: scrollView.delegatePreferredWidth
Layout.alignment: Qt.AlignHCenter
}
}
}
}

10
examples/demos/thermostat/content/RoomsSwipeView.qml Normal file
View File

@ -0,0 +1,10 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
RoomsSwipeViewForm {
previousItem.onTapped: swipeView.decrementCurrentIndex()
nextItem.onTapped: swipeView.incrementCurrentIndex()
}

107
examples/demos/thermostat/content/RoomsSwipeViewForm.ui.qml Normal file
View File

@ -0,0 +1,107 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
Item {
id: root
property alias model: repeater.model
property alias swipeView: swipeView
property alias previousItem: previousItem
property alias nextItem: nextItem
required property int delegatePreferredHeight
required property int delegatePreferredWidth
ListView {
id: roomSelector
model: root.model
orientation: ListView.Horizontal
width: parent.width
height: 28
spacing: 26
delegate: Label {
id: labelDelegate
required property string name
required property int index
text: name
font.pixelSize: 12
font.family: "Titillium Web"
font.weight: 400
font.bold: swipeView.currentIndex === index
font.underline: swipeView.currentIndex === index
color: swipeView.currentIndex === index ? "#2CDE85" : "#898989"
MouseArea {
anchors.fill: parent
Connections {
function onClicked() {
swipeView.setCurrentIndex(labelDelegate.index)
}
}
}
}
}
Image {
source: "images/arrow.svg"
sourceSize.width: 35
sourceSize.height: 35
anchors.verticalCenter: swipeView.verticalCenter
anchors.right: swipeView.left
mirror: true
TapHandler {
id: previousItem
}
}
Image {
source: "images/arrow.svg"
anchors.verticalCenter: swipeView.verticalCenter
anchors.left: swipeView.right
sourceSize.width: 35
sourceSize.height: 35
TapHandler {
id: nextItem
}
}
SwipeView {
id: swipeView
height: root.delegatePreferredHeight
width: root.delegatePreferredWidth
anchors.top: roomSelector.bottom
anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 4
spacing: 7
clip: true
Repeater {
id: repeater
RoomItem {
id: roomItem
height: root.delegatePreferredHeight
width: root.delegatePreferredWidth
}
}
}
}

8
examples/demos/thermostat/content/RoomsView.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
RoomsViewForm {
}

193
examples/demos/thermostat/content/RoomsViewForm.ui.qml Normal file
View File

@ -0,0 +1,193 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import Thermostat
Pane {
id: root
topPadding: 4
leftPadding: 27
rightPadding: 27
bottomPadding: 13
required property var roomsList
background: Rectangle {
anchors.fill: parent
color: Constants.backgroundColor
}
Column {
id: title
width: internal.contentWidth
Label {
id: heading
text: qsTr("Welcome")
font: Constants.desktopTitleFont
color: Constants.primaryTextColor
elide: Text.ElideRight
}
Label {
id: heading2
text: qsTr("Here's the list of your Rooms at Home")
font.pixelSize: 24
font.weight: 600
font.family: "Titillium Web"
color: Constants.accentTextColor
elide: Text.ElideRight
}
}
RoomsScrollView {
id: scrollView
anchors.top: title.bottom
anchors.topMargin: 10
width: internal.contentWidth
height: internal.contentHeight
gridWidth: internal.contentWidth
gridHeight: internal.contentHeight
delegatePreferredWidth: internal.delegatePreferredWidth
delegatePreferredHeight: internal.delegatePreferredHeight
columns: root.width < 1140 ? 1 : 2
model: roomsList
}
RoomsSwipeView {
id: swipeView
anchors.top: title.bottom
anchors.topMargin: 5
anchors.left: parent.left
anchors.right: parent.right
width: internal.contentWidth
height: internal.contentHeight
delegatePreferredHeight: internal.delegatePreferredHeight
delegatePreferredWidth: internal.delegatePreferredWidth
model: roomsList
visible: false
}
QtObject {
id: internal
readonly property int contentHeight: root.height - title.height
- root.topPadding - root.bottomPadding
readonly property int contentWidth: root.width - root.rightPadding - root.leftPadding
property int delegatePreferredHeight: 276
property int delegatePreferredWidth: 530
}
states: [
State {
name: "desktopLayout"
when: Constants.isBigDesktopLayout || Constants.isSmallDesktopLayout
PropertyChanges {
target: heading
text: qsTr("Welcome")
font: Constants.desktopTitleFont
}
PropertyChanges {
target: heading2
visible: true
}
PropertyChanges {
target: scrollView
visible: true
}
PropertyChanges {
target: swipeView
visible: false
}
PropertyChanges {
target: internal
delegatePreferredHeight: 276
delegatePreferredWidth: 530
}
PropertyChanges {
target: root
leftPadding: 27
}
},
State {
name: "mobileLayout"
when: Constants.isMobileLayout
PropertyChanges {
target: heading
text: qsTr("Rooms")
font: Constants.mobileTitleFont
}
PropertyChanges {
target: heading2
visible: false
}
PropertyChanges {
target: scrollView
visible: true
}
PropertyChanges {
target: swipeView
visible: false
}
PropertyChanges {
target: internal
delegatePreferredHeight: 177
delegatePreferredWidth: 306
}
PropertyChanges {
target: root
leftPadding: 27
}
},
State {
name: "smallLayout"
when: Constants.isSmallLayout
PropertyChanges {
target: heading
text: qsTr("Rooms")
font: Constants.smallTitleFont
}
PropertyChanges {
target: heading2
visible: false
}
PropertyChanges {
target: scrollView
visible: false
}
PropertyChanges {
target: swipeView
visible: true
}
PropertyChanges {
target: internal
delegatePreferredHeight: 177
delegatePreferredWidth: 340
}
PropertyChanges {
target: root
leftPadding: 11
}
}
]
}

8
examples/demos/thermostat/content/ScheduleScrollView.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
ScheduleScrollViewForm {
}

78
examples/demos/thermostat/content/ScheduleScrollViewForm.ui.qml Normal file
View File

@ -0,0 +1,78 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Thermostat
ScrollView {
id: scrollView
property int timeScheduleHeight: 361
property int timeScheduleWidth: 1087
property int tempSetterHeight: 427
property int tempSetterWidth: 1087
clip: true
padding: 0
ColumnLayout {
width: scrollView.width
height: scrollView.height
TimeSchedule {
Layout.preferredHeight: scrollView.timeScheduleHeight
Layout.preferredWidth: scrollView.timeScheduleWidth
Layout.alignment: Qt.AlignHCenter
}
TemperatureSetter {
Layout.preferredHeight: scrollView.tempSetterHeight
Layout.preferredWidth: scrollView.tempSetterWidth
Layout.alignment: Qt.AlignHCenter
}
}
states: [
State {
name: "desktopLayout"
when: Constants.isBigDesktopLayout || Constants.isSmallDesktopLayout
PropertyChanges {
target: scrollView
timeScheduleHeight: 361
timeScheduleWidth: 1087
tempSetterHeight: 427
tempSetterWidth: 1087
}
},
State {
name: "mobileLayout"
when: Constants.isMobileLayout
PropertyChanges {
target: scrollView
timeScheduleHeight: 314
timeScheduleWidth: 327
tempSetterHeight: 529
tempSetterWidth: 327
}
},
State {
name: "smallLayout"
when: Constants.isSmallLayout
PropertyChanges {
target: scrollView
timeScheduleHeight: 230
timeScheduleWidth: 400
tempSetterHeight: 370
tempSetterWidth: 400
}
}
]
}

8
examples/demos/thermostat/content/ScheduleSwipeView.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
ScheduleSwipeViewForm {
}

77
examples/demos/thermostat/content/ScheduleSwipeViewForm.ui.qml Normal file
View File

@ -0,0 +1,77 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
Item {
id: root
property alias model: repeater.model
property alias swipeView: swipeView
property alias currentRoomIndex: swipeView.currentIndex
property bool isOneColumn: false
ListView {
id: roomSelector
model: root.model
width: root.width
height: 28
spacing: 26
orientation: ListView.Horizontal
delegate: Label {
id: labelDelegate
required property string name
required property int index
readonly property bool isActive: swipeView.currentIndex === index
text: name
font.pixelSize: 12
font.family: "Titillium Web"
font.weight: 400
font.bold: isActive
font.underline: isActive
color: isActive ? "#2CDE85" : "#898989"
MouseArea {
anchors.fill: parent
Connections {
function onClicked() {
swipeView.setCurrentIndex(labelDelegate.index)
}
}
}
}
}
SwipeView {
id: swipeView
height: root.height - roomSelector.height + 13
width: root.width
anchors.top: roomSelector.bottom
anchors.horizontalCenter: parent.horizontalCenter
spacing: 7
clip: true
Repeater {
id: repeater
ScheduleScrollView {
width: swipeView.width
height: swipeView.height
}
}
}
}

8
examples/demos/thermostat/content/ScheduleView.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
ScheduleViewForm {
}

176
examples/demos/thermostat/content/ScheduleViewForm.ui.qml Normal file
View File

@ -0,0 +1,176 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Thermostat
import CustomControls
Pane {
id: root
property int currentRoomIndex: 0
required property var roomsList
background: Rectangle {
anchors.fill: parent
color: Constants.backgroundColor
}
Column {
id: title
width: parent.width
Label {
id: header
text: qsTr("Time Schedule")
font.pixelSize: 48
font.weight: 600
font.family: "Titillium Web"
color: Constants.primaryTextColor
elide: Text.ElideRight
}
RowLayout {
id: label
width: parent.width
Label {
text: qsTr("Adjust a timer for specific room temperature")
font.pixelSize: 24
font.weight: 600
font.family: "Titillium Web"
color: Constants.accentTextColor
elide: Text.ElideRight
Layout.fillWidth: true
}
CustomComboBox {
model: roomsList
currentIndex: root.currentRoomIndex
onCurrentIndexChanged: root.currentRoomIndex = currentIndex
}
}
}
ScheduleScrollView {
id: scrollView
anchors.top: title.bottom
anchors.leftMargin: 28
width: internal.contentWidth
height: internal.contentHeight
}
ScheduleSwipeView {
id: swipeView
anchors.top: title.bottom
model: roomsList
width: internal.contentWidth
height: internal.contentHeight
visible: false
currentRoomIndex: root.currentRoomIndex
onCurrentRoomIndexChanged: root.currentRoomIndex = currentRoomIndex
}
QtObject {
id: internal
readonly property int contentHeight: root.height - title.height
- root.topPadding - root.bottomPadding
readonly property int contentWidth: root.width - root.rightPadding - root.leftPadding
}
states: [
State {
name: "desktopLayout"
when: Constants.isBigDesktopLayout || Constants.isSmallDesktopLayout
PropertyChanges {
target: root
leftPadding: 20
}
PropertyChanges {
target: header
font.pixelSize: 48
font.weight: 600
font.family: "Titillium Web"
visible: true
}
PropertyChanges {
target: label
visible: true
}
PropertyChanges {
target: scrollView
visible: true
}
PropertyChanges {
target: swipeView
visible: false
}
},
State {
name: "mobileLayout"
when: Constants.isMobileLayout
PropertyChanges {
target: root
leftPadding: 16
rightPadding: 16
}
PropertyChanges {
target: header
font.pixelSize: 24
font.weight: 600
font.family: "Titillium Web"
visible: true
}
PropertyChanges {
target: label
visible: false
}
PropertyChanges {
target: scrollView
visible: false
}
PropertyChanges {
target: swipeView
visible: true
}
},
State {
name: "smallLayout"
when: Constants.isSmallLayout
PropertyChanges {
target: root
leftPadding: 15
rightPadding: 15
}
PropertyChanges {
target: header
visible: false
}
PropertyChanges {
target: label
visible: false
}
PropertyChanges {
target: scrollView
visible: false
}
PropertyChanges {
target: swipeView
visible: true
}
}
]
}

8
examples/demos/thermostat/content/SideBar.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
SideBarForm {
}

220
examples/demos/thermostat/content/SideBarForm.ui.qml Normal file
View File

@ -0,0 +1,220 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Effects
import Thermostat
import CustomControls
Column {
id: root
property alias menuOptions: repeater.model
required property var roomsList
leftPadding: internal.leftPadding
spacing: internal.spacing
Repeater {
id: repeater
model: menuOptions
delegate: ItemDelegate {
id: columnItem
required property string name
required property string view
required property string iconSource
readonly property bool active: Constants.currentView === columnItem.view
width: column.width
height: column.height
background: Rectangle {
color: active ? "#2CDE85" : "transparent"
radius: 12
anchors.fill: parent
opacity: 0.1
}
Column {
id: column
padding: 0
Item {
id: menuItem
width: internal.delegateWidth
height: internal.delegateHeight
RowLayout {
anchors.fill: parent
anchors.leftMargin: internal.leftMargin
anchors.rightMargin: internal.rightMargin
spacing: 24
Item {
Layout.preferredWidth: internal.iconWidth
Layout.preferredHeight: internal.iconWidth
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Image {
id: icon
source: "images/" + columnItem.iconSource
sourceSize.width: internal.iconWidth
}
MultiEffect {
anchors.fill: icon
source: icon
colorization: 1
colorizationColor: Constants.iconColor
}
}
Label {
id: menuItemName
text: name
font.family: "Titillium Web"
font.pixelSize: 18
font.weight: 600
Layout.fillWidth: true
visible: internal.isNameVisible
color: Constants.primaryTextColor
}
Image {
source: "images/arrow.svg"
visible: !columnItem.active
&& internal.isNameVisible
}
}
}
ListView {
model: [qsTr("Dark/Light")]
width: internal.delegateWidth
height: 44
visible: (Constants.isBigDesktopLayout
|| Constants.isSmallDesktopLayout)
&& columnItem.active
&& columnItem.view == "SettingsView"
delegate: ItemDelegate {
id: item1
width: internal.delegateWidth
height: 44
RowLayout {
id: row
width: Constants.isBigDesktopLayout ? 190 : 18
spacing: 6
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
Image {
source: "images/theme.svg"
}
Label {
text: modelData
Layout.fillWidth: true
color: Constants.primaryTextColor
visible: internal.isNameVisible
}
}
Connections {
function onClicked() {
AppSettings.isDarkTheme = !AppSettings.isDarkTheme
}
}
}
}
}
Connections {
function onClicked() {
if (columnItem.view != "SettingsView"
&& columnItem.view != Constants.currentView) {
stackView.replace(columnItem.view + ".qml", {
"roomsList": roomsList
}, StackView.Immediate)
}
Constants.currentView = columnItem.view
}
}
}
}
states: [
State {
name: "bigDesktop"
when: Constants.isBigDesktopLayout
PropertyChanges {
target: internal
delegateWidth: 290
delegateHeight: 60
iconWidth: 34
isNameVisible: true
leftMargin: 31
rightMargin: 13
leftPadding: 5
spacing: 5
}
},
State {
name: "smallDesktop"
when: Constants.isSmallDesktopLayout
PropertyChanges {
target: internal
delegateWidth: 56
delegateHeight: 56
iconWidth: 34
isNameVisible: false
leftMargin: 0
rightMargin: 0
leftPadding: 5
spacing: 5
}
},
State {
name: "small"
when: Constants.isSmallLayout
PropertyChanges {
target: internal
delegateWidth: 24
delegateHeight: 24
iconWidth: 24
isNameVisible: false
leftMargin: 0
rightMargin: 0
leftPadding: 6
spacing: 12
}
}
]
QtObject {
id: internal
property int delegateWidth: 290
property int delegateHeight: 60
property int iconWidth: 34
property bool isNameVisible: true
property int leftMargin: 5
property int rightMargin: 13
property int leftPadding: 5
property int spacing: 5
}
}

8
examples/demos/thermostat/content/StatisticsScrollView.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
StatisticsScrollViewForm {
}

169
examples/demos/thermostat/content/StatisticsScrollViewForm.ui.qml Normal file
View File

@ -0,0 +1,169 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import CustomControls
import Thermostat
ScrollView {
id: scrollView
required property var model
property bool isOneColumn: false
property bool isBackgroundVisible: false
property int statisticsChartHeight: 647
property int statisticsChartWidth: 1098
property int delegateHeight: 182
property int delegateWidth: 350
clip: true
padding: 0
contentWidth: availableWidth
background: Rectangle {
color: Constants.accentColor
visible: scrollView.isBackgroundVisible
radius: 12
}
GridLayout {
id: grid
width: scrollView.width
height: scrollView.height
columns: scrollView.isOneColumn ? 1 : 3
rows: scrollView.isOneColumn ? 8 : 1
columnSpacing: 24
rowSpacing: scrollView.isOneColumn ? 12 : 24
Pane {
id: statistics
leftPadding: 53
rightPadding: 53
topPadding: 23
bottomPadding: 43
Layout.columnSpan: scrollView.isOneColumn ? 1 : 3
Layout.rowSpan: scrollView.isOneColumn ? 5 : 1
Layout.preferredHeight: scrollView.statisticsChartHeight
Layout.preferredWidth: scrollView.statisticsChartWidth
Layout.alignment: Qt.AlignHCenter
background: Rectangle {
radius: 12
color: Constants.accentColor
}
StatisticsChart {
id: statisticsChart
anchors.fill: parent
energyValuesModel: model.energyStats
tempValuesModel: model.tempStats
}
}
TemperatureInfo {
id: tempInfo
Layout.preferredHeight: scrollView.delegateHeight
Layout.preferredWidth: scrollView.delegateWidth
Layout.alignment: Qt.AlignHCenter
maxTempValue: statisticsChart.maxValue
minTempValue: statisticsChart.minValue
avgTempValue: statisticsChart.avgValue
}
HumidityInfo {
id: humidityInfo
Layout.preferredHeight: scrollView.delegateHeight
Layout.preferredWidth: scrollView.delegateWidth
Layout.alignment: Qt.AlignHCenter
humidityValuesModel: model.humidityStats
}
EnergyInfo {
id: energyInfo
Layout.preferredHeight: scrollView.delegateHeight
Layout.preferredWidth: scrollView.delegateWidth
Layout.alignment: Qt.AlignHCenter
energyValuesModel: model.energyStats
}
}
states: [
State {
name: "desktopLayout"
when: Constants.isBigDesktopLayout || Constants.isSmallDesktopLayout
PropertyChanges {
target: statistics
leftPadding: 53
rightPadding: 53
topPadding: 23
bottomPadding: 43
}
PropertyChanges {
target: scrollView
isBackgroundVisible: false
delegateWidth: 350
delegateHeight: 182
statisticsChartWidth: 1098
statisticsChartHeight: 647
}
},
State {
name: "mobileLayout"
when: Constants.isMobileLayout
PropertyChanges {
target: statistics
leftPadding: 0
rightPadding: 0
topPadding: 0
bottomPadding: 43
}
PropertyChanges {
target: scrollView
isBackgroundVisible: false
delegateWidth: 327
delegateHeight: 100
statisticsChartWidth: 327
statisticsChartHeight: 383
}
},
State {
name: "smallLayout"
when: Constants.isSmallLayout
PropertyChanges {
target: statistics
leftPadding: 0
rightPadding: 0
topPadding: 0
bottomPadding: 43
}
PropertyChanges {
target: scrollView
isBackgroundVisible: true
delegateWidth: 332
delegateHeight: 80
statisticsChartWidth: 401
statisticsChartHeight: 280
}
}
]
}

8
examples/demos/thermostat/content/StatisticsStackView.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
StatisticsStackViewForm {
}

39
examples/demos/thermostat/content/StatisticsStackViewForm.ui.qml Normal file
View File

@ -0,0 +1,39 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Layouts
Item {
id: root
property alias model: repeater.model
property bool isOneColumn: false
property int currentRoomIndex
StackLayout {
anchors.fill: parent
currentIndex: root.currentRoomIndex
Repeater {
id: repeater
StatisticsScrollView {
required property int index
width: root.width
height: root.height
isOneColumn: root.isOneColumn
}
}
}
}

8
examples/demos/thermostat/content/StatisticsSwipeView.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
StatisticsSwipeViewForm {
}

79
examples/demos/thermostat/content/StatisticsSwipeViewForm.ui.qml Normal file
View File

@ -0,0 +1,79 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
Item {
id: root
property alias model: repeater.model
property alias swipeView: swipeView
property alias currentRoomIndex: swipeView.currentIndex
property bool isOneColumn: false
ListView {
id: roomSelector
model: root.model
width: root.width
height: 28
spacing: 26
orientation: ListView.Horizontal
delegate: Label {
id: labelDelegate
required property string name
required property int index
readonly property bool isActive: swipeView.currentIndex === index
text: name
font.pixelSize: 12
font.family: "Titillium Web"
font.weight: 400
font.bold: isActive
font.underline: isActive
color: isActive ? "#2CDE85" : "#898989"
MouseArea {
anchors.fill: parent
Connections {
function onClicked() {
swipeView.setCurrentIndex(labelDelegate.index)
}
}
}
}
}
SwipeView {
id: swipeView
height: root.height - roomSelector.height + 13
width: root.width
anchors.top: roomSelector.bottom
anchors.horizontalCenter: parent.horizontalCenter
spacing: 7
clip: true
Repeater {
id: repeater
StatisticsScrollView {
width: swipeView.width
height: swipeView.height
isOneColumn: root.isOneColumn
}
}
}
}

8
examples/demos/thermostat/content/StatisticsView.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
StatisticsViewForm {
}

188
examples/demos/thermostat/content/StatisticsViewForm.ui.qml Normal file
View File

@ -0,0 +1,188 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Thermostat
import CustomControls
Pane {
id: root
leftPadding: 20
rightPadding: 20
bottomPadding: 15
property int currentRoomIndex: 0
required property var roomsList
background: Rectangle {
color: Constants.backgroundColor
}
Column {
id: title
width: parent.width
Label {
id: header
text: qsTr("Statistics")
font: Constants.desktopTitleFont
color: Constants.primaryTextColor
elide: Text.ElideRight
}
RowLayout {
id: label
width: parent.width
Label {
text: qsTr("Overview of your home's temperature and energy usage")
font: Constants.desktopSubtitleFont
color: Constants.accentTextColor
elide: Text.ElideRight
Layout.fillWidth: true
}
CustomComboBox {
id: comboBox
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
model: roomsList
currentIndex: root.currentRoomIndex
onCurrentIndexChanged: root.currentRoomIndex = currentIndex
}
}
}
StatisticsStackView {
id: scrollView
anchors.top: title.bottom
anchors.topMargin: 12
anchors.leftMargin: 28
width: internal.contentWidth
height: internal.contentHeight
isOneColumn: internal.isOneColumn
model: roomsList
currentRoomIndex: root.currentRoomIndex
}
StatisticsSwipeView {
id: swipeView
anchors.top: title.bottom
model: roomsList
width: internal.contentWidth
height: internal.contentHeight
isOneColumn: internal.isOneColumn
currentRoomIndex: root.currentRoomIndex
onCurrentRoomIndexChanged: root.currentRoomIndex = currentRoomIndex
visible: false
}
QtObject {
id: internal
readonly property int contentHeight: root.height - title.height
- root.topPadding - root.bottomPadding
readonly property int contentWidth: root.width - root.rightPadding - root.leftPadding
readonly property bool isOneColumn: contentWidth < 900
}
states: [
State {
name: "desktopLayout"
when: Constants.isBigDesktopLayout || Constants.isSmallDesktopLayout
PropertyChanges {
target: header
font.pixelSize: 48
font.weight: 600
font.family: "Titillium Web"
}
PropertyChanges {
target: label
visible: true
}
PropertyChanges {
target: root
leftPadding: 20
}
PropertyChanges {
target: scrollView
visible: true
}
PropertyChanges {
target: swipeView
visible: false
}
},
State {
name: "mobileLayout"
when: Constants.isMobileLayout
PropertyChanges {
target: header
font.pixelSize: 24
font.weight: 600
font.family: "Titillium Web"
}
PropertyChanges {
target: label
visible: false
}
PropertyChanges {
target: root
leftPadding: 16
rightPadding: 16
}
PropertyChanges {
target: scrollView
visible: false
}
PropertyChanges {
target: swipeView
visible: true
}
},
State {
name: "smallLayout"
when: Constants.isSmallLayout
PropertyChanges {
target: header
visible: false
}
PropertyChanges {
target: label
visible: false
}
PropertyChanges {
target: root
leftPadding: 15
rightPadding: 15
topPadding: 3
}
PropertyChanges {
target: scrollView
visible: false
}
PropertyChanges {
target: swipeView
visible: true
}
}
]
}

8
examples/demos/thermostat/content/TemperatureInfo.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
TemperatureInfoForm {
}

26
examples/demos/thermostat/content/TemperatureInfoForm.ui.qml Normal file
View File

@ -0,0 +1,26 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
ThermostatInfo {
property real maxTempValue: 26
property real minTempValue: 18
property real avgTempValue: 22
title: qsTr("Temperature")
leftIcon: "images/temperature"
topLabel: qsTr("Avarage: %1°C".arg(avgTempValue))
bottomLeftLabel: qsTr("Minimum: %1°C".arg(minTempValue))
bottomLeftIcon: "images/minTemp.svg"
bottomRightLabel: qsTr("Maximum: %1°C".arg(maxTempValue))
bottomRightIcon: "images/maxTemp.svg"
}

8
examples/demos/thermostat/content/TemperatureSetter.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
TemperatureSetterForm {
}

8
examples/demos/thermostat/content/TemperatureSetterDesktopView.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
TemperatureSetterDesktopViewForm {
}

156
examples/demos/thermostat/content/TemperatureSetterDesktopViewForm.ui.qml Normal file
View File

@ -0,0 +1,156 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Effects
import Thermostat
import CustomControls
Pane {
width: 1087
height: 427
topPadding: 30
bottomPadding: 24
leftPadding: 16
rightPadding: 36
background: Rectangle {
color: Constants.accentColor
radius: 12
}
Row {
id: row1
width: parent.width
height: 70
spacing: 80
Row {
anchors.verticalCenter: parent.verticalCenter
spacing: 24
Item {
width: internal.iconSize
height: internal.iconSize
Image {
id: icon
source: "images/temperature.svg"
sourceSize.width: internal.iconSize
sourceSize.height: internal.iconSize
}
MultiEffect {
anchors.fill: icon
source: icon
colorization: 1
colorizationColor: Constants.iconColor
}
}
Label {
font.pixelSize: internal.fontSize
font.weight: 600
font.family: "Titillium Web"
text: qsTr("Set Temperature :")
color: Constants.primaryTextColor
}
}
CustomTextField {
anchors.verticalCenter: parent.verticalCenter
text: slider.value
onAccepted: slider.value = +text
}
CustomSlider {
id: slider
anchors.bottom: parent.bottom
}
}
Column {
anchors.verticalCenter: parent.verticalCenter
spacing: 50
Row {
id: row
spacing: 70
Label {
font.pixelSize: 24
font.weight: 600
font.family: "Titillium Web"
text: qsTr("Mode")
anchors.verticalCenter: parent.verticalCenter
color: Constants.primaryTextColor
}
Repeater {
model: [qsTr("Heating"), qsTr("Cooling"), qsTr("Auto")]
CustomRadioButton {
text: modelData
indicatorSize: 20
}
}
}
Row {
spacing: 24
Label {
font.pixelSize: 24
font.weight: 600
font.family: "Titillium Web"
text: qsTr("Repeat")
anchors.verticalCenter: parent.verticalCenter
color: Constants.primaryTextColor
}
Repeater {
model: [qsTr("Mon"), qsTr("Tue"), qsTr("Wed"), qsTr(
"Thu"), qsTr("Fri"), qsTr("Sat"), qsTr("Sun")]
CustomRoundButton {
text: modelData
width: 90
height: 50
radius: 12
font.pixelSize: 24
}
}
}
}
Row {
anchors.bottom: parent.bottom
anchors.right: parent.right
spacing: 24
Repeater {
model: [qsTr("Cancel"), qsTr("Save")]
CustomRoundButton {
width: 120
height: 48
text: modelData
radius: 12
contentColor: "#2CDE85"
checkable: false
font.pixelSize: 14
}
}
}
QtObject {
id: internal
property int fontSize: 24
property int topMargin: 67
property int iconSize: 34
}
}

91
examples/demos/thermostat/content/TemperatureSetterForm.ui.qml Normal file
View File

@ -0,0 +1,91 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Thermostat
import CustomControls
Pane {
width: 1087
height: 361
padding: 0
background: Rectangle {
color: Constants.accentColor
radius: 12
}
TemperatureSetterDesktopView {
id: desktopView
}
TemperatureSetterMobileView {
id: mobileView
visible: false
}
TemperatureSetterSmallView {
id: smallView
visible: false
}
states: [
State {
name: "desktopLayout"
when: Constants.isBigDesktopLayout || Constants.isSmallDesktopLayout
PropertyChanges {
target: desktopView
visible: true
}
PropertyChanges {
target: mobileView
visible: false
}
PropertyChanges {
target: smallView
visible: false
}
},
State {
name: "mobileLayout"
when: Constants.isMobileLayout
PropertyChanges {
target: desktopView
visible: false
}
PropertyChanges {
target: mobileView
visible: true
}
PropertyChanges {
target: smallView
visible: false
}
},
State {
name: "smallLayout"
when: Constants.isSmallLayout
PropertyChanges {
target: desktopView
visible: false
}
PropertyChanges {
target: mobileView
visible: false
}
PropertyChanges {
target: smallView
visible: true
}
}
]
}

8
examples/demos/thermostat/content/TemperatureSetterMobileView.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
TemperatureSetterMobileViewForm {
}

154
examples/demos/thermostat/content/TemperatureSetterMobileViewForm.ui.qml Normal file
View File

@ -0,0 +1,154 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Effects
import Thermostat
import CustomControls
Pane {
width: 329
height: 527
topPadding: 16
bottomPadding: 19
background: Rectangle {
color: Constants.accentColor
radius: 12
}
ColumnLayout {
anchors.fill: parent
spacing: 15
Row {
spacing: 10
Item {
width: 24
height: 24
Image {
id: icon
source: "images/temperature.svg"
sourceSize.width: 24
sourceSize.height: 24
}
MultiEffect {
anchors.fill: icon
source: icon
colorization: 1
colorizationColor: Constants.iconColor
}
}
Label {
font.pixelSize: 18
font.weight: 600
font.family: "Titillium Web"
text: qsTr("Set Temperature :")
color: Constants.primaryTextColor
}
}
CustomTextField {
width: 102
height: 40
font.pixelSize: 14
text: slider.value
onAccepted: slider.value = +text
}
Item {
id: item1
Layout.fillWidth: true
Layout.fillHeight: true
CustomSlider {
id: slider
width: parent.width
anchors.bottom: parent.bottom
}
}
Column {
Label {
font.pixelSize: 18
font.weight: 600
font.family: "Titillium Web"
text: qsTr("Mode")
color: Constants.primaryTextColor
}
Repeater {
model: [qsTr("Heating"), qsTr("Cooling"), qsTr("Auto")]
CustomRadioButton {
text: modelData
font.pixelSize: 14
indicatorSize: 14
}
}
}
ColumnLayout {
spacing: 12
Label {
font.pixelSize: 18
font.weight: 600
font.family: "Titillium Web"
text: qsTr("Repeat")
color: Constants.primaryTextColor
}
RowLayout {
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Layout.fillWidth: true
spacing: 24
Repeater {
id: repeater
model: [qsTr("MO"), qsTr("TU"), qsTr("WE"), qsTr(
"TH"), qsTr("FR"), qsTr("SA"), qsTr("SU")]
Label {
property bool checked: false
text: modelData
Layout.fillWidth: true
height: 21
font.pixelSize: 14
horizontalAlignment: Text.AlignHCenter
color: checked ? "#2CDE85" : Constants.primaryTextColor
TapHandler {
onTapped: parent.checked = !parent.checked
}
}
}
}
}
ColumnLayout {
Layout.fillWidth: true
spacing: 8
Repeater {
model: [qsTr("Cancel"), qsTr("Save")]
CustomRoundButton {
height: 45
Layout.fillWidth: true
text: modelData
radius: 12
contentColor: "#2CDE85"
checkable: false
font.pixelSize: 14
}
}
}
}
}

8
examples/demos/thermostat/content/TemperatureSetterSmallView.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
TemperatureSetterSmallViewForm {
}

189
examples/demos/thermostat/content/TemperatureSetterSmallViewForm.ui.qml Normal file
View File

@ -0,0 +1,189 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Effects
import Thermostat
import CustomControls
Pane {
width: 400
height: 370
topPadding: 16
bottomPadding: 19
background: Rectangle {
color: Constants.accentColor
radius: 12
}
Frame {
id: frame
height: 260
width: 332
anchors.horizontalCenter: parent.horizontalCenter
ColumnLayout {
anchors.fill: parent
RowLayout {
width: parent.width
Row {
id: row
Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
Layout.fillWidth: true
spacing: 10
Item {
width: 15
height: 15
anchors.verticalCenter: parent.verticalCenter
Image {
id: icon
source: "images/temperature.svg"
sourceSize.width: 15
sourceSize.height: 15
}
MultiEffect {
anchors.fill: icon
source: icon
colorization: 1
colorizationColor: Constants.iconColor
}
}
Label {
font.pixelSize: 14
font.weight: 600
font.family: "Titillium Web"
text: qsTr("Set Temperature :")
color: Constants.primaryTextColor
}
}
CustomTextField {
width: 102
height: 40
font.pixelSize: 14
text: slider.value
onAccepted: slider.value = +text
}
}
Item {
id: item1
Layout.fillWidth: true
Layout.fillHeight: true
CustomSlider {
id: slider
width: parent.width
anchors.bottom: parent.bottom
}
}
ColumnLayout {
spacing: 0
Label {
font.pixelSize: 14
font.weight: 600
font.family: "Titillium Web"
text: qsTr("Mode")
color: Constants.primaryTextColor
}
RowLayout {
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Layout.fillWidth: true
Layout.leftMargin: 50
spacing: 16
Repeater {
model: [qsTr("Heating"), qsTr("Cooling"), qsTr("Auto")]
CustomRadioButton {
text: modelData
font.pixelSize: 14
indicatorSize: 14
topPadding: 0
bottomPadding: 0
}
}
}
}
ColumnLayout {
spacing: 0
Label {
font.pixelSize: 14
font.weight: 600
font.family: "Titillium Web"
text: qsTr("Repeat")
color: Constants.primaryTextColor
}
RowLayout {
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
Layout.fillWidth: true
Layout.leftMargin: 50
spacing: 16
Repeater {
id: repeater
model: [qsTr("MO"), qsTr("TU"), qsTr("WE"), qsTr(
"TH"), qsTr("FR"), qsTr("SA"), qsTr("SU")]
Label {
property bool checked: false
text: modelData
Layout.fillWidth: true
height: 21
font.pixelSize: 14
horizontalAlignment: Text.AlignHCenter
color: checked ? "#2CDE85" : Constants.primaryTextColor
TapHandler {
onTapped: parent.checked = !parent.checked
}
}
}
}
}
}
}
Row {
anchors.top: frame.bottom
anchors.right: frame.right
anchors.topMargin: 16
spacing: 17
Repeater {
model: [qsTr("Cancel"), qsTr("Save")]
CustomRoundButton {
width: 78
height: 38
text: modelData
radius: 8
contentColor: "#2CDE85"
checkable: false
font.pixelSize: 14
display: AbstractButton.TextOnly
}
}
}
}

8
examples/demos/thermostat/content/ThermostatInfo.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
ThermostatInfoForm {
}

258
examples/demos/thermostat/content/ThermostatInfoForm.ui.qml Normal file
View File

@ -0,0 +1,258 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Effects
import Thermostat
import CustomControls
Pane {
id: root
property alias title: title.text
property alias leftIcon: icon.source
property alias rightIcon: icon2.source
property alias topLabel: topLabel.text
property alias bottomLeftIcon: bottomLeftIcon.source
property alias bottomRightIcon: bottomRightIcon.source
property alias bottomLeftLabel: bottomLeftLabel.text
property alias bottomRightLabel: bottomRightLabel.text
topPadding: 20
leftPadding: 16
rightPadding: 16
bottomPadding: 14
width: 350
height: 182
background: Rectangle {
radius: 12
color: Constants.accentColor
border.color: Constants.isSmallLayout ? "#D9D9D9" : "transparent"
}
Column {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
spacing: internal.columnSpacing
RowLayout {
anchors.left: parent.left
anchors.right: parent.right
spacing: internal.rowSpacing
Item {
id: iconItem
Layout.preferredWidth: icon.sourceSize.width
Layout.preferredHeight: icon.sourceSize.height
Image {
id: icon
source: "images/schedule.svg"
}
MultiEffect {
anchors.fill: icon
source: icon
colorization: 1
colorizationColor: Constants.iconColor
}
}
Label {
id: title
text: qsTr("Room Schedule")
font.weight: 600
font.pixelSize: 24
font.family: "Titillium Web"
color: Constants.primaryTextColor
Layout.fillWidth: true
}
Image {
id: icon2
}
}
Column {
leftPadding: internal.infoLeftPadding
spacing: internal.infoSpacing
width: parent.width
Label {
id: topLabel
text: qsTr("Afternoon: 21°C (12pm-5pm)")
font.pixelSize: internal.infoFontSize
font.bold: true
font.family: "Titillium Web"
color: Constants.primaryTextColor
}
RowLayout {
spacing: 32
Row {
spacing: 10
Image {
id: bottomLeftIcon
}
Label {
id: bottomLeftLabel
text: qsTr("Night: 25°C (10pm-6am)")
font.pixelSize: internal.infoFontSize
font.weight: 600
font.family: "Titillium Web"
color: Constants.primaryTextColor
}
}
Row {
spacing: 10
Image {
id: bottomRightIcon
}
Label {
id: bottomRightLabel
font.pixelSize: internal.infoFontSize
font.weight: 600
font.family: "Titillium Web"
color: Constants.primaryTextColor
}
}
}
}
}
QtObject {
id: internal
property int rowSpacing: 24
property int columnSpacing: 24
property int infoSpacing: 8
property int infoFontSize: 14
property int infoLeftPadding: 14
}
states: [
State {
name: "desktopLayout"
when: Constants.isBigDesktopLayout || Constants.isSmallDesktopLayout
PropertyChanges {
target: internal
rowSpacing: 24
columnSpacing: 16
infoSpacing: 16
infoFontSize: 14
infoLeftPadding: 0
}
PropertyChanges {
target: icon
sourceSize.width: 34
sourceSize.height: 34
}
PropertyChanges {
target: icon2
sourceSize.width: 20
sourceSize.height: 20
}
PropertyChanges {
target: title
font.pixelSize: 24
}
PropertyChanges {
target: root
topPadding: 20
leftPadding: 16
rightPadding: 16
bottomPadding: 14
}
},
State {
name: "mobileLayout"
when: Constants.isMobileLayout
PropertyChanges {
target: internal
rowSpacing: 9
columnSpacing: 11
infoSpacing: 5
infoFontSize: 12
infoLeftPadding: 10
}
PropertyChanges {
target: icon
sourceSize.width: 20
sourceSize.height: 20
}
PropertyChanges {
target: icon2
sourceSize.width: 15
sourceSize.height: 15
}
PropertyChanges {
target: title
font.pixelSize: 14
}
PropertyChanges {
target: root
topPadding: 10
leftPadding: 7
rightPadding: 16
bottomPadding: 8
}
},
State {
name: "smallLayout"
when: Constants.isSmallLayout
PropertyChanges {
target: internal
rowSpacing: 5
infoFontSize: 12
columnSpacing: 3
infoSpacing: 4
infoLeftPadding: 13
}
PropertyChanges {
target: icon
sourceSize.width: 15
sourceSize.height: 15
}
PropertyChanges {
target: icon2
sourceSize.width: 15
sourceSize.height: 15
}
PropertyChanges {
target: title
font.pixelSize: 14
}
PropertyChanges {
target: root
topPadding: 4
leftPadding: 5
rightPadding: 10
bottomPadding: 14
}
}
]
}

8
examples/demos/thermostat/content/ThermostatScrollView.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
ThermostatScrollViewForm {
}

120
examples/demos/thermostat/content/ThermostatScrollViewForm.ui.qml Normal file
View File

@ -0,0 +1,120 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Thermostat
ScrollView {
id: root
clip: true
contentWidth: availableWidth
property alias thermoSettings: thermoSettings
property alias roomName: thermoSettings.roomNameText
property alias roomIcon: thermoSettings.roomIconSource
property alias isActive: thermoSettings.isActive
property bool isOneColumn
property int thermostatControlHeight
property int thermostatControlWidth
property int delegateHeight
property int delegateWidth
background: Rectangle {
color: Constants.isSmallLayout ? Constants.accentColor : "transparent"
radius: 12
}
GridLayout {
id: grid
width: root.width
height: root.height
columns: root.isOneColumn ? 1 : 3
rows: root.isOneColumn ? 10 : 1
columnSpacing: 24
rowSpacing: root.isOneColumn ? 12 : 24
ThermostatSettings {
id: thermoSettings
Layout.columnSpan: root.isOneColumn ? 1 : 3
Layout.rowSpan: root.isOneColumn ? 7 : 1
Layout.preferredHeight: root.thermostatControlHeight
Layout.preferredWidth: root.thermostatControlWidth
Layout.alignment: Qt.AlignHCenter
model: root.model
onIsActiveChanged: root.model.active = isActive
}
ThermostatInfo {
Layout.preferredHeight: root.delegateHeight
Layout.preferredWidth: root.delegateWidth
Layout.alignment: Qt.AlignHCenter
}
HumidityInfo {
Layout.preferredHeight: root.delegateHeight
Layout.preferredWidth: root.delegateWidth
Layout.alignment: Qt.AlignHCenter
humidityValuesModel: root.model.humidityStats
}
EnergyInfo {
Layout.preferredHeight: root.delegateHeight
Layout.preferredWidth: root.delegateWidth
Layout.alignment: Qt.AlignHCenter
energyValuesModel: root.model.energyStats
}
}
states: [
State {
name: "desktopLayout"
when: Constants.isBigDesktopLayout || Constants.isSmallDesktopLayout
PropertyChanges {
target: root
thermostatControlHeight: 673
thermostatControlWidth: 1094
delegateHeight: 182
delegateWidth: 350
}
},
State {
name: "mobileLayout"
when: Constants.isMobileLayout
PropertyChanges {
target: root
delegateWidth: 327
delegateHeight: 100
thermostatControlHeight: 694
thermostatControlWidth: 327
}
},
State {
name: "smallLayout"
when: Constants.isSmallLayout
PropertyChanges {
target: root
delegateWidth: 332
delegateHeight: 80
thermostatControlHeight: 250
thermostatControlWidth: 400
}
}
]
}

8
examples/demos/thermostat/content/ThermostatSettings.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
ThermostatSettingsForm {
buttonGroup.onClicked: (button) => model.mode = button.text
}

322
examples/demos/thermostat/content/ThermostatSettingsForm.ui.qml Normal file
View File

@ -0,0 +1,322 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import QtQuick.Effects
import CustomControls
import Thermostat
Pane {
id: root
required property var model
property alias buttonGroup: buttonGroup
property alias powerButton: powerButton
property alias powerToggle: powerToggle
property alias roomIconSource: roomIcon.source
property alias roomNameText: roomName.text
property bool isActive: false
padding: 0
background: Rectangle {
color: Constants.accentColor
radius: 12
}
Row {
anchors.left: parent.left
anchors.top: parent.top
anchors.leftMargin: internal.leftMargin
anchors.topMargin: internal.topMargin
spacing: internal.headerSpacing
Item {
width: internal.iconSize
height: internal.iconSize
Image {
id: roomIcon
source: "images/living_room.svg"
sourceSize.width: internal.iconSize
sourceSize.height: internal.iconSize
}
MultiEffect {
anchors.fill: roomIcon
source: roomIcon
colorization: 1
colorizationColor: Constants.iconColor
}
}
Label {
id: roomName
text: qsTr("Living room")
font.pixelSize: internal.headerSize
font.weight: 600
font.family: "Titillium Web"
color: Constants.primaryTextColor
}
}
CustomSwitch {
id: powerToggle
anchors.right: parent.right
anchors.top: parent.top
anchors.topMargin: 12
anchors.rightMargin: 12
checked: root.isActive
Connections {
function onCheckedChanged() {
root.isActive = powerToggle.checked
}
}
}
ThermostatControl {
id: thermostat
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: internal.thermostatTopMargin
enabled: root.isActive
currentTemp: root.model.temp
targetTemp: root.model.thermostatTemp
onTargetTempChanged: root.model.thermostatTemp = targetTemp
}
ButtonGroup {
id: buttonGroup
}
Column {
id: leftButtons
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 100
spacing: 25
Repeater {
model: [qsTr("Cool"), qsTr("Fan"), qsTr("Auto")]
CustomRoundButton {
width: internal.buttonWidth
height: internal.buttonHeight
text: modelData
font.pixelSize: 18
icon.source: "images/" + modelData
icon.width: internal.optionIconSize
icon.height: internal.optionIconSize
LayoutMirroring.enabled: true
radius: internal.radius
ButtonGroup.group: buttonGroup
enabled: root.isActive
checked: enabled && root.model.mode == modelData
}
}
}
Column {
id: rightButtons
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 100
spacing: 25
Repeater {
model: [qsTr("Heat"), qsTr("Dry"), qsTr("Eco")]
CustomRoundButton {
width: internal.buttonWidth
height: internal.buttonHeight
text: modelData
font.pixelSize: 18
icon.source: "images/" + modelData
icon.width: internal.optionIconSize
icon.height: internal.optionIconSize
radius: internal.radius
ButtonGroup.group: buttonGroup
enabled: root.isActive
checked: enabled && root.model.mode == modelData
}
}
}
CustomRoundButton {
id: powerButton
height: 80
width: 80
radius: 65
text: qsTr("Power")
font.pixelSize: 18
icon.source: "images/power.svg"
icon.width: 40
icon.height: 40
display: AbstractButton.IconOnly
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 50
checked: root.isActive
Connections {
function onCheckedChanged() {
root.isActive = powerButton.checked
}
}
}
QtObject {
id: internal
property int buttonWidth: 130
property int buttonHeight: 66
property int radius: 20
property int leftMargin: 20
property int topMargin: 16
property int iconSize: 34
property int optionIconSize: 42
property int headerSpacing: 24
property int headerSize: 24
property int thermostatTopMargin: 14
}
states: [
State {
name: "desktopLayout"
when: Constants.isBigDesktopLayout || Constants.isSmallDesktopLayout
PropertyChanges {
target: internal
buttonHeight: 66
buttonWidth: 130
radius: 20
leftMargin: 20
topMargin: 16
iconSize: 34
optionIconSize: 42
headerSpacing: 24
headerSize: 24
thermostatTopMargin: 14
}
PropertyChanges {
target: powerButton
width: 80
height: 80
radius: 40
visible: true
anchors.bottomMargin: 50
icon.width: 40
icon.height: 40
}
PropertyChanges {
target: powerToggle
visible: false
}
},
State {
name: "mobileLayout"
when: Constants.isMobileLayout
PropertyChanges {
target: internal
buttonHeight: 50
buttonWidth: 110
radius: 12
leftMargin: 16
topMargin: 16
iconSize: 24
optionIconSize: 30
headerSpacing: 16
headerSize: 18
thermostatTopMargin: 60
}
PropertyChanges {
target: leftButtons
anchors.leftMargin: 46 - root.leftPadding
spacing: 14
}
AnchorChanges {
target: leftButtons
anchors.verticalCenter: undefined
anchors.top: thermostat.bottom
}
PropertyChanges {
target: rightButtons
anchors.rightMargin: 46 - root.rightPadding
spacing: 14
}
AnchorChanges {
target: rightButtons
anchors.verticalCenter: undefined
anchors.top: thermostat.bottom
}
PropertyChanges {
target: powerButton
width: 60
height: 60
radius: 30
visible: true
anchors.bottomMargin: 32
icon.width: 30
icon.height: 30
}
PropertyChanges {
target: powerToggle
visible: false
}
},
State {
name: "smallLayout"
when: Constants.isSmallLayout
PropertyChanges {
target: internal
buttonHeight: 42
buttonWidth: 42
radius: 21
leftMargin: 14
topMargin: 11
iconSize: 24
optionIconSize: 24
headerSpacing: 12
headerSize: 18
thermostatTopMargin: 19
}
PropertyChanges {
target: powerButton
visible: false
}
PropertyChanges {
target: leftButtons
anchors.leftMargin: 14
spacing: 9
}
AnchorChanges {
target: leftButtons
anchors.verticalCenter: thermostat.verticalCenter
anchors.top: undefined
}
PropertyChanges {
target: rightButtons
anchors.rightMargin: 14
spacing: 9
}
AnchorChanges {
target: rightButtons
anchors.verticalCenter: thermostat.verticalCenter
anchors.top: undefined
}
PropertyChanges {
target: powerToggle
visible: true
}
}
]
}

8
examples/demos/thermostat/content/ThermostatStackView.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
ThermostatStackViewForm {
}

44
examples/demos/thermostat/content/ThermostatStackViewForm.ui.qml Normal file
View File

@ -0,0 +1,44 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Layouts
Item {
id: root
property bool isOneColumn: false
property var model
property int currentRoomIndex
StackLayout {
anchors.fill: parent
currentIndex: currentRoomIndex
Repeater {
id: repeater
model: root.model
ThermostatScrollView {
id: delegate
required property string name
required property var model
width: root.width
height: root.height
isOneColumn: root.isOneColumn
roomName: name
isActive: model.active
}
}
}
}

8
examples/demos/thermostat/content/ThermostatSwipeView.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
ThermostatSwipeViewForm {
}

86
examples/demos/thermostat/content/ThermostatSwipeViewForm.ui.qml Normal file
View File

@ -0,0 +1,86 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
Item {
id: root
property alias swipe: swipeView
property alias currentRoomIndex: swipeView.currentIndex
property var model
property bool isOneColumn: false
ListView {
id: roomSelector
model: root.model
orientation: ListView.Horizontal
width: root.width
height: 28
spacing: 26
delegate: Label {
id: labelDelegate
required property string name
required property int index
text: name
font.pixelSize: 12
font.family: "Titillium Web"
font.weight: 400
font.bold: swipeView.currentIndex === index
font.underline: swipeView.currentIndex === index
color: swipeView.currentIndex === index ? "#2CDE85" : "#898989"
MouseArea {
anchors.fill: parent
Connections {
function onClicked() {
swipeView.setCurrentIndex(labelDelegate.index)
}
}
}
}
}
SwipeView {
id: swipeView
height: root.height - roomSelector.height + 13
width: root.width
anchors.top: roomSelector.bottom
anchors.horizontalCenter: parent.horizontalCenter
spacing: 7
clip: true
Repeater {
id: repeater
model: root.model
ThermostatScrollView {
id: delegate
required property int index
required property string name
required property bool active
required property var model
width: swipeView.width
height: swipeView.height
isOneColumn: root.isOneColumn
roomName: name
isActive: model.active
}
}
}
}

8
examples/demos/thermostat/content/ThermostatView.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
ThermostatViewForm {
}

184
examples/demos/thermostat/content/ThermostatViewForm.ui.qml Normal file
View File

@ -0,0 +1,184 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Thermostat
import CustomControls
Pane {
id: root
leftPadding: 20
rightPadding: 20
bottomPadding: 15
property int currentRoomIndex: 0
required property var roomsList
background: Rectangle {
color: Constants.backgroundColor
}
QtObject {
id: internal
readonly property int contentHeight: root.height - title.height
- root.topPadding - root.bottomPadding
readonly property int contentWidth: root.width - root.rightPadding - root.leftPadding
readonly property bool isOneColumn: contentWidth < 900
}
Column {
id: title
width: parent.width
Label {
id: header
text: qsTr("Thermostat Control")
font.pixelSize: 48
font.weight: 600
font.family: "Titillium Web"
color: Constants.primaryTextColor
elide: Text.ElideRight
}
RowLayout {
id: label
width: parent.width
Label {
text: qsTr("Adjust your thermostat settings")
font.pixelSize: 24
font.weight: 600
font.family: "Titillium Web"
color: Constants.accentTextColor
elide: Text.ElideRight
Layout.fillWidth: true
}
CustomComboBox {
model: roomsList
currentIndex: root.currentRoomIndex
onCurrentIndexChanged: root.currentRoomIndex = currentIndex
}
}
}
ThermostatStackView {
id: scrollView
anchors.top: title.bottom
anchors.topMargin: 12
anchors.leftMargin: 28
width: internal.contentWidth
height: internal.contentHeight
isOneColumn: internal.isOneColumn
model: roomsList
currentRoomIndex: root.currentRoomIndex
}
ThermostatSwipeView {
id: swipeView
anchors.top: title.bottom
anchors.leftMargin: 28
width: internal.contentWidth
height: internal.contentHeight
isOneColumn: internal.isOneColumn
currentRoomIndex: root.currentRoomIndex
model: roomsList
swipe.onCurrentIndexChanged: root.currentRoomIndex = swipe.currentIndex
}
states: [
State {
name: "desktopLayout"
when: Constants.isBigDesktopLayout || Constants.isSmallDesktopLayout
PropertyChanges {
target: header
font.pixelSize: 48
font.weight: 600
font.family: "Titillium Web"
}
PropertyChanges {
target: label
visible: true
}
PropertyChanges {
target: root
leftPadding: 20
}
PropertyChanges {
target: scrollView
visible: true
}
PropertyChanges {
target: swipeView
visible: false
}
},
State {
name: "mobileLayout"
when: Constants.isMobileLayout
PropertyChanges {
target: header
font.pixelSize: 24
font.weight: 600
font.family: "Titillium Web"
}
PropertyChanges {
target: label
visible: false
}
PropertyChanges {
target: root
leftPadding: 16
rightPadding: 16
}
PropertyChanges {
target: scrollView
visible: false
}
PropertyChanges {
target: swipeView
visible: true
}
},
State {
name: "smallLayout"
when: Constants.isSmallLayout
PropertyChanges {
target: header
visible: false
}
PropertyChanges {
target: label
visible: false
}
PropertyChanges {
target: root
leftPadding: 15
rightPadding: 15
}
PropertyChanges {
target: scrollView
visible: false
}
PropertyChanges {
target: swipeView
visible: true
}
}
]
}

8
examples/demos/thermostat/content/TimeSchedule.qml Normal file
View File

@ -0,0 +1,8 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQuick
TimeScheduleForm {
}

104
examples/demos/thermostat/content/TimeScheduleForm.ui.qml Normal file
View File

@ -0,0 +1,104 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*
This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
It is supposed to be strictly declarative and only uses a subset of QML. If you edit
this file manually, you might introduce QML code that is not supported by Qt Design Studio.
Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
*/
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Thermostat
import CustomControls
Pane {
width: 1087
height: 361
topPadding: internal.topPadding
background: Rectangle {
color: Constants.accentColor
radius: 12
}
RowLayout {
width: parent.width
Label {
font.pixelSize: internal.fontSize
font.weight: 600
font.family: "Titillium Web"
text: qsTr("Set Time :")
Layout.fillWidth: true
color: Constants.primaryTextColor
}
Button {
text: "Select Date"
}
}
TimeSelector {
id: timeSelector
anchors.top: parent.top
anchors.topMargin: internal.topMargin
anchors.horizontalCenter: parent.horizontalCenter
}
Label {
anchors.top: timeSelector.bottom
anchors.left: timeSelector.left
anchors.topMargin: internal.labelMargin
color: Constants.accentTextColor
text: qsTr("Click on a block to set the whole hour")
font.pixelSize: 14
font.weight: 400
font.family: "Titillium Web"
}
QtObject {
id: internal
property int fontSize: 24
property int topMargin: 67
property int topPadding: 20
property int labelMargin: 12
}
states: [
State {
name: "desktopLayout"
when: Constants.isBigDesktopLayout || Constants.isSmallDesktopLayout
PropertyChanges {
target: internal
topMargin: 67
topPadding: 20
fontSize: 24
labelMargin: 12
}
},
State {
name: "mobileLayout"
when: Constants.isMobileLayout
PropertyChanges {
target: internal
topMargin: 85
topPadding: 16
fontSize: 18
labelMargin: 12
}
},
State {
name: "smallLayout"
when: Constants.isSmallLayout
PropertyChanges {
target: internal
topMargin: 54
topPadding: 10
fontSize: 14
labelMargin: -12
}
}
]
}

4
examples/demos/thermostat/content/images/Auto.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

3
examples/demos/thermostat/content/images/Cool.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.8288 11.9127C18.8883 12.1555 18.849 12.4119 18.7195 12.6257C18.59 12.8395 18.3809 12.9931 18.1382 13.0528L16.5141 13.4519L16.9384 15.0359C17.0032 15.2774 16.9694 15.5348 16.8445 15.7514C16.7195 15.968 16.5136 16.1261 16.2721 16.1909C16.0306 16.2557 15.7732 16.2219 15.5566 16.097C15.34 15.972 15.1819 15.7662 15.1171 15.5246L14.5443 13.3875L11.942 11.8844V14.8874L13.5512 16.4966C13.6389 16.5843 13.7085 16.6884 13.7559 16.803C13.8034 16.9176 13.8278 17.0404 13.8278 17.1644C13.8278 17.2885 13.8034 17.4113 13.7559 17.5259C13.7085 17.6405 13.6389 17.7446 13.5512 17.8323C13.4635 17.92 13.3594 17.9896 13.2448 18.037C13.1302 18.0845 13.0074 18.1089 12.8833 18.1089C12.7593 18.1089 12.6365 18.0845 12.5219 18.037C12.4073 17.9896 12.3032 17.92 12.2155 17.8323L10.9992 16.616L9.78054 17.8354C9.69284 17.9231 9.58872 17.9927 9.47412 18.0402C9.35953 18.0876 9.23672 18.1121 9.11268 18.1121C8.98865 18.1121 8.86583 18.0876 8.75124 18.0402C8.63665 17.9927 8.53253 17.9231 8.44483 17.8354C8.35712 17.7477 8.28755 17.6436 8.24009 17.529C8.19262 17.4144 8.16819 17.2916 8.16819 17.1676C8.16819 17.0435 8.19262 16.9207 8.24009 16.8061C8.28755 16.6915 8.35712 16.5874 8.44483 16.4997L10.0563 14.8874V11.8844L7.45404 13.3875L6.88125 15.5246C6.81645 15.7662 6.65835 15.972 6.44175 16.097C6.22514 16.2219 5.96777 16.2557 5.72625 16.1909C5.48474 16.1261 5.27886 15.968 5.1539 15.7514C5.02895 15.5348 4.99516 15.2774 5.05997 15.0359L5.48425 13.4519L3.86018 13.0528C3.73718 13.026 3.6208 12.9748 3.5179 12.9023C3.415 12.8298 3.32766 12.7374 3.26103 12.6306C3.19441 12.5237 3.14985 12.4047 3.12998 12.2804C3.11011 12.1561 3.11534 12.029 3.14535 11.9068C3.17537 11.7845 3.22956 11.6695 3.30473 11.5685C3.37991 11.4676 3.47454 11.3827 3.58305 11.3188C3.69157 11.255 3.81176 11.2136 3.93654 11.197C4.06133 11.1803 4.18818 11.1889 4.30961 11.2221L6.50097 11.7603L9.11347 10.2517L6.50097 8.74314L4.30961 9.28135C4.23611 9.29966 4.16064 9.3089 4.0849 9.30885C3.85474 9.30833 3.63271 9.22365 3.46067 9.07075C3.28864 8.91785 3.17847 8.70731 3.15093 8.4788C3.12339 8.25029 3.18039 8.0196 3.31118 7.83021C3.44197 7.64082 3.63752 7.50582 3.86097 7.45064L5.48504 7.05149L5.06075 5.46749C4.99595 5.22598 5.02974 4.96861 5.15469 4.752C5.27964 4.5354 5.48552 4.3773 5.72704 4.31249C5.96856 4.24769 6.22593 4.28147 6.44253 4.40643C6.65914 4.53138 6.81723 4.73726 6.88204 4.97878L7.45483 7.11592L10.0563 8.61821V5.61599L8.44718 4.00371C8.35948 3.916 8.28991 3.81188 8.24244 3.69729C8.19498 3.5827 8.17055 3.45988 8.17055 3.33585C8.17055 3.08536 8.27006 2.84512 8.44718 2.66799C8.62431 2.49087 8.86454 2.39136 9.11504 2.39136C9.23907 2.39136 9.36189 2.41579 9.47648 2.46325C9.59107 2.51072 9.69519 2.58029 9.7829 2.66799L10.9992 3.88742L12.2178 2.66799C12.3055 2.58029 12.4097 2.51072 12.5242 2.46325C12.6388 2.41579 12.7617 2.39136 12.8857 2.39136C13.0097 2.39136 13.1325 2.41579 13.2471 2.46325C13.3617 2.51072 13.4658 2.58029 13.5535 2.66799C13.6412 2.7557 13.7108 2.85982 13.7583 2.97441C13.8057 3.089 13.8302 3.21182 13.8302 3.33585C13.8302 3.45988 13.8057 3.5827 13.7583 3.69729C13.7108 3.81188 13.6412 3.916 13.5535 4.00371L11.942 5.61599V8.62056L14.5443 7.11828L15.1171 4.98114C15.1819 4.73962 15.34 4.53374 15.5566 4.40879C15.7732 4.28383 16.0306 4.25004 16.2721 4.31485C16.5136 4.37966 16.7195 4.53775 16.8445 4.75436C16.9694 4.97096 17.0032 5.22833 16.9384 5.46985L16.5141 7.05385L18.1382 7.45299C18.3596 7.51002 18.5527 7.64556 18.6817 7.83437C18.8106 8.02318 18.8665 8.25241 18.839 8.47939C18.8116 8.70636 18.7025 8.91562 18.5323 9.06821C18.362 9.2208 18.1421 9.30632 17.9135 9.30885C17.8375 9.30896 17.7617 9.29973 17.688 9.28135L15.4966 8.74314L12.8849 10.2517L15.4974 11.7603L17.6888 11.2221C17.9315 11.1626 18.188 11.2019 18.4018 11.3314C18.6155 11.4609 18.7692 11.67 18.8288 11.9127Z" fill="#323232"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

3
examples/demos/thermostat/content/images/Dry.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.5397 0.679387C11.3812 0.568505 11.1925 0.509033 10.9991 0.509033C10.8057 0.509033 10.617 0.568505 10.4585 0.679387C9.24358 1.57476 8.13203 2.60251 7.14437 3.74367C4.93729 6.27839 3.77051 8.96475 3.77051 11.5089C3.77051 13.426 4.53209 15.2646 5.88771 16.6203C7.24333 17.9759 9.08194 18.7375 10.9991 18.7375C12.9162 18.7375 14.7548 17.9759 16.1105 16.6203C17.4661 15.2646 18.2277 13.426 18.2277 11.5089C18.2277 5.4306 11.8131 0.870315 11.5397 0.679387ZM10.9991 16.8517C9.58251 16.8503 8.22438 16.2869 7.22272 15.2853C6.22105 14.2836 5.65768 12.9255 5.65622 11.5089C5.65622 8.89167 7.22765 6.52982 8.53979 5.01024C9.28895 4.14971 10.1118 3.35627 10.9991 2.63896C11.8863 3.35627 12.7092 4.14971 13.4584 5.01024C14.7705 6.52982 16.3419 8.89167 16.3419 11.5089C16.3405 12.9255 15.7771 14.2836 14.7754 15.2853C13.7738 16.2869 12.4156 16.8503 10.9991 16.8517ZM14.8978 12.7346C14.7004 13.362 14.3545 13.9325 13.8894 14.3976C13.4243 14.8627 12.8538 15.2087 12.2264 15.406C12.1348 15.4345 12.0394 15.4491 11.9435 15.4492C11.7181 15.4494 11.5001 15.3688 11.329 15.2221C11.158 15.0754 11.0451 14.8722 11.0109 14.6495C10.9767 14.4267 11.0234 14.199 11.1426 14.0077C11.2618 13.8165 11.4456 13.6742 11.6607 13.6067C11.9988 13.5005 12.3062 13.3142 12.5569 13.0635C12.8075 12.8129 12.9938 12.5055 13.1001 12.1673C13.1372 12.0492 13.1973 11.9395 13.2768 11.8446C13.3563 11.7496 13.4538 11.6713 13.5636 11.614C13.7854 11.4984 14.044 11.4755 14.2826 11.5505C14.4007 11.5877 14.5104 11.6477 14.6053 11.7273C14.7003 11.8068 14.7786 11.9042 14.8359 12.014C14.8932 12.1238 14.9282 12.2439 14.9391 12.3672C14.95 12.4906 14.9365 12.6149 14.8994 12.733L14.8978 12.7346Z" fill="#323232"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

3
examples/demos/thermostat/content/images/Eco.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.7127 3.30982C20.6991 3.07942 20.6014 2.86203 20.4382 2.69883C20.275 2.53563 20.0576 2.43796 19.8272 2.42432C15.641 2.1776 12.2687 3.47482 10.8041 5.89246C9.85024 7.46389 9.81724 9.36296 10.6894 11.1803C10.3164 11.6559 10.0185 12.1859 9.80624 12.7517L9.0441 11.9896C9.60903 10.672 9.54931 9.30953 8.85553 8.16396C7.7571 6.35132 5.25538 5.38018 2.16438 5.55932C1.93399 5.57296 1.71659 5.67063 1.55339 5.83383C1.39019 5.99703 1.29252 6.21442 1.27888 6.44482C1.09974 9.53582 2.07088 12.0375 3.8851 13.136C4.5004 13.511 5.20738 13.7087 5.92796 13.7072C6.5423 13.7021 7.14918 13.5719 7.71153 13.3245L9.42831 15.0445V17.1659C9.42831 17.416 9.52765 17.6558 9.70447 17.8326C9.88129 18.0094 10.1211 18.1087 10.3712 18.1087C10.6212 18.1087 10.8611 18.0094 11.0379 17.8326C11.2147 17.6558 11.314 17.416 11.314 17.1659V14.8488C11.3121 14.006 11.5727 13.1835 12.0597 12.4956C12.848 12.8705 13.7082 13.07 14.581 13.0802C15.5204 13.0824 16.4421 12.8252 17.2446 12.3369C19.6622 10.8684 20.9595 7.49532 20.7127 3.30982ZM4.86174 11.5229C3.82538 10.8943 3.1976 9.36532 3.14653 7.42696C5.08488 7.47803 6.61467 8.10661 7.24246 9.14218C7.48796 9.5415 7.58866 10.0131 7.52767 10.4779L6.63746 9.58453C6.46033 9.40741 6.22009 9.3079 5.9696 9.3079C5.7191 9.3079 5.47887 9.40741 5.30174 9.58453C5.12461 9.76166 5.02511 10.0019 5.02511 10.2524C5.02511 10.5029 5.12461 10.7431 5.30174 10.9202L6.19274 11.8112C5.72923 11.8685 5.26001 11.7668 4.86174 11.5229ZM16.268 10.723C15.4304 11.2298 14.4608 11.3257 13.4543 11.0185L16.3811 8.09246C16.5582 7.91534 16.6577 7.6751 16.6577 7.4246C16.6577 7.17411 16.5582 6.93387 16.3811 6.75675C16.204 6.57962 15.9637 6.48011 15.7132 6.48011C15.4627 6.48011 15.2225 6.57962 15.0454 6.75675L12.1186 9.68275C11.8145 8.68018 11.9104 7.70668 12.414 6.87303C13.4174 5.21596 15.7926 4.27468 18.8569 4.28018C18.8679 7.34446 17.925 9.71575 16.268 10.723Z" fill="#323232"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

3
examples/demos/thermostat/content/images/Fan.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5516 10.7232C19.3645 10.0239 19.0286 9.37319 18.5668 8.81564C18.105 8.25809 17.5283 7.80682 16.8761 7.49268C16.2238 7.17853 15.5115 7.00892 14.7876 6.99544C14.0638 6.98196 13.3456 7.12493 12.6821 7.41457L13.7994 2.95407C13.847 2.76271 13.8334 2.56125 13.7606 2.37803C13.6877 2.1948 13.5592 2.03904 13.3932 1.93264C12.2943 1.23612 10.9681 0.992653 9.69344 1.2534C8.41876 1.51415 7.29475 2.25881 6.5576 3.33092C5.82045 4.40304 5.52753 5.71913 5.74041 7.00268C5.95328 8.28623 6.65536 9.43731 7.69914 10.2141L3.27714 11.4767C3.0871 11.531 2.91894 11.6437 2.79642 11.7988C2.6739 11.9539 2.60321 12.1435 2.59435 12.341C2.52802 13.649 2.9746 14.9312 3.8391 15.915C4.7036 16.8988 5.91781 17.5065 7.22346 17.6089C8.52912 17.7112 9.82319 17.3002 10.8304 16.4631C11.8377 15.626 12.4786 14.429 12.6169 13.1267L15.9169 16.3246C16.0591 16.4615 16.2407 16.5503 16.4361 16.5785C16.6315 16.6067 16.8308 16.5728 17.0059 16.4817C18.0224 15.955 18.8287 15.0972 19.2915 14.0502C19.7544 13.0031 19.8462 11.8295 19.5516 10.7232ZM10.0563 10.2518C10.0563 10.0653 10.1116 9.88301 10.2152 9.72796C10.3188 9.57291 10.466 9.45206 10.6383 9.38069C10.8106 9.30933 11.0002 9.29066 11.1831 9.32704C11.366 9.36342 11.534 9.45322 11.6658 9.58508C11.7977 9.71694 11.8875 9.88494 11.9239 10.0678C11.9603 10.2507 11.9416 10.4403 11.8702 10.6126C11.7989 10.7849 11.678 10.9321 11.523 11.0357C11.3679 11.1393 11.1856 11.1946 10.9991 11.1946C10.7491 11.1946 10.5093 11.0953 10.3324 10.9185C10.1556 10.7417 10.0563 10.5018 10.0563 10.2518ZM10.6849 3.02321C11.0605 3.02321 11.433 3.09053 11.7849 3.22199L10.732 7.43657C10.3296 7.47498 9.94004 7.59922 9.58968 7.8009C9.23932 8.00257 8.93626 8.27701 8.70092 8.60571C8.19675 8.19625 7.83182 7.64065 7.65631 7.01531C7.48081 6.38998 7.50336 5.72563 7.72085 5.11363C7.93834 4.50163 8.3401 3.97205 8.87087 3.59771C9.40164 3.22337 10.0354 3.02267 10.6849 3.02321ZM9.19199 15.2882C8.75198 15.5428 8.25676 15.6869 7.74882 15.7081C7.24088 15.7293 6.73538 15.627 6.27568 15.4099C5.81598 15.1928 5.41581 14.8674 5.1095 14.4617C4.80318 14.0559 4.59987 13.5819 4.51699 13.0804L8.69542 11.8869C8.92939 12.2168 9.23142 12.4928 9.58111 12.6961C9.93081 12.8994 10.3201 13.0253 10.7226 13.0654C10.6494 13.5266 10.474 13.9656 10.2091 14.3502C9.94429 14.7348 9.59676 15.0553 9.19199 15.2882ZM17.4184 13.5942C17.2305 13.9206 16.9854 14.2104 16.6948 14.4499L13.5708 11.4304C13.7394 11.0628 13.827 10.6633 13.8277 10.2589C13.8284 9.8545 13.7421 9.45469 13.5747 9.08657C14.1814 8.85494 14.845 8.81695 15.4741 8.9778C16.1033 9.13865 16.6672 9.49045 17.0883 9.98484C17.5094 10.4792 17.767 11.0919 17.8257 11.7387C17.8844 12.3854 17.7413 13.0345 17.4161 13.5966L17.4184 13.5942Z" fill="#323232"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

3
examples/demos/thermostat/content/images/Heat.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0565 3.02326V2.70897C10.0565 2.45891 10.1559 2.21909 10.3327 2.04227C10.5095 1.86545 10.7493 1.76611 10.9994 1.76611C11.2494 1.76611 11.4893 1.86545 11.6661 2.04227C11.8429 2.21909 11.9422 2.45891 11.9422 2.70897V3.02326C11.9422 3.27332 11.8429 3.51314 11.6661 3.68996C11.4893 3.86678 11.2494 3.96611 10.9994 3.96611C10.7493 3.96611 10.5095 3.86678 10.3327 3.68996C10.1559 3.51314 10.0565 3.27332 10.0565 3.02326ZM16.3422 10.2518C16.3422 11.3085 16.0289 12.3415 15.4418 13.2202C14.8547 14.0988 14.0203 14.7836 13.044 15.188C12.0677 15.5924 10.9935 15.6982 9.95705 15.492C8.92063 15.2859 7.96863 14.777 7.22142 14.0298C6.4742 13.2826 5.96535 12.3306 5.75919 11.2942C5.55304 10.2578 5.65884 9.18349 6.06323 8.20721C6.46762 7.23093 7.15243 6.39649 8.03105 5.80941C8.90968 5.22232 9.94267 4.90897 10.9994 4.90897C12.416 4.91043 13.7741 5.4738 14.7758 6.47547C15.7774 7.47713 16.3408 8.83526 16.3422 10.2518ZM14.4565 10.2518C14.4565 9.56807 14.2538 8.89967 13.8739 8.33114C13.494 7.76262 12.9541 7.31951 12.3224 7.05785C11.6907 6.79618 10.9956 6.72772 10.3249 6.86111C9.65431 6.99451 9.03831 7.32377 8.55482 7.80726C8.07133 8.29075 7.74207 8.90675 7.60867 9.57737C7.47528 10.248 7.54374 10.9431 7.8054 11.5748C8.06707 12.2065 8.51018 12.7465 9.0787 13.1263C9.64723 13.5062 10.3156 13.709 10.9994 13.709C11.916 13.7079 12.7947 13.3434 13.4428 12.6953C14.0909 12.0471 14.4555 11.1684 14.4565 10.2518ZM4.98946 5.57604C5.07716 5.66375 5.18128 5.73332 5.29587 5.78078C5.41046 5.82825 5.53328 5.85268 5.65732 5.85268C5.78135 5.85268 5.90417 5.82825 6.01876 5.78078C6.13335 5.73332 6.23747 5.66375 6.32517 5.57604C6.41288 5.48834 6.48245 5.38422 6.52991 5.26963C6.57738 5.15504 6.60181 5.03222 6.60181 4.90819C6.60181 4.78415 6.57738 4.66133 6.52991 4.54674C6.48245 4.43215 6.41288 4.32803 6.32517 4.24033L6.01089 3.92604C5.83376 3.74892 5.59352 3.64941 5.34303 3.64941C5.09253 3.64941 4.8523 3.74892 4.67517 3.92604C4.49805 4.10317 4.39854 4.3434 4.39854 4.5939C4.39854 4.84439 4.49805 5.08463 4.67517 5.26176L4.98946 5.57604ZM4.98946 14.926L4.67517 15.2403C4.58747 15.328 4.5179 15.4322 4.47043 15.5467C4.42297 15.6613 4.39854 15.7842 4.39854 15.9082C4.39854 16.0322 4.42297 16.155 4.47043 16.2696C4.5179 16.3842 4.58747 16.4883 4.67517 16.576C4.8523 16.7532 5.09253 16.8527 5.34303 16.8527C5.46706 16.8527 5.58988 16.8282 5.70447 16.7808C5.81906 16.7333 5.92318 16.6637 6.01089 16.576L6.32517 16.2618C6.5023 16.0846 6.60181 15.8444 6.60181 15.5939C6.60181 15.3434 6.5023 15.1032 6.32517 14.926C6.14805 14.7489 5.90781 14.6494 5.65732 14.6494C5.40682 14.6494 5.16658 14.7489 4.98946 14.926ZM16.3422 5.85183C16.4661 5.85193 16.5888 5.82762 16.7032 5.7803C16.8177 5.73298 16.9217 5.66357 17.0093 5.57604L17.3236 5.26176C17.5007 5.08463 17.6002 4.84439 17.6002 4.5939C17.6002 4.3434 17.5007 4.10317 17.3236 3.92604C17.1465 3.74892 16.9062 3.64941 16.6557 3.64941C16.4053 3.64941 16.165 3.74892 15.9879 3.92604L15.6736 4.24033C15.541 4.3722 15.4505 4.54055 15.4138 4.72396C15.3771 4.90737 15.3958 5.09755 15.4675 5.27032C15.5392 5.44309 15.6606 5.59063 15.8164 5.69417C15.9722 5.79772 16.1552 5.8526 16.3422 5.85183ZM17.0093 14.9276C16.8322 14.7505 16.592 14.651 16.3415 14.651C16.091 14.651 15.8507 14.7505 15.6736 14.9276C15.4965 15.1047 15.397 15.345 15.397 15.5955C15.397 15.846 15.4965 16.0862 15.6736 16.2633L15.9879 16.5776C16.165 16.7547 16.4053 16.8543 16.6557 16.8543C16.9062 16.8543 17.1465 16.7547 17.3236 16.5776C17.5007 16.4005 17.6002 16.1603 17.6002 15.9098C17.6002 15.6593 17.5007 15.419 17.3236 15.2419L17.0093 14.9276ZM4.71367 10.2518C4.71367 10.0018 4.61434 9.76195 4.43752 9.58513C4.2607 9.40831 4.02088 9.30897 3.77082 9.30897H3.45653C3.20647 9.30897 2.96665 9.40831 2.78983 9.58513C2.61301 9.76195 2.51367 10.0018 2.51367 10.2518C2.51367 10.5019 2.61301 10.7417 2.78983 10.9185C2.96665 11.0954 3.20647 11.1947 3.45653 11.1947H3.77082C4.02088 11.1947 4.2607 11.0954 4.43752 10.9185C4.61434 10.7417 4.71367 10.5019 4.71367 10.2518ZM10.9994 16.5375C10.7493 16.5375 10.5095 16.6369 10.3327 16.8137C10.1559 16.9905 10.0565 17.2303 10.0565 17.4804V17.7947C10.0565 18.0448 10.1559 18.2846 10.3327 18.4614C10.5095 18.6382 10.7493 18.7375 10.9994 18.7375C11.2494 18.7375 11.4893 18.6382 11.6661 18.4614C11.8429 18.2846 11.9422 18.0448 11.9422 17.7947V17.4804C11.9422 17.2303 11.8429 16.9905 11.6661 16.8137C11.4893 16.6369 11.2494 16.5375 10.9994 16.5375ZM18.5422 9.30897H18.228C17.9779 9.30897 17.7381 9.40831 17.5613 9.58513C17.3844 9.76195 17.2851 10.0018 17.2851 10.2518C17.2851 10.5019 17.3844 10.7417 17.5613 10.9185C17.7381 11.0954 17.9779 11.1947 18.228 11.1947H18.5422C18.7923 11.1947 19.0321 11.0954 19.2089 10.9185C19.3858 10.7417 19.4851 10.5019 19.4851 10.2518C19.4851 10.0018 19.3858 9.76195 19.2089 9.58513C19.0321 9.40831 18.7923 9.30897 18.5422 9.30897Z" fill="#323232"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

3
examples/demos/thermostat/content/images/arrow.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.1922 10.4422L7.94217 16.6922C7.8841 16.7502 7.81516 16.7963 7.73929 16.8277C7.66342 16.8592 7.5821 16.8753 7.49998 16.8753C7.41786 16.8753 7.33654 16.8592 7.26067 16.8277C7.1848 16.7963 7.11586 16.7502 7.05779 16.6922C6.99972 16.6341 6.95366 16.5652 6.92224 16.4893C6.89081 16.4134 6.87463 16.3321 6.87463 16.25C6.87463 16.1679 6.89081 16.0865 6.92224 16.0107C6.95366 15.9348 6.99972 15.8659 7.05779 15.8078L12.8664 9.99998L7.05779 4.19217C6.94052 4.07489 6.87463 3.91583 6.87463 3.74998C6.87463 3.58413 6.94052 3.42507 7.05779 3.30779C7.17507 3.19052 7.33413 3.12463 7.49998 3.12463C7.66583 3.12463 7.82489 3.19052 7.94217 3.30779L14.1922 9.55779C14.2503 9.61584 14.2964 9.68477 14.3278 9.76064C14.3593 9.83652 14.3755 9.91785 14.3755 9.99998C14.3755 10.0821 14.3593 10.1634 14.3278 10.2393C14.2964 10.3152 14.2503 10.3841 14.1922 10.4422Z" fill="#898989"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 975 B

10
examples/demos/thermostat/content/images/bedroom.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_836_38508)">
<path d="M9.33398 18.6666C11.5473 18.6666 13.334 16.88 13.334 14.6666C13.334 12.4533 11.5473 10.6666 9.33398 10.6666C7.12065 10.6666 5.33398 12.4533 5.33398 14.6666C5.33398 16.88 7.12065 18.6666 9.33398 18.6666ZM9.33398 13.3333C10.0673 13.3333 10.6673 13.9333 10.6673 14.6666C10.6673 15.4 10.0673 16 9.33398 16C8.60065 16 8.00065 15.4 8.00065 14.6666C8.00065 13.9333 8.60065 13.3333 9.33398 13.3333ZM25.334 9.33329H14.6673V20H4.00065V6.66663H1.33398V26.6666H4.00065V22.6666H28.0006V26.6666H30.6673V14.6666C30.6673 11.72 28.2806 9.33329 25.334 9.33329ZM28.0006 20H17.334V12H25.334C26.8006 12 28.0006 13.2 28.0006 14.6666V20Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_836_38508">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 889 B

17
examples/demos/thermostat/content/images/circle.svg Normal file
View File

@ -0,0 +1,17 @@
<svg width="52" height="53" viewBox="0 0 52 53" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_608_9323)">
<circle cx="26" cy="25.2517" r="21.5" stroke="#2CDE85" shape-rendering="crispEdges"/>
</g>
<defs>
<filter id="filter0_d_608_9323" x="0" y="0.251709" width="52" height="52" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_608_9323"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_608_9323" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 934 B

3
examples/demos/thermostat/content/images/down.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.8759 12.7501V18.7501C22.8759 19.0484 22.7574 19.3346 22.5464 19.5456C22.3355 19.7565 22.0493 19.8751 21.7509 19.8751H15.7509C15.4526 19.8751 15.1664 19.7565 14.9554 19.5456C14.7445 19.3346 14.6259 19.0484 14.6259 18.7501C14.6259 18.4517 14.7445 18.1656 14.9554 17.9546C15.1664 17.7436 15.4526 17.6251 15.7509 17.6251H19.0322L12.7509 11.3438L9.79687 14.2988C9.69236 14.4037 9.56816 14.4869 9.43142 14.5437C9.29467 14.6005 9.14806 14.6297 9 14.6297C8.85193 14.6297 8.70532 14.6005 8.56858 14.5437C8.43183 14.4869 8.30764 14.4037 8.20312 14.2988L1.45312 7.54883C1.24178 7.33748 1.12305 7.05084 1.12305 6.75195C1.12305 6.60396 1.1522 6.45741 1.20883 6.32069C1.26547 6.18396 1.34848 6.05972 1.45312 5.95508C1.55777 5.85043 1.682 5.76742 1.81873 5.71078C1.95546 5.65415 2.102 5.625 2.25 5.625C2.54888 5.625 2.83553 5.74373 3.04687 5.95508L9.00094 11.9063L11.955 8.95133C12.0595 8.84645 12.1837 8.76323 12.3205 8.70645C12.4572 8.64967 12.6038 8.62044 12.7519 8.62044C12.8999 8.62044 13.0465 8.64967 13.1833 8.70645C13.32 8.76323 13.4442 8.84645 13.5487 8.95133L20.6259 16.0313V12.7501C20.6259 12.4517 20.7445 12.1656 20.9554 11.9546C21.1664 11.7436 21.4526 11.6251 21.7509 11.6251C22.0493 11.6251 22.3355 11.7436 22.5464 11.9546C22.7574 12.1656 22.8759 12.4517 22.8759 12.7501Z" fill="#2CDE85"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

3
examples/demos/thermostat/content/images/drop.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.9138 0.819694C17.6459 0.632267 17.3269 0.531738 17 0.531738C16.6731 0.531738 16.3541 0.632267 16.0863 0.819694C14.0326 2.33318 12.1537 4.07043 10.4842 5.99938C6.75352 10.2839 4.78125 14.8248 4.78125 19.1252C4.78125 22.3659 6.06858 25.4737 8.36004 27.7652C10.6515 30.0567 13.7594 31.344 17 31.344C20.2406 31.344 23.3485 30.0567 25.64 27.7652C27.9314 25.4737 29.2188 22.3659 29.2188 19.1252C29.2188 8.85087 18.3759 1.14243 17.9138 0.819694ZM17 28.1565C14.6055 28.154 12.3098 27.2017 10.6167 25.5086C8.92351 23.8154 7.97121 21.5197 7.96875 19.1252C7.96875 14.7013 10.625 10.7089 12.843 8.14032C14.1093 6.68573 15.5003 5.34454 17 4.13204C18.4997 5.34454 19.8907 6.68573 21.157 8.14032C23.375 10.7089 26.0312 14.7013 26.0312 19.1252C26.0288 21.5197 25.0765 23.8154 23.3833 25.5086C21.6902 27.2017 19.3945 28.154 17 28.1565ZM23.5902 21.1971C23.2565 22.2577 22.6718 23.222 21.8856 24.0082C21.0995 24.7944 20.1351 25.3791 19.0745 25.7127C18.9197 25.7609 18.7585 25.7855 18.5964 25.7858C18.2154 25.7861 17.847 25.6499 17.5578 25.4018C17.2686 25.1538 17.0778 24.8104 17.02 24.4339C16.9621 24.0573 17.0411 23.6725 17.2426 23.3492C17.4441 23.0258 17.7548 22.7854 18.1183 22.6713C18.6898 22.4918 19.2096 22.1768 19.6332 21.7531C20.0568 21.3295 20.3718 20.8098 20.5514 20.2382C20.6142 20.0385 20.7157 19.8531 20.8501 19.6927C20.9846 19.5322 21.1493 19.3998 21.3349 19.3029C21.7097 19.1074 22.1469 19.0688 22.5502 19.1956C22.7499 19.2584 22.9353 19.3599 23.0958 19.4944C23.2563 19.6288 23.3887 19.7935 23.4855 19.9791C23.5823 20.1647 23.6416 20.3676 23.66 20.5761C23.6784 20.7846 23.6556 20.9948 23.5928 21.1945L23.5902 21.1971Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

3
examples/demos/thermostat/content/images/edit.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.4369 4.86074L15.1407 0.563543C14.9621 0.384883 14.7501 0.243157 14.5167 0.146463C14.2833 0.0497686 14.0332 0 13.7806 0C13.528 0 13.2778 0.0497686 13.0444 0.146463C12.8111 0.243157 12.599 0.384883 12.4205 0.563543L0.563481 12.4215C0.384249 12.5995 0.242149 12.8114 0.145424 13.0448C0.048698 13.2782 -0.000729156 13.5285 8.12823e-06 13.7811V18.0783C8.12823e-06 18.5884 0.202621 19.0775 0.563276 19.4382C0.92393 19.7988 1.41308 20.0014 1.92312 20.0014H6.22033C6.47296 20.0021 6.72322 19.9527 6.95661 19.8559C7.19 19.7592 7.40188 19.6171 7.57997 19.438L19.4369 7.58003C19.7975 7.21939 20 6.73033 20 6.22039C20 5.71045 19.7975 5.22138 19.4369 4.86074ZM6.05782 17.6937H2.30775V13.9436L10.3848 5.86653L14.1349 9.61661L6.05782 17.6937ZM15.7696 7.98196L12.0195 4.23189L13.783 2.46839L17.5331 6.21846L15.7696 7.98196Z" fill="#323232"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 942 B

3
examples/demos/thermostat/content/images/energy.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.62708 18.8133H13.0046V29.0133C13.0046 31.3933 14.2937 31.8749 15.8662 30.0899L26.5904 17.9066C27.9079 16.4191 27.3554 15.1866 25.3579 15.1866H20.9804V4.9866C20.9804 2.6066 19.6912 2.12494 18.1187 3.90994L7.39457 16.0933C6.09124 17.5949 6.64374 18.8133 8.62708 18.8133Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 491 B

3
examples/demos/thermostat/content/images/home.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.0634 13.782L18.4384 3.75727C18.4332 3.75273 18.4283 3.74785 18.4238 3.74266C18.0326 3.3869 17.5228 3.18976 16.994 3.18976C16.4653 3.18976 15.9555 3.3869 15.5643 3.74266L15.5497 3.75727L4.93664 13.782C4.72015 13.981 4.54735 14.2229 4.42915 14.4922C4.31096 14.7615 4.24996 15.0524 4.25 15.3465V27.625C4.25 28.1886 4.47388 28.7291 4.8724 29.1276C5.27091 29.5261 5.81141 29.75 6.375 29.75H12.75C13.3136 29.75 13.8541 29.5261 14.2526 29.1276C14.6511 28.7291 14.875 28.1886 14.875 27.625V21.25H19.125V27.625C19.125 28.1886 19.3489 28.7291 19.7474 29.1276C20.1459 29.5261 20.6864 29.75 21.25 29.75H27.625C28.1886 29.75 28.7291 29.5261 29.1276 29.1276C29.5261 28.7291 29.75 28.1886 29.75 27.625V15.3465C29.75 15.0524 29.689 14.7615 29.5708 14.4922C29.4527 14.2229 29.2798 13.981 29.0634 13.782ZM27.625 27.625H21.25V21.25C21.25 20.6864 21.0261 20.1459 20.6276 19.7474C20.2291 19.3489 19.6886 19.125 19.125 19.125H14.875C14.3114 19.125 13.7709 19.3489 13.3724 19.7474C12.9739 20.1459 12.75 20.6864 12.75 21.25V27.625H6.375V15.3465L6.38961 15.3332L17 5.3125L27.6117 15.3305L27.6263 15.3438L27.625 27.625Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

12
examples/demos/thermostat/content/images/kid_room.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_836_38511)">
<path d="M19.3327 15.6667C20.2532 15.6667 20.9993 14.9205 20.9993 14C20.9993 13.0796 20.2532 12.3334 19.3327 12.3334C18.4122 12.3334 17.666 13.0796 17.666 14C17.666 14.9205 18.4122 15.6667 19.3327 15.6667Z" fill="white"/>
<path d="M12.6667 15.6667C13.5871 15.6667 14.3333 14.9205 14.3333 14C14.3333 13.0796 13.5871 12.3334 12.6667 12.3334C11.7462 12.3334 11 13.0796 11 14C11 14.9205 11.7462 15.6667 12.6667 15.6667Z" fill="white"/>
<path d="M30.5873 15.12C30.254 13.1067 28.774 11.4667 26.8406 10.8933C26.134 9.4 25.134 8.09333 23.9207 7.01333C21.814 5.13333 19.0406 4 16.0007 4C12.9607 4 10.1873 5.13333 8.08065 7.01333C6.85398 8.09333 5.85398 9.41333 5.16065 10.8933C3.22732 11.4667 1.74732 13.0933 1.41398 15.12C1.36065 15.4 1.33398 15.6933 1.33398 16C1.33398 16.3067 1.36065 16.6 1.41398 16.88C1.74732 18.8933 3.22732 20.5333 5.16065 21.1067C5.85398 22.5867 6.85398 23.8933 8.05398 24.96C10.1607 26.8533 12.9473 28 16.0007 28C19.054 28 21.8406 26.8533 23.9606 24.96C25.1606 23.8933 26.1606 22.5733 26.854 21.1067C28.774 20.5333 30.254 18.9067 30.5873 16.88C30.6407 16.6 30.6673 16.3067 30.6673 16C30.6673 15.6933 30.6407 15.4 30.5873 15.12V15.12ZM25.334 18.6667C25.2006 18.6667 25.0806 18.64 24.9473 18.6267C24.6806 19.52 24.294 20.3467 23.8007 21.1067C22.134 23.6533 19.2673 25.3333 16.0007 25.3333C12.734 25.3333 9.86732 23.6533 8.20065 21.1067C7.70732 20.3467 7.32065 19.52 7.05398 18.6267C6.92065 18.64 6.80065 18.6667 6.66732 18.6667C5.20065 18.6667 4.00065 17.4667 4.00065 16C4.00065 14.5333 5.20065 13.3333 6.66732 13.3333C6.80065 13.3333 6.92065 13.36 7.05398 13.3733C7.32065 12.48 7.70732 11.6533 8.20065 10.8933C9.86732 8.34667 12.734 6.66667 16.0007 6.66667C19.2673 6.66667 22.134 8.34667 23.8007 10.8933C24.294 11.6533 24.6806 12.48 24.9473 13.3733C25.0806 13.36 25.2006 13.3333 25.334 13.3333C26.8006 13.3333 28.0006 14.5333 28.0006 16C28.0006 17.4667 26.8006 18.6667 25.334 18.6667ZM16.0007 22.6667C18.6806 22.6667 20.9873 21.0267 22.0006 18.6667H10.0007C11.014 21.0267 13.3207 22.6667 16.0007 22.6667Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_836_38511">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

10
examples/demos/thermostat/content/images/kitchen.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_836_38516)">
<path d="M21.3333 7.99996V18.6666H25.3333V29.3333H28V2.66663C24.32 2.66663 21.3333 5.65329 21.3333 7.99996ZM14.6667 12H12V2.66663H9.33333V12H6.66667V2.66663H4V12C4 14.9466 6.38667 17.3333 9.33333 17.3333V29.3333H12V17.3333C14.9467 17.3333 17.3333 14.9466 17.3333 12V2.66663H14.6667V12Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_836_38516">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 551 B

10
examples/demos/thermostat/content/images/living_room.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_836_38502)">
<path d="M25.3333 4H6.66667C5.2 4 4 5.2 4 6.66667V25.3333C4 26.8 5.2 28 6.66667 28H25.3333C26.8 28 28 26.8 28 25.3333V6.66667C28 5.2 26.8 4 25.3333 4ZM25.3333 25.3333H6.66667V6.66667H25.3333V25.3333ZM11.4267 8H8V11.44C9.89333 11.44 11.4267 9.89333 11.4267 8ZM16 8H13.72C13.72 11.1467 11.16 13.72 8 13.72V16C12.4267 16 16 12.4133 16 8ZM18.8533 15.8133L14.8533 20.9733L12 17.5333L8 22.6667H24L18.8533 15.8133Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_836_38502">
<rect width="32" height="32" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 673 B

BIN
examples/demos/thermostat/content/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

3
examples/demos/thermostat/content/images/maxTemp.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.5589 5.67208C13.8298 4.94129 12.9632 4.36206 12.0091 3.96781C11.055 3.57356 10.0323 3.37207 9 3.37497H8.97187C4.64555 3.38974 1.125 6.96091 1.125 11.3294V12.9375C1.125 13.2358 1.24353 13.522 1.4545 13.733C1.66548 13.9439 1.95163 14.0625 2.25 14.0625H15.75C16.0484 14.0625 16.3345 13.9439 16.5455 13.733C16.7565 13.522 16.875 13.2358 16.875 12.9375V11.25C16.8779 10.2131 16.6746 9.18605 16.277 8.22848C15.8794 7.2709 15.2954 6.40192 14.5589 5.67208ZM15.75 12.9375H8.41711L12.2674 7.64294C12.3553 7.52229 12.3916 7.37168 12.3684 7.22426C12.3451 7.07684 12.2643 6.94468 12.1437 6.85684C12.023 6.76901 11.8724 6.73271 11.725 6.75591C11.5776 6.77912 11.4454 6.85994 11.3576 6.98059L7.02562 12.9375H2.25V11.3294C2.25 11.1129 2.26055 10.8991 2.28023 10.6875H3.9375C4.08668 10.6875 4.22976 10.6282 4.33525 10.5227C4.44074 10.4172 4.5 10.2742 4.5 10.125C4.5 9.97579 4.44074 9.83271 4.33525 9.72722C4.22976 9.62173 4.08668 9.56247 3.9375 9.56247H2.47992C3.20555 6.83013 5.57367 4.76434 8.4375 4.52388V6.18747C8.4375 6.33665 8.49676 6.47973 8.60225 6.58522C8.70774 6.69071 8.85082 6.74997 9 6.74997C9.14918 6.74997 9.29226 6.69071 9.39775 6.58522C9.50324 6.47973 9.5625 6.33665 9.5625 6.18747V4.52317C10.958 4.64061 12.2825 5.18854 13.3531 6.09125C14.4237 6.99397 15.1876 8.20691 15.5391 9.56247H14.0625C13.9133 9.56247 13.7702 9.62173 13.6648 9.72722C13.5593 9.83271 13.5 9.97579 13.5 10.125C13.5 10.2742 13.5593 10.4172 13.6648 10.5227C13.7702 10.6282 13.9133 10.6875 14.0625 10.6875H15.7268C15.7416 10.8738 15.75 11.0608 15.75 11.25V12.9375Z" fill="#FA0000"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

3
examples/demos/thermostat/content/images/minTemp.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.44109 5.67208C4.17023 4.94129 5.03683 4.36206 5.99091 3.96781C6.94499 3.57356 7.96768 3.37207 9 3.37497H9.02813C13.3545 3.38974 16.875 6.96091 16.875 11.3294V12.9375C16.875 13.2358 16.7565 13.522 16.5455 13.733C16.3345 13.9439 16.0484 14.0625 15.75 14.0625H2.25C1.95163 14.0625 1.66548 13.9439 1.45451 13.733C1.24353 13.522 1.125 13.2358 1.125 12.9375V11.25C1.12211 10.2131 1.32538 9.18605 1.723 8.22848C2.12061 7.2709 2.70463 6.40192 3.44109 5.67208ZM2.25 12.9375H9.58289L5.73258 7.64294C5.64475 7.52229 5.60844 7.37168 5.63165 7.22426C5.65486 7.07684 5.73567 6.94468 5.85633 6.85684C5.97698 6.76901 6.12758 6.73271 6.275 6.75591C6.42243 6.77912 6.55459 6.85994 6.64242 6.98059L10.9744 12.9375H15.75V11.3294C15.75 11.1129 15.7395 10.8991 15.7198 10.6875H14.0625C13.9133 10.6875 13.7702 10.6282 13.6648 10.5227C13.5593 10.4172 13.5 10.2742 13.5 10.125C13.5 9.97579 13.5593 9.83271 13.6648 9.72722C13.7702 9.62173 13.9133 9.56247 14.0625 9.56247H15.5201C14.7945 6.83013 12.4263 4.76434 9.5625 4.52388V6.18747C9.5625 6.33665 9.50324 6.47973 9.39775 6.58522C9.29226 6.69071 9.14918 6.74997 9 6.74997C8.85082 6.74997 8.70774 6.69071 8.60225 6.58522C8.49676 6.47973 8.4375 6.33665 8.4375 6.18747V4.52317C7.04204 4.64061 5.71749 5.18854 4.64688 6.09125C3.57627 6.99397 2.81244 8.20691 2.46094 9.56247H3.9375C4.08668 9.56247 4.22976 9.62173 4.33525 9.72722C4.44074 9.83271 4.5 9.97579 4.5 10.125C4.5 10.2742 4.44074 10.4172 4.33525 10.5227C4.22976 10.6282 4.08668 10.6875 3.9375 10.6875H2.2732C2.25844 10.8738 2.25 11.0608 2.25 11.25V12.9375Z" fill="#0064FA"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

5
examples/demos/thermostat/content/images/more.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 10.1403C3.9 10.1403 3 11.0371 3 12.1331C3 13.2291 3.9 14.1259 5 14.1259C6.1 14.1259 7 13.2291 7 12.1331C7 11.0371 6.1 10.1403 5 10.1403Z" stroke="white" stroke-width="1.5"/>
<path d="M19 10.1403C17.9 10.1403 17 11.0371 17 12.1331C17 13.2291 17.9 14.1259 19 14.1259C20.1 14.1259 21 13.2291 21 12.1331C21 11.0371 20.1 10.1403 19 10.1403Z" stroke="white" stroke-width="1.5"/>
<path d="M12 10.1403C10.9 10.1403 10 11.0371 10 12.1331C10 13.2291 10.9 14.1259 12 14.1259C13.1 14.1259 14 13.2291 14 12.1331C14 11.0371 13.1 10.1403 12 10.1403Z" stroke="white" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 687 B

3
examples/demos/thermostat/content/images/power.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="32" height="31" viewBox="0 0 32 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.6875 15V1.875C14.6875 1.5269 14.8258 1.19306 15.0719 0.946923C15.3181 0.700781 15.6519 0.5625 16 0.5625C16.3481 0.5625 16.6819 0.700781 16.9281 0.946923C17.1742 1.19306 17.3125 1.5269 17.3125 1.875V15C17.3125 15.3481 17.1742 15.6819 16.9281 15.9281C16.6819 16.1742 16.3481 16.3125 16 16.3125C15.6519 16.3125 15.3181 16.1742 15.0719 15.9281C14.8258 15.6819 14.6875 15.3481 14.6875 15ZM24.592 2.08828C24.3004 1.90404 23.9482 1.84193 23.6112 1.91537C23.2743 1.9888 22.9798 2.1919 22.7914 2.48073C22.603 2.76957 22.5359 3.12094 22.6045 3.45889C22.6731 3.79684 22.8719 4.09422 23.158 4.28672C26.9495 6.75914 29.125 10.6638 29.125 15C29.125 18.481 27.7422 21.8194 25.2808 24.2808C22.8194 26.7422 19.481 28.125 16 28.125C12.519 28.125 9.18064 26.7422 6.71922 24.2808C4.25781 21.8194 2.875 18.481 2.875 15C2.875 10.6638 5.05047 6.75914 8.84195 4.28672C9.12807 4.09422 9.32692 3.79684 9.39553 3.45889C9.46414 3.12094 9.39699 2.76957 9.2086 2.48073C9.02021 2.1919 8.72572 1.9888 8.38878 1.91537C8.05185 1.84193 7.69955 1.90404 7.40805 2.08828C2.85859 5.05453 0.25 9.75984 0.25 15C0.25 19.1772 1.90937 23.1832 4.86307 26.1369C7.81677 29.0906 11.8228 30.75 16 30.75C20.1772 30.75 24.1832 29.0906 27.1369 26.1369C30.0906 23.1832 31.75 19.1772 31.75 15C31.75 9.75984 29.1414 5.05453 24.592 2.08828Z" fill="#898989"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

3
examples/demos/thermostat/content/images/schedule.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M27.625 4.25H24.4375V3.1875C24.4375 2.90571 24.3256 2.63546 24.1263 2.4362C23.927 2.23694 23.6568 2.125 23.375 2.125C23.0932 2.125 22.823 2.23694 22.6237 2.4362C22.4244 2.63546 22.3125 2.90571 22.3125 3.1875V4.25H11.6875V3.1875C11.6875 2.90571 11.5756 2.63546 11.3763 2.4362C11.177 2.23694 10.9068 2.125 10.625 2.125C10.3432 2.125 10.073 2.23694 9.8737 2.4362C9.67444 2.63546 9.5625 2.90571 9.5625 3.1875V4.25H6.375C5.81141 4.25 5.27091 4.47388 4.8724 4.8724C4.47388 5.27091 4.25 5.81141 4.25 6.375V27.625C4.25 28.1886 4.47388 28.7291 4.8724 29.1276C5.27091 29.5261 5.81141 29.75 6.375 29.75H27.625C28.1886 29.75 28.7291 29.5261 29.1276 29.1276C29.5261 28.7291 29.75 28.1886 29.75 27.625V6.375C29.75 5.81141 29.5261 5.27091 29.1276 4.8724C28.7291 4.47388 28.1886 4.25 27.625 4.25ZM9.5625 6.375V7.4375C9.5625 7.71929 9.67444 7.98954 9.8737 8.1888C10.073 8.38806 10.3432 8.5 10.625 8.5C10.9068 8.5 11.177 8.38806 11.3763 8.1888C11.5756 7.98954 11.6875 7.71929 11.6875 7.4375V6.375H22.3125V7.4375C22.3125 7.71929 22.4244 7.98954 22.6237 8.1888C22.823 8.38806 23.0932 8.5 23.375 8.5C23.6568 8.5 23.927 8.38806 24.1263 8.1888C24.3256 7.98954 24.4375 7.71929 24.4375 7.4375V6.375H27.625V10.625H6.375V6.375H9.5625ZM27.625 27.625H6.375V12.75H27.625V27.625ZM14.875 15.9375V24.4375C14.875 24.7193 14.7631 24.9895 14.5638 25.1888C14.3645 25.3881 14.0943 25.5 13.8125 25.5C13.5307 25.5 13.2605 25.3881 13.0612 25.1888C12.8619 24.9895 12.75 24.7193 12.75 24.4375V17.6561L12.163 17.9509C11.9108 18.077 11.6188 18.0978 11.3513 18.0086C11.0838 17.9195 10.8627 17.7277 10.7366 17.4755C10.6105 17.2233 10.5897 16.9313 10.6789 16.6638C10.768 16.3963 10.9598 16.1752 11.212 16.0491L13.337 14.9866C13.4991 14.9055 13.6792 14.8672 13.8602 14.8753C14.0412 14.8834 14.2171 14.9377 14.3713 15.033C14.5254 15.1283 14.6526 15.2615 14.7407 15.4198C14.8289 15.5781 14.8751 15.7563 14.875 15.9375ZM22.7322 19.9816L20.1875 23.375H22.3125C22.5943 23.375 22.8645 23.4869 23.0638 23.6862C23.2631 23.8855 23.375 24.1557 23.375 24.4375C23.375 24.7193 23.2631 24.9895 23.0638 25.1888C22.8645 25.3881 22.5943 25.5 22.3125 25.5H18.0625C17.8652 25.5 17.6718 25.4451 17.5039 25.3413C17.3361 25.2376 17.2004 25.0892 17.1122 24.9127C17.0239 24.7362 16.9866 24.5386 17.0043 24.3421C17.022 24.1456 17.0941 23.9579 17.2125 23.8L21.0348 18.704C21.1218 18.5882 21.1842 18.4559 21.2181 18.3152C21.2521 18.1745 21.257 18.0283 21.2324 17.8857C21.2079 17.743 21.1544 17.6069 21.0754 17.4856C20.9963 17.3643 20.8933 17.2605 20.7727 17.1805C20.6521 17.1004 20.5163 17.0459 20.3739 17.0202C20.2314 16.9945 20.0852 16.9982 19.9442 17.0311C19.8032 17.0639 19.6705 17.1252 19.554 17.2112C19.4376 17.2972 19.3399 17.4061 19.2671 17.5312C19.1994 17.6559 19.1074 17.7658 18.9966 17.8544C18.8857 17.9429 18.7582 18.0084 18.6217 18.0469C18.4851 18.0854 18.3422 18.0961 18.2014 18.0785C18.0606 18.0609 17.9248 18.0152 17.802 17.9443C17.6791 17.8733 17.5717 17.7785 17.4861 17.6653C17.4005 17.5522 17.3384 17.423 17.3035 17.2855C17.2686 17.148 17.2616 17.0048 17.283 16.8646C17.3043 16.7243 17.3535 16.5897 17.4277 16.4688C17.7786 15.8614 18.3202 15.3868 18.9683 15.1184C19.6164 14.8501 20.335 14.8031 21.0126 14.9847C21.6901 15.1663 22.2889 15.5663 22.716 16.1227C23.1431 16.6792 23.3748 17.361 23.375 18.0625C23.3773 18.7554 23.1514 19.4299 22.7322 19.9816Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

3
examples/demos/thermostat/content/images/settings.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

3
examples/demos/thermostat/content/images/stats.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M29.75 26.5625H28.6875V5.3125C28.6875 5.03071 28.5756 4.76046 28.3763 4.5612C28.177 4.36194 27.9068 4.25 27.625 4.25H20.1875C19.9057 4.25 19.6355 4.36194 19.4362 4.5612C19.2369 4.76046 19.125 5.03071 19.125 5.3125V10.625H12.75C12.4682 10.625 12.198 10.7369 11.9987 10.9362C11.7994 11.1355 11.6875 11.4057 11.6875 11.6875V17H6.375C6.09321 17 5.82296 17.1119 5.6237 17.3112C5.42444 17.5105 5.3125 17.7807 5.3125 18.0625V26.5625H4.25C3.96821 26.5625 3.69796 26.6744 3.4987 26.8737C3.29944 27.073 3.1875 27.3432 3.1875 27.625C3.1875 27.9068 3.29944 28.177 3.4987 28.3763C3.69796 28.5756 3.96821 28.6875 4.25 28.6875H29.75C30.0318 28.6875 30.302 28.5756 30.5013 28.3763C30.7006 28.177 30.8125 27.9068 30.8125 27.625C30.8125 27.3432 30.7006 27.073 30.5013 26.8737C30.302 26.6744 30.0318 26.5625 29.75 26.5625ZM21.25 6.375H26.5625V26.5625H21.25V6.375ZM13.8125 12.75H19.125V26.5625H13.8125V12.75ZM7.4375 19.125H11.6875V26.5625H7.4375V19.125Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

3
examples/demos/thermostat/content/images/temperature.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="34" height="35" viewBox="0 0 34 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23.5623 11.1967C23.4027 10.9647 23.3417 10.6789 23.3928 10.4019C23.4438 10.125 23.6027 9.87969 23.8345 9.71984C25.2158 8.76625 27.378 8.76625 28.7592 9.71984C29.4233 10.1807 30.6027 10.1807 31.272 9.71984C31.504 9.57246 31.784 9.52069 32.0533 9.57539C32.3227 9.6301 32.5603 9.78703 32.7164 10.0132C32.8724 10.2394 32.9348 10.5173 32.8904 10.7885C32.8459 11.0597 32.6981 11.3031 32.478 11.4677C31.7415 11.9343 30.8875 12.1821 30.0156 12.1821C29.1437 12.1821 28.2898 11.9343 27.5533 11.4677C26.8892 11.0068 25.7098 11.0068 25.0405 11.4677C24.9256 11.5469 24.7963 11.6028 24.6598 11.6321C24.5234 11.6614 24.3825 11.6636 24.2452 11.6384C24.108 11.6132 23.977 11.5613 23.8598 11.4855C23.7426 11.4097 23.6415 11.3116 23.5623 11.1967ZM31.272 13.9698C30.608 14.4307 29.4286 14.4307 28.7592 13.9698C27.378 13.0162 25.2158 13.0162 23.8345 13.9698C23.7139 14.0465 23.61 14.1467 23.529 14.2644C23.448 14.3822 23.3916 14.5151 23.3631 14.6551C23.3347 14.7952 23.3348 14.9395 23.3634 15.0796C23.392 15.2196 23.4486 15.3524 23.5298 15.47C23.611 15.5877 23.715 15.6877 23.8358 15.7642C23.9565 15.8407 24.0914 15.892 24.2325 15.9151C24.3735 15.9383 24.5178 15.9327 24.6566 15.8987C24.7954 15.8648 24.926 15.8032 25.0405 15.7177C25.7045 15.2568 26.8839 15.2568 27.5533 15.7177C28.2898 16.1843 29.1437 16.4321 30.0156 16.4321C30.8875 16.4321 31.7415 16.1843 32.478 15.7177C32.6981 15.5531 32.8459 15.3097 32.8904 15.0385C32.9348 14.7673 32.8724 14.4894 32.7164 14.2632C32.5603 14.037 32.3227 13.8801 32.0533 13.8254C31.784 13.7707 31.504 13.8225 31.272 13.9698ZM20.1875 24.9375C20.1871 25.7323 19.9638 26.5111 19.5431 27.1853C19.1223 27.8596 18.5209 28.4024 17.8071 28.752C17.0933 29.1017 16.2958 29.2442 15.5051 29.1633C14.7145 29.0824 13.9623 28.7815 13.3341 28.2946C12.7058 27.8077 12.2267 27.1545 11.9512 26.409C11.6756 25.6635 11.6146 24.8556 11.775 24.0772C11.9355 23.2988 12.3111 22.5809 12.859 22.0052C13.407 21.4295 14.1054 21.019 14.875 20.8203V6.875C14.875 6.59321 14.9869 6.32296 15.1862 6.1237C15.3855 5.92444 15.6557 5.8125 15.9375 5.8125C16.2193 5.8125 16.4895 5.92444 16.6888 6.1237C16.8881 6.32296 17 6.59321 17 6.875V20.8203C17.912 21.0572 18.7196 21.5899 19.2964 22.3349C19.8732 23.08 20.1866 23.9953 20.1875 24.9375ZM18.0625 24.9375C18.0625 24.5172 17.9379 24.1064 17.7044 23.7569C17.4709 23.4075 17.139 23.1351 16.7507 22.9743C16.3624 22.8134 15.9351 22.7713 15.5229 22.8533C15.1107 22.9353 14.7321 23.1377 14.4349 23.4349C14.1377 23.7321 13.9353 24.1107 13.8533 24.5229C13.7713 24.9351 13.8134 25.3624 13.9743 25.7507C14.1351 26.139 14.4075 26.4709 14.7569 26.7044C15.1064 26.9379 15.5172 27.0625 15.9375 27.0625C16.5011 27.0625 17.0416 26.8386 17.4401 26.4401C17.8386 26.0416 18.0625 25.5011 18.0625 24.9375ZM24.4375 24.9375C24.4366 26.3748 24.0713 27.7883 23.3756 29.0461C22.68 30.3038 21.6768 31.3646 20.4599 32.1293C19.2429 32.894 17.8519 33.3376 16.4169 33.4187C14.982 33.4997 13.5498 33.2156 12.2545 32.5928C10.9592 31.9701 9.84288 31.029 9.01003 29.8576C8.17718 28.6863 7.65496 27.3228 7.49219 25.8948C7.32942 24.4668 7.53141 23.0208 8.07929 21.6921C8.62717 20.3633 9.50303 19.1952 10.625 18.2969V6.875C10.625 5.46604 11.1847 4.11478 12.181 3.1185C13.1773 2.12221 14.5285 1.5625 15.9375 1.5625C17.3465 1.5625 18.6977 2.12221 19.694 3.1185C20.6903 4.11478 21.25 5.46604 21.25 6.875V18.2969C22.2448 19.0943 23.0477 20.1051 23.5994 21.2545C24.1511 22.4039 24.4375 23.6625 24.4375 24.9375ZM22.3125 24.9375C22.3117 23.9097 22.0627 22.8973 21.5869 21.9863C21.111 21.0752 20.4223 20.2926 19.5792 19.7047C19.4382 19.6062 19.3232 19.475 19.2441 19.3224C19.165 19.1697 19.1241 19.0001 19.125 18.8281V6.875C19.125 6.02962 18.7892 5.21887 18.1914 4.6211C17.5936 4.02333 16.7829 3.6875 15.9375 3.6875C15.0921 3.6875 14.2814 4.02333 13.6836 4.6211C13.0858 5.21887 12.75 6.02962 12.75 6.875V18.8281C12.75 18.9992 12.7087 19.1677 12.6297 19.3194C12.5506 19.4711 12.436 19.6014 12.2958 19.6994C11.3962 20.3255 10.6733 21.1729 10.1967 22.1599C9.72014 23.1468 9.50608 24.24 9.57519 25.3338C9.6443 26.4276 9.99425 27.4852 10.5912 28.4043C11.1882 29.3234 12.0121 30.0731 12.9833 30.581C13.9545 31.0889 15.0403 31.3378 16.1358 31.3037C17.2312 31.2697 18.2994 30.9537 19.2372 30.3864C20.1749 29.8192 20.9506 29.0197 21.4893 28.0652C22.028 27.1107 22.3115 26.0335 22.3125 24.9375Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

3
examples/demos/thermostat/content/images/theme.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 0C7.21997 0 5.47991 0.527841 3.99987 1.51677C2.51983 2.50571 1.36628 3.91131 0.685088 5.55585C0.00389956 7.20038 -0.17433 9.00998 0.172937 10.7558C0.520203 12.5016 1.37737 14.1053 2.63604 15.364C3.89471 16.6226 5.49836 17.4798 7.24419 17.8271C8.99002 18.1743 10.7996 17.9961 12.4442 17.3149C14.0887 16.6337 15.4943 15.4802 16.4832 14.0001C17.4722 12.5201 18 10.78 18 9C17.9975 6.61382 17.0485 4.3261 15.3612 2.63882C13.6739 0.95154 11.3862 0.00251984 9 0ZM9.69231 1.41663C10.161 1.4594 10.6246 1.54633 11.0769 1.67625V16.3272C10.6246 16.4571 10.161 16.5441 9.69231 16.5868V1.41663ZM12.4615 2.21798C12.955 2.47061 13.4193 2.77646 13.8462 3.1301V14.8699C13.4193 15.2235 12.955 15.5294 12.4615 15.782V2.21798ZM1.38462 9C1.3869 7.10083 2.09785 5.27087 3.37832 3.86828C4.65878 2.46569 6.41659 1.59144 8.30769 1.41663V16.5834C6.41659 16.4086 4.65878 15.5343 3.37832 14.1317C2.09785 12.7291 1.3869 10.8992 1.38462 9ZM15.2308 13.3737V4.62635C16.1318 5.90679 16.6154 7.43429 16.6154 9C16.6154 10.5657 16.1318 12.0932 15.2308 13.3737Z" fill="#888888"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
examples/demos/thermostat/content/images/thermostat.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.1875 12.75V22.3125C3.1875 22.5943 3.29944 22.8645 3.4987 23.0638C3.69796 23.2631 3.96821 23.375 4.25 23.375H14.875C15.1568 23.375 15.427 23.4869 15.6263 23.6862C15.8256 23.8855 15.9375 24.1557 15.9375 24.4375C15.9375 24.7193 15.8256 24.9895 15.6263 25.1888C15.427 25.3881 15.1568 25.5 14.875 25.5H12.75V27.625H14.875C15.1568 27.625 15.427 27.7369 15.6263 27.9362C15.8256 28.1355 15.9375 28.4057 15.9375 28.6875C15.9375 28.9693 15.8256 29.2395 15.6263 29.4388C15.427 29.6381 15.1568 29.75 14.875 29.75H8.5C8.21821 29.75 7.94796 29.6381 7.7487 29.4388C7.54944 29.2395 7.4375 28.9693 7.4375 28.6875C7.4375 28.4057 7.54944 28.1355 7.7487 27.9362C7.94796 27.7369 8.21821 27.625 8.5 27.625H10.625V25.5H4.25C3.40462 25.5 2.59387 25.1642 1.9961 24.5664C1.39832 23.9686 1.0625 23.1579 1.0625 22.3125V12.75C1.0625 11.9046 1.39832 11.0939 1.9961 10.4961C2.59387 9.89832 3.40462 9.5625 4.25 9.5625H14.875C15.1568 9.5625 15.427 9.67444 15.6263 9.8737C15.8256 10.073 15.9375 10.3432 15.9375 10.625C15.9375 10.9068 15.8256 11.177 15.6263 11.3763C15.427 11.5756 15.1568 11.6875 14.875 11.6875H4.25C3.96821 11.6875 3.69796 11.7994 3.4987 11.9987C3.29944 12.198 3.1875 12.4682 3.1875 12.75ZM27.625 8.5H23.375C23.0932 8.5 22.823 8.61194 22.6237 8.8112C22.4244 9.01046 22.3125 9.28071 22.3125 9.5625C22.3125 9.84429 22.4244 10.1145 22.6237 10.3138C22.823 10.5131 23.0932 10.625 23.375 10.625H27.625C27.9068 10.625 28.177 10.5131 28.3763 10.3138C28.5756 10.1145 28.6875 9.84429 28.6875 9.5625C28.6875 9.28071 28.5756 9.01046 28.3763 8.8112C28.177 8.61194 27.9068 8.5 27.625 8.5ZM27.625 12.75H23.375C23.0932 12.75 22.823 12.8619 22.6237 13.0612C22.4244 13.2605 22.3125 13.5307 22.3125 13.8125C22.3125 14.0943 22.4244 14.3645 22.6237 14.5638C22.823 14.7631 23.0932 14.875 23.375 14.875H27.625C27.9068 14.875 28.177 14.7631 28.3763 14.5638C28.5756 14.3645 28.6875 14.0943 28.6875 13.8125C28.6875 13.5307 28.5756 13.2605 28.3763 13.0612C28.177 12.8619 27.9068 12.75 27.625 12.75ZM32.9375 6.375V27.625C32.9375 28.1886 32.7136 28.7291 32.3151 29.1276C31.9166 29.5261 31.3761 29.75 30.8125 29.75H20.1875C19.6239 29.75 19.0834 29.5261 18.6849 29.1276C18.2864 28.7291 18.0625 28.1886 18.0625 27.625V6.375C18.0625 5.81141 18.2864 5.27091 18.6849 4.8724C19.0834 4.47388 19.6239 4.25 20.1875 4.25H30.8125C31.3761 4.25 31.9166 4.47388 32.3151 4.8724C32.7136 5.27091 32.9375 5.81141 32.9375 6.375ZM30.8125 27.625V6.375H20.1875V27.625H30.8125ZM25.5 22.3125C25.1848 22.3125 24.8767 22.406 24.6146 22.5811C24.3525 22.7562 24.1482 23.0051 24.0276 23.2963C23.9069 23.5876 23.8754 23.908 23.9369 24.2172C23.9984 24.5263 24.1502 24.8103 24.373 25.0332C24.5959 25.2561 24.8799 25.4079 25.1891 25.4694C25.4982 25.5309 25.8187 25.4993 26.1099 25.3787C26.4011 25.2581 26.65 25.0538 26.8252 24.7917C27.0003 24.5296 27.0938 24.2215 27.0938 23.9062C27.0938 23.4836 26.9258 23.0782 26.627 22.7793C26.3281 22.4804 25.9227 22.3125 25.5 22.3125Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

3
examples/demos/thermostat/content/images/up.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.875 5.25V11.25C22.875 11.5484 22.7564 11.8345 22.5455 12.0455C22.3345 12.2565 22.0483 12.375 21.75 12.375C21.4516 12.375 21.1654 12.2565 20.9545 12.0455C20.7435 11.8345 20.625 11.5484 20.625 11.25V7.96875L13.5459 15.0488C13.4414 15.1536 13.3172 15.2368 13.1804 15.2936C13.0437 15.3504 12.8971 15.3796 12.749 15.3796C12.601 15.3796 12.4543 15.3504 12.3176 15.2936C12.1809 15.2368 12.0567 15.1536 11.9521 15.0488L8.99996 12.0938L3.0459 18.0459C2.83455 18.2573 2.54791 18.376 2.24902 18.376C1.95014 18.376 1.66349 18.2573 1.45215 18.0459C1.2408 17.8346 1.12207 17.5479 1.12207 17.2491C1.12207 16.9502 1.2408 16.6635 1.45215 16.4522L8.20215 9.70219C8.30666 9.59731 8.43086 9.51409 8.5676 9.45731C8.70435 9.40053 8.85096 9.3713 8.99902 9.3713C9.14709 9.3713 9.2937 9.40053 9.43044 9.45731C9.56719 9.51409 9.69138 9.59731 9.7959 9.70219L12.75 12.6562L19.0312 6.375H15.75C15.4516 6.375 15.1654 6.25647 14.9545 6.0455C14.7435 5.83452 14.625 5.54837 14.625 5.25C14.625 4.95163 14.7435 4.66548 14.9545 4.4545C15.1654 4.24353 15.4516 4.125 15.75 4.125H21.75C22.0483 4.125 22.3345 4.24353 22.5455 4.4545C22.7564 4.66548 22.875 4.95163 22.875 5.25Z" fill="#CC0A0A"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
examples/demos/thermostat/doc/images/desktop_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
examples/demos/thermostat/doc/images/desktop_light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
examples/demos/thermostat/doc/images/mobile_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
examples/demos/thermostat/doc/images/mobile_light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
examples/demos/thermostat/doc/images/small_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
examples/demos/thermostat/doc/images/small_light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

52
examples/demos/thermostat/doc/src/thermostat.qdoc Normal file
View File

@ -0,0 +1,52 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
/*!
\title Thermostat
\examplecategory {Application Examples}
\ingroup qtquickdemos
\example demos/thermostat
\brief 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.
\meta {tag} {demo,quick,charts}
\table
\header
\li Light theme
\li Dark theme
\row
\li \inlineimage small_light.png
\li \inlineimage small_dark.png
\row
\li \inlineimage mobile_light.png
\li \inlineimage mobile_dark.png
\row
\li \inlineimage desktop_light.png
\li \inlineimage desktop_dark.png
\endtable
\e{Thermostat} demonstrates a sample thermostat application that is fully responsive. The example can be run and edited in both \l{Qt Design Studio} and \l{Qt Creator}.
It shows how to implement different designs depending on the window size.
\section1 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 \c Constants.qml to achieve this behavior.
\quotefromfile demos/thermostat/imports/Thermostat/Constants.qml
\skipto isBigDesktopLayout
\printuntil isSmallLayout
In \c App.qml, the properties were bound to the window height and width at application startup.
\quotefromfile demos/thermostat/content/App.qml
\skipto Component.onCompleted
\printuntil Constants.isSmallLayout
\printuntil }
\printuntil }
The states are then used to control the properties of the component such as width, height, fontSize, position, layout (column or row), etc.
\quotefromfile demos/thermostat/content/StatisticsScrollViewForm.ui.qml
\skipto states
\printuntil ]
*/

Some files were not shown because too many files have changed in this diff Show More