C
Qt Quick Ultralite Thermostat Demo
Demonstrates a pure QML-based application built using Qt Quick Ultralite.
Overview
This example showcases multiple aspects that developers might face while working on production ready applications:
- Handling different target display resolutions in a single application
- Translating applications built with Qt Quick Ultralite (English, German, Japanese, Arabic, Thai and Hindi)
- Localizing applications by using different units (metric and imperial)
Note: On EK-RA6M3G, this demo uses Static font engine, and languages with complex scripts are disabled.
Benchmark mode
In the Benchmark mode, the application runs for a predefined time of 30 seconds and the performance metrics are displayed on the screen at the end of 30-seconds interval. If the Qt Quick Ultralite Core library is built with QUL_ENABLE_PERFORMANCE_CONSOLE_OUTPUT=ON
, the same results are also displayed on the serial console.
The following performance metrics are displayed at the end of the test:
Parameter | Description | |
---|---|---|
1 | Total frames | Total number of frames in the recording interval. |
2 | Average FPS | Average frames per second value measured during the recording interval. |
3 | Minimum FPS | Minimum frames per second value captured during the recording. |
4 | Maximum heap usage | Maximum heap usage in bytes recorded since the application was started. |
5 | Maximum stack usage | Maximum stack usage in bytes recorded since the application was started. |
6 | Average CPU load | CPU Load in percentage value averaged over the recording interval. |
The Benchmark mode is provided as an independent CMake target with the name thermo_small_benchmark
and thermo_big_benchmark
. To run the Benchmark mode, build and flash the benchmark mode target binary.
The main qmlproject file includes the benchmark_module.qmlproject file as shown below:
ModuleFiles { files: [ "mode/benchmark_module.qmlproject" ] }
Import the following modules in the root QML file.
import QtQuickUltralite.Extras 2.0 import Benchmark 1.0 import QtQuickUltralite.Profiling
- Qt Quick Ultralite Extras module provides QulPerf object which allows starting and stopping the measurements.
Benchmark
module is provided bybenchmark_module.qmlproject
file. It provides methods for simulating touch gesture for flick control.- Qt Quick Ultralite Profiling module provides the screen overlay QulPerfOverlay for displaying performance metrics on top of the application user interface.
Add the QulPerfOverlay
QML object for benchmark results in root qml. This overlay becomes visible when benchmarkTimer
is triggered after 30 seconds.
QulPerfOverlay { id: benchmarkResult anchors.horizontalCenter: parent.horizontalCenter; anchors.verticalCenter: parent.verticalCenter; visible: false }
Start the recording in the root QML file, rootqml/+benchmark/thermo.qml
, when the root object is instantiated and Component.onCompleted
signal is triggered.
Component.onCompleted: { QulPerf.recording = true }
The application runs for 30 seconds. The recording is stopped after 30 seconds and benchmark results screen overlay is made visible.
Timer { id: benchmarkTimer interval: 30000 running: true repeat: false onTriggered: { QulPerf.recording = false; benchmarkResult.visible = true } }
Note: The Benchmark mode requires Qt Quick Ultralite Core and Platform libraries to be built with QUL_ENABLE_PERFORMANCE_LOGGING=ON
and QUL_ENABLE_HARDWARE_PERFORMANCE_LOGGING=ON
.
File variants
The thermostat demo includes file variants and selectors for a smaller UI and for a benchmarking mode. To export the sources for the benchmark mode, apply the "benchmark"
file selector. To export sources for the small UI variant, use the "small"
file selector
qmlprojectexporter --selector benchmark,small demos/thermo/qmlproject/thermo.qmlproject
When building with CMake, the selectors are already taken into account, making a normal and a benchmarking target as described above.
Target platforms
- EK-RA6M3G
- MCIMX93
- MIMXRT1050
- MIMXRT1060
- MIMXRT1064
- STM32F469i
- STM32F769i
- STM32H750b
Screenshots
Thermostat Demo for small screens
Thermostat Demo for large screens
Files:
- thermo/+small/Theme.qml
- thermo/AnimatedDigit.qml
- thermo/BottomBar.qml
- thermo/CMakeLists.txt
- thermo/Card.qml
- thermo/CardRow.qml
- thermo/FanControlButton.qml
- thermo/LanguageButton.qml
- thermo/LanguageDialog.qml
- thermo/PlacesView.qml
- thermo/PowerSwitch.qml
- thermo/RoomControlButton.qml
- thermo/RoomSchedule.qml
- thermo/RoomView.qml
- thermo/ScheduleView.qml
- thermo/StatsContents.qml
- thermo/StatsView.qml
- thermo/Theme.qml
- thermo/ThermoView.qml
- thermo/TimeIntervalSlider.qml
- thermo/TimeIntervalSliderHandle.qml
- thermo/TopBar.qml
- thermo/WeatherStatus.qml
- thermo/dynamic/Configuration.qml
- thermo/fonts/Spark/FontConfiguration.qml
- thermo/fonts/Static/FontConfiguration.qml
- thermo/imperial/Units.qml
- thermo/imports/Thermo/ColorStyle.qml
- thermo/imports/Thermo/GlobalState.qml
- thermo/imports/Thermo/Room.qml
- thermo/imports/Thermo/Rooms.qml
- thermo/imports/Thermo/qmldir
- thermo/imports/ThermoConfiguration/qmldir
- thermo/metric/Units.qml
- thermo/mode/+benchmark/benchmark_module.qmlproject
- thermo/mode/+benchmark/simulation/flickControl.cpp
- thermo/mode/+benchmark/simulation/flickControl.h
- thermo/mode/benchmark_module.qmlproject
- thermo/qmlproject/thermo.qmlproject
- thermo/qmlproject/thermo_configuration_module.qmlproject
- thermo/qmlproject/thermo_configuration_module_ek-ra6m3g.qmlproject
- thermo/qmlproject/thermo_ek-ra6m3g.qmlproject
- thermo/qmlproject/thermo_mimxrt1064.qmlproject
- thermo/qmlproject/thermo_module.qmlproject
- thermo/qmlproject/thermo_module_ek-ra6m3g.qmlproject
- thermo/qmlproject/thermo_stm32.qmlproject
- thermo/rootqml/+benchmark/thermo.qml
- thermo/rootqml/thermo.qml
- thermo/src/os/baremetal/main.cpp
- thermo/static/Configuration.qml
- thermo/thermo.ar_EG.ts
- thermo/thermo.de_DE.ts
- thermo/thermo.en_GB.ts
- thermo/thermo.hi_IN.ts
- thermo/thermo.ja_JP.ts
- thermo/thermo.th_TH.ts
Images:
- thermo/SparkFE/+small/popup-bg.png
- thermo/SparkFE/popup-bg.png
- thermo/StaticFE/+small/popup-bg.png
- thermo/StaticFE/popup-bg.png
- thermo/images/+small/EGYPT.png
- thermo/images/+small/GERMANY.png
- thermo/images/+small/INDIA.png
- thermo/images/+small/JAPAN.png
- thermo/images/+small/Static/popup-bg.png
- thermo/images/+small/THAILAND.png
- thermo/images/+small/UK.png
- thermo/images/+small/auto-card.png
- thermo/images/+small/auto-on.png
- thermo/images/+small/baseline-arrow-back.png
- thermo/images/+small/btn-bg-big-off.png
- thermo/images/+small/btn-bg-big-on.png
- thermo/images/+small/btn-bg-down.png
- thermo/images/+small/change-language.png
- thermo/images/+small/close.png
- thermo/images/+small/digitMaskBottom.png
- thermo/images/+small/digitMaskTop.png
- thermo/images/+small/dryer-on-small.png
- thermo/images/+small/dryer-on.png
- thermo/images/+small/eco-on-small.png
- thermo/images/+small/eco-on.png
- thermo/images/+small/fan-1-on-small.png
- thermo/images/+small/fan-1-on.png
- thermo/images/+small/fan-2-on-small.png
- thermo/images/+small/fan-2-on.png
- thermo/images/+small/fan-3-on-small.png
- thermo/images/+small/fan-3-on.png
- thermo/images/+small/fan-4-on-small.png
- thermo/images/+small/fan-4-on.png
- thermo/images/+small/fan-off-small.png
- thermo/images/+small/fan-off.png
- thermo/images/+small/jog-off.png
- thermo/images/+small/jog.png
- thermo/images/+small/page-indicator.png
- thermo/images/+small/place-back.png
- thermo/images/+small/popup-bg.png
- thermo/images/+small/power-on.png
- thermo/images/+small/pressed-bg-down.png
- thermo/images/+small/pressed-bg-up.png
- thermo/images/+small/qt-logo.png
- thermo/images/+small/radiobutton-checked-pressed.png
- thermo/images/+small/radiobutton-checked.png
- thermo/images/+small/radiobutton-pressed.png
- thermo/images/+small/radiobutton.png
- thermo/images/+small/scrollbar-off-track.png
- thermo/images/+small/scrollbar-temperature-track.png
- thermo/images/+small/selected.png
- thermo/images/+small/separator-line.png
- thermo/images/+small/slider-handle.png
- thermo/images/+small/stats-month.png
- thermo/images/+small/stats-year.png
- thermo/images/+small/status-small.png
- thermo/images/+small/streamer-on-small.png
- thermo/images/+small/streamer-on.png
- thermo/images/+small/switch-bg.png
- thermo/images/+small/switch-handle.png
- thermo/images/+small/switch-i.png
- thermo/images/+small/switch-o.png
- thermo/images/+small/temp-down-pressed.png
- thermo/images/+small/temp-up-pressed.png
- thermo/images/+small/thermo-handle.png
- thermo/images/+small/toggle-month.png
- thermo/images/+small/toggle-year.png
- thermo/images/+small/top-bar-shadow.png
- thermo/images/EGYPT.png
- thermo/images/GERMANY.png
- thermo/images/INDIA.png
- thermo/images/JAPAN.png
- thermo/images/Static/popup-bg.png
- thermo/images/THAILAND.png
- thermo/images/UK.png
- thermo/images/auto-card.png
- thermo/images/auto-on.png
- thermo/images/baseline-arrow-back.png
- thermo/images/btn-bg-big-off.png
- thermo/images/btn-bg-big-on.png
- thermo/images/btn-bg-down.png
- thermo/images/card-back-bottomleft.png
- thermo/images/card-back-bottomright.png
- thermo/images/card-back-topleft.png
- thermo/images/card-back-topright.png
- thermo/images/change-language.png
- thermo/images/close.png
- thermo/images/digitMaskBottom.png
- thermo/images/digitMaskTop.png
- thermo/images/dryer-on-small.png
- thermo/images/dryer-on.png
- thermo/images/eco-on-small.png
- thermo/images/eco-on.png
- thermo/images/fan-1-on-small.png
- thermo/images/fan-1-on.png
- thermo/images/fan-2-on-small.png
- thermo/images/fan-2-on.png
- thermo/images/fan-3-on-small.png
- thermo/images/fan-3-on.png
- thermo/images/fan-4-on-small.png
- thermo/images/fan-4-on.png
- thermo/images/fan-off-small.png
- thermo/images/fan-off.png
- thermo/images/inner-circle.png
- thermo/images/jog-off.png
- thermo/images/jog.png
- thermo/images/page-indicator.png
- thermo/images/place-back.png
- thermo/images/power-on.png
- thermo/images/pressed-bg-down.png
- thermo/images/pressed-bg-up.png
- thermo/images/qt-logo.png
- thermo/images/radiobutton-checked-pressed.png
- thermo/images/radiobutton-checked.png
- thermo/images/radiobutton-disabled.png
- thermo/images/radiobutton-pressed.png
- thermo/images/radiobutton.png
- thermo/images/scrollbar-off-track.png
- thermo/images/scrollbar-temperature-track.png
- thermo/images/selected.png
- thermo/images/separator-line.png
- thermo/images/slider-handle.png
- thermo/images/stats-month.png
- thermo/images/stats-year.png
- thermo/images/status-small.png
- thermo/images/streamer-on-small.png
- thermo/images/streamer-on.png
- thermo/images/switch-bg.png
- thermo/images/switch-handle.png
- thermo/images/switch-i.png
- thermo/images/switch-o.png
- thermo/images/temp-down-pressed.png
- thermo/images/temp-up-pressed.png
- thermo/images/thermo-handle.png
- thermo/images/toggle-month.png
- thermo/images/toggle-year.png
- thermo/images/top-bar-shadow.png
- thermo/images/weather/+small/w_01.png
- thermo/images/weather/+small/w_02.png
- thermo/images/weather/+small/w_03.png
- thermo/images/weather/+small/w_04.png
- thermo/images/weather/+small/w_05.png
- thermo/images/weather/+small/w_06.png
- thermo/images/weather/+small/w_07.png
- thermo/images/weather/w_01.png
- thermo/images/weather/w_02.png
- thermo/images/weather/w_03.png
- thermo/images/weather/w_04.png
- thermo/images/weather/w_05.png
- thermo/images/weather/w_06.png
- thermo/images/weather/w_07.png
Available under certain Qt licenses.
Find out more.