From e81742d296eab1d9d7ba81d3b9ea2ac5ce897445 Mon Sep 17 00:00:00 2001 From: Ian Paschal Date: Tue, 8 Jan 2019 14:27:54 +0100 Subject: [PATCH] Add skeleton loading to printer cards Contributes to CL-1157 --- .../qml/MonitorBuildplateConfiguration.qml | 17 ++- .../resources/qml/MonitorCarousel.qml | 1 + .../qml/MonitorConfigOverrideDialog.qml | 2 +- .../qml/MonitorExtruderConfiguration.qml | 62 +++++--- .../resources/qml/MonitorIconExtruder.qml | 1 + .../resources/qml/MonitorPrintJobPreview.qml | 23 +-- .../qml/MonitorPrintJobProgressBar.qml | 8 +- .../resources/qml/MonitorPrinterCard.qml | 143 +++++++++++++----- .../qml/MonitorPrinterConfiguration.qml | 12 +- .../resources/qml/MonitorPrinterPill.qml | 7 +- 10 files changed, 192 insertions(+), 84 deletions(-) diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml index 44bd47f904..192a5a7f76 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml @@ -18,7 +18,7 @@ import UM 1.3 as UM Item { // The buildplate name - property alias buildplate: buildplateLabel.text + property var buildplate: null // Height is one 18px label/icon height: 18 * screenScaleFactor // TODO: Theme! @@ -34,7 +34,16 @@ Item Item { height: parent.height - width: 32 * screenScaleFactor // TODO: Theme! (Should be same as extruder icon width) + width: 32 * screenScaleFactor // Ensure the icon is centered under the extruder icon (same width) + + Rectangle + { + anchors.centerIn: parent + height: parent.height + width: height + color: buildplateIcon.visible > 0 ? "transparent" : "#eeeeee" // TODO: Theme! + radius: Math.floor(height / 2) + } UM.RecolorImage { @@ -44,6 +53,7 @@ Item height: parent.height source: "../svg/icons/buildplate.svg" width: height + visible: buildplate } } @@ -53,7 +63,8 @@ Item color: "#191919" // TODO: Theme! elide: Text.ElideRight font: UM.Theme.getFont("default") // 12pt, regular - text: "" + text: buildplate ? buildplate : "" + visible: text !== "" // FIXED-LINE-HEIGHT: height: 18 * screenScaleFactor // TODO: Theme! diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml index 7c0d9b95b6..de24ee5a8c 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml @@ -230,6 +230,7 @@ Item topMargin: 36 * screenScaleFactor // TODO: Theme! } spacing: 8 * screenScaleFactor // TODO: Theme! + visible: printers.length > 1 Repeater { model: printers diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorConfigOverrideDialog.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorConfigOverrideDialog.qml index 6a32310dd5..1718994d83 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorConfigOverrideDialog.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorConfigOverrideDialog.qml @@ -54,7 +54,7 @@ UM.Dialog wrapMode: Text.WordWrap text: { - if (!printer.activePrintJob) + if (!printer || !printer.activePrintJob) { return "" } diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorExtruderConfiguration.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorExtruderConfiguration.qml index 1e53191d8c..17c0fa8651 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorExtruderConfiguration.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorExtruderConfiguration.qml @@ -39,38 +39,62 @@ Item color: "#eeeeee" // TODO: Theme! position: 0 } - Label + + Rectangle { - id: materialLabel + id: materialLabelWrapper anchors { left: extruderIcon.right leftMargin: 12 * screenScaleFactor // TODO: Theme! } - color: "#191919" // TODO: Theme! - elide: Text.ElideRight - font: UM.Theme.getFont("default") // 12pt, regular - text: "" - - // FIXED-LINE-HEIGHT: + color: materialLabel.visible > 0 ? "transparent" : "#eeeeee" // TODO: Theme! height: 18 * screenScaleFactor // TODO: Theme! - verticalAlignment: Text.AlignVCenter + width: Math.max(materialLabel.contentWidth, 60 * screenScaleFactor) // TODO: Theme! + radius: 2 * screenScaleFactor // TODO: Theme! + + Label + { + id: materialLabel + + color: "#191919" // TODO: Theme! + elide: Text.ElideRight + font: UM.Theme.getFont("default") // 12pt, regular + text: "" + visible: text !== "" + + // FIXED-LINE-HEIGHT: + height: parent.height + verticalAlignment: Text.AlignVCenter + } } - Label + + Rectangle { - id: printCoreLabel + id: printCoreLabelWrapper anchors { - left: materialLabel.left + left: materialLabelWrapper.left bottom: parent.bottom } - color: "#191919" // TODO: Theme! - elide: Text.ElideRight - font: UM.Theme.getFont("default_bold") // 12pt, bold - text: "" - - // FIXED-LINE-HEIGHT: + color: printCoreLabel.visible > 0 ? "transparent" : "#eeeeee" // TODO: Theme! height: 18 * screenScaleFactor // TODO: Theme! - verticalAlignment: Text.AlignVCenter + width: Math.max(printCoreLabel.contentWidth, 36 * screenScaleFactor) // TODO: Theme! + radius: 2 * screenScaleFactor // TODO: Theme! + + Label + { + id: printCoreLabel + + color: "#191919" // TODO: Theme! + elide: Text.ElideRight + font: UM.Theme.getFont("default_bold") // 12pt, bold + text: "" + visible: text !== "" + + // FIXED-LINE-HEIGHT: + height: parent.height + verticalAlignment: Text.AlignVCenter + } } } \ No newline at end of file diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorIconExtruder.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorIconExtruder.qml index 971c6b2251..93dbebc8c6 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorIconExtruder.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorIconExtruder.qml @@ -56,5 +56,6 @@ Item x: Math.round(size * 0.25) * screenScaleFactor y: Math.round(size * 0.15625) * screenScaleFactor // TODO: Once 'size' is themed, screenScaleFactor won't be needed + visible: position >= 0 } } \ No newline at end of file diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml index 2f17db0c65..d0bad63258 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml @@ -16,23 +16,28 @@ Item width: size height: size - // Actual content - Image + Rectangle { - id: previewImage anchors.fill: parent - opacity: + color: printJob ? "transparent" : "#eeeeee" // TODO: Theme! + radius: 8 // TODO: Theme! + Image { - if (printJob && (printJob.state == "error" || printJob.configurationChanges.length > 0 || !printJob.isActive)) + id: previewImage + anchors.fill: parent + opacity: { - return 0.5 + if (printJob && (printJob.state == "error" || printJob.configurationChanges.length > 0 || !printJob.isActive)) + { + return 0.5 + } + return 1.0 } - return 1.0 + source: printJob ? printJob.previewImageUrl : "" } - source: printJob ? printJob.previewImageUrl : "" - visible: printJob } + UM.RecolorImage { id: ultiBotImage diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobProgressBar.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobProgressBar.qml index cfb7aba84d..d5d4705a36 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobProgressBar.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobProgressBar.qml @@ -34,16 +34,16 @@ Item { background: Rectangle { - color: printJob && printJob.isActive ? "#e4e4f2" : "#f3f3f9" // TODO: Theme! + color: "#f5f5f5" // TODO: Theme! implicitHeight: visible ? 8 * screenScaleFactor : 0 // TODO: Theme! implicitWidth: 180 * screenScaleFactor // TODO: Theme! - radius: 4 * screenScaleFactor // TODO: Theme! + radius: 2 * screenScaleFactor // TODO: Theme! } progress: Rectangle { id: progressItem; - color: printJob && printJob.isActive ? "#0a0850" : "#9392b2" // TODO: Theme! - radius: 4 * screenScaleFactor // TODO: Theme! + color: printJob && printJob.isActive ? "#3282ff" : "#CCCCCC" // TODO: Theme! + radius: 2 * screenScaleFactor // TODO: Theme! } } } diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml index b8c4353811..facfaaaaaf 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml @@ -33,16 +33,24 @@ Item width: 834 * screenScaleFactor // TODO: Theme! height: childrenRect.height - // Printer portion Rectangle { - id: printerInfo + id: background + anchors.fill: parent + color: "#FFFFFF" // TODO: Theme! border { color: "#CCCCCC" // TODO: Theme! width: borderSize // TODO: Remove once themed } - color: "white" // TODO: Theme! + radius: 2 * screenScaleFactor // TODO: Theme! + } + + // Printer portion + Item + { + id: printerInfo + width: parent.width height: 144 * screenScaleFactor // TODO: Theme! @@ -56,15 +64,22 @@ Item } spacing: 18 * screenScaleFactor // TODO: Theme! - Image + Rectangle { id: printerImage width: 108 * screenScaleFactor // TODO: Theme! height: 108 * screenScaleFactor // TODO: Theme! - fillMode: Image.PreserveAspectFit - source: "../png/" + printer.type + ".png" - mipmap: true + color: printer ? "transparent" : "#eeeeee" // TODO: Theme! + radius: 8 // TODO: Theme! + Image + { + anchors.fill: parent + fillMode: Image.PreserveAspectFit + source: printer ? "../png/" + printer.type + ".png" : "" + mipmap: true + } } + Item { @@ -75,20 +90,38 @@ Item width: 180 * screenScaleFactor // TODO: Theme! height: printerNameLabel.height + printerFamilyPill.height + 6 * screenScaleFactor // TODO: Theme! - Label + Rectangle { id: printerNameLabel - text: printer && printer.name ? printer.name : "" - color: "#414054" // TODO: Theme! - elide: Text.ElideRight - font: UM.Theme.getFont("large_bold") // 16pt, bold - width: parent.width - - // FIXED-LINE-HEIGHT: + // color: "#414054" // TODO: Theme! + color: printer ? "transparent" : "#eeeeee" // TODO: Theme! height: 18 * screenScaleFactor // TODO: Theme! - verticalAlignment: Text.AlignVCenter + width: parent.width + radius: 2 * screenScaleFactor // TODO: Theme! + + Label + { + text: printer && printer.name ? printer.name : "" + color: "#414054" // TODO: Theme! + elide: Text.ElideRight + font: UM.Theme.getFont("large") // 16pt, bold + width: parent.width + visible: printer + + // FIXED-LINE-HEIGHT: + height: parent.height + verticalAlignment: Text.AlignVCenter + } } + Rectangle + { + color: "#eeeeee" // TODO: Theme! + height: 18 * screenScaleFactor // TODO: Theme! + radius: 2 * screenScaleFactor // TODO: Theme! + visible: !printer + width: 48 * screenScaleFactor // TODO: Theme! + } MonitorPrinterPill { id: printerFamilyPill @@ -98,7 +131,7 @@ Item topMargin: 6 * screenScaleFactor // TODO: Theme! left: printerNameLabel.left } - text: printer.type + text: printer ? printer.type : "" } } @@ -106,16 +139,30 @@ Item { id: printerConfiguration anchors.verticalCenter: parent.verticalCenter - buildplate: "Glass" + buildplate: printer ? "Glass" : null // 'Glass' as a default configurations: - [ - base.printer.printerConfiguration.extruderConfigurations[0], - base.printer.printerConfiguration.extruderConfigurations[1] - ] - height: 72 * screenScaleFactor // TODO: Theme! + { + var configs = [] + if (printer) + { + configs.push(printer.printerConfiguration.extruderConfigurations[0]) + configs.push(printer.printerConfiguration.extruderConfigurations[1]) + } + else + { + configs.push(null, null) + } + return configs + } + height: 72 * screenScaleFactor // TODO: Theme!te theRect's x property } + + // TODO: Make this work. + PropertyAnimation { target: printerConfiguration; property: "visible"; to: 0; loops: Animation.Infinite; duration: 500 } } + + PrintJobContextMenu { id: contextButton @@ -126,10 +173,11 @@ Item top: parent.top topMargin: 12 * screenScaleFactor // TODO: Theme! } - printJob: printer.activePrintJob + printJob: printer ? printer.activePrintJob : null width: 36 * screenScaleFactor // TODO: Theme! height: 36 * screenScaleFactor // TODO: Theme! enabled: base.enabled + visible: printer } CameraButton { @@ -143,10 +191,24 @@ Item } iconSource: "../svg/icons/camera.svg" enabled: base.enabled + visible: printer } } + // Divider + Rectangle + { + anchors + { + top: printJobInfo.top + left: printJobInfo.left + right: printJobInfo.right + } + height: borderSize // Remove once themed + color: background.border.color + } + // Print job portion Rectangle { @@ -158,10 +220,10 @@ Item } border { - color: printer.activePrintJob && printer.activePrintJob.configurationChanges.length > 0 ? "#f5a623" : "#CCCCCC" // TODO: Theme! + color: printer && printer.activePrintJob && printer.activePrintJob.configurationChanges.length > 0 ? "#f5a623" : "transparent" // TODO: Theme! width: borderSize // TODO: Remove once themed } - color: "white" // TODO: Theme! + color: "transparent" // TODO: Theme! height: 84 * screenScaleFactor + borderSize // TODO: Remove once themed width: parent.width @@ -184,9 +246,12 @@ Item { verticalCenter: parent.verticalCenter } - color: "#414054" // TODO: Theme! + color: printer ? "#414054" : "#aaaaaa" // TODO: Theme! font: UM.Theme.getFont("large_bold") // 16pt, bold text: { + if (!printer) { + return catalog.i18nc("@label:status", "Loading...") + } if (printer && printer.state == "disabled") { return catalog.i18nc("@label:status", "Unavailable") @@ -215,10 +280,10 @@ Item MonitorPrintJobPreview { anchors.centerIn: parent - printJob: base.printer.activePrintJob + printJob: printer ? printer.activePrintJob : null size: parent.height } - visible: printer.activePrintJob + visible: printer && printer.activePrintJob && !printerStatus.visible } Item @@ -229,15 +294,15 @@ Item } width: 180 * screenScaleFactor // TODO: Theme! height: printerNameLabel.height + printerFamilyPill.height + 6 * screenScaleFactor // TODO: Theme! - visible: printer.activePrintJob + visible: printer && printer.activePrintJob && !printerStatus.visible Label { id: printerJobNameLabel - color: printer.activePrintJob && printer.activePrintJob.isActive ? "#414054" : "#babac1" // TODO: Theme! + color: printer && printer.activePrintJob && printer.activePrintJob.isActive ? "#414054" : "#babac1" // TODO: Theme! elide: Text.ElideRight - font: UM.Theme.getFont("large_bold") // 16pt, bold - text: base.printer.activePrintJob ? base.printer.activePrintJob.name : "Untitled" // TODO: I18N + font: UM.Theme.getFont("large") // 16pt, bold + text: printer && printer.activePrintJob ? printer.activePrintJob.name : "Untitled" // TODO: I18N width: parent.width // FIXED-LINE-HEIGHT: @@ -254,10 +319,10 @@ Item topMargin: 6 * screenScaleFactor // TODO: Theme! left: printerJobNameLabel.left } - color: printer.activePrintJob && printer.activePrintJob.isActive ? "#53657d" : "#babac1" // TODO: Theme! + color: printer && printer.activePrintJob && printer.activePrintJob.isActive ? "#53657d" : "#babac1" // TODO: Theme! elide: Text.ElideRight font: UM.Theme.getFont("default") // 12pt, regular - text: printer.activePrintJob ? printer.activePrintJob.owner : "Anonymous" // TODO: I18N + text: printer && printer.activePrintJob ? printer.activePrintJob.owner : "Anonymous" // TODO: I18N width: parent.width // FIXED-LINE-HEIGHT: @@ -272,8 +337,8 @@ Item { verticalCenter: parent.verticalCenter } - printJob: printer.activePrintJob - visible: printer.activePrintJob && printer.activePrintJob.configurationChanges.length === 0 + printJob: printer && printer.activePrintJob + visible: printer && printer.activePrintJob && printer.activePrintJob.configurationChanges.length === 0 && !printerStatus.visible } Label @@ -284,7 +349,7 @@ Item } font: UM.Theme.getFont("default") text: "Requires configuration changes" - visible: printer.activePrintJob && printer.activePrintJob.configurationChanges.length > 0 + visible: printer && printer.activePrintJob && printer.activePrintJob.configurationChanges.length > 0 && !printerStatus.visible // FIXED-LINE-HEIGHT: height: 18 * screenScaleFactor // TODO: Theme! @@ -326,7 +391,7 @@ Item } implicitHeight: 32 * screenScaleFactor // TODO: Theme! implicitWidth: 96 * screenScaleFactor // TODO: Theme! - visible: printer.activePrintJob && printer.activePrintJob.configurationChanges.length > 0 + visible: printer && printer.activePrintJob && printer.activePrintJob.configurationChanges.length > 0 && !printerStatus.visible onClicked: base.enabled ? overrideConfirmationDialog.open() : {} } } diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml index 6aa11528de..78af227408 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml @@ -19,7 +19,7 @@ Item property alias buildplate: buildplateConfig.buildplate // Array of extracted extruder configurations - property var configurations: null + property var configurations: [null,null] // Default size, but should be stretched to fill parent height: 72 * parent.height @@ -37,10 +37,10 @@ Item MonitorExtruderConfiguration { - color: modelData.activeMaterial ? modelData.activeMaterial.color : "#eeeeee" // TODO: Theme! - material: modelData.activeMaterial ? modelData.activeMaterial.name : "" - position: modelData.position - printCore: modelData.hotendID + color: modelData && modelData.activeMaterial ? modelData.activeMaterial.color : "#eeeeee" // TODO: Theme! + material: modelData && modelData.activeMaterial ? modelData.activeMaterial.name : "" + position: modelData && modelData.position ? modelData.position : -1 // Use negative one to create empty extruder number + printCore: modelData ? modelData.hotendID : "" // Keep things responsive! width: Math.floor((base.width - (configurations.length - 1) * extruderConfigurationRow.spacing) / configurations.length) @@ -53,6 +53,6 @@ Item { id: buildplateConfig anchors.bottom: parent.bottom - buildplate: "Glass" // 'Glass' as a default + buildplate: null } } \ No newline at end of file diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterPill.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterPill.qml index 80a089cc2a..2408089e1e 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterPill.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterPill.qml @@ -27,12 +27,12 @@ Item } implicitHeight: 18 * screenScaleFactor // TODO: Theme! - implicitWidth: printerNameLabel.contentWidth + 12 // TODO: Theme! + implicitWidth: Math.max(printerNameLabel.contentWidth + 12 * screenScaleFactor, 36 * screenScaleFactor) // TODO: Theme! Rectangle { id: background anchors.fill: parent - color: "#e4e4f2" // TODO: Theme! + color: printerNameLabel.visible ? "#e4e4f2" : "#eeeeee"// TODO: Theme! radius: 2 * screenScaleFactor // TODO: Theme! } @@ -41,6 +41,7 @@ Item anchors.centerIn: parent color: "#535369" // TODO: Theme! text: tagText - font.pointSize: 10 + font.pointSize: 10 // TODO: Theme! + visible: text !== "" } } \ No newline at end of file