Add Cura 4.0 printer cards

Contributes to CL-1150
This commit is contained in:
Ian Paschal 2018-11-23 10:03:08 +01:00
parent ee7355c2bb
commit 9f1ce72b9e
3 changed files with 375 additions and 5 deletions

View file

@ -10,14 +10,13 @@ import QtGraphicalEffects 1.0
Component
{
Rectangle
Item
{
id: monitorFrame
property var emphasisColor: UM.Theme.getColor("setting_control_border_highlight")
property var cornerRadius: UM.Theme.getSize("monitor_corner_radius").width
color: "transparent"
height: maximumHeight
onVisibleChanged:
{
@ -48,13 +47,44 @@ Component
}
}
ScrollView
{
id: printers
anchors
{
left: parent.left
right: parent.right
top: parent.top
topMargin: 48 * screenScaleFactor // TODO: Theme!
}
height: 264 * screenScaleFactor // TODO: Theme!
Row
{
spacing: 60 * screenScaleFactor // TODO: Theme!
Repeater
{
model: OutputDevice.printers
MonitorPrinterCard
{
printer: modelData
}
}
}
}
Item
{
id: queue
anchors.fill: parent
anchors.top: parent.top
anchors.topMargin: 400 * screenScaleFactor // TODO: Insert carousel here
anchors {
bottom: parent.bottom
left: parent.left
right: parent.right
top: printers.bottom
topMargin: 48
}
Label
{

View file

@ -0,0 +1,112 @@
// Copyright (c) 2018 Ultimaker B.V.
// Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.3
import QtQuick.Controls.Styles 1.3
import QtQuick.Controls 1.4
import UM 1.3 as UM
ProgressBar
{
property var printJob: null
property var progress: {
if (!printJob) {
return 0;
}
var result = printJob.timeElapsed / printJob.timeTotal;
if (result > 1.0) {
result = 1.0;
}
return result;
}
width: 180 * screenScaleFactor // TODO: Theme!
value: progress;
style: ProgressBarStyle {
property var remainingTime: {
if (!printJob) {
return 0;
}
/* Sometimes total minus elapsed is less than 0. Use Math.max() to prevent remaining
time from ever being less than 0. Negative durations cause strange behavior such
as displaying "-1h -1m". */
return Math.max(printer.activePrintJob.timeTotal - printer.activePrintJob.timeElapsed, 0);
}
property var progressText: {
if (!printJob) {
return "";
}
switch (printJob.state) {
case "wait_cleanup":
if (printJob.timeTotal > printJob.timeElapsed) {
return catalog.i18nc("@label:status", "Aborted");
}
return catalog.i18nc("@label:status", "Finished");
case "pre_print":
case "sent_to_printer":
return catalog.i18nc("@label:status", "Preparing");
case "aborted":
return catalog.i18nc("@label:status", "Aborted");
case "wait_user_action":
return catalog.i18nc("@label:status", "Aborted");
case "pausing":
return catalog.i18nc("@label:status", "Pausing");
case "paused":
return OutputDevice.formatDuration( remainingTime );
case "resuming":
return catalog.i18nc("@label:status", "Resuming");
case "queued":
return catalog.i18nc("@label:status", "Action required");
default:
return OutputDevice.formatDuration( remainingTime );
}
}
background: Rectangle {
color: "#e4e4f2" // TODO: Theme!
implicitHeight: visible ? 8 : 0;
implicitWidth: 180;
radius: 4
}
progress: Rectangle {
id: progressItem;
color: {
if (!printJob) {
return "black";
}
var state = printJob.state
var inactiveStates = [
"pausing",
"paused",
"resuming",
"wait_cleanup"
];
if (inactiveStates.indexOf(state) > -1 && remainingTime > 0) {
return UM.Theme.getColor("monitor_progress_fill_inactive");
} else {
return "#0a0850" // TODO: Theme!
}
}
radius: 4
Label {
id: progressLabel;
anchors {
left: parent.left;
leftMargin: getTextOffset();
}
text: progressText;
anchors.verticalCenter: parent.verticalCenter;
color: progressItem.width + progressLabel.width < control.width ? UM.Theme.getColor("text") : UM.Theme.getColor("monitor_progress_fill_text");
width: contentWidth;
font: UM.Theme.getFont("default");
}
function getTextOffset() {
if (progressItem.width + progressLabel.width + 16 < control.width) {
return progressItem.width + UM.Theme.getSize("default_margin").width;
} else {
return progressItem.width - progressLabel.width - UM.Theme.getSize("default_margin").width;
}
}
}
}
}

View file

@ -0,0 +1,228 @@
// 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
/**
* A Printer Card is has two main components: the printer portion and the print
* job portion, the latter being paired in the UI when a print job is paired
* a printer in-cluster.
*
* 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 printer which all printer data is derived from
property var printer: null
property var borderSize: 1 * screenScaleFactor // TODO: Theme, and remove from here
width: 834 * screenScaleFactor // TODO: Theme!
height: 216 * screenScaleFactor // TODO: Theme!
// Printer portion
Rectangle
{
id: printerInfo
border
{
color: "#EAEAEC" // TODO: Theme!
width: borderSize // TODO: Remove once themed
}
color: "white" // TODO: Theme!
width: parent.width
height: 144 * screenScaleFactor // TODO: Theme!
Row
{
anchors
{
left: parent.left
leftMargin: 36 * screenScaleFactor // TODO: Theme!
verticalCenter: parent.verticalCenter
}
spacing: 18 * screenScaleFactor // TODO: Theme!
Rectangle
{
id: printerImage
color: "#eeeeee"
width: 108
height: 108
}
Item
{
anchors
{
verticalCenter: parent.verticalCenter
}
width: 216 * screenScaleFactor // TODO: Theme!
height: printerNameLabel.height + printerFamilyPill.height + 6 * screenScaleFactor // TODO: Theme!
Label
{
id: printerNameLabel
text: printer && printer.name ? printer.name : ""
color: "#414054" // TODO: Theme!
elide: Text.ElideRight
font: UM.Theme.getFont("large") // 16pt, bold
width: parent.width
// FIXED-LINE-HEIGHT:
height: 18 * screenScaleFactor // TODO: Theme!
verticalAlignment: Text.AlignVCenter
}
MonitorPrinterPill
{
id: printerFamilyPill
anchors
{
top: printerNameLabel.bottom
topMargin: 6 * screenScaleFactor // TODO: Theme!
left: printerNameLabel.left
}
text: printer.type
}
}
MonitorPrinterConfiguration
{
id: printerConfiguration
anchors.verticalCenter: parent.verticalCenter
buildplate: "Glass"
configurations:
[
base.printer.printerConfiguration.extruderConfigurations[0],
base.printer.printerConfiguration.extruderConfigurations[1]
]
height: 72 * screenScaleFactor // TODO: Theme!
}
}
PrintJobContextMenu
{
id: contextButton
// anchors
// {
// right: parent.right
// rightMargin: 8 * screenScaleFactor // TODO: Theme!
// top: parent.top
// topMargin: 8 * screenScaleFactor // TODO: Theme!
// }
printJob: base.printJob
width: 32 * screenScaleFactor // TODO: Theme!
height: 32 * screenScaleFactor // TODO: Theme!
}
}
// Print job portion
Rectangle
{
id: printJobInfo
anchors
{
top: printerInfo.bottom
topMargin: -borderSize * screenScaleFactor // TODO: Theme!
}
border
{
color: "#EAEAEC" // TODO: Theme!
width: borderSize // TODO: Remove once themed
}
color: "white" // TODO: Theme!
height: 84 * screenScaleFactor + borderSize // TODO: Remove once themed
width: parent.width
Row
{
anchors
{
fill: parent
topMargin: 12 * screenScaleFactor + borderSize // TODO: Theme!
bottomMargin: 12 * screenScaleFactor // TODO: Theme!
leftMargin: 36 * screenScaleFactor // TODO: Theme!
}
height: childrenRect.height
spacing: 18 * screenScaleFactor // TODO: Theme!
Item
{
anchors
{
verticalCenter: parent.verticalCenter
}
width: printerImage.width
height: childrenRect.height
MonitorPrintJobPreview
{
anchors.centerIn: parent
printJob: base.printer.activePrintJob
size: 60 * screenScaleFactor // TODO: Theme!
}
}
Item
{
anchors
{
verticalCenter: parent.verticalCenter
}
width: 216 * screenScaleFactor // TODO: Theme!
height: printerNameLabel.height + printerFamilyPill.height + 6 * screenScaleFactor // TODO: Theme!
Label
{
id: printerJobNameLabel
text: base.printer.activePrintJob ? base.printer.activePrintJob.name : "Untitled" // TODO: I18N
color: "#414054" // TODO: Theme!
elide: Text.ElideRight
font: UM.Theme.getFont("large") // 16pt, bold
width: parent.width
// FIXED-LINE-HEIGHT:
height: 18 * screenScaleFactor // TODO: Theme!
verticalAlignment: Text.AlignVCenter
}
Label
{
id: printerJobOwnerLabel
anchors
{
top: printerJobNameLabel.bottom
topMargin: 6 * screenScaleFactor // TODO: Theme!
left: printerJobNameLabel.left
}
text: printer.activePrintJob ? printer.activePrintJob.owner : "Anonymous" // TODO: I18N
color: "#53657d" // TODO: Theme!
elide: Text.ElideRight
font: UM.Theme.getFont("very_small") // 12pt, regular
width: parent.width
// FIXED-LINE-HEIGHT:
height: 18 * screenScaleFactor // TODO: Theme!
verticalAlignment: Text.AlignVCenter
}
}
MonitorPrintJobProgressBar
{
anchors
{
verticalCenter: parent.verticalCenter
}
printJob: printer.activePrintJob
}
}
}
}