Refactor SettingsUI source code and add QML module support

Split application and plugins structure to use QML modules
feature

Move settingsui binary and plugins it uses under examples
as those are not really documented nor production quality.

Task-number: QTBUG-97737
Pick-to: 6.2 6.3
Change-Id: I4b030a5a42b29554a45c23eab4170be980cd5dc5
Reviewed-by: Qt CI Bot <qt_ci_bot@qt-project.org>
Reviewed-by: Ulf Hermann <ulf.hermann@qt.io>

50 files changed, 3537 insertions, 0 deletions

diff --git a/examples/CMakeLists.txt b/examples/CMakeLists.txt
new file mode 100644
index 0000000..dcb8cf0
--- /dev/null
+++ b/examples/CMakeLists.txt
@@ -0,0 +1,5 @@
+qt_examples_build_begin(EXTERNAL_BUILD)
+
+add_subdirectory(deviceutilities)
+
+qt_examples_build_end()
diff --git a/examples/deviceutilities/CMakeLists.txt b/examples/deviceutilities/CMakeLists.txt
new file mode 100644
index 0000000..1704ea5
--- /dev/null
+++ b/examples/deviceutilities/CMakeLists.txt
@@ -0,0 +1,3 @@
+if(TARGET Qt::Quick)
+    add_subdirectory(settingsuiapp)
+endif()
diff --git a/examples/deviceutilities/settingsuiapp/AutoScroller.qml b/examples/deviceutilities/settingsuiapp/AutoScroller.qml
new file mode 100644
index 0000000..e1d5c27
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/AutoScroller.qml
@@ -0,0 +1,106 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtQuick.VirtualKeyboard
+
+Item {
+
+    property var innerFlickable
+    property var outerFlickable
+    property var inputItem: InputContext.inputItem
+
+    onInputItemChanged: {
+        innerFlickable = null
+        outerFlickable = null
+        if (inputItem !== null) {
+            var parent_ = inputItem.parent
+            while (parent_) {
+                if (parent_.maximumFlickVelocity) {
+                    if (innerFlickable) {
+                        outerFlickable = parent_
+                        break
+                    } else {
+                        innerFlickable = parent_
+                    }
+                }
+                parent_ = parent_.parent
+            }
+            delayedLoading.triggered()
+        }
+    }
+
+    function ensureVisible(flickable) {
+        if (Qt.inputMethod.visible && inputItem && flickable && flickable.visible && flickable.interactive) {
+
+            var verticallyFlickable = (flickable.flickableDirection === Flickable.HorizontalAndVerticalFlick || flickable.flickableDirection === Flickable.VerticalFlick
+                                       || (flickable.flickableDirection === Flickable.AutoFlickDirection && flickable.contentHeight > flickable.height))
+            var horizontallyFlickable = (flickable.flickableDirection === Flickable.HorizontalAndVerticalFlick || flickable.flickableDirection === Flickable.HorizontalFlick
+                                         || (flickable.flickableDirection === Flickable.AutoFlickDirection && flickable.contentWidth > flickable.width))
+
+            if ((!verticallyFlickable && !horizontallyFlickable) || !inputItem.hasOwnProperty("cursorRectangle"))
+                return
+
+            var cursorRectangle = flickable.contentItem.mapFromItem(inputItem, inputItem.cursorRectangle.x, inputItem.cursorRectangle.y)
+
+            var oldContentY = flickable.contentY
+            if (verticallyFlickable) {
+                var scrollMarginVertical = (flickable && flickable.scrollMarginVertical) ? flickable.scrollMarginVertical : 10
+                if (flickable.contentY >= cursorRectangle.y  - scrollMarginVertical)
+                    flickable.contentY = Math.max(0, cursorRectangle.y  - scrollMarginVertical)
+                else if (flickable.contentY + flickable.height <= cursorRectangle.y  + inputItem.cursorRectangle.height + scrollMarginVertical)
+                    flickable.contentY = Math.min(flickable.contentHeight - flickable.height, cursorRectangle.y + inputItem.cursorRectangle.height - flickable.height + scrollMarginVertical)
+            }
+            if (horizontallyFlickable) {
+                var scrollMarginHorizontal = (flickable && flickable.scrollMarginHorizontal) ? flickable.scrollMarginHorizontal : 10
+                if (flickable.contentX >= cursorRectangle.x - scrollMarginHorizontal)
+                    flickable.contentX = Math.max(0, cursorRectangle.x - scrollMarginHorizontal)
+                else if (flickable.contentX + flickable.width <= cursorRectangle.x + inputItem.cursorRectangle.width + scrollMarginHorizontal)
+                    flickable.contentX = Math.min(flickable.contentWidth - flickable.width, cursorRectangle.x + inputItem.cursorRectangle.width - flickable.width + scrollMarginHorizontal)
+            }
+        }
+    }
+    Timer {
+        id: delayedLoading
+        interval: 10
+        onTriggered: {
+            ensureVisible(innerFlickable)
+            ensureVisible(outerFlickable)
+        }
+    }
+    Connections {
+        ignoreUnknownSignals: true
+        target: inputItem && !Qt.inputMethod.animating ? Qt.inputMethod : null
+        function onKeyboardRectangleChanged() { delayedLoading.triggered() }
+    }
+    Connections {
+        ignoreUnknownSignals: true
+        target: inputItem && inputItem.activeFocus ? inputItem : null
+        function onCursorRectangleChanged() { delayedLoading.triggered() }
+    }
+}
diff --git a/examples/deviceutilities/settingsuiapp/CMakeLists.txt b/examples/deviceutilities/settingsuiapp/CMakeLists.txt
new file mode 100644
index 0000000..3a5fe87
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/CMakeLists.txt
@@ -0,0 +1,56 @@
+cmake_minimum_required(VERSION 3.19)
+
+project(settingsapp VERSION 1.0 LANGUAGES CXX)
+
+if(NOT DEFINED INSTALL_EXAMPLESDIR)
+    set(INSTALL_EXAMPLESDIR "${CMAKE_INSTALL_PREFIX}/share/examples")
+endif()
+set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/deviceutilities/settingsapp")
+
+set(CMAKE_AUTOMOC ON)
+set(CMAKE_CXX_STANDARD 17)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+
+find_package(Qt6 COMPONENTS Core Qml Quick)
+
+add_subdirectory(DeviceUtilities/SettingsUI)
+add_subdirectory(DeviceUtilities/QtButtonImageProvider)
+
+set(qml_files
+    "main.qml"
+    "AutoScroller.qml"
+    "HandwritingModeButton.qml"
+)
+
+set(images
+    "images/FloatingButton_Active.png"
+    "images/FloatingButton_Available.png"
+    "images/FloatingButton_Unavailable.png"
+)
+
+qt_add_executable(settingsapp
+    main.cpp
+)
+
+qt_add_qml_module(settingsapp
+    URI DeviceUtilities
+    VERSION 1.0
+    QML_FILES
+        ${qml_files}
+    SOURCES
+        applicationsettings.cpp
+        applicationsettings.h
+    RESOURCES
+        ${images}
+)
+
+target_link_libraries(settingsapp PRIVATE
+    Qt::Core
+    Qt::Gui
+)
+
+install(TARGETS settingsapp
+    RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}"
+    BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}"
+    LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}"
+)
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/QtButtonImageProvider/CMakeLists.txt b/examples/deviceutilities/settingsuiapp/DeviceUtilities/QtButtonImageProvider/CMakeLists.txt
new file mode 100644
index 0000000..9e62cda
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/QtButtonImageProvider/CMakeLists.txt
@@ -0,0 +1,32 @@
+# There are a number of options to qt_add_qml_module that start with capital NO.
+# The most prominent NO option is probably NO_GENERATE_PLUGIN_SOURCE.
+# Unfortunately image providers still need to be configured per QML engine.
+# Therefore, if you bundle an image provider in your QML module, you need to implement
+# the QQmlEngineExtensionPlugin::initializeEngine() method.
+# This, in turn, makes it necessary to write your own plugin.
+# In this example the plugin is in the QtButtonImageProvider class.
+
+qt_add_qml_module(qtbuttonimageproviderplugin
+    URI "DeviceUtilities.QtButtonImageProvider"
+    VERSION 1.0
+    PLUGIN_TARGET qtbuttonimageproviderplugin
+    NO_PLUGIN_OPTIONAL
+    NO_GENERATE_PLUGIN_SOURCE
+    CLASS_NAME QtButtonImageProviderPlugin
+    SOURCES
+        plugin.cpp plugin_p.h
+        qtbuttonimageprovider.cpp qtbuttonimageprovider.h
+    QML_FILES
+        "QtButton.qml"
+)
+
+target_link_libraries(qtbuttonimageproviderplugin PRIVATE
+    Qt::Quick
+)
+
+install(TARGETS qtbuttonimageproviderplugin
+    DESTINATION "${INSTALL_EXAMPLEDIR}/DeviceUtilities/QtButtonImageProvider"
+)
+install(FILES $<TARGET_FILE_DIR:qtbuttonimageproviderplugin>/qmldir
+    DESTINATION "${INSTALL_EXAMPLEDIR}/DeviceUtilities/QtButtonImageProvider"
+)
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/QtButtonImageProvider/QtButton.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/QtButtonImageProvider/QtButton.qml
new file mode 100644
index 0000000..60e16ff
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/QtButtonImageProvider/QtButton.qml
@@ -0,0 +1,60 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import DeviceUtilities.SettingsUI
+
+Image {
+    id: root
+    source: "image://QtButton/" + cutSize + "/" + fillColor + "/" + borderColor
+    sourceSize: Qt.size(width, height)
+    property string state: "enabled"
+    property int cutSize: 10
+    property color fillColor: Globals.buttonGreenColor
+    property color borderColor: mouseArea.pressed ? Globals.buttonActiveColor : Globals.buttonGreenColor
+    property alias text: buttonText.text
+    property alias fontFamily: buttonText.font.family
+    signal clicked()
+
+    width: buttonText.contentWidth + cutSize * 4
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: root.clicked()
+    }
+    Text {
+        id: buttonText
+        anchors.fill: parent
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+        font.pixelSize: parent.height * 0.65
+        //font.family: Globals.appFont
+        color: "white"
+    }
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/QtButtonImageProvider/plugin.cpp b/examples/deviceutilities/settingsuiapp/DeviceUtilities/QtButtonImageProvider/plugin.cpp
new file mode 100644
index 0000000..30ede2a
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/QtButtonImageProvider/plugin.cpp
@@ -0,0 +1,29 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "plugin_p.h"
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/QtButtonImageProvider/plugin_p.h b/examples/deviceutilities/settingsuiapp/DeviceUtilities/QtButtonImageProvider/plugin_p.h
new file mode 100644
index 0000000..96f64ad
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/QtButtonImageProvider/plugin_p.h
@@ -0,0 +1,62 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#ifndef QTBUTTONIMAGEPROVIDERQMLPLUGIN_H
+#define QTBUTTONIMAGEPROVIDERQMLPLUGIN_H
+
+#include "qtbuttonimageprovider.h"
+#include <qqmlextensionplugin.h>
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists for the convenience
+// of other Qt classes.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+QT_BEGIN_NAMESPACE
+
+class QtButtonImageProviderQmlPlugin : public QQmlEngineExtensionPlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    void initializeEngine(QQmlEngine *engine, const char *uri) final
+    {
+        Q_UNUSED(uri);
+        engine->addImageProvider("QtButton", new QtButtonImageProvider);
+    }
+};
+
+QT_END_NAMESPACE
+#endif //QTBUTTONIMAGEPROVIDERQMLPLUGIN_H
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/QtButtonImageProvider/qtbuttonimageprovider.cpp b/examples/deviceutilities/settingsuiapp/DeviceUtilities/QtButtonImageProvider/qtbuttonimageprovider.cpp
new file mode 100644
index 0000000..65566a5
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/QtButtonImageProvider/qtbuttonimageprovider.cpp
@@ -0,0 +1,100 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include <QImage>
+#include <QPainter>
+#include <QPainterPath>
+
+#include "qtbuttonimageprovider.h"
+
+QtButtonImageProvider::QtButtonImageProvider()
+        : QQuickImageProvider(QQuickImageProvider::Pixmap)
+{
+}
+
+QPixmap QtButtonImageProvider::requestPixmap(const QString &id, QSize *size, const QSize &requestedSize)
+{
+    bool ok = false;
+
+    QStringList params = id.split("/");
+
+    int cutSize = params.at(0).toInt(&ok);
+
+    if (!ok)
+        cutSize = 10;
+
+    QColor fillColor;
+    QColor borderColor;
+
+    if (params.length() > 1) {
+        fillColor = QColor(params.at(1));
+    }
+
+    if (params.length() > 2)
+        borderColor = QColor(params.at(2));
+
+    if (!fillColor.isValid())
+        fillColor = "#00eb00";
+
+    if (!borderColor.isValid())
+        borderColor ="white";
+
+    int width = 100;
+    int height = 50;
+
+    if (size)
+        *size = QSize(requestedSize.width(), requestedSize.height());
+
+    QPixmap pixmap(requestedSize.width() > 0 ? requestedSize.width() : width,
+                   requestedSize.height() > 0 ? requestedSize.height() : height);
+    pixmap.fill(Qt::transparent);
+
+    QPainter painter(&pixmap);
+    const qreal borderPenWidth = 2;
+    QPen borderPen(QBrush(borderColor), borderPenWidth);
+    borderPen.setJoinStyle(Qt::MiterJoin);
+    painter.setRenderHint(QPainter::Antialiasing, true);
+    painter.setPen(borderPen);
+    painter.setBrush(fillColor);
+
+    QPainterPath path;
+    qreal top = borderPenWidth - 1;
+    qreal left = borderPenWidth - 1;
+    qreal bottom = pixmap.height() - borderPenWidth;
+    qreal right = pixmap.width() - borderPenWidth;
+    path.moveTo(left + cutSize, top);
+    path.lineTo(right, top);
+    path.lineTo(right, bottom - cutSize);
+    path.lineTo(right - cutSize, bottom);
+    path.lineTo(left, bottom);
+    path.lineTo(left, top + cutSize);
+    path.lineTo(left + cutSize, top);
+    painter.drawPath(path);
+
+    return pixmap;
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/QtButtonImageProvider/qtbuttonimageprovider.h b/examples/deviceutilities/settingsuiapp/DeviceUtilities/QtButtonImageProvider/qtbuttonimageprovider.h
new file mode 100644
index 0000000..94f410e
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/QtButtonImageProvider/qtbuttonimageprovider.h
@@ -0,0 +1,47 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#ifndef QTBUTTONIMAGEPROVIDER_H
+#define QTBUTTONIMAGEPROVIDER_H
+
+#include <QQuickImageProvider>
+#include <QPixmap>
+
+class QtButtonImageProvider : public QQuickImageProvider
+{
+public:
+    QtButtonImageProvider();
+
+    QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize) override;
+
+    void setCutSize(int size) { m_cutSize = size; }
+private:
+    int m_cutSize;
+};
+
+#endif // QTBUTTONIMAGEPROVIDER_H
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/CMakeLists.txt b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/CMakeLists.txt
new file mode 100644
index 0000000..c14398d
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/CMakeLists.txt
@@ -0,0 +1,53 @@
+set(qml_files
+    "Globals.qml"
+    "SettingsDelegate.qml"
+    "SettingsHeader.qml"
+    "SettingsTitleItem.qml"
+    "SettingsUI.qml"
+)
+
+# Resources:
+set(images
+    "icons/back.svg"
+    "icons/network.svg"
+)
+
+set_source_files_properties(Globals.qml
+    PROPERTIES
+        QT_QML_SINGLETON_TYPE true
+)
+
+find_package(Qt6 COMPONENTS NetworkSettings QuickControls2)
+
+add_subdirectory(Network)
+
+qt_add_qml_module(settingsui
+    URI "DeviceUtilities.SettingsUI"
+    VERSION 1.0
+    QML_FILES
+        ${qml_files}
+    RESOURCES
+        ${images}
+)
+
+target_link_libraries(settingsui PRIVATE
+    Qt::NetworkSettings
+    Qt::QuickControls2
+)
+
+set_target_properties(settingsuiplugin PROPERTIES
+    INSTALL_RPATH $ORIGIN/../..:$ORIGIN/../../${CMAKE_INSTALL_LIBDIR}
+)
+
+install(TARGETS settingsui
+    RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}"
+    BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}"
+    LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}"
+)
+
+install(TARGETS settingsuiplugin
+    LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}/DeviceUtilities/SettingsUI"
+)
+install(FILES $<TARGET_FILE_DIR:settingsuiplugin>/qmldir
+    DESTINATION "${INSTALL_EXAMPLEDIR}/DeviceUtilities/SettingsUI"
+)
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Globals.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Globals.qml
new file mode 100644
index 0000000..cea47d0
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Globals.qml
@@ -0,0 +1,53 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+pragma Singleton
+import QtQuick
+
+QtObject {
+    id: globals
+    readonly property string appFont: "TitilliumWeb"
+    readonly property color backgroundColor: "#09102b"
+    readonly property color borderColor: "#9d9faa"
+    readonly property color buttonGreenColor: "#41cd52"
+    readonly property color buttonGrayColor: "#9d9faa"
+    readonly property color buttonActiveColor: "#216729"
+    readonly property color scrollBarColor: "#41cd52"
+
+    readonly property real spacing: 0.5
+    readonly property real titleFontSize: 0.04
+    readonly property real subTitleFontSize: 0.035
+    readonly property real valueFontSize: 0.025
+    readonly property real fieldHeight: 0.07
+    readonly property real fieldTextHeight: 0.05
+    readonly property real buttonHeight: 0.05
+
+    function margin(width) {
+        return (width / 3 * 2) * 0.05;
+    }
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/AddressListEntry.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/AddressListEntry.qml
new file mode 100644
index 0000000..9701587
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/AddressListEntry.qml
@@ -0,0 +1,99 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+RowLayout {
+    id: root
+    spacing: 10
+    property alias model: repeater.model
+    property bool modified: false
+    property alias title: label.text
+
+    Label {
+        id: label
+        Layout.preferredWidth: content.titleWidth
+        horizontalAlignment: Text.AlignRight
+        Layout.alignment: Qt.AlignTop
+        Layout.topMargin: 10
+    }
+    ColumnLayout {
+        spacing: 10
+        Layout.fillWidth: true
+
+        Repeater {
+            id: repeater
+            visible: count > 0
+            RowLayout {
+                spacing: 10
+                TextField {
+                    text: edit
+                    Layout.fillWidth: true
+                    onEditingFinished: {
+                        root.modified = true;
+                        edit = text;
+                    }
+                }
+                Button {
+                    Layout.preferredWidth: height
+                    text: "-"
+                    visible: repeater.count > 0
+                    onClicked: {
+                        root.modified = true;
+                        root.model.remove(index);
+                    }
+                }
+                Button {
+                    Layout.preferredWidth: height
+                    visible: index === repeater.count - 1
+                    text: "+"
+                    onClicked: root.model.append("")
+
+                    Layout.alignment: Qt.AlignRight
+                }
+            }
+        }
+        RowLayout {
+            visible: repeater.count === 0
+            spacing: 10
+            TextField {
+                id: nameServerEntryItem
+                Layout.fillWidth: true
+                text: ""
+                onAccepted: root.model.append(text)
+            }
+            Button {
+                Layout.preferredWidth: height
+                text: "+"
+                onClicked: nameServerEntryItem.accepted()
+            }
+        }
+    }
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/CMakeLists.txt b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/CMakeLists.txt
new file mode 100644
index 0000000..183c9fb
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/CMakeLists.txt
@@ -0,0 +1,56 @@
+set(qml_files
+    "CustomSwitch.qml"
+    "CustomTableView.qml"
+    "AddressListEntry.qml"
+    "ComboBoxEntry.qml"
+    "EditWiredSettings.qml"
+    "IpAddressTextField.qml"
+    "NetworkDetails.qml"
+    "NetworkListView.qml"
+    "NetworkSettings.qml"
+    "PassphraseEnter.qml"
+    "WifiSelectorDelegate.qml"
+    "WifiSettings.qml"
+    "WifiSignalMonitor.qml"
+    "WiredSettings.qml"
+)
+
+# Resources:
+set(images
+    "icons/Alert_yellow_1x.png"
+    "icons/WifiAnim_black_2x.png"
+    "icons/Wifi_lightgray_2x.png"
+)
+
+find_package(Qt6 COMPONENTS NetworkSettings QuickControls2)
+
+qt_add_qml_module(settingsuinetwork
+    URI "DeviceUtilities.SettingsUI.Network"
+    VERSION 1.0
+    QML_FILES
+        ${qml_files}
+    RESOURCES
+        ${images}
+)
+
+target_link_libraries(settingsuinetwork PRIVATE
+    Qt::NetworkSettings
+    Qt::QuickControls2
+)
+
+set_target_properties(settingsuinetworkplugin PROPERTIES
+    INSTALL_RPATH $ORIGIN/../../..:$ORIGIN/../../../${CMAKE_INSTALL_LIBDIR}
+)
+
+install(TARGETS settingsuinetwork
+    RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}"
+    BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}"
+    LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}"
+)
+
+install(TARGETS settingsuinetworkplugin
+    DESTINATION "${INSTALL_EXAMPLEDIR}/DeviceUtilities/SettingsUI/Network"
+)
+install(FILES $<TARGET_FILE_DIR:settingsuinetworkplugin>/qmldir
+    DESTINATION "${INSTALL_EXAMPLEDIR}/DeviceUtilities/SettingsUI/Network"
+)
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/ComboBoxEntry.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/ComboBoxEntry.qml
new file mode 100644
index 0000000..c7e91b1
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/ComboBoxEntry.qml
@@ -0,0 +1,61 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+RowLayout {
+    id: root
+    spacing: 10
+    width: parent.width
+
+    property alias title: label.text
+    property alias currentIndex: cb.currentIndex
+    property alias delegate: cb.delegate
+    property alias textRole: cb.textRole
+    property alias model: cb.model
+    property alias count: cb.count
+    property int titleWidth: -1
+    signal activated(int index)
+    signal highlighted(int index)
+
+    Label {
+        id: label
+        Layout.preferredWidth: root.titleWidth
+        horizontalAlignment: Text.AlignRight
+        Layout.alignment: Qt.AlignVCenter
+    }
+    ComboBox {
+        id: cb
+        textRole: "text"
+        Layout.fillWidth: true
+        onActivated: root.activated(currentIndex)
+        onHighlightedIndexChanged: root.highlighted(currentIndex)
+    }
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/CustomSwitch.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/CustomSwitch.qml
new file mode 100644
index 0000000..34b0421
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/CustomSwitch.qml
@@ -0,0 +1,121 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtQuick.Controls
+import DeviceUtilities.SettingsUI
+import DeviceUtilities.QtButtonImageProvider
+
+Switch {
+    id: control
+
+    property alias indicatorWidth: indicatorImg.width
+    property alias indicatorHeight: indicatorImg.height
+
+    indicator: Image {
+        id: indicatorImg
+        width: 200
+        height: 75
+        sourceSize: Qt.size(width, height)
+        anchors.horizontalCenter: control.horizontalCenter
+        y: parent.height / 2 - height / 2
+        source: "image://QtButton/10/#848895/transparent"
+        Text {
+            id: offText
+            anchors.left: parent.left
+            anchors.leftMargin: parent.width * 0.075
+            anchors.verticalCenter: parent.verticalCenter
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            fontSizeMode: Text.Fit
+            minimumPixelSize: 1
+            font.pixelSize: parent.height * 0.55
+            color: "#3b4155"
+            text: "OFF"
+            font.family: Globals.appFont
+        }
+        Text {
+            id: onText
+            anchors.right: parent.right
+            anchors.rightMargin: parent.width * 0.1
+            anchors.verticalCenter: parent.verticalCenter
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            fontSizeMode: Text.Fit
+            minimumPixelSize: 1
+            font.pixelSize: parent.height * 0.55
+            color: "#3b4155"
+            text: "ON"
+            font.family: Globals.appFont
+        }
+
+        Binding {
+            target: qtHandle
+            property: "x"
+            value: control.checked ? indicatorImg.width  - qtHandle.width - indicatorImg.width * 0.025 : indicatorImg.width * 0.025
+            when: !mousearea.drag.active
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: control.checked = !control.checked
+        }
+
+        QtButton {
+            id: qtHandle
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width * 0.475
+            height: parent.height * 0.9
+            fillColor: control.checked ? Globals.buttonGreenColor : Globals.buttonGrayColor
+            text: control.checked ? "ON" : "OFF"
+            borderColor: "transparent"
+            Behavior on x {
+                NumberAnimation { duration: 50 }
+            }
+
+            MouseArea {
+                id: mousearea
+                anchors.fill: parent
+                drag.target: qtHandle
+                drag.axis: Drag.XAxis
+                drag.minimumX: indicatorImg.width * 0.005
+                drag.maximumX: indicatorImg.width - width - indicatorImg.width * 0.005
+
+                onClicked: control.checked = !control.checked
+
+                onReleased: {
+                    if (qtHandle.x > indicatorImg.width / 5 ) {
+                        control.checked = true
+                    } else {
+                        control.checked = false
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/CustomTableView.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/CustomTableView.qml
new file mode 100644
index 0000000..059795c
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/CustomTableView.qml
@@ -0,0 +1,106 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import DeviceUtilities.SettingsUI
+
+ColumnLayout {
+    id: root
+
+    Layout.fillHeight: true
+    Layout.fillWidth: true
+
+    property var headerTexts: []
+    property var roleNames: []
+    property alias model: listView.model
+    property alias localeIndex: listView.currentIndex
+    signal clicked(int index)
+
+    Timer { //A workaround to position the listView..
+        interval: 250
+        running: true
+        onTriggered: listView.positionViewAtIndex(listView.currentIndex, ListView.Beginning)
+    }
+
+    ListView {
+        id: listView
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+        clip: true
+
+        onCurrentIndexChanged: {
+            if (listView.model) {
+                positionViewAtIndex(listView.currentIndex, ListView.beginning)
+            }
+        }
+
+        ScrollBar.vertical: ScrollBar {
+            contentItem: Rectangle {
+                implicitWidth: listView.width * 0.0175
+                implicitHeight: listView.height * 0.5
+                color: Globals.scrollBarColor
+            }
+        }
+
+        delegate: Item {
+            id: delegateRectangle
+            width: parent.width
+            height: listView.height * 0.1
+            property var delegateData: modelData
+
+            Row {
+                anchors.fill: parent
+                anchors.leftMargin: 10
+                spacing: 10
+
+                Repeater {
+                    model: root.roleNames.length
+
+                    Text {
+                        width: parent.width / root.roleNames.length
+                        text: delegateData[root.roleNames[index]]
+                        anchors.verticalCenter: parent.verticalCenter
+                        verticalAlignment: Text.AlignVCenter
+                        font.pixelSize: delegateRectangle.height * 0.5
+                        antialiasing: false
+                        smooth: false
+                        renderType: listView.moving ? Text.NativeRendering : Text.QtRendering
+                        color: listView.currentIndex == delegateRectangle.index ? Globals.buttonGreenColor : "white"
+                        font.family: Globals.appFont
+                    }
+                }
+            }
+            MouseArea {
+                anchors.fill: parent
+                onClicked: root.clicked(index)
+            }
+        }
+    }
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/EditWiredSettings.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/EditWiredSettings.qml
new file mode 100644
index 0000000..a59da20
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/EditWiredSettings.qml
@@ -0,0 +1,366 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtDeviceUtilities.NetworkSettings
+
+Item {
+    id: root
+    property string title: qsTr("Ethernet Settings")
+    property var service: undefined
+    property bool ipv4Changed: false
+    property bool ipv6Changed: false
+    property bool nameserversChanged: false
+    property bool domainsChanged: false
+    property bool proxyChanged: false
+
+    Component.onDestruction: {
+        //Clear all unsaved changes from models
+        service.proxy.excludes.resetChanges();
+        service.nameservers.resetChanges();
+        service.domains.resetChanges();
+    }
+
+    Component.onCompleted: titlebar.title = service.name;
+
+    Flickable {
+        anchors.fill: parent
+        anchors.top: saveButton.bottom
+        anchors.margins: 20
+        contentHeight: content.height
+        contentWidth: width
+
+        Column {
+            id: content
+            width: parent.width
+            spacing: 10
+            property int titleWidth: width * 0.382
+            property int groupWidth: width - saveButton.width - 10
+
+            //IPv4 Config
+            GroupBox {
+                width: content.groupWidth
+                Layout.fillWidth: true
+                title: qsTr("IPv4")
+
+                ColumnLayout {
+                    anchors.fill: parent
+
+                    ComboBoxEntry {
+                        id: ipv4Method
+                        title:  qsTr("Connection method:")
+                        titleWidth: content.titleWidth
+                        model: ListModel {
+                            id: methodsModel
+
+                            ListElement {
+                                text: "DHCP"
+                                method: NetworkSettingsIPv4.Dhcp
+                            }
+                            ListElement {
+                                text: "Manual"
+                                method: NetworkSettingsIPv4.Manual
+                            }
+                            ListElement {
+                                text: "Off"
+                                method: NetworkSettingsIPv4.Off
+                            }
+                        }
+                        onCurrentIndexChanged: {
+                            ipv4Changed = true;
+                            service.ipv4.method = model.get(currentIndex).method;
+                        }
+                    }
+
+                    GridLayout {
+                        columnSpacing: 10
+                        rows: 3
+                        columns: 2
+                        visible: service.ipv4.method !== NetworkSettingsIPv4.Off
+                        width: parent.width
+
+                        Label {
+                            text: qsTr("Address:")
+                            Layout.preferredWidth: content.titleWidth
+                            horizontalAlignment: Text.AlignRight
+                        }
+                        IpAddressTextField {
+                            id: ipv4Address
+                            text: service.ipv4.address
+                            onTextChanged: ipv4Changed = true;
+                            onAccepted: if (text.length > 0) service.ipv4.address = text
+                            enabled: service.ipv4.method === NetworkSettingsIPv4.Manual
+                        }
+                        Label {
+                            text: qsTr("Mask:")
+                            Layout.preferredWidth: content.titleWidth
+                            horizontalAlignment: Text.AlignRight
+                        }
+                        IpAddressTextField {
+                            id: ipv4Mask
+                            text: service.ipv4.mask
+                            onTextChanged: ipv4Changed = true;
+                            onAccepted: if (text.length > 0) service.ipv4.mask = text
+                            enabled: service.ipv4.method === NetworkSettingsIPv4.Manual
+                        }
+                        Label {
+                            text: qsTr("Router:")
+                            Layout.preferredWidth: content.titleWidth
+                            horizontalAlignment: Text.AlignRight
+                        }
+                        IpAddressTextField {
+                            id: ipv4Gateway
+                            text: service.ipv4.gateway
+                            onTextChanged: ipv4Changed = true
+                            onAccepted: if (text.length > 0) service.ipv4.gateway = text
+                            enabled: service.ipv4.method === NetworkSettingsIPv4.Manual
+                        }
+                    }
+                }
+            }
+
+            //IPv6 Config
+            GroupBox {
+                width: content.groupWidth
+                Layout.fillWidth: true
+                title: qsTr("IPv6")
+
+                ColumnLayout {
+                    anchors.fill: parent
+
+                    ComboBoxEntry {
+                        id: ipv6Method
+                        title: qsTr("Connection method:")
+                        titleWidth: content.titleWidth
+                        model: ListModel {
+                            id: ipv6methodsmodel
+
+                            ListElement {
+                                text: qsTr("Auto")
+                                method: NetworkSettingsIPv6.Auto
+                            }
+                            ListElement {
+                                text: qsTr("Manual")
+                                method: NetworkSettingsIPv6.Manual
+                            }
+                            ListElement {
+                                text: qsTr("Off")
+                                method: NetworkSettingsIPv6.Off
+                            }
+                        }
+
+                        onCurrentIndexChanged: {
+                            ipv6Changed = true;
+                            service.ipv6.method = model.get(currentIndex).method;
+                        }
+                    }
+                    GridLayout {
+                        columnSpacing: 10
+                        rows: 3
+                        columns: 2
+                        visible: service.ipv6.method !== NetworkSettingsIPv6.Off
+
+                        Label {
+                            text: qsTr("Address:")
+                            Layout.preferredWidth: content.titleWidth
+                            horizontalAlignment: Text.AlignRight
+                        }
+                        TextField {
+                            id: ipv6Address
+                            text: service.ipv6.address
+                            Layout.fillWidth: true
+                            onTextChanged: ipv6Changed = true;
+                            onAccepted: if (text.length > 0) service.ipv6.address = text
+                            enabled: service.ipv6.method === NetworkSettingsIPv6.Manual
+                        }
+                        Label {
+                            text: qsTr("Router:")
+                            Layout.preferredWidth: content.titleWidth
+                            horizontalAlignment: Text.AlignRight
+                        }
+                        TextField {
+                            id: ipv6Gateway
+                            text: service.ipv6.gateway
+                            Layout.fillWidth: true
+                            onTextChanged: ipv6Changed = true;
+                            onAccepted: if (text.length > 0) service.ipv4.gateway = text
+                            enabled: service.ipv6.method === NetworkSettingsIPv6.Manual
+                        }
+                        Label {
+                            text: qsTr("Prefix length:")
+                            Layout.preferredWidth: content.titleWidth
+                            horizontalAlignment: Text.AlignRight
+                        }
+                        TextField {
+                            id: ipv6PrefixLength
+                            text: service.ipv6.prefixLength
+                            Layout.fillWidth: true
+                            validator: IntValidator { bottom: 0; top: 255 }
+                            onTextChanged: ipv6Changed = true
+                            onAccepted: if (text.length > 0) service.ipv6.prefixLength = parseInt(text)
+                            enabled: service.ipv6.method === NetworkSettingsIPv6.Manual
+                        }
+                    }
+                }
+            }
+            GroupBox {
+                width: content.groupWidth
+                Layout.fillWidth: true
+                title: qsTr("Name servers")
+
+                ColumnLayout {
+                    anchors.fill: parent
+                    AddressListEntry {
+                        title: qsTr("Address:")
+                        model: service.nameservers
+                        modified: nameserversChanged
+                    }
+                }
+            }
+            GroupBox {
+                width: content.groupWidth
+                Layout.fillWidth: true
+                title: qsTr("Domains")
+
+                ColumnLayout {
+                    anchors.fill: parent
+                    AddressListEntry {
+                        title: qsTr("Address:")
+                        model: service.domains
+                        modified: domainsChanged
+                    }
+                }
+            }
+            GroupBox {
+                width: content.groupWidth
+                Layout.fillWidth: true
+                title: qsTr("Proxy Settings")
+
+                ColumnLayout {
+                    id: proxyLayout
+                    width: parent.width
+
+                    ComboBoxEntry {
+                        title: qsTr("Configuration:")
+                        titleWidth: content.titleWidth
+                        model: ListModel {
+                            id: proxyMethodModel
+
+                            ListElement {
+                                text: qsTr("Direct")
+                                method: NetworkSettingsProxy.Direct
+                            }
+                            ListElement {
+                                text: qsTr("Auto")
+                                method: NetworkSettingsProxy.Auto
+                            }
+                            ListElement {
+                                text: qsTr("Manual")
+                                method: NetworkSettingsProxy.Manual
+                            }
+                        }
+                        Component.onCompleted: currentIndex = service.proxy.method
+
+                        onCurrentIndexChanged: {
+                            proxyChanged = true;
+                            service.proxy.method = model.get(currentIndex).method;
+                        }
+                    }
+                    RowLayout {
+                        spacing: 10
+                        visible: service.proxy.method !== NetworkSettingsProxy.Direct
+
+                        Label {
+                            text: service.proxy.method === NetworkSettingsProxy.Manual ? qsTr("Proxy address:") : qsTr("Configuration URL:")
+                            Layout.preferredWidth: content.titleWidth
+                            horizontalAlignment: Text.AlignRight
+                            Layout.alignment: Qt.AlignVCenter
+                            elide: Label.ElideRight
+                        }
+                        TextField {
+                            id: proxyUrl
+                            text: service.proxy.url
+                            Layout.fillWidth: true
+                            onTextChanged: proxyChanged = true;
+                            onAccepted: service.proxy.url = text;
+                        }
+                    }
+                    AddressListEntry {
+                        model: service.proxy.excludes
+                        modified: proxyChanged
+                        title: qsTr("No proxy for:")
+                        visible: service.proxy.method === NetworkSettingsProxy.Manual
+                    }
+                }
+            }
+        }
+    }
+    Button {
+        id: saveButton
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.margins: 20
+        text: qsTr("Save")
+
+        onClicked: {
+            if (ipv4Changed) {
+                ipv4Address.accepted();
+                ipv4Mask.accepted();
+                ipv4Gateway.accepted();
+                service.setupIpv4Config();
+            }
+
+            if (ipv6Changed) {
+                ipv6Address.accepted();
+                ipv6Gateway.accepted();
+                ipv6PrefixLength.accepted();
+                service.setupIpv6Config();
+            }
+
+            if (nameserversChanged) {
+                service.setupNameserversConfig();
+            }
+
+            if (domainsChanged) {
+                service.setupDomainsConfig();
+            }
+
+            if (proxyChanged) {
+                proxyUrl.accepted();
+                service.setupNetworkSettingsProxy();
+            }
+            stackView.pop();
+        }
+    }
+    onServiceChanged: {
+        ipv4Method.currentIndex = service.ipv4.method
+        ipv6Method.currentIndex = service.ipv6.method
+    }
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/IpAddressTextField.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/IpAddressTextField.qml
new file mode 100644
index 0000000..a328775
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/IpAddressTextField.qml
@@ -0,0 +1,35 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtQuick.Controls
+
+TextField {
+    Layout.fillWidth: true
+    validator: RegExpValidator { regExp: /^(\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))\.(\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))\.(\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))\.(\d|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))$/ }
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/NetworkDetails.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/NetworkDetails.qml
new file mode 100644
index 0000000..88b0946
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/NetworkDetails.qml
@@ -0,0 +1,35 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+
+Loader {
+    id: root
+    property var selectedInterface:undefined
+    anchors.fill: parent
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/NetworkListView.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/NetworkListView.qml
new file mode 100644
index 0000000..68498b5
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/NetworkListView.qml
@@ -0,0 +1,171 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtDeviceUtilities.NetworkSettings
+import DeviceUtilities.SettingsUI
+import DeviceUtilities.QtButtonImageProvider
+
+ListView {
+    id: list
+    clip: true
+    property var connectingService: null
+    property bool retryConnectAfterIdle: false
+    function connectBySsid() {
+        passphraseEnter.showSsid = true
+        passphraseEnter.visible = true
+    }
+
+    Component.onCompleted: {
+        NetworkSettingsManager.services.type = NetworkSettingsType.Unknown;
+    }
+    model: NetworkSettingsManager.services
+
+    delegate: Item {
+        id: networkDelegate
+        width: list.width
+        height: list.height * 0.15
+        Column {
+            anchors.left: parent.left
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.width * 0.5
+            Text {
+                id: networkName
+                horizontalAlignment: Text.AlignLeft
+                verticalAlignment: Text.AlignVCenter
+                font.pixelSize: Globals.subTitleFontSize
+                font.family: Globals.appFont
+                color: connected ? Globals.buttonGreenColor : "white"
+                text: name
+            }
+            Row {
+                id: ipRow
+                height: networkDelegate.height * 0.275 * opacity
+                spacing: networkDelegate.width * 0.0075
+                Item {
+                    width: Globals.margin(list.width)
+                    height: 1
+                }
+                Text {
+                    id: ipAddressLabel
+                    height: parent.height
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: qsTr("IP Address:")
+                    color: connected ? Globals.buttonGreenColor : "white"
+                    font.pixelSize: Globals.valueFontSize
+                    font.family: Globals.appFont
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignLeft
+                }
+                Text {
+                    id: ipAddress
+                    width: root.width * 0.15
+                    height: parent.height
+                    anchors.verticalCenter: parent.verticalCenter
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignLeft
+                    color: connected ? Globals.buttonGreenColor : "white"
+                    text: connected ? NetworkSettingsManager.services.itemFromRow(index).ipv4.address
+                                        : (NetworkSettingsManager.services.itemFromRow(index).state === NetworkSettingsState.Idle) ?
+                                        qsTr("Not connected") : qsTr("Connecting")
+                    font.pixelSize: Globals.valueFontSize
+                    font.family: Globals.appFont
+                    font.styleName: connected ? "SemiBold" : "Regular"
+                }
+            }
+        }
+        QtButton {
+            id: connectButton
+            fontFamily: Globals.appFont
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            fillColor: connected ? Globals.buttonGrayColor : Globals.buttonGreenColor
+            borderColor: "transparent"
+            text: connected ? qsTr("DISCONNECT") : qsTr("CONNECT")
+            height: Globals.buttonHeight
+            onClicked: {
+                if (connected) {
+                    NetworkSettingsManager.services.itemFromRow(index).disconnectService();
+                } else {
+                    list.connectingService = NetworkSettingsManager.services.itemFromRow(index)
+                    if (list.connectingService) {
+                        passphraseEnter.extraInfo = "";
+                        list.connectingService.connectService();
+                        list.connectingService.stateChanged.connect(connectingServiceStateChange);
+                    }
+                }
+            }
+        }
+        Rectangle {
+            id: delegateBottom
+            width: networkDelegate.width
+            color: Globals.borderColor
+            height: 2
+            anchors.bottom: networkDelegate.bottom
+            anchors.horizontalCenter: networkDelegate.horizontalCenter
+        }
+        Behavior on height { NumberAnimation { duration: 200} }
+
+    }
+
+    Connections {
+        target: NetworkSettingsManager.userAgent
+        function onShowUserCredentialsInput() {
+            passphraseEnter.visible = true;
+        }
+    }
+
+    // Popup for entering passphrase
+    PassphraseEnter {
+        id: passphraseEnter
+        parent: root
+        visible: false
+    }
+
+    function connectingServiceStateChange() {
+        if (connectingService !== null) {
+            if (connectingService.state === NetworkSettingsState.Failure) {
+                // If authentication failed, request connection again. That will
+                // initiate new passphrase request.
+                retryConnectAfterIdle = true
+            } else if (connectingService.state === NetworkSettingsState.Ready) {
+                // If connection succeeded, we no longer have service connecting
+                connectingService = null;
+                retryConnectAfterIdle = false;
+            } else if (connectingService.state === NetworkSettingsState.Idle) {
+                if (retryConnectAfterIdle) {
+                    passphraseEnter.extraInfo = qsTr("Invalid passphrase");
+                    connectingService.connectService();
+                }
+                retryConnectAfterIdle = false;
+            }
+        }
+    }
+
+    focus: true
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/NetworkSettings.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/NetworkSettings.qml
new file mode 100644
index 0000000..2b59c61
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/NetworkSettings.qml
@@ -0,0 +1,122 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtDeviceUtilities.NetworkSettings
+import DeviceUtilities.QtButtonImageProvider
+import DeviceUtilities.SettingsUI
+
+Item {
+    id: networkSettingsRoot
+    property string title: qsTr("Network Settings")
+    anchors.fill: parent
+
+    Text {
+        id: wlanText
+        text: qsTr("WLAN")
+        font.pixelSize: networkSettingsRoot.height * Globals.subTitleFontSize
+        font.family: Globals.appFont
+        font.styleName: "SemiBold"
+        color: "white"
+        anchors.top: networkSettingsRoot.top
+        anchors.left: networkSettingsRoot.left
+    }
+    CustomSwitch {
+        id: wifiSwitch
+        anchors.top: wlanText.bottom
+        anchors.left: wlanText.left
+        height: networkSettingsRoot.height * Globals.buttonHeight
+        indicatorWidth: networkSettingsRoot.height * Globals.buttonWidth
+        indicatorHeight: networkSettingsRoot.height * Globals.buttonHeight
+        property bool wiFiAvailable: NetworkSettingsManager.interface(NetworkSettingsType.Wifi, 0) !== null
+        checkable: wiFiAvailable && !wifiSwitchTimer.running
+
+        onCheckedChanged: {
+            // Power on/off all WiFi interfaces
+            for (var i = 0; NetworkSettingsManager.interface(NetworkSettingsType.Wifi, i) !== null; i++) {
+                NetworkSettingsManager.interface(NetworkSettingsType.Wifi, i).powered = checked
+                wifiSwitchTimer.start()
+            }
+        }
+
+        // At least 1s between switching on/off
+        Timer {
+            id: wifiSwitchTimer
+            interval: 1000
+            running: false
+        }
+    }
+    QtButton {
+        id: manualConnect
+        anchors.top: wlanText.bottom
+        anchors.left: wifiSwitch.right
+        anchors.right: manualDisconnect.left
+        anchors.rightMargin: 10
+        enabled: wifiSwitch.checked
+        fillColor: enabled ? Globals.buttonGreenColor : Globals.buttonGrayColor
+        borderColor: "transparent"
+        height: networkSettingsRoot.height * Globals.buttonHeight
+        text: qsTr("MANUAL CONNECT")
+        onClicked: {
+            networkList.connectBySsid()
+        }
+    }
+    QtButton {
+        id: manualDisconnect
+        anchors.top: wlanText.bottom
+        anchors.right: networkSettingsRoot.right
+        enabled: NetworkSettingsManager.currentWifiConnection
+        fillColor: enabled ? Globals.buttonGreenColor : Globals.buttonGrayColor
+        borderColor: "transparent"
+        height: networkSettingsRoot.height * Globals.buttonHeight
+        text: qsTr("DISCONNECT")
+        onClicked: {
+            if (NetworkSettingsManager.currentWifiConnection) {
+                NetworkSettingsManager.currentWifiConnection.disconnectService();
+            }
+        }
+    }
+    Text {
+        id: networkListTextItem
+        text: qsTr("Network list:")
+        font.pixelSize: networkSettingsRoot.height * Globals.subTitleFontSize
+        font.family: Globals.appFont
+        font.styleName: "SemiBold"
+        color: "white"
+        anchors.top: wifiSwitch.bottom
+        anchors.topMargin: 10
+    }
+    NetworkListView {
+        id: networkList
+        anchors.top: networkListTextItem.bottom
+        anchors.left: networkListTextItem.left
+        width: networkSettingsRoot.width
+        height: networkSettingsRoot.height
+    }
+}
+
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/PassphraseEnter.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/PassphraseEnter.qml
new file mode 100644
index 0000000..f0978d2
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/PassphraseEnter.qml
@@ -0,0 +1,141 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtQuick.Controls
+import QtDeviceUtilities.NetworkSettings
+import DeviceUtilities.SettingsUI
+import DeviceUtilities.QtButtonImageProvider
+
+Rectangle {
+    id: passphrasePopup
+    width: parent.width
+    height: parent.height
+    color: Globals.backgroundColor
+    opacity: 0.9
+    property string extraInfo: ""
+    property bool showSsid: false
+
+    property int margin: (width / 3 * 2) * 0.05
+    property int spacing: margin * 0.5
+
+    Rectangle {
+        id: frame
+        color: Globals.backgroundColor
+        border.color: Globals.borderColor
+        border.width: 3
+        anchors.centerIn: parent
+        width: passphraseColumn.width * 1.1
+        height: passphraseColumn.height * 1.1
+
+        Column {
+            id: passphraseColumn
+            anchors.centerIn: parent
+            spacing: spacing
+
+            Text {
+                visible: showSsid
+                font.pixelSize: parent.height * Globals.subTitleFontSize
+                font.family: Globals.appFont
+                color: "white"
+                text: qsTr("Enter SSID")
+            }
+
+            TextField {
+                id: ssidField
+                visible: showSsid
+                width: passphrasePopup.width * 0.4
+                height: passphrasePopup.height * 0.075
+                color: "white"
+                background: Rectangle{
+                    color: "transparent"
+                    border.color: ssidField.focus ? Globals.buttonGreenColor : Globals.buttonGrayColor
+                    border.width: ssidField.focus ? width * 0.01 : 2
+                }
+            }
+
+            Text {
+                font.pixelSize: parent.height * Globals.subTitleFontSize
+                font.family: Globals.appFont
+                color: "white"
+                text: qsTr("Enter Passphrase")
+            }
+
+            Text {
+                font.pixelSize: parent.height * Globals.valueFontSize
+                font.family: Globals.appFont
+                color: "red"
+                text: extraInfo
+                visible: (extraInfo !== "")
+            }
+
+            TextField {
+                id: passField
+                width: passphrasePopup.width * 0.4
+                height: passphrasePopup.height * 0.075
+                color: "white"
+                echoMode: TextInput.Password
+                background: Rectangle{
+                    color: "transparent"
+                    border.color: passField.focus ? Globals.buttonGreenColor : Globals.buttonGrayColor
+                    border.width: passField.focus ? width * 0.01 : 2
+                }
+            }
+
+            Row {
+                spacing: parent.width * 0.025
+                QtButton{
+                    id: setButton
+                    text: qsTr("SET")
+                    onClicked: {
+                        if (showSsid) {
+                            NetworkSettingsManager.connectBySsid(ssidField.text, passField.text)
+                            showSsid = false
+                        } else {
+                            NetworkSettingsManager.userAgent.setPassphrase(passField.text)
+                        }
+                        passphrasePopup.visible = false;
+                    }
+                }
+                QtButton {
+                    id: cancelButton
+                    text: qsTr("CANCEL")
+                    borderColor: "transparent"
+                    fillColor: Globals.buttonGrayColor
+                    onClicked: {
+                        if (!showSsid) {
+                            NetworkSettingsManager.userAgent.cancelInput()
+                        }
+                        showSsid = false
+                        passphrasePopup.visible = false;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/WifiSelectorDelegate.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/WifiSelectorDelegate.qml
new file mode 100644
index 0000000..9c2ad11
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/WifiSelectorDelegate.qml
@@ -0,0 +1,61 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+
+ItemDelegate {
+    id: root
+    autoExclusive: true
+    property bool connect: connected
+    contentItem: Item {
+        width: root.width
+
+        Label {
+            id: text
+            leftPadding: root.spacing
+            anchors.left: parent.left
+            anchors.top:parent.top
+            anchors.right: signalMonitor.left
+            anchors.bottom:parent.bottom
+            elide: Text.ElideRight
+            horizontalAlignment: Text.AlignLeft
+            verticalAlignment: Text.AlignVCenter
+            text: modelData["name"]
+        }
+        WifiSignalMonitor {
+            id: signalMonitor
+            anchors.right: parent.right
+            height: parent.height
+            width: height
+            signalStrength: modelData.wirelessConfig["signalStrength"]
+            connected: connected
+        }
+    }
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/WifiSettings.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/WifiSettings.qml
new file mode 100644
index 0000000..7b4f246
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/WifiSettings.qml
@@ -0,0 +1,252 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtDeviceUtilities.NetworkSettings
+
+Item {
+    id: root
+    anchors.fill: parent
+    Component.onCompleted: NetworkSettingsManager.services.type = NetworkSettingsType.Wifi;
+    property bool connecting: false
+    property var selectedInterface: undefined
+
+    Flickable {
+        anchors.fill: parent
+        contentHeight: content.height
+        contentWidth: width
+
+        GroupBox {
+            title: qsTr("Wireless Settings")
+            width: parent.width
+
+            ColumnLayout {
+                id: content
+                spacing: 20
+                width: parent.width
+
+                RowLayout {
+                    spacing: 10
+                    id: enableSwitch
+                    width: parent.width
+
+                    Label {
+                        Layout.preferredWidth: root.width * 0.382
+                        Layout.alignment: Qt.AlignVCenter
+                        horizontalAlignment: Text.AlignRight
+                        text: selectedInterface.powered ? qsTr("Wi-Fi ON") : qsTr("Wi-Fi OFF")
+                    }
+                    Switch {
+                        checked: selectedInterface.powered
+                        onCheckedChanged: {
+                            selectedInterface.powered = checked
+                            root.connecting = false
+                            connectView.visible = false
+                        }
+                    }
+                }
+                RowLayout {
+                    spacing: 10
+                    width: parent.width
+
+                    visible: selectedInterface.powered && networkSelection.count > 0
+                    Label {
+                        Layout.preferredWidth: root.width * 0.382
+                        text: qsTr("Current network")
+                        horizontalAlignment: Text.AlignRight
+                        Layout.alignment: Qt.AlignVCenter
+
+                    }
+                    ComboBoxEntry {
+                        id: networkSelection
+                        model: NetworkSettingsManager.services
+
+                        textRole: "name"
+                        Layout.fillWidth: true
+                        onActivated: function(index) {
+                            if (index >= 0) {
+                                connectView.visible = false
+
+                                var service = model.itemFromRow(index)
+                                if (service) {
+                                    root.connecting = true
+                                    service.connectService();
+                                }
+                            }
+                        }
+
+                        onCountChanged: {
+                            if (count === 0) {
+                                root.connecting = false
+                                connectView.visible = false
+                            }
+                        }
+
+                        Component.onCompleted: {
+                            networkSelection.currentIndex = model.activeRow()
+                        }
+
+                        delegate: WifiSelectorDelegate {
+                            width: networkSelection.width
+                            onConnectChanged: if (connect) networkSelection.currentIndex = index
+                        }
+                    }
+                }
+
+                Row {
+                    id: infoRow
+                    spacing: 10
+                    width: parent.width
+                    visible: selectedInterface.powered && selectedInterface.state !== NetworkSettingsState.Online
+                    Label {
+                        id: scanningText
+                        text: {
+                            if (networkSelection.count == 0)
+                                return qsTr("Searching for Wi-Fi networks...")
+                            else if (root.connecting)
+                                return qsTr("Connecting to the network...")
+                            else
+                                return ""
+                        }
+                        horizontalAlignment: Text.AlignLeft
+                    }
+                    WifiSignalMonitor {
+                        id: scanningIcon
+                        scanning: true
+                        visible: scanningText.text !== ""
+                        height: scanningText.height
+                        width: height
+                    }
+                }
+
+                GroupBox {
+                    id: connectView
+                    title: qsTr("Enter a passphrase")
+                    visible: false
+                    Layout.fillWidth: true
+                    ColumnLayout {
+                        width: parent.width
+
+                        RowLayout {
+                            id: errorView
+                            visible: text.text !== ""
+                            spacing: 10
+                            property alias text: text.text
+
+                            Image {
+                                source: "icons/Alert_yellow_1x.png"
+                                Layout.alignment: Qt.AlignVCenter
+                            }
+                            Text {
+                                id: text
+                                color: "#face20"
+                                text: ""
+                                Layout.alignment: Qt.AlignVCenter
+                            }
+                        }
+                        RowLayout {
+                            spacing: 10
+                            width: parent.width
+
+                            Label {
+                                text: qsTr("Passphrase:")
+                                horizontalAlignment: Text.AlignRight
+                                Layout.preferredWidth: root.width * 0.382
+                                Layout.alignment: Qt.AlignVCenter
+                            }
+                            TextField {
+                                id: passphrase
+                                text: ""
+                                echoMode: TextInput.Password
+                                inputMethodHints: Qt.ImhNoPredictiveText | Qt.ImhNoAutoUppercase | Qt.ImhPreferLowercase | Qt.ImhSensitiveData
+                                Layout.alignment: Qt.AlignVCenter
+                                Layout.fillWidth: true
+                            }
+                        }
+                        RowLayout {
+                            spacing: 10
+
+                            Button {
+                                text: qsTr("Connect")
+                                onClicked: {
+                                    connectView.visible = false
+                                    NetworkSettingsManager.userAgent.setPassphrase(passphrase.text)
+                                    if (networkSelection.currentIndex != -1) {
+                                        NetworkSettingsManager.services.itemFromRow(networkSelection.currentIndex).connectService();
+                                    }
+                                }
+                            }
+                            Button {
+                                text: qsTr("Cancel")
+                                onClicked: {
+                                    networkSelection.currentIndex = -1
+                                    connectView.visible = false
+                                }
+                            }
+                        }
+                    }
+                }
+                ColumnLayout {
+                    spacing: parent.spacing
+                    width: parent.width
+                    visible: selectedInterface.state === NetworkSettingsState.Online ||
+                             selectedInterface.state === NetworkSettingsState.Ready
+                    Label {
+                        text: qsTr("IP Address: ") + NetworkSettingsManager.services.itemFromRow(networkSelection.currentIndex).ipv4.address
+                    }
+                    Button {
+                        id: disconnect
+                        text: qsTr("Disconnect")
+                        onClicked: {
+                            NetworkSettingsManager.services.itemFromRow(networkSelection.currentIndex).disconnectService();
+                            networkSelection.currentIndex = -1;
+                            root.connecting = false
+                        }
+                    }
+                }
+            }
+            Connections {
+                target: NetworkSettingsManager.userAgent
+                function onShowUserCredentialsInput() {
+                    connectView.visible = true
+                    root.connecting = false
+                }
+                function onError() {
+                    errorView.visible = true
+                    connectView.visible = true
+                    root.connecting = false
+                    if (networkSelection.currentIndex != -1) {
+                        NetworkSettingsManager.services.itemFromRow(networkSelection.currentIndex).removeService();
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/WifiSignalMonitor.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/WifiSignalMonitor.qml
new file mode 100644
index 0000000..bfbcb1d
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/WifiSignalMonitor.qml
@@ -0,0 +1,84 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+
+Item {
+    id: root
+    property bool scanning: false
+    property int signalStrength: 100
+    property bool connected: false
+
+    onSignalStrengthChanged: {
+        sprite.visible = true;
+
+        if (signalStrength < 10) {
+            sprite.visible = false;
+        }
+        else if (signalStrength < 30) {
+            sprite.currentFrame = 0;
+        }
+        else if (signalStrength < 60) {
+            sprite.currentFrame = 1;
+        }
+        else if (signalStrength < 80) {
+            sprite.currentFrame = 2;
+        }
+        else if (signalStrength <= 100) {
+            sprite.currentFrame = 3;
+        }
+    }
+
+    Image {
+        id: sprite
+        property int currentFrame: 0
+        anchors.fill: parent
+        source: "icons/Wifi_lightgray_2x.png"
+        clip: true
+
+        Timer {
+            id: scanningTimer
+            running: scanning
+            interval: 250
+            repeat: true
+            onTriggered: {
+                if (sprite.currentFrame < 4)
+                    sprite.currentFrame++
+                else
+                    sprite.currentFrame = 0
+            }
+        }
+
+        Image {
+            height: parent.height
+            width: parent.width * 4
+            source: "icons/WifiAnim_black_2x.png"
+            x: -parent.currentFrame * width / 4
+        }
+    }
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/WiredSettings.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/WiredSettings.qml
new file mode 100644
index 0000000..f5d3a8f
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/WiredSettings.qml
@@ -0,0 +1,191 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtDeviceUtilities.NetworkSettings
+
+Item {
+    id: root
+    anchors.fill: parent
+    property bool editMode: false
+    property var service: null
+    property string title: qsTr("Network");
+
+    Component.onCompleted: {
+        NetworkSettingsManager.services.type = NetworkSettingsType.Wired;
+        root.service = NetworkSettingsManager.services.itemFromRow(0);
+        ipv4Method.currentIndex = service.ipv4.method
+    }
+
+    onServiceChanged: {
+        NetworkSettingsManager.services.type = NetworkSettingsType.Wired;
+        if (!root.service) {
+            root.service = NetworkSettingsManager.services.itemFromRow(0);
+        }
+    }
+
+    GroupBox {
+        title: qsTr("Ethernet Connection")
+        anchors.fill: parent
+
+        Column {
+            spacing: 10
+            width: parent.width
+
+            ComboBoxEntry {
+                id: ipv4Method
+                title: qsTr("Connection method:")
+                model: ListModel {
+                    id: methodsModel
+
+                    ListElement {
+                        text: "DHCP"
+                        method: NetworkSettingsIPv4.Dhcp
+                    }
+                    ListElement {
+                        text: "Manual"
+                        method: NetworkSettingsIPv4.Manual
+                    }
+                    ListElement {
+                        text: "Off"
+                        method: NetworkSettingsIPv4.Off
+                    }
+                }
+
+                Component.onCompleted: currentIndex = service.ipv4.method
+                onCurrentIndexChanged: {
+                    if (model.get(currentIndex).method !== NetworkSettingsIPv4.Dhcp) {
+                        service.ipv4.method = model.get(currentIndex).method;
+                        editMode = true;
+                    }
+                    else if (service){
+                        //Enable DHCP
+                        if (service.ipv4.method !== model.get(currentIndex).method) {
+                            service.ipv4.method = model.get(currentIndex).method;
+                            service.setupIpv4Config();
+                        }
+                        editMode = false;
+                    }
+                }
+            }
+            Item {
+                width: parent.width
+                height: gridLayout.implicitHeight
+                GridLayout {
+                    id: gridLayout
+                    columns: 2
+                    rows: 4
+                    width: parent.width
+                    visible: service.ipv4.method !== NetworkSettingsIPv4.Off
+
+                    Label {
+                        text: qsTr("IP Address: ")
+                        width: parent.width * .3
+                    }
+                    IpAddressTextField {
+                        id: ipv4Address
+                        text: service.ipv4.address
+                        enabled: editMode
+                        onAccepted: if (text.length > 0) service.ipv4.address = text
+                    }
+                    Label {
+                        text: qsTr("Mask: ")
+                    }
+                    IpAddressTextField {
+                        id: ipv4Mask
+                        text: service.ipv4.mask
+                        enabled: editMode
+                        onAccepted: if (text.length > 0) service.ipv4.mask = text
+                    }
+                    Label {
+                        text: qsTr("Router: ")
+                    }
+                    IpAddressTextField {
+                        id: ipv4Gateway
+                        text: service.ipv4.gateway
+                        enabled: editMode
+                        onAccepted: if (text.length > 0) service.ipv4.gateway = text
+                    }
+                    Label {
+                        Layout.alignment: Qt.AlignTop
+                        text: qsTr("DNS server: ")
+                    }
+                    Column {
+                        spacing: 10
+                        Layout.fillWidth: true
+                        Layout.alignment: Qt.AlignTop
+
+                        Repeater {
+                            model: service.nameservers
+
+                            Label {
+                                text: display
+                            }
+                        }
+                    }
+                }
+                MouseArea {
+                    anchors.fill: parent
+                    enabled: !editMode
+                             && methodsModel.get(ipv4Method.currentIndex).method === NetworkSettingsIPv4.Manual
+                    onClicked: editMode = true
+                }
+            }
+            Row {
+                spacing: 10
+                Button {
+                    text: qsTr("Save")
+                    visible: editMode
+
+                    onClicked: {
+                        ipv4Address.accepted();
+                        ipv4Mask.accepted();
+                        ipv4Gateway.accepted();
+                        service.setupIpv4Config();
+                        editMode = false;
+                    }
+                }
+                Button {
+                    text: qsTr("Cancel")
+                    visible: editMode
+                    onClicked: {
+                        editMode = false;
+                        ipv4Method.currentIndex = service.ipv4.method
+                    }
+                }
+            }
+            Button {
+                text: qsTr("Edit")
+                visible: !editMode
+                onClicked: stackView.push(Qt.resolvedUrl("EditWiredSettings.qml"), {service: root.service});
+            }
+        }
+    }
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/Alert_yellow_1x.png b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/Alert_yellow_1x.png
new file mode 100644
index 0000000..6fd25cb
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/Alert_yellow_1x.png
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/WifiAnim_black_2x.png b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/WifiAnim_black_2x.png
new file mode 100644
index 0000000..c2dc8c5
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/WifiAnim_black_2x.png
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/Wifi_lightgray_2x.png b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/Wifi_lightgray_2x.png
new file mode 100644
index 0000000..b71b22e
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/Wifi_lightgray_2x.png
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/generate_icons.sh b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/generate_icons.sh
new file mode 100755
index 0000000..7218df0
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/generate_icons.sh
@@ -0,0 +1,37 @@
+############################################################################
+##
+## Copyright (C) 2017 The Qt Company Ltd.
+## Contact: https://www.qt.io/licensing/
+##
+## This file is part of the Device Utilities module of the Qt Toolkit.
+##
+## $QT_BEGIN_LICENSE:GPL$
+## Commercial License Usage
+## Licensees holding valid commercial Qt licenses may use this file in
+## accordance with the commercial license agreement provided with the
+## Software or, alternatively, in accordance with the terms contained in
+## a written agreement between you and The Qt Company. For licensing terms
+## and conditions see https://www.qt.io/terms-conditions. For further
+## information use the contact form at https://www.qt.io/contact-us.
+##
+## GNU General Public License Usage
+## Alternatively, this file may be used under the terms of the GNU
+## General Public License version 3 or (at your option) any later version
+## approved by the KDE Free Qt Foundation. The licenses are as published by
+## the Free Software Foundation and appearing in the file LICENSE.GPL3
+## included in the packaging of this file. Please review the following
+## information to ensure the GNU General Public License requirements will
+## be met: https://www.gnu.org/licenses/gpl-3.0.html.
+##
+## $QT_END_LICENSE$
+##
+#############################################################################
+#!/bin/bash
+#
+# This script resizes and sets correct brand colors for the icons in ref folder
+#
+
+./scripts/cimages.sh ./ref/*.png
+./scripts/cimage.sh ./ref/extra/Alert.png red
+./scripts/cimage.sh ./ref/extra/Alert.png yellow
+./scripts/rimages.sh *.png
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/ref/extra/Alert.png b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/ref/extra/Alert.png
new file mode 100644
index 0000000..80914fc
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/ref/extra/Alert.png
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/scripts/cimage.sh b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/scripts/cimage.sh
new file mode 100755
index 0000000..adbbb7f
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/scripts/cimage.sh
@@ -0,0 +1,55 @@
+############################################################################
+##
+## Copyright (C) 2017 The Qt Company Ltd.
+## Contact: https://www.qt.io/licensing/
+##
+## This file is part of the Device Utilities module of the Qt Toolkit.
+##
+## $QT_BEGIN_LICENSE:GPL$
+## Commercial License Usage
+## Licensees holding valid commercial Qt licenses may use this file in
+## accordance with the commercial license agreement provided with the
+## Software or, alternatively, in accordance with the terms contained in
+## a written agreement between you and The Qt Company. For licensing terms
+## and conditions see https://www.qt.io/terms-conditions. For further
+## information use the contact form at https://www.qt.io/contact-us.
+##
+## GNU General Public License Usage
+## Alternatively, this file may be used under the terms of the GNU
+## General Public License version 3 or (at your option) any later version
+## approved by the KDE Free Qt Foundation. The licenses are as published by
+## the Free Software Foundation and appearing in the file LICENSE.GPL3
+## included in the packaging of this file. Please review the following
+## information to ensure the GNU General Public License requirements will
+## be met: https://www.gnu.org/licenses/gpl-3.0.html.
+##
+## $QT_END_LICENSE$
+##
+#############################################################################
+#!/bin/bash
+
+fullfile=$1
+filename=$(basename "$fullfile")
+extension="${filename##*.}"
+filename="${filename%.*}"
+
+color=$2
+if [ "$color" = "qt" ]; then
+    fill='rgb(128,195,66)'
+elif [ "$color" = "black" ]; then
+    fill='rgb(32,40,42)'
+elif [ "$color" = "white" ]; then
+    fill='rgb(255,255,255)'
+elif [ "$color" = "lightgray" ]; then
+    fill='rgb(214,214,214)'
+elif [ "$color" = "red" ]; then
+    fill='rgb(228,30,37)'
+elif [ "$color" = "yellow" ]; then
+    fill='rgb(250,206,32)'
+else
+    fill="black"
+fi
+
+separator="_"
+
+convert $fullfile -fuzz 100% -fill $fill -opaque black $filename$separator$color.$extension
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/scripts/cimages.sh b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/scripts/cimages.sh
new file mode 100755
index 0000000..db1ad04
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/scripts/cimages.sh
@@ -0,0 +1,38 @@
+############################################################################
+##
+## Copyright (C) 2017 The Qt Company Ltd.
+## Contact: https://www.qt.io/licensing/
+##
+## This file is part of the Device Utilities module of the Qt Toolkit.
+##
+## $QT_BEGIN_LICENSE:GPL$
+## Commercial License Usage
+## Licensees holding valid commercial Qt licenses may use this file in
+## accordance with the commercial license agreement provided with the
+## Software or, alternatively, in accordance with the terms contained in
+## a written agreement between you and The Qt Company. For licensing terms
+## and conditions see https://www.qt.io/terms-conditions. For further
+## information use the contact form at https://www.qt.io/contact-us.
+##
+## GNU General Public License Usage
+## Alternatively, this file may be used under the terms of the GNU
+## General Public License version 3 or (at your option) any later version
+## approved by the KDE Free Qt Foundation. The licenses are as published by
+## the Free Software Foundation and appearing in the file LICENSE.GPL3
+## included in the packaging of this file. Please review the following
+## information to ensure the GNU General Public License requirements will
+## be met: https://www.gnu.org/licenses/gpl-3.0.html.
+##
+## $QT_END_LICENSE$
+##
+#############################################################################
+#!/bin/bash
+
+for dir in "$@"
+do
+    echo "$dir"
+    scripts/cimage.sh $dir qt
+    scripts/cimage.sh $dir black
+    scripts/cimage.sh $dir white
+    scripts/cimage.sh $dir lightgray
+done
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/scripts/rimage.sh b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/scripts/rimage.sh
new file mode 100755
index 0000000..69b65a3
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/scripts/rimage.sh
@@ -0,0 +1,47 @@
+############################################################################
+##
+## Copyright (C) 2017 The Qt Company Ltd.
+## Contact: https://www.qt.io/licensing/
+##
+## This file is part of the Device Utilities module of the Qt Toolkit.
+##
+## $QT_BEGIN_LICENSE:GPL$
+## Commercial License Usage
+## Licensees holding valid commercial Qt licenses may use this file in
+## accordance with the commercial license agreement provided with the
+## Software or, alternatively, in accordance with the terms contained in
+## a written agreement between you and The Qt Company. For licensing terms
+## and conditions see https://www.qt.io/terms-conditions. For further
+## information use the contact form at https://www.qt.io/contact-us.
+##
+## GNU General Public License Usage
+## Alternatively, this file may be used under the terms of the GNU
+## General Public License version 3 or (at your option) any later version
+## approved by the KDE Free Qt Foundation. The licenses are as published by
+## the Free Software Foundation and appearing in the file LICENSE.GPL3
+## included in the packaging of this file. Please review the following
+## information to ensure the GNU General Public License requirements will
+## be met: https://www.gnu.org/licenses/gpl-3.0.html.
+##
+## $QT_END_LICENSE$
+##
+#############################################################################
+#!/bin/bash
+fullfile=$1
+filename=$(basename "$fullfile")
+extension="${filename##*.}"
+filename="${filename%.*}"
+
+postix="_1x"
+convert $fullfile -resize x16 $filename$postix.$extension
+postix="_2x"
+convert $fullfile -resize x32 $filename$postix.$extension
+postix="_3x"
+convert $fullfile -resize x48 $filename$postix.$extension
+postix="_4x"
+convert $fullfile -resize x64 $filename$postix.$extension
+postix="_5x"
+convert $fullfile -resize x80 $filename$postix.$extension
+postix="_6x"
+convert $fullfile -resize x96 $filename$postix.$extension
+
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/scripts/rimages.sh b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/scripts/rimages.sh
new file mode 100755
index 0000000..e9e01b0
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/Network/icons/scripts/rimages.sh
@@ -0,0 +1,35 @@
+############################################################################
+##
+## Copyright (C) 2017 The Qt Company Ltd.
+## Contact: https://www.qt.io/licensing/
+##
+## This file is part of the Device Utilities module of the Qt Toolkit.
+##
+## $QT_BEGIN_LICENSE:GPL$
+## Commercial License Usage
+## Licensees holding valid commercial Qt licenses may use this file in
+## accordance with the commercial license agreement provided with the
+## Software or, alternatively, in accordance with the terms contained in
+## a written agreement between you and The Qt Company. For licensing terms
+## and conditions see https://www.qt.io/terms-conditions. For further
+## information use the contact form at https://www.qt.io/contact-us.
+##
+## GNU General Public License Usage
+## Alternatively, this file may be used under the terms of the GNU
+## General Public License version 3 or (at your option) any later version
+## approved by the KDE Free Qt Foundation. The licenses are as published by
+## the Free Software Foundation and appearing in the file LICENSE.GPL3
+## included in the packaging of this file. Please review the following
+## information to ensure the GNU General Public License requirements will
+## be met: https://www.gnu.org/licenses/gpl-3.0.html.
+##
+## $QT_END_LICENSE$
+##
+#############################################################################
+#!/bin/bash
+
+for dir in "$@"
+do
+    echo "$dir"
+    scripts/rimage.sh $dir
+done
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/SettingsDelegate.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/SettingsDelegate.qml
new file mode 100644
index 0000000..b3a1193
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/SettingsDelegate.qml
@@ -0,0 +1,80 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import DeviceUtilities.SettingsUI
+
+Item {
+    id: delegate
+    width: parent.width
+    height: parent.height * 0.08
+
+    //TODO: Do not expect id from other qml file to work/exist
+    property bool isSelected: settingsList.currentIndex == index
+
+    Image {
+        id: img
+        sourceSize.width: parent.width
+        sourceSize.height: parent.height
+        source: icon
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: parent.width * 0.075
+        height: Math.min(parent.width * 0.5, parent.height * 0.6)
+        width: height
+        fillMode: Image.PreserveAspectFit
+    }
+
+    Text {
+        text: title
+        height: parent.height * 0.75
+        anchors.right: parent.right
+        anchors.left: img.right
+        anchors.leftMargin: parent.width * 0.025
+        anchors.verticalCenter: parent.verticalCenter
+        fontSizeMode: Text.Fit
+        minimumPixelSize: 1
+        font.pixelSize: Math.min(parent.width * 0.25, parent.height)
+        color: delegate.isSelected ? Globals.buttonGreenColor : "white"
+        wrapMode: Text.WordWrap
+        verticalAlignment: Text.AlignVCenter
+        font.family: Globals.appFont
+        font.styleName: delegate.isSelected ? "Bold" : "Regular"
+    }
+
+    //TODO: Do not expect id from other qml file to work/exist
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: {
+            settingsList.currentIndex = index
+            settingsLoader.source = path + '/' + view + '.qml'
+            titleItem.title = title
+        }
+    }
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/SettingsHeader.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/SettingsHeader.qml
new file mode 100644
index 0000000..5667a3c
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/SettingsHeader.qml
@@ -0,0 +1,111 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtDeviceUtilities.NetworkSettings
+
+Item {
+    id: header
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.top: parent.top
+    anchors.margins: margin
+    height: margin * 4
+
+    property int margin: Globals.margin(header.width)
+    property int spacing: margin * 0.5
+
+    signal clicked()
+
+    Image {
+        id: networkButton
+        anchors.left: header.left
+        anchors.top: header.top
+        source: "icons/back.svg"
+        height: header.height * 0.5
+        width: height / sourceSize.height * sourceSize.width
+        MouseArea {
+            anchors.fill: parent
+            anchors.margins: -parent.height * 0.2
+            onClicked: parent.clicked()
+        }
+        visible: false
+    }
+
+    Text {
+        id: settingsText
+        anchors.left: networkButton.right
+        anchors.verticalCenter: networkButton.verticalCenter
+        font.pixelSize: header.height * 0.45
+        text: qsTr("Settings")
+        color: "white"
+        font.family: Globals.appFont
+        font.styleName: "SemiBold"
+        MouseArea {
+            anchors.fill: parent
+            anchors.margins: -parent.height * 0.2
+            onClicked: parent.clicked()
+        }
+    }
+
+    Text {
+        id: ipItem
+        width: header.width * 0.25
+        height: header.height/2
+        anchors.top: settingsText.top
+        anchors.right: header.right
+        anchors.rightMargin: margin
+        horizontalAlignment: Text.AlignRight
+        verticalAlignment: Text.AlignVCenter
+        font.pixelSize: header.height * 0.3
+        color: "white"
+        font.family: Globals.appFont
+        font.styleName: "SemiBold"
+        text: NetworkSettingsManager.currentWiredConnection ?
+                   qsTr("Wired IP: ") +
+                        NetworkSettingsManager.currentWiredConnection.ipv4.address : ""
+    }
+
+    Text {
+        id: wifiIpItem
+        width: header.width * 0.25
+        height: header.height/2
+        anchors.top: ipItem.bottom
+        anchors.right: parent.right
+        anchors.rightMargin: margin
+        horizontalAlignment: Text.AlignRight
+        verticalAlignment: Text.AlignVCenter
+        font.pixelSize: header.height * 0.3
+        color: "white"
+        font.family: Globals.appFont
+        font.styleName: "SemiBold"
+        text: NetworkSettingsManager.currentWifiConnection ?
+                   qsTr("Wireless IP: ") +
+                        NetworkSettingsManager.currentWifiConnection.ipv4.address : ""
+    }
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/SettingsTitleItem.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/SettingsTitleItem.qml
new file mode 100644
index 0000000..d43f8e8
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/SettingsTitleItem.qml
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+
+Column {
+    id: page
+    spacing: Globals.margin(page.width) * Globals.spacing
+
+    property alias title: displayText.text
+
+    Text {
+        id: displayText
+        font.pixelSize: (page.parent.height * Globals.titleFontSize)
+        color: "white"
+        fontSizeMode: Text.Fit
+        minimumPixelSize: 1
+        font.family: Globals.appFont
+        font.styleName: "Bold"
+    }
+
+    Rectangle {
+        id: btmLine
+        width: page.parent.width * 0.3
+        height: 3
+    }
+
+    Item {
+        height: Globals.margin(page.width)
+        width: 1
+    }
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/SettingsUI.qml b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/SettingsUI.qml
new file mode 100644
index 0000000..44ce51d
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/SettingsUI.qml
@@ -0,0 +1,96 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import DeviceUtilities.SettingsUI.Network
+
+Rectangle {
+    id: main
+    anchors.fill: parent
+    color: Globals.backgroundColor
+    opacity: 0.97
+
+    property int margin: Globals.margin(main.width)
+
+    signal closed()
+
+    Component.onCompleted: {
+        settingsList.currentIndex = 0
+        settingsLoader.source = settingsListModel.get(0).path + '/' +
+                                settingsListModel.get(0).view + '.qml'
+        titleItem.title = settingsListModel.get(0).title
+    }
+
+    SettingsHeader {
+        id: settingsHeader
+        onClicked: main.closed()
+    }
+
+    ListModel {
+        id: settingsListModel
+
+        ListElement {
+            title: "Network"
+            view: "NetworkSettings"
+            path: "Network"
+            icon: "icons/network.svg"
+        }
+    }
+
+    ListView {
+        id: settingsList
+        objectName: "settingsList"
+        anchors.top: settingsHeader.bottom
+        anchors.left: main.left
+        anchors.bottom: main.bottom
+        width: main.width / 3.33
+        model: settingsListModel
+
+        delegate: SettingsDelegate {}
+    }
+
+    SettingsTitleItem {
+        id: titleItem
+        anchors.left: settingsList.right
+        anchors.right: main.right
+        anchors.top: settingsHeader.bottom
+        anchors.leftMargin: margin * 2
+    }
+
+    Loader {
+        id: settingsLoader
+        width: main.width
+        height: main.height
+        anchors.top: titleItem.bottom
+        anchors.left: settingsList.right
+        anchors.right: main.right
+        anchors.bottom: main.bottom
+        anchors.leftMargin: margin * 2
+        anchors.rightMargin: margin * 2
+    }
+}
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/icons/back.svg b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/icons/back.svg
new file mode 100644
index 0000000..6034bd7
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/icons/back.svg
@@ -0,0 +1 @@
+<svg id="back" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>back_icon</title><path d="M26.57,43.5a2.61,2.61,0,0,1-2.1-1.06L10.74,24a2.62,2.62,0,0,1,0-3.12L25.06,1.56a2.62,2.62,0,1,1,4.2,3.12L16.1,22.4,28.67,39.32a2.62,2.62,0,0,1-2.1,4.18Z" style="fill:#fff"/></svg>
\ No newline at end of file
diff --git a/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/icons/network.svg b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/icons/network.svg
new file mode 100644
index 0000000..157fb52
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/DeviceUtilities/SettingsUI/icons/network.svg
@@ -0,0 +1 @@
+<svg id="network" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>network_icon</title><path d="M8.22,28.71A6.71,6.71,0,1,1,14.93,22a6.72,6.72,0,0,1-6.71,6.71Zm0-10A3.25,3.25,0,1,0,11.47,22a3.25,3.25,0,0,0-3.25-3.25Z" style="fill:#41cd52"/><path d="M35.78,13.92a6.71,6.71,0,1,1,6.71-6.71,6.72,6.72,0,0,1-6.71,6.71Zm0-10A3.25,3.25,0,1,0,39,7.21,3.25,3.25,0,0,0,35.78,4Z" style="fill:#41cd52"/><path d="M35.78,43.5a6.71,6.71,0,1,1,6.71-6.71,6.72,6.72,0,0,1-6.71,6.71Zm0-10A3.25,3.25,0,1,0,39,36.79a3.25,3.25,0,0,0-3.25-3.25Z" style="fill:#41cd52"/><path d="M30.66,35.89a1.73,1.73,0,0,1-.86-.23L12.12,25.46a1.73,1.73,0,0,1,1.73-3L31.52,32.66a1.73,1.73,0,0,1-.87,3.23Z" style="fill:#41cd52"/><path d="M13,21.77a1.73,1.73,0,0,1-.87-3.23L29.79,8.34a1.73,1.73,0,1,1,1.73,3L13.85,21.54a1.71,1.71,0,0,1-.86.23Z" style="fill:#41cd52"/></svg>
\ No newline at end of file
diff --git a/examples/deviceutilities/settingsuiapp/HandwritingModeButton.qml b/examples/deviceutilities/settingsuiapp/HandwritingModeButton.qml
new file mode 100644
index 0000000..adbb262
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/HandwritingModeButton.qml
@@ -0,0 +1,164 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+
+Item {
+    id: handwritingModeButton
+    state: "unavailable"
+    property bool floating
+    property bool flipable
+    readonly property real __minWidthHeight: Math.min(width, height)
+
+    signal clicked()
+    signal doubleClicked()
+
+    Flipable {
+        id: flipableImage
+        anchors.fill: parent
+
+        property bool flipped
+
+        front: Image {
+            sourceSize.width: handwritingModeButton.__minWidthHeight
+            sourceSize.height: handwritingModeButton.__minWidthHeight
+            smooth: false
+            source: "images/FloatingButton_Unavailable.png"
+        }
+
+        back: Image {
+            id: buttonImage
+            sourceSize.width: handwritingModeButton.__minWidthHeight
+            sourceSize.height: handwritingModeButton.__minWidthHeight
+            smooth: false
+            source: "images/FloatingButton_Available.png"
+        }
+
+        states: State {
+            PropertyChanges { target: rotation; angle: 180 }
+            when: flipableImage.flipped
+        }
+
+        transform: Rotation {
+            id: rotation
+            origin.x: flipableImage.width / 2
+            origin.y: flipableImage.height / 2
+            axis { x: 0; y: 1; z: 0 }
+            angle: 0
+        }
+
+        transitions: Transition {
+            enabled: handwritingModeButton.flipable
+            NumberAnimation { target: rotation; property: "angle"; duration: 400 }
+        }
+    }
+
+    states: [
+        State {
+            name: "available"
+            PropertyChanges { target: flipableImage; flipped: true }
+        },
+        State {
+            name: "active"
+            PropertyChanges { target: flipableImage; flipped: true }
+            PropertyChanges { target: buttonImage; source: "images/FloatingButton_Active.png" }
+        }
+    ]
+
+    function snapHorizontal() {
+        if (!floating)
+            return
+        if (mouseArea.drag.maximumX > mouseArea.drag.minimumX) {
+            if (x + 20 >= mouseArea.drag.maximumX) {
+                anchors.left = undefined
+                anchors.right = parent.right
+            } else if (x - 20 <= mouseArea.drag.minimumX) {
+                anchors.right = undefined
+                anchors.left = parent.left
+            }
+        }
+    }
+
+    function snapVertical() {
+        if (!floating)
+            return
+        if (mouseArea.drag.maximumY > mouseArea.drag.minimumY) {
+            if (y + 20 >= mouseArea.drag.maximumY) {
+                anchors.top = undefined
+                anchors.bottom = parent.bottom
+            } else if (y - 20 <= mouseArea.drag.minimumY) {
+                anchors.bottom = undefined
+                anchors.top = parent.top
+            }
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        drag {
+            target: handwritingModeButton.floating ? handwritingModeButton : undefined
+            axis: Drag.XAxis | Drag.YAxis
+            minimumX: 0
+            maximumX: handwritingModeButton.parent.width - handwritingModeButton.width
+            onMaximumXChanged: !mouseArea.drag.active && handwritingModeButton.snapHorizontal()
+            minimumY: 0
+            maximumY: handwritingModeButton.parent.height - handwritingModeButton.height
+            onMaximumYChanged: !mouseArea.drag.active && handwritingModeButton.snapVertical()
+        }
+        onPressed: {
+            if (!handwritingModeButton.floating)
+                return
+            handwritingModeButton.anchors.left = undefined
+            handwritingModeButton.anchors.top = undefined
+            handwritingModeButton.anchors.right = undefined
+            handwritingModeButton.anchors.bottom = undefined
+        }
+        onReleased: {
+            handwritingModeButton.snapHorizontal()
+            handwritingModeButton.snapVertical()
+        }
+        onClicked: {
+            handwritingModeButton.snapHorizontal()
+            handwritingModeButton.snapVertical()
+            clickTimer.restart()
+        }
+        onDoubleClicked: {
+            clickTimer.stop()
+            handwritingModeButton.snapHorizontal()
+            handwritingModeButton.snapVertical()
+            handwritingModeButton.doubleClicked()
+        }
+        Timer {
+            id: clickTimer
+            interval: Qt.styleHints ? Qt.styleHints.mouseDoubleClickInterval / 3 : 0
+            repeat: false
+            onTriggered: handwritingModeButton.clicked()
+        }
+    }
+}
diff --git a/examples/deviceutilities/settingsuiapp/applicationsettings.cpp b/examples/deviceutilities/settingsuiapp/applicationsettings.cpp
new file mode 100644
index 0000000..937a0ce
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/applicationsettings.cpp
@@ -0,0 +1,61 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "applicationsettings.h"
+#include <QGuiApplication>
+#include <QScreen>
+
+ApplicationSettings::ApplicationSettings(QObject *parent)
+    : QObject(parent)
+{
+    m_screen = qobject_cast<QGuiApplication *>(QCoreApplication::instance())->primaryScreen();
+
+    if (m_screen->orientation() == Qt::PortraitOrientation) {
+        m_width = m_screen->availableGeometry().height();
+        m_height = m_screen->availableGeometry().width();
+    } else {
+        m_width = m_screen->availableGeometry().width();
+        m_height = m_screen->availableGeometry().height();
+    }
+}
+
+bool ApplicationSettings::isHighDpi()
+{
+    return (m_screen->devicePixelRatio() >= 2.0);
+}
+
+int ApplicationSettings::width()
+{
+    return m_width;
+}
+
+int ApplicationSettings::height()
+{
+    return m_height;
+}
+
diff --git a/examples/deviceutilities/settingsuiapp/applicationsettings.h b/examples/deviceutilities/settingsuiapp/applicationsettings.h
new file mode 100644
index 0000000..7b450e1
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/applicationsettings.h
@@ -0,0 +1,64 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt for Device Creation.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#ifndef APPLICATIONSETTINGS_H
+#define APPLICATIONSETTINGS_H
+
+#include <QObject>
+#include <QQmlEngine>
+
+QT_FORWARD_DECLARE_CLASS(QScreen)
+
+class ApplicationSettings : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(int width READ width CONSTANT FINAL)
+    Q_PROPERTY(int height READ height CONSTANT FINAL)
+    Q_PROPERTY(bool isHighDpi READ isHighDpi NOTIFY isHighDpiChanged FINAL)
+
+    QML_ELEMENT
+    QML_SINGLETON
+
+public:
+    explicit ApplicationSettings(QObject *parent = nullptr);
+
+    int width();
+    int height();
+    bool isHighDpi();
+
+signals:
+    void isHighDpiChanged(bool isHighDpi);
+
+private:
+    QScreen *m_screen = nullptr;
+    int m_width = 1280;
+    int m_height = 720;
+};
+
+#endif // APPLICATIONSETTINGS_H
diff --git a/examples/deviceutilities/settingsuiapp/images/FloatingButton_Active.png b/examples/deviceutilities/settingsuiapp/images/FloatingButton_Active.png
new file mode 100755
index 0000000..9b55146
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/images/FloatingButton_Active.png
diff --git a/examples/deviceutilities/settingsuiapp/images/FloatingButton_Available.png b/examples/deviceutilities/settingsuiapp/images/FloatingButton_Available.png
new file mode 100755
index 0000000..1479881
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/images/FloatingButton_Available.png
diff --git a/examples/deviceutilities/settingsuiapp/images/FloatingButton_Unavailable.png b/examples/deviceutilities/settingsuiapp/images/FloatingButton_Unavailable.png
new file mode 100755
index 0000000..33aa87d
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/images/FloatingButton_Unavailable.png
diff --git a/examples/deviceutilities/settingsuiapp/main.cpp b/examples/deviceutilities/settingsuiapp/main.cpp
new file mode 100644
index 0000000..f2e51aa
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/main.cpp
@@ -0,0 +1,44 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include <QGuiApplication>
+#include <QQmlApplicationEngine>
+
+#include "applicationsettings.h"
+
+int main(int argc, char *argv[])
+{
+    qputenv("QT_IM_MODULE", QByteArray("qtvirtualkeyboard"));
+
+    QGuiApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    engine.load(QUrl(QStringLiteral("qrc:///DeviceUtilities/main.qml")));
+
+    return app.exec();
+}
diff --git a/examples/deviceutilities/settingsuiapp/main.qml b/examples/deviceutilities/settingsuiapp/main.qml
new file mode 100644
index 0000000..0c755df
--- /dev/null
+++ b/examples/deviceutilities/settingsuiapp/main.qml
@@ -0,0 +1,139 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Device Utilities module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick
+import QtQuick.Window
+import QtQuick.VirtualKeyboard
+import DeviceUtilities
+import DeviceUtilities.SettingsUI
+
+Window {
+    id: window
+    visible: true
+    width: ApplicationSettings.width
+    height: ApplicationSettings.height
+
+    Item {
+        id: root
+        width: window.width
+        height: window.height
+
+        SettingsUI {
+            id: settingsUI
+            anchors.fill: parent
+            anchors.bottomMargin: parent.height - inputPanel.y
+        }
+
+        /*  Handwriting input panel for full screen handwriting input.
+
+        This component is an optional add-on for the InputPanel component, that
+        is, its use does not affect the operation of the InputPanel component,
+        but it also can not be used as a standalone component.
+
+        The handwriting input panel is positioned to cover the entire area of
+        application. The panel itself is transparent, but once it is active the
+        user can draw handwriting on it.
+        */
+
+        HandwritingInputPanel {
+            z: 79
+            id: handwritingInputPanel
+            anchors.fill: parent
+            inputPanel: inputPanel
+            Rectangle {
+                z: -1
+                anchors.fill: parent
+                color: "black"
+                opacity: 0.10
+            }
+        }
+
+        /*  Container area for the handwriting mode button.
+
+        Handwriting mode button can be moved freely within the container area.
+        In this example, a single click changes the handwriting mode and a
+        double-click changes the availability of the full screen handwriting input.
+        */
+        Item {
+            z: 89
+            visible: handwritingInputPanel.enabled && Qt.inputMethod.visible
+            anchors { left: parent.left; top: parent.top; right: parent.right; bottom: inputPanel.top; }
+            HandwritingModeButton {
+                id: handwritingModeButton
+                anchors.top: parent.top
+                anchors.right: parent.right
+                anchors.margins: 10
+                floating: true
+                flipable: true
+                width: 76
+                height: width
+                state: handwritingInputPanel.state
+                onClicked: handwritingInputPanel.active = !handwritingInputPanel.active
+                onDoubleClicked: handwritingInputPanel.available = !handwritingInputPanel.available
+            }
+        }
+
+        /*  Keyboard input panel.
+            The keyboard is anchored to the bottom of the application.
+        */
+        InputPanel {
+            id: inputPanel
+            z: 99
+            y: root.height
+            anchors.left: root.left
+            anchors.right: root.right
+
+            states: State {
+                name: "visible"
+                /*  The visibility of the InputPanel can be bound to the Qt.inputMethod.visible property,
+                but then the handwriting input panel and the keyboard input panel can be visible
+                at the same time. Here the visibility is bound to InputPanel.active property instead,
+                which allows the handwriting panel to control the visibility when necessary.
+            */
+                when: inputPanel.active
+                PropertyChanges {
+                    target: inputPanel
+                    y: root.height - inputPanel.height
+                }
+            }
+            transitions: Transition {
+                from: ""
+                to: "visible"
+                reversible: true
+                ParallelAnimation {
+                    NumberAnimation {
+                        properties: "y"
+                        duration: 250
+                        easing.type: Easing.InOutQuad
+                    }
+                }
+            }
+            AutoScroller {}
+        }
+    }
+}