diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml new file mode 100644 index 0000000000..d14277a1ff --- /dev/null +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorBuildplateConfiguration.qml @@ -0,0 +1,63 @@ +// 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 + +/** + * This component comprises a buildplate icon and the buildplate name. It is + * used by the MonitorPrinterConfiguration component along with two instances + * of MonitorExtruderConfiguration. + * + * 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 +{ + // The buildplate name + property alias buildplate: buildplateLabel.text + + // Height is one 18px label/icon + height: 18 * screenScaleFactor // TODO: Theme! + width: childrenRect.width + + Row + { + height: parent.height + spacing: 12 * screenScaleFactor // TODO: Theme! (Should be same as extruder spacing) + + // This wrapper ensures that the buildplate icon is located centered + // below an extruder icon. + Item + { + height: parent.height + width: 32 * screenScaleFactor // TODO: Theme! (Should be same as extruder icon width) + + UM.RecolorImage + { + id: buildplateIcon + anchors.centerIn: parent + color: "#0a0850" // TODO: Theme! (Standard purple) + elide: Text.ElideRight + height: parent.height + source: "../svg/icons/buildplate.svg" + width: height + } + } + + Label + { + id: buildplateLabel + color: "#191919" // TODO: Theme! + font: UM.Theme.getFont("very_small") // 12pt, regular + text: "" + + // FIXED-LINE-HEIGHT: + height: 18 * screenScaleFactor // TODO: Theme! + verticalAlignment: Text.AlignVCenter + } + } +} \ No newline at end of file diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorExtruderConfiguration.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorExtruderConfiguration.qml new file mode 100644 index 0000000000..afbd4c3641 --- /dev/null +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorExtruderConfiguration.qml @@ -0,0 +1,76 @@ +// 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 + +/** + * This component comprises a colored extruder icon, the material name, and the + * print core name. It is used by the MonitorPrinterConfiguration component with + * a sibling instance as well as a MonitorBuildplateConfiguration instance. + * + * 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 +{ + // The material color + property alias color: extruderIcon.color + + // The extruder position; NOTE: Decent human beings count from 0 + property alias position: extruderIcon.position + + // The material name + property alias material: materialLabel.text + + // The print core name (referred to as hotendID in Python) + property alias printCore: printCoreLabel.text + + // Height is 2 x 18px labels, plus 4px spacing between them + height: 40 * screenScaleFactor // TODO: Theme! + width: childrenRect.width + + MonitorIconExtruder + { + id: extruderIcon + color: "#eeeeee" // TODO: Theme! + position: 0 + } + Label + { + id: materialLabel + anchors + { + left: extruderIcon.right + leftMargin: 12 * screenScaleFactor // TODO: Theme! + } + color: "#191919" // TODO: Theme! + elide: Text.ElideRight + font: UM.Theme.getFont("very_small") // 12pt, regular + text: "" + + // FIXED-LINE-HEIGHT: + height: 18 * screenScaleFactor // TODO: Theme! + verticalAlignment: Text.AlignVCenter + } + Label + { + id: printCoreLabel + anchors + { + left: materialLabel.left + bottom: parent.bottom + } + color: "#191919" // TODO: Theme! + elide: Text.ElideRight + font: UM.Theme.getFont("small") // 12pt, bold + text: "" + + // FIXED-LINE-HEIGHT: + height: 18 * screenScaleFactor // TODO: Theme! + 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 new file mode 100644 index 0000000000..971c6b2251 --- /dev/null +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorIconExtruder.qml @@ -0,0 +1,60 @@ +// 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 + +/** + * This component is a sort of "super icon" which includes a colored SVG image + * as well as the extruder position number. It is used in the the + * MonitorExtruderConfiguration component. + */ +Item +{ + // The material color + property alias color: icon.color + + // The extruder position; NOTE: Decent human beings count from 0 + property int position: 0 + + // The extruder icon size; NOTE: This shouldn't need to be changed + property int size: 32 // TODO: Theme! + + // THe extruder icon source; NOTE: This shouldn't need to be changed + property string iconSource: "../svg/icons/extruder.svg" + + height: size + width: size + + UM.RecolorImage + { + id: icon + anchors.fill: parent + source: iconSource + width: size + } + + /* + * The label uses some "fancy" math to ensure that if you change the overall + * icon size, the number scales with it. That is to say, the font properties + * are linked to the icon size, NOT the theme. And that's intentional. + */ + Label + { + id: positionLabel + font + { + pointSize: Math.round(size * 0.3125) + weight: Font.Bold + } + height: Math.round(size / 2) * screenScaleFactor + horizontalAlignment: Text.AlignHCenter + text: position + 1 + verticalAlignment: Text.AlignVCenter + width: Math.round(size / 2) * screenScaleFactor + x: Math.round(size * 0.25) * screenScaleFactor + y: Math.round(size * 0.15625) * screenScaleFactor + // TODO: Once 'size' is themed, screenScaleFactor won't be needed + } +} \ No newline at end of file diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml index 307a4f908f..6d02c40776 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobCard.qml @@ -4,12 +4,21 @@ import QtQuick 2.2 import QtQuick.Controls 2.0 import UM 1.3 as UM -import Cura 1.0 as Cura -// A Print Job Card is essentially just a filled-in Expandable Card item. +/** + * A Print Job Card is essentially just a filled-in Expandable Card item. All + * data within it is derived from being passed a printJob property. + * + * 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 print job which all other data is derived from property var printJob: null width: parent.width @@ -19,15 +28,15 @@ Item { headerItem: Row { - height: 48 + height: 48 * screenScaleFactor // TODO: Theme! anchors.left: parent.left - anchors.leftMargin: 24 - spacing: 18 + anchors.leftMargin: 24 * screenScaleFactor // TODO: Theme! + spacing: 18 * screenScaleFactor // TODO: Theme! MonitorPrintJobPreview { printJob: base.printJob - size: 32 + size: 32 * screenScaleFactor // TODO: Theme! anchors.verticalCenter: parent.verticalCenter } @@ -36,10 +45,13 @@ Item text: printJob && printJob.name ? printJob.name : "" color: "#374355" elide: Text.ElideRight - font: UM.Theme.getFont("default_bold") + font: UM.Theme.getFont("medium") // 14pt, regular anchors.verticalCenter: parent.verticalCenter - width: 216 - height: 18 + width: 216 * screenScaleFactor // TODO: Theme! + + // FIXED-LINE-HEIGHT: + height: 18 * screenScaleFactor // TODO: Theme! + verticalAlignment: Text.AlignVCenter } Label @@ -47,18 +59,20 @@ Item text: printJob ? OutputDevice.formatDuration(printJob.timeTotal) : "" color: "#374355" elide: Text.ElideRight - font: UM.Theme.getFont("default_bold") + font: UM.Theme.getFont("medium") // 14pt, regular anchors.verticalCenter: parent.verticalCenter - width: 216 - height: 18 + width: 216 * screenScaleFactor // TODO: Theme! + + // FIXED-LINE-HEIGHT: + height: 18 * screenScaleFactor // TODO: Theme! + verticalAlignment: Text.AlignVCenter } Label { color: "#374355" - height: 18 elide: Text.ElideRight - font: UM.Theme.getFont("default_bold") + font: UM.Theme.getFont("medium") // 14pt, regular text: { if (printJob !== null) { if (printJob.assignedPrinter == null) @@ -78,31 +92,39 @@ Item } visible: printJob anchors.verticalCenter: parent.verticalCenter - width: 216 + width: 216 * screenScaleFactor // TODO: Theme! + + // FIXED-LINE-HEIGHT: + height: 18 * screenScaleFactor // TODO: Theme! + verticalAlignment: Text.AlignVCenter } } drawerItem: Row { - height: 96 - anchors.left: parent.left - anchors.leftMargin: 74 - spacing: 18 + anchors + { + left: parent.left + leftMargin: 74 * screenScaleFactor // TODO: Theme! + } + height: 96 * screenScaleFactor // TODO: Theme! + spacing: 18 * screenScaleFactor // TODO: Theme! - Rectangle + MonitorPrinterConfiguration { id: printerConfiguration - width: 450 - height: 72 - color: "blue" anchors.verticalCenter: parent.verticalCenter + printJob: base.printJob } Label { - height: 18 text: printJob && printJob.owner ? printJob.owner : "" - color: "#374355" + color: "#374355" // TODO: Theme! elide: Text.ElideRight - font: UM.Theme.getFont("default_bold") + font: UM.Theme.getFont("medium") // 14pt, regular anchors.top: printerConfiguration.top + + // FIXED-LINE-HEIGHT: + height: 18 * screenScaleFactor // TODO: Theme! + verticalAlignment: Text.AlignVCenter } } } diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml index 7322193451..1a69d2dc12 100644 --- a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrintJobPreview.qml @@ -2,14 +2,10 @@ // Cura is released under the terms of the LGPLv3 or higher. import QtQuick 2.2 -import QtQuick.Dialogs 1.1 import QtQuick.Controls 2.0 -import QtQuick.Controls.Styles 1.4 -import QtGraphicalEffects 1.0 -import QtQuick.Layouts 1.1 -import QtQuick.Dialogs 1.1 import UM 1.3 as UM +// TODO: Documentation! Item { id: printJobPreview diff --git a/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml new file mode 100644 index 0000000000..5d4d408b8e --- /dev/null +++ b/plugins/UM3NetworkPrinting/resources/qml/MonitorPrinterConfiguration.qml @@ -0,0 +1,56 @@ +// 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 + +/** + * + */ +Item +{ + id: base + + property var printJob: null + property var config0: printJob ? printJob.configuration.extruderConfigurations[0] : null + property var config1: printJob ? printJob.configuration.extruderConfigurations[1] : null + + height: 72 * screenScaleFactor // TODO: Theme! + width: 450 * screenScaleFactor // TODO: Theme! + + Row + { + spacing: 18 * screenScaleFactor // TODO: Theme! + + MonitorExtruderConfiguration + { + color: config0 ? config0.activeMaterial.color : "#eeeeee" // TODO: Theme! + material: config0 ? config0.activeMaterial.name : "" + position: config0.position + printCore: config0 ? config0.hotendID : "" + visible: config0 + + // Keep things responsive! + width: Math.floor((base.width - parent.spacing) / 2) + } + + MonitorExtruderConfiguration + { + color: config1 ? config1.activeMaterial.color : "#eeeeee" // TODO: Theme! + material: config1 ? config1.activeMaterial.name : "" + position: config1.position + printCore: config1 ? config1.hotendID : "" + visible: config1 + + // Keep things responsive! + width: Math.floor((base.width - parent.spacing) / 2) + } + } + + MonitorBuildplateConfiguration + { + anchors.bottom: parent.bottom + buildplate: "Glass" + } +} \ No newline at end of file diff --git a/plugins/UM3NetworkPrinting/resources/svg/icons/buildplate.svg b/plugins/UM3NetworkPrinting/resources/svg/icons/buildplate.svg new file mode 100644 index 0000000000..bcb278a8ca --- /dev/null +++ b/plugins/UM3NetworkPrinting/resources/svg/icons/buildplate.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/plugins/UM3NetworkPrinting/resources/svg/icons/extruder.svg b/plugins/UM3NetworkPrinting/resources/svg/icons/extruder.svg new file mode 100644 index 0000000000..235cb432e9 --- /dev/null +++ b/plugins/UM3NetworkPrinting/resources/svg/icons/extruder.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file