Add printer configuration components

Contributes to CL-1148

plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml

@@ -0,0 +1,63 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+import QtQuick.Controls 2.0
+import UM 1.3 as UM
+
+/**
+ * This component comprises a buildplate icon and the buildplate name. It is
+ * used by the MonitorPrinterConfiguration component along with two instances
+ * of MonitorExtruderConfiguration.
+ *
+ * NOTE: For most labels, a fixed height with vertical alignment is used to make
+ * layouts more deterministic (like the fixed-size textboxes used in original
+ * mock-ups). This is also a stand-in for CSS's 'line-height' property. Denoted
+ * with '// FIXED-LINE-HEIGHT:'.
+ */
+Item
+{
+    // The buildplate name
+    property alias buildplate: buildplateLabel.text
+
+    // Height is one 18px label/icon
+    height: 18 * screenScaleFactor // TODO: Theme!
+    width: childrenRect.width
+
+    Row
+    {
+        height: parent.height
+        spacing: 12 * screenScaleFactor // TODO: Theme! (Should be same as extruder spacing)
+
+        // This wrapper ensures that the buildplate icon is located centered
+        // below an extruder icon.
+        Item
+        {
+            height: parent.height
+            width: 32 * screenScaleFactor // TODO: Theme! (Should be same as extruder icon width)
+
+            UM.RecolorImage
+            {
+                id: buildplateIcon
+                anchors.centerIn: parent
+                color: "#0a0850" // TODO: Theme! (Standard purple)
+                elide: Text.ElideRight
+                height: parent.height
+                source: "../svg/icons/buildplate.svg"
+                width: height
+            }
+        }
+        
+        Label
+        {
+            id: buildplateLabel
+            color: "#191919" // TODO: Theme!
+            font: UM.Theme.getFont("very_small") // 12pt, regular
+            text: ""
+
+            // FIXED-LINE-HEIGHT:
+            height: 18 * screenScaleFactor // TODO: Theme!
+            verticalAlignment: Text.AlignVCenter
+        }
+    }
+}

plugins/UM3NetworkPrinting/resources/qml/MonitorExtruderConfiguration.qml

@@ -0,0 +1,76 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+import QtQuick.Controls 2.0
+import UM 1.3 as UM
+
+/**
+ * This component comprises a colored extruder icon, the material name, and the
+ * print core name. It is used by the MonitorPrinterConfiguration component with
+ * a sibling instance as well as a MonitorBuildplateConfiguration instance.
+ *
+ * NOTE: For most labels, a fixed height with vertical alignment is used to make
+ * layouts more deterministic (like the fixed-size textboxes used in original
+ * mock-ups). This is also a stand-in for CSS's 'line-height' property. Denoted
+ * with '// FIXED-LINE-HEIGHT:'.
+ */
+Item
+{
+    // The material color
+    property alias color: extruderIcon.color
+
+    // The extruder position; NOTE: Decent human beings count from 0
+    property alias position: extruderIcon.position
+
+    // The material name
+    property alias material: materialLabel.text
+
+    // The print core name (referred to as hotendID in Python)
+    property alias printCore: printCoreLabel.text
+
+    // Height is 2 x 18px labels, plus 4px spacing between them
+    height: 40 * screenScaleFactor // TODO: Theme!
+    width: childrenRect.width
+
+    MonitorIconExtruder
+    {
+        id: extruderIcon
+        color: "#eeeeee" // TODO: Theme!
+        position: 0
+    }
+    Label
+    {
+        id: materialLabel
+        anchors
+        {
+            left: extruderIcon.right
+            leftMargin: 12 * screenScaleFactor // TODO: Theme!
+        }
+        color: "#191919" // TODO: Theme!
+        elide: Text.ElideRight
+        font: UM.Theme.getFont("very_small") // 12pt, regular
+        text: ""
+
+        // FIXED-LINE-HEIGHT:
+        height: 18 * screenScaleFactor // TODO: Theme!
+        verticalAlignment: Text.AlignVCenter
+    }
+    Label
+    {
+        id: printCoreLabel
+        anchors
+        {
+            left: materialLabel.left
+            bottom: parent.bottom
+        }
+        color: "#191919" // TODO: Theme!
+        elide: Text.ElideRight
+        font: UM.Theme.getFont("small") // 12pt, bold
+        text: ""
+
+        // FIXED-LINE-HEIGHT:
+        height: 18 * screenScaleFactor // TODO: Theme!
+        verticalAlignment: Text.AlignVCenter
+    }
+}

plugins/UM3NetworkPrinting/resources/qml/MonitorIconExtruder.qml

@@ -0,0 +1,60 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+import QtQuick.Controls 2.0
+import UM 1.3 as UM
+
+/**
+ * This component is a sort of "super icon" which includes a colored SVG image
+ * as well as the extruder position number. It is used in the the
+ * MonitorExtruderConfiguration component.
+ */
+Item
+{
+    // The material color
+    property alias color: icon.color
+
+    // The extruder position; NOTE: Decent human beings count from 0
+    property int position: 0
+
+    // The extruder icon size; NOTE: This shouldn't need to be changed
+    property int size: 32 // TODO: Theme!
+
+    // THe extruder icon source; NOTE: This shouldn't need to be changed
+    property string iconSource: "../svg/icons/extruder.svg"
+
+    height: size
+    width: size
+
+    UM.RecolorImage
+    {
+        id: icon
+        anchors.fill: parent
+        source: iconSource
+        width: size
+    }
+
+    /*
+     * The label uses some "fancy" math to ensure that if you change the overall
+     * icon size, the number scales with it. That is to say, the font properties
+     * are linked to the icon size, NOT the theme. And that's intentional.
+     */
+    Label
+    {
+        id: positionLabel
+        font
+        {
+            pointSize: Math.round(size * 0.3125)
+            weight: Font.Bold
+        }
+        height: Math.round(size / 2) * screenScaleFactor
+        horizontalAlignment: Text.AlignHCenter
+        text: position + 1
+        verticalAlignment: Text.AlignVCenter
+        width: Math.round(size / 2) * screenScaleFactor
+        x: Math.round(size * 0.25) * screenScaleFactor
+        y: Math.round(size * 0.15625) * screenScaleFactor
+        // TODO: Once 'size' is themed, screenScaleFactor won't be needed
+    }
+}

plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml

@@ -4,12 +4,21 @@
 import QtQuick 2.2
 import QtQuick.Controls 2.0
 import UM 1.3 as UM
-import Cura 1.0 as Cura
 
-// A Print Job Card is essentially just a filled-in Expandable Card item.
+/**
+ * A Print Job Card is essentially just a filled-in Expandable Card item. All
+ * data within it is derived from being passed a printJob property.
+ *
+ * NOTE: For most labels, a fixed height with vertical alignment is used to make
+ * layouts more deterministic (like the fixed-size textboxes used in original
+ * mock-ups). This is also a stand-in for CSS's 'line-height' property. Denoted
+ * with '// FIXED-LINE-HEIGHT:'.
+ */
 Item
 {
     id: base
+
+    // The print job which all other data is derived from
     property var printJob: null
 
     width: parent.width
@@ -19,15 +28,15 @@ Item
     {
         headerItem: Row
         {
-            height: 48
+            height: 48 * screenScaleFactor // TODO: Theme!
             anchors.left: parent.left
-            anchors.leftMargin: 24
-            spacing: 18
+            anchors.leftMargin: 24 * screenScaleFactor // TODO: Theme!
+            spacing: 18 * screenScaleFactor // TODO: Theme!
 
             MonitorPrintJobPreview
             {
                 printJob: base.printJob
-                size: 32
+                size: 32 * screenScaleFactor // TODO: Theme!
                 anchors.verticalCenter: parent.verticalCenter
             }
 
@@ -36,10 +45,13 @@ Item
                 text: printJob && printJob.name ? printJob.name : ""
                 color: "#374355"
                 elide: Text.ElideRight
-                font: UM.Theme.getFont("default_bold")
+                font: UM.Theme.getFont("medium") // 14pt, regular
                 anchors.verticalCenter: parent.verticalCenter
-                width: 216
-                height: 18
+                width: 216 * screenScaleFactor // TODO: Theme!
+
+                // FIXED-LINE-HEIGHT:
+                height: 18 * screenScaleFactor // TODO: Theme!
+                verticalAlignment: Text.AlignVCenter
             }
             
             Label
@@ -47,18 +59,20 @@ Item
                 text: printJob ? OutputDevice.formatDuration(printJob.timeTotal) : ""
                 color: "#374355"
                 elide: Text.ElideRight
-                font: UM.Theme.getFont("default_bold")
+                font: UM.Theme.getFont("medium") // 14pt, regular
                 anchors.verticalCenter: parent.verticalCenter
-                width: 216
-                height: 18
+                width: 216 * screenScaleFactor // TODO: Theme!
+
+                // FIXED-LINE-HEIGHT:
+                height: 18 * screenScaleFactor // TODO: Theme!
+                verticalAlignment: Text.AlignVCenter
             }
 
             Label
             {
                 color: "#374355"
-                height: 18
                 elide: Text.ElideRight
-                font: UM.Theme.getFont("default_bold")
+                font: UM.Theme.getFont("medium") // 14pt, regular
                 text: {
                     if (printJob !== null) {
                         if (printJob.assignedPrinter == null)
@@ -78,31 +92,39 @@ Item
                 }
                 visible: printJob
                 anchors.verticalCenter: parent.verticalCenter
-                width: 216
+                width: 216 * screenScaleFactor // TODO: Theme!
+
+                // FIXED-LINE-HEIGHT:
+                height: 18 * screenScaleFactor // TODO: Theme!
+                verticalAlignment: Text.AlignVCenter
             }
         }
         drawerItem: Row
         {
-            height: 96
-            anchors.left: parent.left
-            anchors.leftMargin: 74
-            spacing: 18
+            anchors
+            {
+                left: parent.left
+                leftMargin: 74 * screenScaleFactor // TODO: Theme!
+            }
+            height: 96 * screenScaleFactor // TODO: Theme!
+            spacing: 18 * screenScaleFactor // TODO: Theme!
 
-            Rectangle
+            MonitorPrinterConfiguration
             {
                 id: printerConfiguration
-                width: 450
-                height: 72
-                color: "blue"
                 anchors.verticalCenter: parent.verticalCenter
+                printJob: base.printJob
             }
             Label {
-                height: 18
                 text: printJob && printJob.owner ? printJob.owner : ""
-                color: "#374355"
+                color: "#374355" // TODO: Theme!
                 elide: Text.ElideRight
-                font: UM.Theme.getFont("default_bold")
+                font: UM.Theme.getFont("medium") // 14pt, regular
                 anchors.top: printerConfiguration.top
+
+                // FIXED-LINE-HEIGHT:
+                height: 18 * screenScaleFactor // TODO: Theme!
+                verticalAlignment: Text.AlignVCenter
             }
         }
     }

plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml

@@ -2,14 +2,10 @@
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.2
-import QtQuick.Dialogs 1.1
 import QtQuick.Controls 2.0
-import QtQuick.Controls.Styles 1.4
-import QtGraphicalEffects 1.0
-import QtQuick.Layouts 1.1
-import QtQuick.Dialogs 1.1
 import UM 1.3 as UM
 
+// TODO: Documentation!
 Item
 {
     id: printJobPreview

plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml

@@ -0,0 +1,56 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+import QtQuick.Controls 2.0
+import UM 1.3 as UM
+
+/**
+ *
+ */
+Item
+{
+    id: base
+
+    property var printJob: null
+    property var config0: printJob ? printJob.configuration.extruderConfigurations[0] : null
+    property var config1: printJob ? printJob.configuration.extruderConfigurations[1] : null
+
+    height: 72 * screenScaleFactor // TODO: Theme!
+    width: 450 * screenScaleFactor // TODO: Theme!
+
+    Row
+    {
+        spacing: 18 * screenScaleFactor // TODO: Theme!
+
+        MonitorExtruderConfiguration
+        {
+            color: config0 ? config0.activeMaterial.color : "#eeeeee" // TODO: Theme!
+            material: config0 ? config0.activeMaterial.name : ""
+            position: config0.position
+            printCore: config0 ? config0.hotendID : ""
+            visible: config0
+
+            // Keep things responsive!
+            width: Math.floor((base.width - parent.spacing) / 2)
+        }
+
+        MonitorExtruderConfiguration
+        {
+            color: config1 ? config1.activeMaterial.color : "#eeeeee" // TODO: Theme!
+            material: config1 ? config1.activeMaterial.name : ""
+            position: config1.position
+            printCore: config1 ? config1.hotendID : ""
+            visible: config1
+
+            // Keep things responsive!
+            width: Math.floor((base.width - parent.spacing) / 2)
+        }
+    }
+
+    MonitorBuildplateConfiguration
+    {
+        anchors.bottom: parent.bottom
+        buildplate: "Glass"
+    }
+}

plugins/UM3NetworkPrinting/resources/svg/icons/buildplate.svg

@@ -0,0 +1,5 @@
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M18,5 L18,6 L9,10 L0,6 L0,5 L9,1 L18,5 Z M18,8.18863507 L9,12.1886351 L0,8.18863507 L0,7.09431753 L9,11.0943175 L18,7.09431753 L18,8.18863507 Z M18,10.3772701 L9,14.3772701 L0,10.3772701 L0,9.2829526 L9,13.2829526 L18,9.2829526 L18,10.3772701 Z M18,12.5659052 L9,16.5659052 L0,12.5659052 L0,11.4715877 L9,15.4715877 L18,11.4715877 L18,12.5659052 Z" id="Combined-Shape" fill="#D10000" fill-rule="nonzero"></path>
+    </g>
+</svg>

plugins/UM3NetworkPrinting/resources/svg/icons/extruder.svg

@@ -0,0 +1,5 @@
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M24,24 L16,32 L8,24 L2,24 C0.8954305,24 1.3527075e-16,23.1045695 0,22 L0,2 C-1.3527075e-16,0.8954305 0.8954305,2.02906125e-16 2,0 L30,0 C31.1045695,-2.02906125e-16 32,0.8954305 32,2 L32,22 C32,23.1045695 31.1045695,24 30,24 L24,24 Z M16,21 C20.418278,21 24,17.418278 24,13 C24,8.581722 20.418278,5 16,5 C11.581722,5 8,8.581722 8,13 C8,17.418278 11.581722,21 16,21 Z" id="Combined-Shape" fill="#D8D8D8" fill-rule="nonzero"></path>
+    </g>
+</svg>