Added camera image overlay when monitoring print

CURA-1036

resources/qml/Cura.qml

@@ -16,7 +16,7 @@ UM.MainWindow
     //: Cura application window title
     title: catalog.i18nc("@title:window","Cura");
     viewportRect: Qt.rect(0, 0, (base.width - sidebar.width) / base.width, 1.0)
-
+    property bool monitoringPrint: false
     Item
     {
         id: backgroundItem;
@@ -531,12 +531,40 @@ UM.MainWindow
                     bottom: parent.bottom;
                     right: parent.right;
                 }
-
+                onMonitoringPrintChanged: base.monitoringPrint = monitoringPrint
                 width: UM.Theme.getSize("sidebar").width;
             }
+            Rectangle
+            {
+                color: "black"
+                anchors
+                {
+                    top: parent.top
+                    bottom: parent.bottom
+                    left:parent.left
+                    right: sidebar.left
+                }
+                visible: base.monitoringPrint
+                opacity: 0.5
+            }
+
+            Image
+            {
+                id: cameraImage
+                width: 800
+                height: 600
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenterOffset: -(UM.Theme.getSize("sidebar").width/ 2)
+                visible: base.monitoringPrint
+                source: Cura.MachineManager.printerOutputDevices[0].cameraImage
+            }
         }
     }
 
+
+
+
     UM.PreferencesDialog
     {
         id: preferences

resources/qml/Sidebar.qml

@@ -314,7 +314,8 @@ Rectangle
 
     }
 
-    Rectangle {
+    Rectangle
+    {
         id: footerSeparator
         width: parent.width
         height: UM.Theme.getSize("sidebar_lining").height