Merge pull request #2530 from Ultimaker/CL-457_cura_connect_visual

CL-457 cura connect visual

plugins/UM3NetworkPrinting/ClusterControlItem.qml

@@ -6,11 +6,13 @@ import Cura 1.0 as Cura
 
 Component
 {
-    Item
+    Rectangle
     {
         id: base
         property var manager: Cura.MachineManager.printerOutputDevices[0]
         anchors.fill: parent
+        color: UM.Theme.getColor("viewport_background")
+
         property var lineColor: "#DCDCDC" // TODO: Should be linked to theme.
         property var cornerRadius: 4 * screenScaleFactor // TODO: Should be linked to theme.
 
@@ -27,24 +29,17 @@ Component
             id: activePrintersLabel
             font: UM.Theme.getFont("large")
             anchors.horizontalCenter: parent.horizontalCenter
+            anchors.topMargin: UM.Theme.getSize("default_margin").height
+            anchors.top: parent.top
             text: Cura.MachineManager.printerOutputDevices[0].name
         }
-        Label
-        {
-            id: printerGroupLabel
-            anchors.top: activePrintersLabel.bottom
-            text: catalog.i18nc("@label", "PRINTER GROUP")
-            anchors.horizontalCenter: parent.horizontalCenter
-            font: UM.Theme.getFont("very_small")
-            opacity: 0.65
-        }
 
         Rectangle
         {
             id: printJobArea
             border.width: UM.Theme.getSize("default_lining").width
             border.color: lineColor
-            anchors.top: printerGroupLabel.bottom
+            anchors.top: activePrintersLabel.bottom
             anchors.topMargin: UM.Theme.getSize("default_margin").height
             anchors.left: parent.left
             anchors.leftMargin: UM.Theme.getSize("default_margin").width
@@ -240,4 +235,4 @@ Component
             }
         }
     }
-}
+}

plugins/UM3NetworkPrinting/ClusterMonitorItem.qml

@@ -10,8 +10,8 @@ Component
     Rectangle
     {
         width: maximumWidth
-        height: maximumHeight
+        height: maximumHeight        
-        color: "#FFFFFF" // TODO; Should not be hardcoded.
+        color: UM.Theme.getColor("viewport_background")
 
         property var emphasisColor: "#44c0ff" //TODO: should be linked to theme.
         property var lineColor: "#DCDCDC" // TODO: Should be linked to theme.

plugins/UM3NetworkPrinting/NetworkClusterPrinterOutputDevice.py

@@ -17,6 +17,7 @@ from UM.Logger import Logger
 from UM.Message import Message
 from UM.OutputDevice import OutputDeviceError
 from UM.i18n import i18nCatalog
+from UM.Qt.Duration import Duration, DurationFormat
 
 from . import NetworkPrinterOutputDevice
 
@@ -685,3 +686,7 @@ class NetworkClusterPrinterOutputDevice(NetworkPrinterOutputDevice.NetworkPrinte
                 self._reply.abort()
                 self._reply = None
             Application.getInstance().showPrintMonitor.emit(False)
+
+    @pyqtSlot(int, result=str)
+    def formatDuration(self, seconds):
+        return Duration(seconds).getDisplayString(DurationFormat.Format.Short)

plugins/UM3NetworkPrinting/OpenPanelButton.qml

@@ -14,5 +14,58 @@ Button {
     tooltip: catalog.i18nc("@info:tooltip", "Opens the print jobs page with your default web  browser.")
     text: catalog.i18nc("@action:button", "View print jobs")
 
-    style: UM.Theme.styles.sidebar_action_button
+    // FIXME: This button style is copied and duplicated from SaveButton.qml
+    style: 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("print_button_ready_pressed_border");
+                else if(control.hovered)
+                    return UM.Theme.getColor("print_button_ready_hovered_border");
+                else
+                    return UM.Theme.getColor("print_button_ready_border");
+            }
+            color:
+            {
+                if(!control.enabled)
+                    return UM.Theme.getColor("action_button_disabled");
+                else if(control.pressed)
+                    return UM.Theme.getColor("print_button_ready_pressed");
+                else if(control.hovered)
+                    return UM.Theme.getColor("print_button_ready_hovered");
+                else
+                    return UM.Theme.getColor("print_button_ready");
+            }
+
+            Behavior on color { ColorAnimation { duration: 50; } }
+
+            implicitWidth: actualLabel.contentWidth + (UM.Theme.getSize("sidebar_margin").width * 2)
+
+            Label {
+                id: actualLabel
+                anchors.centerIn: parent
+                color:
+                {
+                    if(!control.enabled)
+                        return UM.Theme.getColor("action_button_disabled_text");
+                    else if(control.pressed)
+                        return UM.Theme.getColor("print_button_ready_text");
+                    else if(control.hovered)
+                        return UM.Theme.getColor("print_button_ready_text");
+                    else
+                        return UM.Theme.getColor("print_button_ready_text");
+                }
+                font: UM.Theme.getFont("action_button")
+                text: control.text;
+            }
+        }
+        label: Item { }
+    }
+
+
 }

plugins/UM3NetworkPrinting/PrinterInfoBlock.qml

@@ -14,14 +14,7 @@ Rectangle
 
     function getPrettyTime(time)
     {
-        var hours = Math.floor(time / 3600)
+        return OutputDevice.formatDuration(time)
-        time -= hours * 3600
-        var minutes = Math.floor(time / 60);
-        time -= minutes * 60
-        var seconds = Math.floor(time);
-
-        var finalTime = strPadLeft(hours, "0", 2) + ':' + strPadLeft(minutes,'0',2)+ ':' + strPadLeft(seconds,'0',2);
-        return finalTime;
     }
 
     function formatPrintJobPercent(printJob)
@@ -143,14 +136,14 @@ Rectangle
                 anchors.right: printProgressArea.left
                 anchors.rightMargin: UM.Theme.getSize("default_margin").width
                 color: emphasisColor
-                UM.RecolorImage
+
+                Image
                 {
-                    anchors.verticalCenter: parent.verticalCenter
+                    width: 40 * screenScaleFactor
-                    anchors.horizontalCenter: parent.horizontalCenter
+                    height: width
+                    anchors.right: parent.right
+                    anchors.rightMargin: parent.rightMargin
                     source: "camera-icon.svg"
-                    width: sourceSize.width
-                    height: sourceSize.height * width / sourceSize.width
-                    color: "white"
                 }
             }
 
@@ -217,6 +210,9 @@ Rectangle
                     //border.color: lineColor
                     height: 40 * screenScaleFactor
                     anchors.left: parent.left
+                    property var showPercent: {
+                        return printJob != null && (["printing", "post_print", "pre_print", "sent_to_printer"].indexOf(printJob.status) !== -1);
+                    }
 
                     Label
                     {
@@ -266,6 +262,10 @@ Rectangle
                                         return "";
                                 }
                             }
+                            if (printer.status == "printing")
+                            {
+                                return catalog.i18nc("@label:status", "Printing")
+                            }
                             return catalog.i18nc("@label:status", "Available");
                         }
 
@@ -273,6 +273,7 @@ Rectangle
 
                         font: UM.Theme.getFont("small")
                     }
+
                     Label
                     {
                         id: progressText
@@ -282,10 +283,44 @@ Rectangle
                         anchors.top: statusText.top
 
                         text: formatPrintJobPercent(printJob)
-                        visible: printJob != null && (["printing", "post_print", "pre_print", "sent_to_printer"].indexOf(printJob.status) !== -1)
+                        visible: printProgressTitleBar.showPercent
                         opacity: 0.65
                         font: UM.Theme.getFont("very_small")
                     }
+
+                    Image
+                    {
+                        width: statusText.height * screenScaleFactor
+                        height: width
+                        anchors.right: parent.right
+                        anchors.rightMargin: UM.Theme.getSize("default_margin").width
+                        anchors.top: statusText.top
+
+                        visible: ! printProgressTitleBar.showPercent
+
+                        source: {
+                            if ( ! printer.enabled)
+                            {
+                                return "blocked-icon.svg";
+                            }
+                            if (printJob != null)
+                            {
+                                if(printJob.status === "queued")
+                                {
+                                    if (printJob.configuration_changes_required != null && printJob.configuration_changes_required.length !== 0)
+                                    {
+                                        return "action-required-icon.svg";
+                                    }
+                                }
+                                else if (printJob.status === "wait_cleanup")
+                                {
+                                    return "checkmark-icon.svg";
+                                }
+                            }
+                            return "";  // We're not going to show it, so it will not be resolved as a url.
+                        }
+                    }
+
                     Rectangle
                     {
                         //TODO: This will become a progress bar in the future
@@ -308,7 +343,7 @@ Rectangle
 
                     width: parent.width - 2 * UM.Theme.getSize("default_margin").width
 
-                    visible: showExtended
+                    visible: printProgressArea.showExtended
 
                     Label   // Status detail
                     {

plugins/UM3NetworkPrinting/action-required-icon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
+    <defs>
+        <path id="a" d="M13.774 1.412l9.706 18.665A2 2 0 0 1 21.706 23H2.294A2 2 0 0 1 .52 20.077l9.706-18.665a2 2 0 0 1 3.548 0z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <use fill="#FFF" xlink:href="#a"/>
+        <path stroke="#000" stroke-width="2.4" d="M12.71 1.966a.8.8 0 0 0-1.42 0L1.584 20.631a.8.8 0 0 0 .71 1.169h19.412a.8.8 0 0 0 .71-1.17L12.71 1.967z"/>
+        <path fill="#000" d="M13.144 14.995h-2.29L10.5 8h2.998l-.354 6.995zm-2.612 2.502c0-.475.13-.844.388-1.108.258-.263.633-.395 1.125-.395.488 0 .857.132 1.108.395.251.264.377.633.377 1.108 0 .47-.13.836-.39 1.1-.261.263-.626.395-1.095.395-.473 0-.843-.132-1.111-.396-.268-.263-.402-.63-.402-1.1z"/>
+    </g>
+</svg>

plugins/UM3NetworkPrinting/blocked-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#000" fill-rule="evenodd" d="M6 10h12v4H6v-4zm6 14c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12z"/>
+</svg>

plugins/UM3NetworkPrinting/camera-icon.svg

@@ -1,3 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14">
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
-    <path fill="none" fill-rule="evenodd" stroke="#464B4E" stroke-width="1.5" d="M19.295 2.83L16.25 4.31V2c0-.69-.56-1.25-1.25-1.25H2C1.31.75.75 1.31.75 2v10c0 .69.56 1.25 1.25 1.25h13c.69 0 1.25-.56 1.25-1.25V9.69l3.045 1.48a.85.85 0 0 0 .367.08c.355 0 .584-.181.584-.31V3.06c0-.026-.011-.058-.04-.096-.16-.206-.592-.289-.911-.134z" opacity=".85"/>
+    <g fill="none" fill-rule="evenodd">
-</svg>
+<!--        <rect width="48" height="48" fill="#00A6EC" rx="24"/>-->
+        <path stroke="#FFF" stroke-width="2.5" d="M32.75 16.25h-19.5v15.5h19.5v-4.51l3.501 1.397c.181.072.405.113.638.113.333 0 .627-.081.81-.2.036-.024.048-.028.051-.011V18.487c-.26-.23-.976-.332-1.499-.124L32.75 19.76v-3.51z"/>
+    </g>
+</svg>

plugins/UM3NetworkPrinting/checkmark-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="none" fill-rule="evenodd" stroke="#000" stroke-width="3" d="M3 10.71L10.068 17 21 5"/>
+</svg>

resources/qml/Cura.qml

@@ -386,8 +386,6 @@ UM.MainWindow
                 visible: opacity > 0
                 opacity: base.showPrintMonitor ? 1 : 0
 
-                Behavior on opacity { NumberAnimation { duration: 100; } }
-
                 MouseArea {
                     anchors.fill: parent
                     acceptedButtons: Qt.AllButtons

resources/themes/cura-dark/theme.json

@@ -16,7 +16,7 @@
         "secondary": [241, 242, 242, 255],
 
         "topbar_background_color": [0, 0, 0, 0],
-        "topbar_background_color_monitoring": [39, 44, 48, 255],
+        "topbar_background_color_monitoring": [0, 0, 0, 0],
 
         "topbar_button_text_active": [255, 255, 255, 255],
         "topbar_button_text_inactive": [128, 128, 128, 255],

resources/themes/cura-light/theme.json

@@ -68,7 +68,7 @@
         "secondary": [245, 245, 245, 255],
 
         "topbar_background_color": [255, 255, 255, 0],
-        "topbar_background_color_monitoring": [255, 255, 255, 255],
+        "topbar_background_color_monitoring": [255, 255, 255, 0],
 
         "topbar_button_text_active": [0, 0, 0, 255],
         "topbar_button_text_inactive": [128, 128, 128, 255],