Moved multiple components to their own files

CL-541

resources/qml/PrintMonitor.qml

@@ -95,365 +95,38 @@ Column
         watchedProperties: ["value"]
     }
 
-    Column
+    ManualPrinterControl
     {
-        visible: connectedPrinter != null ? connectedPrinter.canControlManually : false
-        enabled:
-        {
-            if (connectedPrinter == null || activePrintJob == null)
-            {
-                return false; //Can't control the printer if not connected or if there is no print job.
-            }
-            if (!connectedPrinter.acceptsCommands)
-            {
-                return false; //Not allowed to do anything.
-            }
-            if (activePrintJob.state == "printing" || activePrintJob.state == "resuming" || activePrintJob.state == "pausing" || activePrintJob.state == "error" || activePrintJob.state == "offline")
-            {
-                return false; //Printer is in a state where it can't react to manual control
-            }
-            return true;
-        }
-
-        Loader
-        {
-            sourceComponent: monitorSection
-            property string label: catalog.i18nc("@label", "Printer control")
-        }
-
-        Row
-        {
-            width: base.width - 2 * UM.Theme.getSize("default_margin").width
-            height: childrenRect.height + UM.Theme.getSize("default_margin").width
-            anchors.left: parent.left
-            anchors.leftMargin: UM.Theme.getSize("default_margin").width
-
-            spacing: UM.Theme.getSize("default_margin").width
-
-            Label
-            {
-                text: catalog.i18nc("@label", "Jog Position")
-                color: UM.Theme.getColor("setting_control_text")
-                font: UM.Theme.getFont("default")
-
-                width: Math.floor(parent.width * 0.4) - UM.Theme.getSize("default_margin").width
-                height: UM.Theme.getSize("setting_control").height
-                verticalAlignment: Text.AlignVCenter
-            }
-
-            GridLayout
-            {
-                columns: 3
-                rows: 4
-                rowSpacing: UM.Theme.getSize("default_lining").width
-                columnSpacing: UM.Theme.getSize("default_lining").height
-
-                Label
-                {
-                    text: catalog.i18nc("@label", "X/Y")
-                    color: UM.Theme.getColor("setting_control_text")
-                    font: UM.Theme.getFont("default")
-                    width: height
-                    height: UM.Theme.getSize("setting_control").height
-                    verticalAlignment: Text.AlignVCenter
-                    horizontalAlignment: Text.AlignHCenter
-
-                    Layout.row: 1
-                    Layout.column: 2
-                    Layout.preferredWidth: width
-                    Layout.preferredHeight: height
-                }
-
-                Button
-                {
-                    Layout.row: 2
-                    Layout.column: 2
-                    Layout.preferredWidth: width
-                    Layout.preferredHeight: height
-                    iconSource: UM.Theme.getIcon("arrow_top");
-                    style: monitorButtonStyle
-                    width: height
-                    height: UM.Theme.getSize("setting_control").height
-
-                    onClicked:
-                    {
-                        connectedPrinter.moveHead(0, distancesRow.currentDistance, 0)
-                    }
-                }
-
-                Button
-                {
-                    Layout.row: 3
-                    Layout.column: 1
-                    Layout.preferredWidth: width
-                    Layout.preferredHeight: height
-                    iconSource: UM.Theme.getIcon("arrow_left");
-                    style: monitorButtonStyle
-                    width: height
-                    height: UM.Theme.getSize("setting_control").height
-
-                    onClicked:
-                    {
-                        connectedPrinter.moveHead(-distancesRow.currentDistance, 0, 0)
-                    }
-                }
-
-                Button
-                {
-                    Layout.row: 3
-                    Layout.column: 3
-                    Layout.preferredWidth: width
-                    Layout.preferredHeight: height
-                    iconSource: UM.Theme.getIcon("arrow_right");
-                    style: monitorButtonStyle
-                    width: height
-                    height: UM.Theme.getSize("setting_control").height
-
-                    onClicked:
-                    {
-                        connectedPrinter.moveHead(distancesRow.currentDistance, 0, 0)
-                    }
-                }
-
-                Button
-                {
-                    Layout.row: 4
-                    Layout.column: 2
-                    Layout.preferredWidth: width
-                    Layout.preferredHeight: height
-                    iconSource: UM.Theme.getIcon("arrow_bottom");
-                    style: monitorButtonStyle
-                    width: height
-                    height: UM.Theme.getSize("setting_control").height
-
-                    onClicked:
-                    {
-                        connectedPrinter.moveHead(0, -distancesRow.currentDistance, 0)
-                    }
-                }
-
-                Button
-                {
-                    Layout.row: 3
-                    Layout.column: 2
-                    Layout.preferredWidth: width
-                    Layout.preferredHeight: height
-                    iconSource: UM.Theme.getIcon("home");
-                    style: monitorButtonStyle
-                    width: height
-                    height: UM.Theme.getSize("setting_control").height
-
-                    onClicked:
-                    {
-                        connectedPrinter.homeHead()
-                    }
-                }
-            }
-
-
-            Column
-            {
-                spacing: UM.Theme.getSize("default_lining").height
-
-                Label
-                {
-                    text: catalog.i18nc("@label", "Z")
-                    color: UM.Theme.getColor("setting_control_text")
-                    font: UM.Theme.getFont("default")
-                    width: UM.Theme.getSize("section").height
-                    height: UM.Theme.getSize("setting_control").height
-                    verticalAlignment: Text.AlignVCenter
-                    horizontalAlignment: Text.AlignHCenter
-                }
-
-                Button
-                {
-                    iconSource: UM.Theme.getIcon("arrow_top");
-                    style: monitorButtonStyle
-                    width: height
-                    height: UM.Theme.getSize("setting_control").height
-
-                    onClicked:
-                    {
-                        connectedPrinter.moveHead(0, 0, distancesRow.currentDistance)
-                    }
-                }
-
-                Button
-                {
-                    iconSource: UM.Theme.getIcon("home");
-                    style: monitorButtonStyle
-                    width: height
-                    height: UM.Theme.getSize("setting_control").height
-
-                    onClicked:
-                    {
-                        connectedPrinter.homeBed()
-                    }
-                }
-
-                Button
-                {
-                    iconSource: UM.Theme.getIcon("arrow_bottom");
-                    style: monitorButtonStyle
-                    width: height
-                    height: UM.Theme.getSize("setting_control").height
-
-                    onClicked:
-                    {
-                        connectedPrinter.moveHead(0, 0, -distancesRow.currentDistance)
-                    }
-                }
-            }
-        }
-
-        Row
-        {
-            id: distancesRow
-
-            width: base.width - 2 * UM.Theme.getSize("default_margin").width
-            height: childrenRect.height + UM.Theme.getSize("default_margin").width
-            anchors.left: parent.left
-            anchors.leftMargin: UM.Theme.getSize("default_margin").width
-
-            spacing: UM.Theme.getSize("default_margin").width
-
-            property real currentDistance: 10
-
-            Label
-            {
-                text: catalog.i18nc("@label", "Jog Distance")
-                color: UM.Theme.getColor("setting_control_text")
-                font: UM.Theme.getFont("default")
-
-                width: Math.floor(parent.width * 0.4) - UM.Theme.getSize("default_margin").width
-                height: UM.Theme.getSize("setting_control").height
-                verticalAlignment: Text.AlignVCenter
-            }
-
-            Row
-            {
-                Repeater
-                {
-                    model: distancesModel
-                    delegate: Button
-                    {
-                        height: UM.Theme.getSize("setting_control").height
-                        width: height + UM.Theme.getSize("default_margin").width
-
-                        text: model.label
-                        exclusiveGroup: distanceGroup
-                        checkable: true
-                        checked: distancesRow.currentDistance == model.value
-                        onClicked: distancesRow.currentDistance = model.value
-
-                        style: ButtonStyle {
-                            background: Rectangle {
-                                border.width: control.checked ? UM.Theme.getSize("default_lining").width * 2 : UM.Theme.getSize("default_lining").width
-                                border.color:
-                                {
-                                    if(!control.enabled)
-                                    {
-                                        return UM.Theme.getColor("action_button_disabled_border");
-                                    }
-                                    else if (control.checked || control.pressed)
-                                    {
-                                        return UM.Theme.getColor("action_button_active_border");
-                                    }
-                                    else if(control.hovered)
-                                    {
-                                        return UM.Theme.getColor("action_button_hovered_border");
-                                    }
-                                    return UM.Theme.getColor("action_button_border");
-                                }
-                                color:
-                                {
-                                    if(!control.enabled)
-                                    {
-                                        return UM.Theme.getColor("action_button_disabled");
-                                    }
-                                    else if (control.checked || control.pressed)
-                                    {
-                                        return UM.Theme.getColor("action_button_active");
-                                    }
-                                    else if (control.hovered)
-                                    {
-                                        return UM.Theme.getColor("action_button_hovered");
-                                    }
-                                    return UM.Theme.getColor("action_button");
-                                }
-                                Behavior on color { ColorAnimation { duration: 50; } }
-                                Label {
-                                    anchors.left: parent.left
-                                    anchors.right: parent.right
-                                    anchors.verticalCenter: parent.verticalCenter
-                                    anchors.leftMargin: UM.Theme.getSize("default_lining").width * 2
-                                    anchors.rightMargin: UM.Theme.getSize("default_lining").width * 2
-                                    color:
-                                    {
-                                        if(!control.enabled)
-                                        {
-                                            return UM.Theme.getColor("action_button_disabled_text");
-                                        }
-                                        else if (control.checked || control.pressed)
-                                        {
-                                            return UM.Theme.getColor("action_button_active_text");
-                                        }
-                                        else if (control.hovered)
-                                        {
-                                            return UM.Theme.getColor("action_button_hovered_text");
-                                        }
-                                        return UM.Theme.getColor("action_button_text");
-                                    }
-                                    font: UM.Theme.getFont("default")
-                                    text: control.text
-                                    horizontalAlignment: Text.AlignHCenter
-                                    elide: Text.ElideMiddle
-                                }
-                            }
-                            label: Item { }
-                        }
-                    }
-                }
-            }
-        }
-
-        ListModel
-        {
-            id: distancesModel
-            ListElement { label: "0.1"; value: 0.1 }
-            ListElement { label: "1";   value: 1   }
-            ListElement { label: "10";  value: 10  }
-            ListElement { label: "100"; value: 100 }
-        }
-        ExclusiveGroup { id: distanceGroup }
+        printerModel: activePrinter
+        visible: activePrinter != null ? activePrinter.canControlManually : false
     }
 
 
-    Loader
+    MonitorSection
     {
-        sourceComponent: monitorSection
-        property string label: catalog.i18nc("@label", "Active print")
+        label: catalog.i18nc("@label", "Active print")
+        width: base.width
     }
-    Loader
+
+
+    MonitorItem
     {
-        sourceComponent: monitorItem
-        property string label: catalog.i18nc("@label", "Job Name")
-        property string value: activePrintJob != null ? activePrintJob.name : ""
+        label: catalog.i18nc("@label", "Job Name")
+        value: activePrintJob != null ? activePrintJob.name : ""
+        width: base.width
     }
 
-    Loader
+    MonitorItem
     {
-        sourceComponent: monitorItem
-        property string label: catalog.i18nc("@label", "Printing Time")
-        property string value: activePrintJob != null ? getPrettyTime(activePrintJob.timeTotal) : ""
+        label: catalog.i18nc("@label", "Printing Time")
+        value: activePrintJob != null ? getPrettyTime(activePrintJob.timeTotal) : ""
+        width:base.width
     }
 
-    Loader
+    MonitorItem
     {
-        sourceComponent: monitorItem
-        property string label: catalog.i18nc("@label", "Estimated time left")
-        property string value: activePrintJob != null ? getPrettyTime(activePrintJob.timeTotal - activePrintJob.timeElapsed) : ""
+        label: catalog.i18nc("@label", "Estimated time left")
+        value: activePrintJob != null ? getPrettyTime(activePrintJob.timeTotal - activePrintJob.timeElapsed) : ""
         visible:
         {
             if(activePrintJob == null)
@@ -466,141 +139,6 @@ Column
                     activePrintJob.state == "pausing" ||
                     activePrintJob.state == "paused")
         }
-    }
-
-    Component
-    {
-        id: monitorItem
-
-        Row
-        {
-            height: UM.Theme.getSize("setting_control").height
-            width: Math.floor(base.width - 2 * UM.Theme.getSize("default_margin").width)
-            anchors.left: parent.left
-            anchors.leftMargin: UM.Theme.getSize("default_margin").width
-
-            Label
-            {
-                width: Math.floor(parent.width * 0.4)
-                anchors.verticalCenter: parent.verticalCenter
-                text: label
-                color: connectedPrinter != null && connectedPrinter.acceptsCommands ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
-                font: UM.Theme.getFont("default")
-                elide: Text.ElideRight
-            }
-            Label
-            {
-                width: Math.floor(parent.width * 0.6)
-                anchors.verticalCenter: parent.verticalCenter
-                text: value
-                color: connectedPrinter != null && connectedPrinter.acceptsCommands ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
-                font: UM.Theme.getFont("default")
-                elide: Text.ElideRight
-            }
-        }
-    }
-
-    Component
-    {
-        id: monitorSection
-
-        Rectangle
-        {
-            color: UM.Theme.getColor("setting_category")
-            width: base.width
-            height: UM.Theme.getSize("section").height
-
-            Label
-            {
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.left: parent.left
-                anchors.leftMargin: UM.Theme.getSize("default_margin").width
-                text: label
-                font: UM.Theme.getFont("setting_category")
-                color: UM.Theme.getColor("setting_category_text")
-            }
-        }
-    }
-
-    Component
-    {
-        id: monitorButtonStyle
-
-        ButtonStyle
-        {
-            background: Rectangle
-            {
-                border.width: UM.Theme.getSize("default_lining").width
-                border.color:
-                {
-                    if(!control.enabled)
-                    {
-                        return UM.Theme.getColor("action_button_disabled_border");
-                    }
-                    else if(control.pressed)
-                    {
-                        return UM.Theme.getColor("action_button_active_border");
-                    }
-                    else if(control.hovered)
-                    {
-                        return UM.Theme.getColor("action_button_hovered_border");
-                    }
-                    return UM.Theme.getColor("action_button_border");
-                }
-                color:
-                {
-                    if(!control.enabled)
-                    {
-                        return UM.Theme.getColor("action_button_disabled");
-                    }
-                    else if(control.pressed)
-                    {
-                        return UM.Theme.getColor("action_button_active");
-                    }
-                    else if(control.hovered)
-                    {
-                        return UM.Theme.getColor("action_button_hovered");
-                    }
-                    return UM.Theme.getColor("action_button");
-                }
-                Behavior on color
-                {
-                    ColorAnimation
-                    {
-                        duration: 50
-                    }
-                }
-            }
-
-            label: Item
-            {
-                UM.RecolorImage
-                {
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    width: Math.floor(control.width / 2)
-                    height: Math.floor(control.height / 2)
-                    sourceSize.width: width
-                    sourceSize.height: width
-                    color:
-                    {
-                        if(!control.enabled)
-                        {
-                            return UM.Theme.getColor("action_button_disabled_text");
-                        }
-                        else if(control.pressed)
-                        {
-                            return UM.Theme.getColor("action_button_active_text");
-                        }
-                        else if(control.hovered)
-                        {
-                            return UM.Theme.getColor("action_button_hovered_text");
-                        }
-                        return UM.Theme.getColor("action_button_text");
-                    }
-                    source: control.iconSource
-                }
-            }
-        }
+        width: base.width
     }
 }

resources/qml/PrinterOutput/HeatedBedBox.qml

@@ -234,7 +234,7 @@ Item
                     return // Nothing to do, printer cant preheat at all!
                 }
                 preheatCountdown.text = ""
-                if (printerModel != null)
+                if (printerModel != null && connectedPrinter.preheatBedRemainingTime != null)
                 {
                     preheatCountdown.text = connectedPrinter.preheatBedRemainingTime;
                 }

resources/qml/PrinterOutput/ManualPrinterControl.qml

@@ -0,0 +1,442 @@
+// Copyright (c) 2017 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+import QtQuick.Controls.Styles 1.1
+import QtQuick.Layouts 1.1
+
+import UM 1.2 as UM
+import Cura 1.0 as Cura
+
+
+Item
+{
+    property var printerModel
+    property var activePrintJob: printerModel != null ? printerModel.activePrintJob : null
+    implicitWidth: parent.width
+    implicitHeight: childrenRect.height
+
+    Component
+    {
+        id: monitorButtonStyle
+
+        ButtonStyle
+        {
+            background: Rectangle
+            {
+                border.width: UM.Theme.getSize("default_lining").width
+                border.color:
+                {
+                    if(!control.enabled)
+                    {
+                        return UM.Theme.getColor("action_button_disabled_border");
+                    }
+                    else if(control.pressed)
+                    {
+                        return UM.Theme.getColor("action_button_active_border");
+                    }
+                    else if(control.hovered)
+                    {
+                        return UM.Theme.getColor("action_button_hovered_border");
+                    }
+                    return UM.Theme.getColor("action_button_border");
+                }
+                color:
+                {
+                    if(!control.enabled)
+                    {
+                        return UM.Theme.getColor("action_button_disabled");
+                    }
+                    else if(control.pressed)
+                    {
+                        return UM.Theme.getColor("action_button_active");
+                    }
+                    else if(control.hovered)
+                    {
+                        return UM.Theme.getColor("action_button_hovered");
+                    }
+                    return UM.Theme.getColor("action_button");
+                }
+                Behavior on color
+                {
+                    ColorAnimation
+                    {
+                        duration: 50
+                    }
+                }
+            }
+
+            label: Item
+            {
+                UM.RecolorImage
+                {
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    width: Math.floor(control.width / 2)
+                    height: Math.floor(control.height / 2)
+                    sourceSize.width: width
+                    sourceSize.height: width
+                    color:
+                    {
+                        if(!control.enabled)
+                        {
+                            return UM.Theme.getColor("action_button_disabled_text");
+                        }
+                        else if(control.pressed)
+                        {
+                            return UM.Theme.getColor("action_button_active_text");
+                        }
+                        else if(control.hovered)
+                        {
+                            return UM.Theme.getColor("action_button_hovered_text");
+                        }
+                        return UM.Theme.getColor("action_button_text");
+                    }
+                    source: control.iconSource
+                }
+            }
+        }
+    }
+
+    Column
+    {
+        enabled:
+        {
+            if (printerModel == null)
+            {
+                return false; //Can't control the printer if not connected
+            }
+
+            if (!connectedPrinter.acceptsCommands)
+            {
+                return false; //Not allowed to do anything.
+            }
+
+            if(activePrintJob == null)
+            {
+                return true
+            }
+
+            if (activePrintJob.state == "printing" || activePrintJob.state == "resuming" || activePrintJob.state == "pausing" || activePrintJob.state == "error" || activePrintJob.state == "offline")
+            {
+                return false; //Printer is in a state where it can't react to manual control
+            }
+            return true;
+        }
+
+
+        MonitorSection
+        {
+            label: catalog.i18nc("@label", "Printer control")
+            width: base.width
+        }
+
+        Row
+        {
+            width: base.width - 2 * UM.Theme.getSize("default_margin").width
+            height: childrenRect.height + UM.Theme.getSize("default_margin").width
+            anchors.left: parent.left
+            anchors.leftMargin: UM.Theme.getSize("default_margin").width
+
+            spacing: UM.Theme.getSize("default_margin").width
+
+            Label
+            {
+                text: catalog.i18nc("@label", "Jog Position")
+                color: UM.Theme.getColor("setting_control_text")
+                font: UM.Theme.getFont("default")
+
+                width: Math.floor(parent.width * 0.4) - UM.Theme.getSize("default_margin").width
+                height: UM.Theme.getSize("setting_control").height
+                verticalAlignment: Text.AlignVCenter
+            }
+
+            GridLayout
+            {
+                columns: 3
+                rows: 4
+                rowSpacing: UM.Theme.getSize("default_lining").width
+                columnSpacing: UM.Theme.getSize("default_lining").height
+
+                Label
+                {
+                    text: catalog.i18nc("@label", "X/Y")
+                    color: UM.Theme.getColor("setting_control_text")
+                    font: UM.Theme.getFont("default")
+                    width: height
+                    height: UM.Theme.getSize("setting_control").height
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignHCenter
+
+                    Layout.row: 1
+                    Layout.column: 2
+                    Layout.preferredWidth: width
+                    Layout.preferredHeight: height
+                }
+
+                Button
+                {
+                    Layout.row: 2
+                    Layout.column: 2
+                    Layout.preferredWidth: width
+                    Layout.preferredHeight: height
+                    iconSource: UM.Theme.getIcon("arrow_top");
+                    style: monitorButtonStyle
+                    width: height
+                    height: UM.Theme.getSize("setting_control").height
+
+                    onClicked:
+                    {
+                        connectedPrinter.moveHead(0, distancesRow.currentDistance, 0)
+                    }
+                }
+
+                Button
+                {
+                    Layout.row: 3
+                    Layout.column: 1
+                    Layout.preferredWidth: width
+                    Layout.preferredHeight: height
+                    iconSource: UM.Theme.getIcon("arrow_left");
+                    style: monitorButtonStyle
+                    width: height
+                    height: UM.Theme.getSize("setting_control").height
+
+                    onClicked:
+                    {
+                        connectedPrinter.moveHead(-distancesRow.currentDistance, 0, 0)
+                    }
+                }
+
+                Button
+                {
+                    Layout.row: 3
+                    Layout.column: 3
+                    Layout.preferredWidth: width
+                    Layout.preferredHeight: height
+                    iconSource: UM.Theme.getIcon("arrow_right");
+                    style: monitorButtonStyle
+                    width: height
+                    height: UM.Theme.getSize("setting_control").height
+
+                    onClicked:
+                    {
+                        connectedPrinter.moveHead(distancesRow.currentDistance, 0, 0)
+                    }
+                }
+
+                Button
+                {
+                    Layout.row: 4
+                    Layout.column: 2
+                    Layout.preferredWidth: width
+                    Layout.preferredHeight: height
+                    iconSource: UM.Theme.getIcon("arrow_bottom");
+                    style: monitorButtonStyle
+                    width: height
+                    height: UM.Theme.getSize("setting_control").height
+
+                    onClicked:
+                    {
+                        connectedPrinter.moveHead(0, -distancesRow.currentDistance, 0)
+                    }
+                }
+
+                Button
+                {
+                    Layout.row: 3
+                    Layout.column: 2
+                    Layout.preferredWidth: width
+                    Layout.preferredHeight: height
+                    iconSource: UM.Theme.getIcon("home");
+                    style: monitorButtonStyle
+                    width: height
+                    height: UM.Theme.getSize("setting_control").height
+
+                    onClicked:
+                    {
+                        connectedPrinter.homeHead()
+                    }
+                }
+            }
+
+
+            Column
+            {
+                spacing: UM.Theme.getSize("default_lining").height
+
+                Label
+                {
+                    text: catalog.i18nc("@label", "Z")
+                    color: UM.Theme.getColor("setting_control_text")
+                    font: UM.Theme.getFont("default")
+                    width: UM.Theme.getSize("section").height
+                    height: UM.Theme.getSize("setting_control").height
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignHCenter
+                }
+
+                Button
+                {
+                    iconSource: UM.Theme.getIcon("arrow_top");
+                    style: monitorButtonStyle
+                    width: height
+                    height: UM.Theme.getSize("setting_control").height
+
+                    onClicked:
+                    {
+                        connectedPrinter.moveHead(0, 0, distancesRow.currentDistance)
+                    }
+                }
+
+                Button
+                {
+                    iconSource: UM.Theme.getIcon("home");
+                    style: monitorButtonStyle
+                    width: height
+                    height: UM.Theme.getSize("setting_control").height
+
+                    onClicked:
+                    {
+                        connectedPrinter.homeBed()
+                    }
+                }
+
+                Button
+                {
+                    iconSource: UM.Theme.getIcon("arrow_bottom");
+                    style: monitorButtonStyle
+                    width: height
+                    height: UM.Theme.getSize("setting_control").height
+
+                    onClicked:
+                    {
+                        connectedPrinter.moveHead(0, 0, -distancesRow.currentDistance)
+                    }
+                }
+            }
+        }
+
+        Row
+        {
+            id: distancesRow
+
+            width: base.width - 2 * UM.Theme.getSize("default_margin").width
+            height: childrenRect.height + UM.Theme.getSize("default_margin").width
+            anchors.left: parent.left
+            anchors.leftMargin: UM.Theme.getSize("default_margin").width
+
+            spacing: UM.Theme.getSize("default_margin").width
+
+            property real currentDistance: 10
+
+            Label
+            {
+                text: catalog.i18nc("@label", "Jog Distance")
+                color: UM.Theme.getColor("setting_control_text")
+                font: UM.Theme.getFont("default")
+
+                width: Math.floor(parent.width * 0.4) - UM.Theme.getSize("default_margin").width
+                height: UM.Theme.getSize("setting_control").height
+                verticalAlignment: Text.AlignVCenter
+            }
+
+            Row
+            {
+                Repeater
+                {
+                    model: distancesModel
+                    delegate: Button
+                    {
+                        height: UM.Theme.getSize("setting_control").height
+                        width: height + UM.Theme.getSize("default_margin").width
+
+                        text: model.label
+                        exclusiveGroup: distanceGroup
+                        checkable: true
+                        checked: distancesRow.currentDistance == model.value
+                        onClicked: distancesRow.currentDistance = model.value
+
+                        style: ButtonStyle {
+                            background: Rectangle {
+                                border.width: control.checked ? UM.Theme.getSize("default_lining").width * 2 : UM.Theme.getSize("default_lining").width
+                                border.color:
+                                {
+                                    if(!control.enabled)
+                                    {
+                                        return UM.Theme.getColor("action_button_disabled_border");
+                                    }
+                                    else if (control.checked || control.pressed)
+                                    {
+                                        return UM.Theme.getColor("action_button_active_border");
+                                    }
+                                    else if(control.hovered)
+                                    {
+                                        return UM.Theme.getColor("action_button_hovered_border");
+                                    }
+                                    return UM.Theme.getColor("action_button_border");
+                                }
+                                color:
+                                {
+                                    if(!control.enabled)
+                                    {
+                                        return UM.Theme.getColor("action_button_disabled");
+                                    }
+                                    else if (control.checked || control.pressed)
+                                    {
+                                        return UM.Theme.getColor("action_button_active");
+                                    }
+                                    else if (control.hovered)
+                                    {
+                                        return UM.Theme.getColor("action_button_hovered");
+                                    }
+                                    return UM.Theme.getColor("action_button");
+                                }
+                                Behavior on color { ColorAnimation { duration: 50; } }
+                                Label {
+                                    anchors.left: parent.left
+                                    anchors.right: parent.right
+                                    anchors.verticalCenter: parent.verticalCenter
+                                    anchors.leftMargin: UM.Theme.getSize("default_lining").width * 2
+                                    anchors.rightMargin: UM.Theme.getSize("default_lining").width * 2
+                                    color:
+                                    {
+                                        if(!control.enabled)
+                                        {
+                                            return UM.Theme.getColor("action_button_disabled_text");
+                                        }
+                                        else if (control.checked || control.pressed)
+                                        {
+                                            return UM.Theme.getColor("action_button_active_text");
+                                        }
+                                        else if (control.hovered)
+                                        {
+                                            return UM.Theme.getColor("action_button_hovered_text");
+                                        }
+                                        return UM.Theme.getColor("action_button_text");
+                                    }
+                                    font: UM.Theme.getFont("default")
+                                    text: control.text
+                                    horizontalAlignment: Text.AlignHCenter
+                                    elide: Text.ElideMiddle
+                                }
+                            }
+                            label: Item { }
+                        }
+                    }
+                }
+            }
+        }
+
+        ListModel
+        {
+            id: distancesModel
+            ListElement { label: "0.1"; value: 0.1 }
+            ListElement { label: "1";   value: 1   }
+            ListElement { label: "10";  value: 10  }
+            ListElement { label: "100"; value: 100 }
+        }
+        ExclusiveGroup { id: distanceGroup }
+    }
+}

resources/qml/PrinterOutput/MonitorItem.qml

@@ -0,0 +1,44 @@
+// Copyright (c) 2017 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+import QtQuick.Controls.Styles 1.1
+import QtQuick.Layouts 1.1
+
+import UM 1.2 as UM
+import Cura 1.0 as Cura
+
+Item
+{
+    property string label: ""
+    property string value: ""
+    height: childrenRect.height;
+
+    Row
+    {
+        height: UM.Theme.getSize("setting_control").height
+        width: Math.floor(base.width - 2 * UM.Theme.getSize("default_margin").width)
+        anchors.left: parent.left
+        anchors.leftMargin: UM.Theme.getSize("default_margin").width
+
+        Label
+        {
+            width: Math.floor(parent.width * 0.4)
+            anchors.verticalCenter: parent.verticalCenter
+            text: label
+            color: connectedPrinter != null && connectedPrinter.acceptsCommands ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
+            font: UM.Theme.getFont("default")
+            elide: Text.ElideRight
+        }
+        Label
+        {
+            width: Math.floor(parent.width * 0.6)
+            anchors.verticalCenter: parent.verticalCenter
+            text: value
+            color: connectedPrinter != null && connectedPrinter.acceptsCommands ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
+            font: UM.Theme.getFont("default")
+            elide: Text.ElideRight
+        }
+    }
+}

resources/qml/PrinterOutput/MonitorSection.qml

@@ -0,0 +1,33 @@
+// Copyright (c) 2017 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+import QtQuick.Controls.Styles 1.1
+import QtQuick.Layouts 1.1
+
+import UM 1.2 as UM
+import Cura 1.0 as Cura
+
+Item
+{
+    id: base
+    property string label
+    height: childrenRect.height;
+    Rectangle
+    {
+        color: UM.Theme.getColor("setting_category")
+        width: base.width
+        height: UM.Theme.getSize("section").height
+
+        Label
+        {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: UM.Theme.getSize("default_margin").width
+            text: label
+            font: UM.Theme.getFont("setting_category")
+            color: UM.Theme.getColor("setting_category_text")
+        }
+    }
+}