3D-printing/Cura
1
0
Fork 0
mirror of https://github.com/Ultimaker/Cura.git synced 2025-07-12 09:17:50 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add skeleton loading to printer cards

Browse source 
Contributes to CL-1157
This commit is contained in:
Ian Paschal 2019-01-08 14:27:54 +01:00
parent 4dbab88792
commit e81742d296
10 changed files with 192 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

17
plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml
View file

@ -18,7 +18,7 @@ import UM 1.3 as UM
Item Item
{ {
// The buildplate name // The buildplate name
property alias buildplate: buildplateLabel.text property var buildplate: null
// Height is one 18px label/icon // Height is one 18px label/icon
height: 18 * screenScaleFactor // TODO: Theme! height: 18 * screenScaleFactor // TODO: Theme!
@ -34,7 +34,16 @@ Item
Item Item
{ {
height: parent.height 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 UM.RecolorImage
{ {
@ -44,6 +53,7 @@ Item
height: parent.height height: parent.height
source: "../svg/icons/buildplate.svg" source: "../svg/icons/buildplate.svg"
width: height width: height
visible: buildplate
} }
} }
@ -53,7 +63,8 @@ Item
color: "#191919" // TODO: Theme! color: "#191919" // TODO: Theme!
elide: Text.ElideRight elide: Text.ElideRight
font: UM.Theme.getFont("default") // 12pt, regular font: UM.Theme.getFont("default") // 12pt, regular
text: "" text: buildplate ? buildplate : ""
visible: text !== ""
// FIXED-LINE-HEIGHT: // FIXED-LINE-HEIGHT:
height: 18 * screenScaleFactor // TODO: Theme! height: 18 * screenScaleFactor // TODO: Theme!

1
plugins/UM3NetworkPrinting/resources/qml/MonitorCarousel.qml
View file

@ -230,6 +230,7 @@ Item
topMargin: 36 * screenScaleFactor // TODO: Theme! topMargin: 36 * screenScaleFactor // TODO: Theme!
} }
spacing: 8 * screenScaleFactor // TODO: Theme! spacing: 8 * screenScaleFactor // TODO: Theme!
visible: printers.length > 1
Repeater Repeater
{ {
model: printers model: printers

2
plugins/UM3NetworkPrinting/resources/qml/MonitorConfigOverrideDialog.qml
View file

@ -54,7 +54,7 @@ UM.Dialog
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
text: text:
{ {
if (!printer.activePrintJob) if (!printer || !printer.activePrintJob)
{ {
return "" return ""
} }

62
plugins/UM3NetworkPrinting/resources/qml/MonitorExtruderConfiguration.qml
View file

@ -39,38 +39,62 @@ Item
color: "#eeeeee" // TODO: Theme! color: "#eeeeee" // TODO: Theme!
position: 0 position: 0
} }
Label
Rectangle
{ {
id: materialLabel id: materialLabelWrapper
anchors anchors
{ {
left: extruderIcon.right left: extruderIcon.right
leftMargin: 12 * screenScaleFactor // TODO: Theme! leftMargin: 12 * screenScaleFactor // TODO: Theme!
} }
color: "#191919" // TODO: Theme! color: materialLabel.visible > 0 ? "transparent" : "#eeeeee" // TODO: Theme!
elide: Text.ElideRight
font: UM.Theme.getFont("default") // 12pt, regular
text: ""
// FIXED-LINE-HEIGHT:
height: 18 * screenScaleFactor // 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 anchors
{ {
left: materialLabel.left left: materialLabelWrapper.left
bottom: parent.bottom bottom: parent.bottom
} }
color: "#191919" // TODO: Theme! color: printCoreLabel.visible > 0 ? "transparent" : "#eeeeee" // TODO: Theme!
elide: Text.ElideRight
font: UM.Theme.getFont("default_bold") // 12pt, bold
text: ""
// FIXED-LINE-HEIGHT:
height: 18 * screenScaleFactor // 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
}
} }
} }

1
plugins/UM3NetworkPrinting/resources/qml/MonitorIconExtruder.qml
View file

@ -56,5 +56,6 @@ Item
x: Math.round(size * 0.25) * screenScaleFactor x: Math.round(size * 0.25) * screenScaleFactor
y: Math.round(size * 0.15625) * screenScaleFactor y: Math.round(size * 0.15625) * screenScaleFactor
// TODO: Once 'size' is themed, screenScaleFactor won't be needed // TODO: Once 'size' is themed, screenScaleFactor won't be needed
visible: position >= 0
} }
} }

23
plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml
View file

@ -16,23 +16,28 @@ Item
width: size width: size
height: size height: size
// Actual content Rectangle
Image
{ {
id: previewImage
anchors.fill: parent 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 UM.RecolorImage
{ {
id: ultiBotImage id: ultiBotImage

8
plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobProgressBar.qml
View file

@ -34,16 +34,16 @@ Item
{ {
background: Rectangle background: Rectangle
{ {
color: printJob && printJob.isActive ? "#e4e4f2" : "#f3f3f9" // TODO: Theme! color: "#f5f5f5" // TODO: Theme!
implicitHeight: visible ? 8 * screenScaleFactor : 0 // TODO: Theme! implicitHeight: visible ? 8 * screenScaleFactor : 0 // TODO: Theme!
implicitWidth: 180 * screenScaleFactor // TODO: Theme! implicitWidth: 180 * screenScaleFactor // TODO: Theme!
radius: 4 * screenScaleFactor // TODO: Theme! radius: 2 * screenScaleFactor // TODO: Theme!
} }
progress: Rectangle progress: Rectangle
{ {
id: progressItem; id: progressItem;
color: printJob && printJob.isActive ? "#0a0850" : "#9392b2" // TODO: Theme! color: printJob && printJob.isActive ? "#3282ff" : "#CCCCCC" // TODO: Theme!
radius: 4 * screenScaleFactor // TODO: Theme! radius: 2 * screenScaleFactor // TODO: Theme!
} }
} }
} }

143
plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterCard.qml
View file

@ -33,16 +33,24 @@ Item
width: 834 * screenScaleFactor // TODO: Theme! width: 834 * screenScaleFactor // TODO: Theme!
height: childrenRect.height height: childrenRect.height
// Printer portion
Rectangle Rectangle
{ {
id: printerInfo id: background
anchors.fill: parent
color: "#FFFFFF" // TODO: Theme!
border border
{ {
color: "#CCCCCC" // TODO: Theme! color: "#CCCCCC" // TODO: Theme!
width: borderSize // TODO: Remove once themed width: borderSize // TODO: Remove once themed
} }
color: "white" // TODO: Theme! radius: 2 * screenScaleFactor // TODO: Theme!
}
// Printer portion
Item
{
id: printerInfo
width: parent.width width: parent.width
height: 144 * screenScaleFactor // TODO: Theme! height: 144 * screenScaleFactor // TODO: Theme!
@ -56,15 +64,22 @@ Item
} }
spacing: 18 * screenScaleFactor // TODO: Theme! spacing: 18 * screenScaleFactor // TODO: Theme!
Image Rectangle
{ {
id: printerImage id: printerImage
width: 108 * screenScaleFactor // TODO: Theme! width: 108 * screenScaleFactor // TODO: Theme!
height: 108 * screenScaleFactor // TODO: Theme! height: 108 * screenScaleFactor // TODO: Theme!
fillMode: Image.PreserveAspectFit color: printer ? "transparent" : "#eeeeee" // TODO: Theme!
source: "../png/" + printer.type + ".png" radius: 8 // TODO: Theme!
mipmap: true Image
{
anchors.fill: parent
fillMode: Image.PreserveAspectFit
source: printer ? "../png/" + printer.type + ".png" : ""
mipmap: true
}
} }
Item Item
{ {
@ -75,20 +90,38 @@ Item
width: 180 * screenScaleFactor // TODO: Theme! width: 180 * screenScaleFactor // TODO: Theme!
height: printerNameLabel.height + printerFamilyPill.height + 6 * screenScaleFactor // TODO: Theme! height: printerNameLabel.height + printerFamilyPill.height + 6 * screenScaleFactor // TODO: Theme!
Label Rectangle
{ {
id: printerNameLabel id: printerNameLabel
text: printer && printer.name ? printer.name : "" // color: "#414054" // TODO: Theme!
color: "#414054" // TODO: Theme! color: printer ? "transparent" : "#eeeeee" // TODO: Theme!
elide: Text.ElideRight
font: UM.Theme.getFont("large_bold") // 16pt, bold
width: parent.width
// FIXED-LINE-HEIGHT:
height: 18 * screenScaleFactor // 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 MonitorPrinterPill
{ {
id: printerFamilyPill id: printerFamilyPill
@ -98,7 +131,7 @@ Item
topMargin: 6 * screenScaleFactor // TODO: Theme! topMargin: 6 * screenScaleFactor // TODO: Theme!
left: printerNameLabel.left left: printerNameLabel.left
} }
text: printer.type text: printer ? printer.type : ""
} }
} }
@ -106,16 +139,30 @@ Item
{ {
id: printerConfiguration id: printerConfiguration
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
buildplate: "Glass" buildplate: printer ? "Glass" : null // 'Glass' as a default
configurations: configurations:
[ {
base.printer.printerConfiguration.extruderConfigurations[0], var configs = []
base.printer.printerConfiguration.extruderConfigurations[1] if (printer)
] {
height: 72 * screenScaleFactor // TODO: Theme! 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 PrintJobContextMenu
{ {
id: contextButton id: contextButton
@ -126,10 +173,11 @@ Item
top: parent.top top: parent.top
topMargin: 12 * screenScaleFactor // TODO: Theme! topMargin: 12 * screenScaleFactor // TODO: Theme!
} }
printJob: printer.activePrintJob printJob: printer ? printer.activePrintJob : null
width: 36 * screenScaleFactor // TODO: Theme! width: 36 * screenScaleFactor // TODO: Theme!
height: 36 * screenScaleFactor // TODO: Theme! height: 36 * screenScaleFactor // TODO: Theme!
enabled: base.enabled enabled: base.enabled
visible: printer
} }
CameraButton CameraButton
{ {
@ -143,10 +191,24 @@ Item
} }
iconSource: "../svg/icons/camera.svg" iconSource: "../svg/icons/camera.svg"
enabled: base.enabled 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 // Print job portion
Rectangle Rectangle
{ {
@ -158,10 +220,10 @@ Item
} }
border 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 width: borderSize // TODO: Remove once themed
} }
color: "white" // TODO: Theme! color: "transparent" // TODO: Theme!
height: 84 * screenScaleFactor + borderSize // TODO: Remove once themed height: 84 * screenScaleFactor + borderSize // TODO: Remove once themed
width: parent.width width: parent.width
@ -184,9 +246,12 @@ Item
{ {
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
color: "#414054" // TODO: Theme! color: printer ? "#414054" : "#aaaaaa" // TODO: Theme!
font: UM.Theme.getFont("large_bold") // 16pt, bold font: UM.Theme.getFont("large_bold") // 16pt, bold
text: { text: {
if (!printer) {
return catalog.i18nc("@label:status", "Loading...")
}
if (printer && printer.state == "disabled") if (printer && printer.state == "disabled")
{ {
return catalog.i18nc("@label:status", "Unavailable") return catalog.i18nc("@label:status", "Unavailable")
@ -215,10 +280,10 @@ Item
MonitorPrintJobPreview MonitorPrintJobPreview
{ {
anchors.centerIn: parent anchors.centerIn: parent
printJob: base.printer.activePrintJob printJob: printer ? printer.activePrintJob : null
size: parent.height size: parent.height
} }
visible: printer.activePrintJob visible: printer && printer.activePrintJob && !printerStatus.visible
} }
Item Item
@ -229,15 +294,15 @@ Item
} }
width: 180 * screenScaleFactor // TODO: Theme! width: 180 * screenScaleFactor // TODO: Theme!
height: printerNameLabel.height + printerFamilyPill.height + 6 * screenScaleFactor // TODO: Theme! height: printerNameLabel.height + printerFamilyPill.height + 6 * screenScaleFactor // TODO: Theme!
visible: printer.activePrintJob visible: printer && printer.activePrintJob && !printerStatus.visible
Label Label
{ {
id: printerJobNameLabel 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 elide: Text.ElideRight
font: UM.Theme.getFont("large_bold") // 16pt, bold font: UM.Theme.getFont("large") // 16pt, bold
text: base.printer.activePrintJob ? base.printer.activePrintJob.name : "Untitled" // TODO: I18N text: printer && printer.activePrintJob ? printer.activePrintJob.name : "Untitled" // TODO: I18N
width: parent.width width: parent.width
// FIXED-LINE-HEIGHT: // FIXED-LINE-HEIGHT:
@ -254,10 +319,10 @@ Item
topMargin: 6 * screenScaleFactor // TODO: Theme! topMargin: 6 * screenScaleFactor // TODO: Theme!
left: printerJobNameLabel.left 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 elide: Text.ElideRight
font: UM.Theme.getFont("default") // 12pt, regular 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 width: parent.width
// FIXED-LINE-HEIGHT: // FIXED-LINE-HEIGHT:
@ -272,8 +337,8 @@ Item
{ {
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
} }
printJob: printer.activePrintJob printJob: printer && printer.activePrintJob
visible: printer.activePrintJob && printer.activePrintJob.configurationChanges.length === 0 visible: printer && printer.activePrintJob && printer.activePrintJob.configurationChanges.length === 0 && !printerStatus.visible
} }
Label Label
@ -284,7 +349,7 @@ Item
} }
font: UM.Theme.getFont("default") font: UM.Theme.getFont("default")
text: "Requires configuration changes" 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: // FIXED-LINE-HEIGHT:
height: 18 * screenScaleFactor // TODO: Theme! height: 18 * screenScaleFactor // TODO: Theme!
@ -326,7 +391,7 @@ Item
} }
implicitHeight: 32 * screenScaleFactor // TODO: Theme! implicitHeight: 32 * screenScaleFactor // TODO: Theme!
implicitWidth: 96 * 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() : {} onClicked: base.enabled ? overrideConfirmationDialog.open() : {}
} }
} }

12
plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml
View file

@ -19,7 +19,7 @@ Item
property alias buildplate: buildplateConfig.buildplate property alias buildplate: buildplateConfig.buildplate
// Array of extracted extruder configurations // Array of extracted extruder configurations
property var configurations: null property var configurations: [null,null]
// Default size, but should be stretched to fill parent // Default size, but should be stretched to fill parent
height: 72 * parent.height height: 72 * parent.height
@ -37,10 +37,10 @@ Item
MonitorExtruderConfiguration MonitorExtruderConfiguration
{ {
color: modelData.activeMaterial ? modelData.activeMaterial.color : "#eeeeee" // TODO: Theme! color: modelData && modelData.activeMaterial ? modelData.activeMaterial.color : "#eeeeee" // TODO: Theme!
material: modelData.activeMaterial ? modelData.activeMaterial.name : "" material: modelData && modelData.activeMaterial ? modelData.activeMaterial.name : ""
position: modelData.position position: modelData && modelData.position ? modelData.position : -1 // Use negative one to create empty extruder number
printCore: modelData.hotendID printCore: modelData ? modelData.hotendID : ""
// Keep things responsive! // Keep things responsive!
width: Math.floor((base.width - (configurations.length - 1) * extruderConfigurationRow.spacing) / configurations.length) width: Math.floor((base.width - (configurations.length - 1) * extruderConfigurationRow.spacing) / configurations.length)
@ -53,6 +53,6 @@ Item
{ {
id: buildplateConfig id: buildplateConfig
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
buildplate: "Glass" // 'Glass' as a default buildplate: null
} }
} }

7
plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterPill.qml
View file

@ -27,12 +27,12 @@ Item
} }
implicitHeight: 18 * screenScaleFactor // TODO: Theme! implicitHeight: 18 * screenScaleFactor // TODO: Theme!
implicitWidth: printerNameLabel.contentWidth + 12 // TODO: Theme! implicitWidth: Math.max(printerNameLabel.contentWidth + 12 * screenScaleFactor, 36 * screenScaleFactor) // TODO: Theme!
Rectangle { Rectangle {
id: background id: background
anchors.fill: parent anchors.fill: parent
color: "#e4e4f2" // TODO: Theme! color: printerNameLabel.visible ? "#e4e4f2" : "#eeeeee"// TODO: Theme!
radius: 2 * screenScaleFactor // TODO: Theme! radius: 2 * screenScaleFactor // TODO: Theme!
} }
@ -41,6 +41,7 @@ Item
anchors.centerIn: parent anchors.centerIn: parent
color: "#535369" // TODO: Theme! color: "#535369" // TODO: Theme!
text: tagText text: tagText
font.pointSize: 10 font.pointSize: 10 // TODO: Theme!
visible: text !== ""
} }
} }