Add new pages in add-printer flow

Pages added
- Page to select Ultimaker or third party printer
- Page with information how to add Ultimaker printer(s)

contributes to CURA-8689

cura/UI/AddPrinterPagesModel.py

@@ -12,7 +12,7 @@ class AddPrinterPagesModel(WelcomePagesModel):
 
     def initialize(self, cancellable: bool = True) -> None:
         self._pages.append({"id": "add_network_or_local_printer",
-                            "page_url": self._getBuiltinWelcomePagePath("AddNetworkOrLocalPrinterContent.qml"),
+                            "page_url": self._getBuiltinWelcomePagePath("AddUltimakerOrThirdPartyPrinterStack.qml"),
                             "next_page_id": "machine_actions",
                             "next_page_button_text": self._catalog.i18nc("@action:button", "Add"),
                             })

cura/UI/WelcomePagesModel.py

@@ -265,7 +265,7 @@ class WelcomePagesModel(ListModel):
                            "should_show_function": self.shouldShowCloudPage,
                            },
                           {"id": "add_network_or_local_printer",
-                           "page_url": self._getBuiltinWelcomePagePath("AddNetworkOrLocalPrinterContent.qml"),
+                           "page_url": self._getBuiltinWelcomePagePath("AddUltimakerOrThirdPartyPrinterStack.qml"),
                            "next_page_id": "machine_actions",
                            },
                           {"id": "add_printer_by_ip",

resources/qml/WelcomePages/AddThirdPartyPrinter.qml

@@ -15,22 +15,13 @@ Item
 {
     UM.I18nCatalog { id: catalog; name: "cura" }
 
-    UM.Label
-    {
-        id: titleLabel
-        anchors.top: parent.top
-        anchors.horizontalCenter: parent.horizontalCenter
-        horizontalAlignment: Text.AlignHCenter
-        text: catalog.i18nc("@label", "Add a printer")
-        color: UM.Theme.getColor("primary_button")
-        font: UM.Theme.getFont("huge")
-    }
+    property var goToUltimakerPrinter
 
     DropDownWidget
     {
         id: addNetworkPrinterDropDown
 
-        anchors.top: titleLabel.bottom
+        anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.topMargin: UM.Theme.getSize("wide_margin").height
@@ -103,18 +94,13 @@ Item
         }
     }
 
-    // This "Back" button only shows in the "Add Machine" dialog, which has "previous_page_button_text" set to "Cancel"
     Cura.SecondaryButton
     {
         id: backButton
         anchors.left: parent.left
         anchors.bottom: parent.bottom
-        visible: base.currentItem.previous_page_button_text ? true : false
-        text: base.currentItem.previous_page_button_text ? base.currentItem.previous_page_button_text : ""
-        onClicked:
-        {
-            base.endWizard()
-        }
+        text: catalog.i18nc("@label", "Add Ultimaker printer via Digital Factory")
+        onClicked: goToUltimakerPrinter()
     }
 
     Cura.PrimaryButton

resources/qml/WelcomePages/AddUltimakerOrThirdPartyPrinter.qml

@@ -0,0 +1,75 @@
+// Copyright (c) 2022 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+
+import UM 1.5 as UM
+import Cura 1.1 as Cura
+
+
+//
+// This component contains the content for the "Add a printer" (network) page of the welcome on-boarding process.
+//
+Control
+{
+    UM.I18nCatalog { id: catalog; name: "cura" }
+
+    property var goToUltimakerPrinter
+    property var goToThirdPartyPrinter
+
+    contentItem: ColumnLayout
+    {
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+
+        UM.Label
+        {
+            text: catalog.i18nc("@label", "In order to start using Cura you will need to configure a printer.")
+            font: UM.Theme.getFont("default")
+            Layout.alignment: Qt.AlignTop
+        }
+
+        UM.Label
+        {
+            text: catalog.i18nc("@label", "What printer would you like to setup?")
+            font: UM.Theme.getFont("default_bold")
+            Layout.alignment: Qt.AlignTop
+        }
+
+        RowLayout
+        {
+            spacing: UM.Theme.getSize("wide_margin").width
+            Layout.preferredWidth: childrenRect.width
+            Layout.preferredHeight: childrenRect.height
+            Layout.topMargin: UM.Theme.getSize("wide_margin").height
+            Layout.bottomMargin: UM.Theme.getSize("wide_margin").height
+            Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
+
+            PrinterCard
+            {
+                onClicked: goToUltimakerPrinter
+                text: catalog.i18nc("@button", "Ultimaker printer")
+                imageSource: UM.Theme.getImage("ultimaker_printer")
+            }
+
+            PrinterCard
+            {
+                onClicked: goToThirdPartyPrinter
+                text: catalog.i18nc("@button", "Non Ultimaker printer")
+                imageSource: UM.Theme.getImage("third_party_printer")
+            }
+        }
+
+        Cura.TertiaryButton
+        {
+            Layout.alignment: Qt.AlignBottom
+            text: catalog.i18nc("@button", "Learn more about adding printers to Cura")
+            iconSource: UM.Theme.getIcon("LinkExternal")
+            isIconOnRightSide: true
+            textFont: UM.Theme.getFont("small")
+            onClicked: Qt.openUrlExternally("") // TODO: Update url
+        }
+    }
+}

resources/qml/WelcomePages/AddUltimakerOrThirdPartyPrinterStack.qml

@@ -0,0 +1,55 @@
+// Copyright (c) 2022 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+
+import UM 1.5 as UM
+import Cura 1.1 as Cura
+
+ColumnLayout
+{
+    id: root
+
+    UM.I18nCatalog { id: catalog; name: "cura" }
+
+    Layout.fillWidth: true
+    Layout.fillHeight: true
+
+    property var goToUltimakerPrinter: () => layout.currentIndex = 1
+    property var goToThirdPartyPrinter: () => layout.currentIndex = 2
+
+    UM.Label
+    {
+        id: title_label
+        Layout.fillWidth: true
+        Layout.bottomMargin: UM.Theme.getSize("thick_margin").height
+        horizontalAlignment: Text.AlignHCenter
+        text: catalog.i18nc("@label", "Add printer")
+        color: UM.Theme.getColor("primary_button")
+        font: UM.Theme.getFont("huge")
+    }
+
+    StackLayout
+    {
+        id: layout
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+        currentIndex: 0
+        AddUltimakerOrThirdPartyPrinter
+        {
+            goToUltimakerPrinter: root.goToUltimakerPrinter
+            goToThirdPartyPrinter: root.goToThirdPartyPrinter
+        }
+        AddUltimakerPrinter
+        {
+            goToThirdPartyPrinter: root.goToThirdPartyPrinter
+        }
+        AddThirdPartyPrinter
+        {
+            goToUltimakerPrinter: root.goToUltimakerPrinter
+
+        }
+    }
+}

resources/qml/WelcomePages/AddUltimakerPrinter.qml

@@ -0,0 +1,122 @@
+// Copyright (c) 2022 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+
+import UM 1.5 as UM
+import Cura 1.1 as Cura
+
+Control
+{
+    UM.I18nCatalog { id: catalog; name: "cura" }
+
+    property var goToThirdPartyPrinter
+
+    signal cloudPrintersDetected(bool newCloudPrintersDetected)
+    Component.onCompleted: CuraApplication.getDiscoveredCloudPrintersModel().cloudPrintersDetectedChanged.connect(cloudPrintersDetected)
+    onCloudPrintersDetected: function(newCloudPrintersDetected)
+    {
+        if(newCloudPrintersDetected)
+        {
+            base.goToPage("add_cloud_printers")
+        }
+        else
+        {
+            goToThirdPartyPrinter()
+        }
+    }
+
+    contentItem: ColumnLayout
+    {
+        UM.Label
+        {
+            text: catalog.i18nc("@label", "New Ultimaker printers can be connected to Digital Factory and monitored remotely.")
+        }
+
+        RowLayout
+        {
+            Layout.fillWidth: true
+
+            Image
+            {
+                source: UM.Theme.getImage("add_printer")
+                Layout.preferredWidth: 200
+                Layout.preferredHeight: 200
+            }
+
+            ColumnLayout
+            {
+                Layout.fillHeight: true
+                Layout.alignment: Qt.AlignVCenter
+                spacing: UM.Theme.getSize("default_margin").height
+
+                UM.Label
+                {
+                    Layout.fillWidth: true
+                    Layout.alignment: Qt.AlignTop
+                    wrapMode: Text.WordWrap
+                    font: UM.Theme.getFont("default_bold")
+                    text: catalog.i18nc("@label", "New Ultimaker printers can be connected to Digital Factory and monitored remotely.")
+                }
+
+                UM.Label
+                {
+                    Layout.fillWidth: true
+                    Layout.alignment: Qt.AlignTop
+                    wrapMode: Text.WordWrap
+                    text: {
+                        const steps = [
+                            catalog.i18nc("@info", "Sign in into Ultimaker Digilal Factory"),
+                            catalog.i18nc("@info", "Follow the procedure to add a new printer"),
+                            catalog.i18nc("@info", "Your new printer will automatically appear in Cura"),
+                        ];
+                        return `<ol>${steps.map(step => `<li>${step}</il>`).join('')}</ol>`;
+                    }
+                }
+
+                Cura.TertiaryButton
+                {
+                    Layout.fillWidth: true
+                    Layout.alignment: Qt.AlignTop
+                    text: catalog.i18nc("@button", "Learn more about adding printers to Digital Factory")
+                    iconSource: UM.Theme.getIcon("LinkExternal")
+                    isIconOnRightSide: true
+                    textFont: UM.Theme.getFont("small")
+                    onClicked: Qt.openUrlExternally("") // TODO: Update url
+                }
+            }
+        }
+
+        Control
+        {
+            Layout.alignment: Qt.AlignBottom
+            Layout.fillWidth: true
+
+            contentItem: RowLayout
+            {
+
+                Cura.SecondaryButton
+                {
+                    Layout.alignment: Qt.AlignLeft
+                    text: catalog.i18nc("@button", "Add local printer")
+                    onClicked: goToThirdPartyPrinter()
+                }
+
+                Cura.PrimaryButton
+                {
+                    Layout.alignment: Qt.AlignRight
+                    text: catalog.i18nc("@button", "Sign in to Digital Factory")
+                    onClicked: function()
+                    {
+                        text = catalog.i18nc("@button", "Waiting for new printers")
+                        busy = true;
+                        enabled = false;
+                        Cura.API.account.login();
+                    }
+                }
+            }
+        }
+    }
+}

resources/qml/WelcomePages/PrinterCard.qml

@@ -0,0 +1,85 @@
+// Copyright (c) 2022 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+
+import UM 1.5 as UM
+import Cura 1.1 as Cura
+
+Control
+{
+    id: root
+    property alias text: link_text.text
+    property alias imageSource: image.source
+    property var onClicked
+
+    states:
+    [
+        State
+        {
+            name: "hovered";
+            when: mouse_area.containsMouse
+            PropertyChanges
+            {
+                target: background
+                color: UM.Theme.getColor("monitor_card_hover")
+            }
+            PropertyChanges
+            {
+                target: link_text
+                font.underline: true
+            }
+        }
+    ]
+
+    MouseArea
+    {
+        id: mouse_area
+        anchors.fill: parent
+        hoverEnabled: true
+        onClicked: root.onClicked && root.onClicked()
+    }
+
+    topPadding: UM.Theme.getSize("wide_margin").height
+    rightPadding: UM.Theme.getSize("wide_margin").width
+    bottomPadding: UM.Theme.getSize("wide_margin").height
+    leftPadding: UM.Theme.getSize("wide_margin").width
+
+    background: Rectangle
+    {
+        id: background
+        anchors.fill: parent
+        border.color: UM.Theme.getColor("primary_button")
+        color: "transparent"
+        border.width: 1
+        radius: 3
+    }
+
+    contentItem: ColumnLayout
+    {
+        spacing: UM.Theme.getSize("wide_margin").height
+        height: childrenRect.height
+        width: childrenRect.width
+
+        Image
+        {
+            id: image
+            source: imageSource
+            width: 180
+            height: 180
+            sourceSize.width: width
+            sourceSize.height: height
+        }
+
+        UM.Label
+        {
+            id: link_text
+            Layout.fillWidth: true
+            font: UM.Theme.getFont("medium")
+            color: UM.Theme.getColor("text_link")
+            horizontalAlignment: Text.AlignHCenter
+        }
+    }
+}