Moved development related files to dev folder

Grouped development and monitoring files to special file
within the sysui folder. All development visual elements
will be loaded on demand: SystemMonitor from the
settings page and the ToolBarMonitor.

FpsMonitor is now part of the ToolbarMonitor.

Change-Id: I7eeebf70c4c6046c989e99c16031ca2811bc781b
Reviewed-by: Dominik Holland <dominik.holland@pelagicore.com>

14 files changed, 462 insertions, 167 deletions

diff --git a/sysui/Cloud/Settings/SettingsScreen.qml b/sysui/Cloud/Settings/SettingsScreen.qml
index d96fe62..db8dea9 100644
--- a/sysui/Cloud/Settings/SettingsScreen.qml
+++ b/sysui/Cloud/Settings/SettingsScreen.qml
@@ -36,7 +36,6 @@ import controls 1.0
 import utils 1.0
 import service.settings 1.0
 import models 1.0
-import "SystemMonitor/"
 import utils 1.0
 
 UIElement {
@@ -86,11 +85,6 @@ UIElement {
     Loader {
         id: systemMonitorLoader
         active: false
-        sourceComponent: Component {
-            MainScreen {
-                id: systemMonitor
-                visible: false
-            }
-        }
+        source: "../../dev/SystemMonitor/MainScreen.qml"
     }
 }
diff --git a/sysui/Display.qml b/sysui/Display.qml
index ae60c3a..1ee018c 100644
--- a/sysui/Display.qml
+++ b/sysui/Display.qml
@@ -69,9 +69,7 @@ Item {
                     root.state = "statusBarExpanded"
                 }
             }
-            onTimePressAndHold: {
-                fpsMonitor.visible = !fpsMonitor.visible
-            }
+            onTimePressAndHold: toolBarMonitorLoader.active = !toolBarMonitorLoader.active
         }
 
         Item {
@@ -130,15 +128,15 @@ Item {
             }
         }
 
-        FpsMonitor {
-            id: fpsMonitor
-            x: 0
-            y: 0
-            width: Style.hspan(4)
-            height: Style.vspan(2)
-            visible: false
-            opacity: 0.8
+        Loader {
+            id: toolBarMonitorLoader
+            width: parent.width
+            height: 200
+            anchors.bottom: parent.bottom
+            active: false
+            source: "dev/ToolBarMonitor.qml"
         }
+
     }
 
     NotificationContainer {
diff --git a/sysui/FpsMonitor.qml b/sysui/FpsMonitor.qml
deleted file mode 100644
index 80f08b4..0000000
--- a/sysui/FpsMonitor.qml
+++ /dev/null
@@ -1,143 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2016 Pelagicore AG
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the Neptune IVI UI.
-**
-** $QT_BEGIN_LICENSE:GPL-QTAS$
-** Commercial License Usage
-** Licensees holding valid commercial Qt Automotive Suite 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$
-**
-** SPDX-License-Identifier: GPL-3.0
-**
-****************************************************************************/
-
-import QtQuick 2.1
-import QtApplicationManager 1.0
-
-
-Rectangle {
-    id: root
-    color: "white"
-
-    property int currentFps: 0
-
-    Connections {
-        target: SystemMonitor
-        onFpsReportingChanged: { root.currentFps = Math.floor(average) }
-    }
-
-    onVisibleChanged: {
-        SystemMonitor.reportingInterval = 200
-        SystemMonitor.reportingRange = 10 * 1000
-        SystemMonitor.fpsReportingEnabled = visible
-        SystemMonitor.cpuLoadReportingEnabled = visible
-    }
-
-    Item {
-        id: yscale
-        width: childrenRect.width
-        height: parent.height
-
-        Text {
-            anchors {
-                right: parent.right
-                top: parent.top
-                topMargin: parent.height / 8 * 2
-            }
-            text: "60"
-        }
-        Text {
-            anchors {
-                bottom: yscale.bottom
-                right: parent.right
-            }
-            text: "0"
-        }
-    }
-
-    Rectangle {
-        id: ybar
-        width: 1
-        anchors {
-            top: parent.top
-            bottom: parent.bottom
-            left: yscale.right
-            leftMargin: 4
-        }
-        color: "black"
-    }
-
-    ListView {
-        id: graph
-        anchors {
-            top: parent.top
-            right: parent.right
-            bottom: parent.bottom
-            left: ybar.right
-            leftMargin: 4
-        }
-
-        model: SystemMonitor
-        orientation: ListView.Horizontal
-        interactive: false
-
-        delegate: Item {
-            width: graph.width / graph.model.count
-            height: graph.height
-            Rectangle {
-                width: parent.width
-                height: (model.averageFps/80)*parent.height
-                anchors.bottom: parent.bottom
-                color: "yellow"
-            }
-            Rectangle {
-                width: parent.width
-                y: parent.height - (model.minimumFps/80)*parent.height
-                height: 2
-                color: "red"
-                opacity: 0.5
-            }
-            Rectangle {
-                width: parent.width
-                y: parent.height - (model.maximumFps/80)*parent.height
-                height: 2
-                color: "green"
-                opacity: 0.5
-                visible: model.maximumFps < 80
-            }
-            Rectangle {
-                width: parent.width
-                height: (model.cpuLoad * parent.height)
-                anchors.top: parent.top
-                color: "blue"
-            }
-        }
-        Text {
-            id: currentFps
-            anchors.centerIn: parent
-            text: root.currentFps + " fps"
-            font.italic: true
-            font.pixelSize: parent.height / 6
-        }
-    }
-}
-
-
diff --git a/sysui/dev/CpuMonitor.qml b/sysui/dev/CpuMonitor.qml
new file mode 100644
index 0000000..6d10a99
--- /dev/null
+++ b/sysui/dev/CpuMonitor.qml
@@ -0,0 +1,64 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite 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$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+
+import QtQuick 2.1
+import QtApplicationManager 1.0
+
+
+MonitorPanel {
+    id: root
+
+    descriptionText: "CPU: "
+    middleText: "50%"
+    middleLine: 0.5
+
+    ListView {
+        id: graph
+        anchors.fill: parent
+
+        model: SystemMonitor
+        orientation: ListView.Horizontal
+        interactive: false
+
+        delegate: Item {
+            width: graph.width / graph.model.count
+            height: graph.height
+
+            Rectangle {
+                width: parent.width
+                height: 3
+                y: parent.height - model.cpuLoad * parent.height
+            }
+        }
+    }
+}
+
+
diff --git a/sysui/dev/FpsMonitor.qml b/sysui/dev/FpsMonitor.qml
new file mode 100644
index 0000000..938b4db
--- /dev/null
+++ b/sysui/dev/FpsMonitor.qml
@@ -0,0 +1,85 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite 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$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+
+import QtQuick 2.1
+import QtApplicationManager 1.0
+
+
+MonitorPanel {
+    id: root
+
+    descriptionText: "FPS: "
+    middleText: "60"
+    middleLine: 0.6
+
+    ListView {
+        id: graph
+        anchors.fill: parent
+
+        model: SystemMonitor
+        orientation: ListView.Horizontal
+        interactive: false
+
+        delegate: Item {
+            width: graph.width / graph.model.count
+            height: graph.height
+
+            Rectangle {
+                width: parent.width
+                height: 3
+                y: parent.height - (model.averageFps/100)*parent.height
+            }
+        }
+    }
+
+    Rectangle {
+        id: rotatingBox
+        width: 20
+        height: 20
+        anchors.bottom: root.bottom
+        //anchors.topMargin: 50
+        anchors.left: root.left
+        //anchors.leftMargin: 150
+        color: "#273033"
+
+        RotationAnimation {
+            id: animator
+            target: rotatingBox;
+            from: 0;
+            to: 360;
+            loops: Animation.Infinite
+            duration: 1000
+            running: true
+        }
+    }
+}
+
+
diff --git a/sysui/dev/MonitorPanel.qml b/sysui/dev/MonitorPanel.qml
new file mode 100644
index 0000000..ac02390
--- /dev/null
+++ b/sysui/dev/MonitorPanel.qml
@@ -0,0 +1,119 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite 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$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import utils 1.0
+import controls 1.0
+
+Item {
+    id: root
+    width: 640
+    height: 200
+
+    property int leftMargin: 0.03 * width
+    property alias descriptionText: descriptionText.text
+    property alias valueText: valueText.text
+    property real middleLine: 0.5
+    property int graphHeight: 0.65 * root.height
+    property alias middleText: middleLineText.text
+    default property alias content: graphContent.children
+
+    Row {
+        anchors.top: parent.top
+        anchors.topMargin: 10
+        anchors.left: parent.left
+        anchors.leftMargin: root.leftMargin
+        spacing: 5
+
+        Label {
+            id: descriptionText
+            width: 110
+            color: "#4d4d4d"
+            font.pixelSize: Style.fontSizeL
+        }
+
+        Label {
+            id: valueText
+            hspan: 2
+            font.pixelSize: Style.fontSizeL
+        }
+    }
+
+    Item {
+        id: graphContainer
+        width: 0.86 * root.width
+        height: root.graphHeight
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: root.leftMargin
+        anchors.left: parent.left
+        anchors.leftMargin: root.leftMargin
+
+        Row {
+            id: dottedLine
+            y: root.middleLine * root.graphHeight
+            spacing: 4
+
+            Repeater {
+                model: graphContainer.width/8
+
+                Rectangle {
+                    width: 4
+                    height: width
+                    radius: width
+                    color: "#4d4d4d"
+                }
+            }
+        }
+
+        Label {
+            id: middleLineText
+            hspan: 1
+            anchors.left: dottedLine.right
+            anchors.verticalCenter: dottedLine.verticalCenter
+            color: "#4d4d4d"
+            font.pixelSize: Style.fontSizeM
+        }
+
+        Rectangle {
+            width: parent.width
+            height: 2
+            anchors.bottom: parent.bottom
+            color: "#4d4d4d"
+        }
+
+        Item {
+            id: graphContent
+            anchors.fill: parent
+            clip: true
+        }
+    }
+
+}
diff --git a/sysui/dev/RamMonitor.qml b/sysui/dev/RamMonitor.qml
new file mode 100644
index 0000000..0ba13d2
--- /dev/null
+++ b/sysui/dev/RamMonitor.qml
@@ -0,0 +1,64 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite 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$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+
+import QtQuick 2.1
+import QtApplicationManager 1.0
+
+
+MonitorPanel {
+    id: root
+
+    descriptionText: "RAM: "
+    middleText: "50%"
+    middleLine: 0.5
+
+    ListView {
+        id: graph
+        anchors.fill: parent
+
+        model: SystemMonitor
+        orientation: ListView.Horizontal
+        interactive: false
+
+        delegate: Item {
+            width: graph.width / graph.model.count
+            height: graph.height
+
+            Rectangle {
+                width: parent.width
+                height: 3
+                y: parent.height - (model.memoryUsed/model.memoryTotal)*parent.height
+            }
+        }
+    }
+}
+
+
diff --git a/sysui/Cloud/Settings/SystemMonitor/AppPanel.qml b/sysui/dev/SystemMonitor/AppPanel.qml
index 1c219e0..66882cc 100644
--- a/sysui/Cloud/Settings/SystemMonitor/AppPanel.qml
+++ b/sysui/dev/SystemMonitor/AppPanel.qml
@@ -138,7 +138,7 @@ UIPage {
                     anchors.top: processGraph.top
 
                     anchors.right: processGraph.right
-                    text: applicationId + " VSize: " + processGraph.memoryUsed + "KB, " + processGraph.memoryUsagePercentage + "%\nPSS: " + processGraph.pssMemoryUsed + "KB"
+                    text: applicationId + " VSize: " + processGraph.memoryUsed + "MB, " + processGraph.memoryUsagePercentage + "%\nPSS: " + processGraph.pssMemoryUsed + "MB"
                     font.pixelSize: Style.fontSizeXXS
                 }
 
@@ -148,8 +148,8 @@ UIPage {
                         var vmSizeBytes = processMonitor.memoryMonitor.get(modelIndex).vmSize
                         var pssSizeBytes = processMonitor.memoryMonitor.get(modelIndex).pss
                         processGraph.memoryUsagePercentage = (vmSizeBytes/SystemMonitor.totalMemory * 100).toFixed(1)
-                        processGraph.memoryUsed = (vmSizeBytes/1024).toFixed(1)
-                        processGraph.pssMemoryUsed = (pssSizeBytes/1024).toFixed(1)
+                        processGraph.memoryUsed = (vmSizeBytes/1024/1024).toFixed(1)
+                        processGraph.pssMemoryUsed = (pssSizeBytes/1024/1024).toFixed(1)
                     }
                 }
             }
diff --git a/sysui/Cloud/Settings/SystemMonitor/CPUGraph.qml b/sysui/dev/SystemMonitor/CPUGraph.qml
index 5924e8a..499e1ef 100644
--- a/sysui/Cloud/Settings/SystemMonitor/CPUGraph.qml
+++ b/sysui/dev/SystemMonitor/CPUGraph.qml
@@ -39,6 +39,8 @@ Item {
     width: 400
     height: 200
 
+    property color barColor: "white"
+    property bool scaleVisible: true
 
     Item {
         id: cpuScaleContainer
@@ -46,6 +48,8 @@ Item {
         width: 5
         height: parent.height
 
+        visible: cpuContainer.scaleVisible
+
         Rectangle {
             id: cpuScale
             width: 2
@@ -103,7 +107,7 @@ Item {
                     width: parent.width
                     height: model.cpuLoad * parent.height
                     anchors.bottom: parent.bottom
-                    color: "white"
+                    color: cpuContainer.barColor
 
                 }
             }
diff --git a/sysui/Cloud/Settings/SystemMonitor/InfoPanel.qml b/sysui/dev/SystemMonitor/InfoPanel.qml
index bc3d999..bc3d999 100644
--- a/sysui/Cloud/Settings/SystemMonitor/InfoPanel.qml
+++ b/sysui/dev/SystemMonitor/InfoPanel.qml
diff --git a/sysui/Cloud/Settings/SystemMonitor/MainScreen.qml b/sysui/dev/SystemMonitor/MainScreen.qml
index b4b80ab..b9bf6f5 100644
--- a/sysui/Cloud/Settings/SystemMonitor/MainScreen.qml
+++ b/sysui/dev/SystemMonitor/MainScreen.qml
@@ -42,7 +42,12 @@ UIScreen {
 
     Component.onCompleted: checkReporting()
 
-    onBackScreen: ApplicationManagerInterface.releaseApplicationSurface(root)
+    onBackScreen: {
+        SystemMonitor.cpuLoadReportingEnabled = false
+        SystemMonitor.fpsReportingEnabled = false
+        SystemMonitor.memoryReportingEnabled = false
+        ApplicationManagerInterface.releaseApplicationSurface(root)
+    }
 
     function checkReporting() {
         SystemMonitor.reportingInterval = root.timeInterval
diff --git a/sysui/Cloud/Settings/SystemMonitor/MemoryGraph.qml b/sysui/dev/SystemMonitor/MemoryGraph.qml
index b23e6b1..200852b 100644
--- a/sysui/Cloud/Settings/SystemMonitor/MemoryGraph.qml
+++ b/sysui/dev/SystemMonitor/MemoryGraph.qml
@@ -40,12 +40,17 @@ Item {
     width: 300
     height: 150
 
+    property color barColor: Style.colorGrey
+    property bool scaleVisible: true
+
     Item {
         id: ramScaleContainer
         anchors.bottom: parent.bottom
         width: 5
         height: parent.height
 
+        visible: graphContainer.scaleVisible
+
         Rectangle {
             id: ramScale
             width: 2
@@ -99,7 +104,7 @@ Item {
                 width: parent.width
                 height: (model.memoryUsed/model.memoryTotal)*parent.height
                 anchors.bottom: parent.bottom
-                color: Style.colorGrey
+                color: graphContainer.barColor
             }
         }
     }
diff --git a/sysui/Cloud/Settings/SystemMonitor/SystemPanel.qml b/sysui/dev/SystemMonitor/SystemPanel.qml
index 8165ca3..8165ca3 100644
--- a/sysui/Cloud/Settings/SystemMonitor/SystemPanel.qml
+++ b/sysui/dev/SystemMonitor/SystemPanel.qml
diff --git a/sysui/dev/ToolBarMonitor.qml b/sysui/dev/ToolBarMonitor.qml
new file mode 100644
index 0000000..efd9009
--- /dev/null
+++ b/sysui/dev/ToolBarMonitor.qml
@@ -0,0 +1,100 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 Pelagicore AG
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Neptune IVI UI.
+**
+** $QT_BEGIN_LICENSE:GPL-QTAS$
+** Commercial License Usage
+** Licensees holding valid commercial Qt Automotive Suite 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$
+**
+** SPDX-License-Identifier: GPL-3.0
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import controls 1.0
+import utils 1.0
+import QtApplicationManager 1.0
+import "SystemMonitor"
+
+Rectangle {
+    id: root
+
+    anchors.fill: parent
+    clip: true
+    color: "#273033"
+    opacity: 0.95
+
+    property int currentFps: 0
+    property int ram: 0
+    property real ramUsed: 0
+    property int cpu: 0
+
+    onVisibleChanged: initialize()
+
+    Component.onCompleted: initialize()
+
+    function initialize() {
+        SystemMonitor.reportingInterval = 200
+        SystemMonitor.reportingRange = 2000
+        SystemMonitor.fpsReportingEnabled = root.visible
+        SystemMonitor.cpuLoadReportingEnabled = root.visible
+        SystemMonitor.memoryReportingEnabled = root.visible
+    }
+
+    Connections {
+        target: SystemMonitor
+        onFpsReportingChanged: root.currentFps = Math.floor(average)
+        onCpuLoadReportingChanged: root.cpu = (load * 100).toFixed(0)
+
+        onMemoryReportingChanged: {
+            root.ramUsed = (used/1000/1000).toFixed(1)
+            root.ram = (used/total * 100).toFixed(0)
+        }
+    }
+
+    Row {
+        FpsMonitor {
+            valueText: root.currentFps
+        }
+
+        Rectangle {
+            width: 2
+            height: root.height
+            color: "#4d4d4d"
+        }
+
+        CpuMonitor {
+            valueText: root.cpu + "%"
+        }
+
+        Rectangle {
+            width: 2
+            height: root.height
+            color: "#4d4d4d"
+        }
+
+        RamMonitor {
+            valueText: root.ram + "% " + root.ramUsed + "MB"
+        }
+    }
+
+}