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

Format the slider for the infill in the recommended mode

Browse source 
Contributes to CURA-5941
This commit is contained in:
Diego Prado Gesto 2018-12-02 12:03:58 +01:00
parent 2c5f5170c2
commit 1238aa7304
4 changed files with 268 additions and 295 deletions
Download patch file Download diff file Expand all files Collapse all files

2
resources/qml/PrintSetupSelector/PrintSetupSelectorContents.qml
View file

@ -25,7 +25,7 @@ Item
{ {
id: header id: header
height: UM.Theme.getSize("print_setup_widget_header").height height: UM.Theme.getSize("print_setup_widget_header").height
color: "transparent" //UM.Theme.getColor("action_button_hovered") // TODO: It's not clear the color that we need to use here color: UM.Theme.getColor("action_button_hovered") // TODO: It's not clear the color that we need to use here
anchors anchors
{ {

488
resources/qml/PrintSetupSelector/Recommended/RecommendedInfillDensitySelector.qml
View file

@ -15,57 +15,37 @@ import Cura 1.0 as Cura
Item Item
{ {
id: infillRow id: infillRow
height: childrenRect.height
property real labelColumnWidth: Math.round(width / 3)
// Here are the elements that are shown in the left column
Cura.IconWithText Cura.IconWithText
{ {
id: infillRowTitle id: infillRowTitle
source: UM.Theme.getIcon("category_infill") source: UM.Theme.getIcon("category_infill")
text: catalog.i18nc("@label", "Infill") + " (%)" text: catalog.i18nc("@label", "Infill") + " (%)"
anchors.bottom: parent.bottom
width: labelColumnWidth width: labelColumnWidth
} }
Item Item
{ {
id: infillCellRight id: infillSliderContainer
height: childrenRect.height
height: infillSlider.height + UM.Theme.getSize("thick_margin").height + enableGradualInfillCheckBox.visible * (enableGradualInfillCheckBox.height + UM.Theme.getSize("thick_margin").height) anchors
anchors.left: infillRowTitle.right
anchors.right: parent.right
Label
{ {
id: selectedInfillRateText left: infillRowTitle.right
right: parent.right
anchors.left: infillSlider.left verticalCenter: infillRowTitle.verticalCenter
anchors.right: parent.right
text: parseInt(infillDensity.properties.value) + "%"
horizontalAlignment: Text.AlignLeft
color: infillSlider.enabled ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable")
}
// We use a binding to make sure that after manually setting infillSlider.value it is still bound to the property provider
Binding
{
target: infillSlider
property: "value"
value: parseInt(infillDensity.properties.value)
} }
Slider Slider
{ {
id: infillSlider id: infillSlider
anchors.top: selectedInfillRateText.bottom width: parent.width
anchors.left: parent.left height: UM.Theme.getSize("print_setup_slider_handle").height // The handle is the widest element of the slider
anchors.right: infillIcon.left
anchors.rightMargin: UM.Theme.getSize("thick_margin").width
height: UM.Theme.getSize("thick_margin").height
width: parseInt(infillCellRight.width - UM.Theme.getSize("thick_margin").width - style.handleWidth)
minimumValue: 0 minimumValue: 0
maximumValue: 100 maximumValue: 100
@ -78,9 +58,62 @@ Item
// set initial value from stack // set initial value from stack
value: parseInt(infillDensity.properties.value) value: parseInt(infillDensity.properties.value)
style: SliderStyle
{
//Draw line
groove: Item
{
Rectangle
{
height: UM.Theme.getSize("print_setup_slider_groove").height
width: control.width - UM.Theme.getSize("print_setup_slider_handle").width
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
color: control.enabled ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable")
}
}
handle: Rectangle
{
id: handleButton
color: control.enabled ? UM.Theme.getColor("primary") : UM.Theme.getColor("quality_slider_unavailable")
implicitWidth: UM.Theme.getSize("print_setup_slider_handle").width
implicitHeight: implicitWidth
radius: Math.round(implicitWidth / 2)
opacity: 0.5
}
tickmarks: Repeater
{
id: repeater
model: control.maximumValue / control.stepSize + 1
Rectangle
{
color: control.enabled ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable")
implicitWidth: UM.Theme.getSize("print_setup_slider_tickmarks").width
implicitHeight: UM.Theme.getSize("print_setup_slider_tickmarks").height
anchors.verticalCenter: parent.verticalCenter
// Do not use Math.round otherwise the tickmarks won't be aligned
x: ((styleData.handleWidth / 2) - (implicitWidth / 2) + (index * ((repeater.width - styleData.handleWidth) / (repeater.count-1))))
radius: Math.round(implicitWidth / 2)
visible: (index % 10) == 0 // Only show steps of 10%
Label
{
text: index
visible: (index % 20) == 0 // Only show steps of 20%
anchors.horizontalCenter: parent.horizontalCenter
y: UM.Theme.getSize("thin_margin").height
renderType: Text.NativeRendering
}
}
}
}
onValueChanged: onValueChanged:
{ {
// Don't round the value if it's already the same // Don't round the value if it's already the same
if (parseInt(infillDensity.properties.value) == infillSlider.value) if (parseInt(infillDensity.properties.value) == infillSlider.value)
{ {
@ -104,228 +137,177 @@ Item
Cura.MachineManager.resetSettingForAllExtruders("infill_line_distance") Cura.MachineManager.resetSettingForAllExtruders("infill_line_distance")
} }
} }
style: SliderStyle
{
groove: Rectangle
{
id: groove
implicitWidth: 200 * screenScaleFactor
implicitHeight: 2 * screenScaleFactor
color: control.enabled ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable")
radius: 1
} }
handle: Item // Rectangle
{ // {
Rectangle // id: infillIcon
{ //
id: handleButton // width: Math.round((parent.width / 5) - (UM.Theme.getSize("thick_margin").width))
anchors.centerIn: parent // height: width
color: control.enabled ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable") //
implicitWidth: 10 * screenScaleFactor // anchors.right: parent.right
implicitHeight: 10 * screenScaleFactor // anchors.top: parent.top
radius: 10 * screenScaleFactor // anchors.topMargin: Math.round(UM.Theme.getSize("thick_margin").height / 2)
} //
} // // we loop over all density icons and only show the one that has the current density and steps
// Repeater
tickmarks: Repeater // {
{ // id: infillIconList
id: repeater // model: infillModel
model: control.maximumValue / control.stepSize + 1 // anchors.fill: parent
//
// check if a tick should be shown based on it's index and wether the infill density is a multiple of 10 (slider step size) // function activeIndex ()
function shouldShowTick (index) // {
{ // for (var i = 0; i < infillModel.count; i++)
if (index % 10 == 0) // {
{ // var density = Math.round(infillDensity.properties.value)
return true // var steps = Math.round(infillSteps.properties.value)
} // var infillModelItem = infillModel.get(i)
return false //
} // if (infillModelItem != "undefined"
// && density >= infillModelItem.percentageMin
Rectangle // && density <= infillModelItem.percentageMax
{ // && steps >= infillModelItem.stepsMin
anchors.verticalCenter: parent.verticalCenter // && steps <= infillModelItem.stepsMax)
color: control.enabled ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable") // {
width: 1 * screenScaleFactor // return i
height: 6 * screenScaleFactor // }
x: Math.round(styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1))) // }
visible: shouldShowTick(index) // return -1
} // }
} //
} // Rectangle
} // {
// anchors.fill: parent
Rectangle // visible: infillIconList.activeIndex() == index
{ //
id: infillIcon // border.width: UM.Theme.getSize("default_lining").width
// border.color: UM.Theme.getColor("quality_slider_unavailable")
width: Math.round((parent.width / 5) - (UM.Theme.getSize("thick_margin").width)) //
height: width // UM.RecolorImage
// {
anchors.right: parent.right // anchors.fill: parent
anchors.top: parent.top // anchors.margins: 2 * screenScaleFactor
anchors.topMargin: Math.round(UM.Theme.getSize("thick_margin").height / 2) // sourceSize.width: width
// sourceSize.height: width
// we loop over all density icons and only show the one that has the current density and steps // source: UM.Theme.getIcon(model.icon)
Repeater // color: UM.Theme.getColor("quality_slider_unavailable")
{ // }
id: infillIconList // }
model: infillModel // }
anchors.fill: parent // }
//
function activeIndex () // // Gradual Support Infill Checkbox
{ // CheckBox
for (var i = 0; i < infillModel.count; i++) // {
{ // id: enableGradualInfillCheckBox
var density = Math.round(infillDensity.properties.value) // property alias _hovered: enableGradualInfillMouseArea.containsMouse
var steps = Math.round(infillSteps.properties.value) //
var infillModelItem = infillModel.get(i) // anchors.top: infillSlider.bottom
// anchors.topMargin: Math.round(UM.Theme.getSize("thick_margin").height / 2) // closer to slider since it belongs to the same category
if (infillModelItem != "undefined" // anchors.left: infillSliderContainer.left
&& density >= infillModelItem.percentageMin //
&& density <= infillModelItem.percentageMax // style: UM.Theme.styles.checkbox
&& steps >= infillModelItem.stepsMin // enabled: base.settingsEnabled
&& steps <= infillModelItem.stepsMax) // visible: infillSteps.properties.enabled == "True"
{ // checked: parseInt(infillSteps.properties.value) > 0
return i //
} // MouseArea
} // {
return -1 // id: enableGradualInfillMouseArea
} //
// anchors.fill: parent
Rectangle // hoverEnabled: true
{ // enabled: true
anchors.fill: parent //
visible: infillIconList.activeIndex() == index // property var previousInfillDensity: parseInt(infillDensity.properties.value)
//
border.width: UM.Theme.getSize("default_lining").width // onClicked:
border.color: UM.Theme.getColor("quality_slider_unavailable") // {
// // Set to 90% only when enabling gradual infill
UM.RecolorImage // var newInfillDensity;
{ // if (parseInt(infillSteps.properties.value) == 0)
anchors.fill: parent // {
anchors.margins: 2 * screenScaleFactor // previousInfillDensity = parseInt(infillDensity.properties.value)
sourceSize.width: width // newInfillDensity = 90
sourceSize.height: width // } else {
source: UM.Theme.getIcon(model.icon) // newInfillDensity = previousInfillDensity
color: UM.Theme.getColor("quality_slider_unavailable") // }
} // Cura.MachineManager.setSettingForAllExtruders("infill_sparse_density", "value", String(newInfillDensity))
} //
} // var infill_steps_value = 0
} // if (parseInt(infillSteps.properties.value) == 0)
// {
// Gradual Support Infill Checkbox // infill_steps_value = 5
CheckBox // }
{ //
id: enableGradualInfillCheckBox // Cura.MachineManager.setSettingForAllExtruders("gradual_infill_steps", "value", infill_steps_value)
property alias _hovered: enableGradualInfillMouseArea.containsMouse // }
//
anchors.top: infillSlider.bottom // onEntered: base.showTooltip(enableGradualInfillCheckBox, Qt.point(-infillSliderContainer.x, 0),
anchors.topMargin: Math.round(UM.Theme.getSize("thick_margin").height / 2) // closer to slider since it belongs to the same category // catalog.i18nc("@label", "Gradual infill will gradually increase the amount of infill towards the top."))
anchors.left: infillCellRight.left //
// onExited: base.hideTooltip()
style: UM.Theme.styles.checkbox //
enabled: base.settingsEnabled // }
visible: infillSteps.properties.enabled == "True" //
checked: parseInt(infillSteps.properties.value) > 0 // Label
// {
MouseArea // id: gradualInfillLabel
{ // height: parent.height
id: enableGradualInfillMouseArea // anchors.left: enableGradualInfillCheckBox.right
// anchors.leftMargin: Math.round(UM.Theme.getSize("thick_margin").width / 2)
anchors.fill: parent // verticalAlignment: Text.AlignVCenter;
hoverEnabled: true // text: catalog.i18nc("@label", "Enable gradual")
enabled: true // font: UM.Theme.getFont("default")
// color: UM.Theme.getColor("text")
property var previousInfillDensity: parseInt(infillDensity.properties.value) // }
// }
onClicked: //
{ // // Infill list model for mapping icon
// Set to 90% only when enabling gradual infill // ListModel
var newInfillDensity; // {
if (parseInt(infillSteps.properties.value) == 0) // id: infillModel
{ // Component.onCompleted:
previousInfillDensity = parseInt(infillDensity.properties.value) // {
newInfillDensity = 90 // infillModel.append({
} else { // percentageMin: -1,
newInfillDensity = previousInfillDensity // percentageMax: 0,
} // stepsMin: -1,
Cura.MachineManager.setSettingForAllExtruders("infill_sparse_density", "value", String(newInfillDensity)) // stepsMax: 0,
// icon: "hollow"
var infill_steps_value = 0 // })
if (parseInt(infillSteps.properties.value) == 0) // infillModel.append({
{ // percentageMin: 0,
infill_steps_value = 5 // percentageMax: 40,
} // stepsMin: -1,
// stepsMax: 0,
Cura.MachineManager.setSettingForAllExtruders("gradual_infill_steps", "value", infill_steps_value) // icon: "sparse"
} // })
// infillModel.append({
onEntered: base.showTooltip(enableGradualInfillCheckBox, Qt.point(-infillCellRight.x, 0), // percentageMin: 40,
catalog.i18nc("@label", "Gradual infill will gradually increase the amount of infill towards the top.")) // percentageMax: 89,
// stepsMin: -1,
onExited: base.hideTooltip() // stepsMax: 0,
// icon: "dense"
} // })
// infillModel.append({
Label // percentageMin: 90,
{ // percentageMax: 9999999999,
id: gradualInfillLabel // stepsMin: -1,
height: parent.height // stepsMax: 0,
anchors.left: enableGradualInfillCheckBox.right // icon: "solid"
anchors.leftMargin: Math.round(UM.Theme.getSize("thick_margin").width / 2) // })
verticalAlignment: Text.AlignVCenter; // infillModel.append({
text: catalog.i18nc("@label", "Enable gradual") // percentageMin: 0,
font: UM.Theme.getFont("default") // percentageMax: 9999999999,
color: UM.Theme.getColor("text") // stepsMin: 1,
} // stepsMax: 9999999999,
} // icon: "gradual"
// })
// Infill list model for mapping icon // }
ListModel // }
{
id: infillModel
Component.onCompleted:
{
infillModel.append({
percentageMin: -1,
percentageMax: 0,
stepsMin: -1,
stepsMax: 0,
icon: "hollow"
})
infillModel.append({
percentageMin: 0,
percentageMax: 40,
stepsMin: -1,
stepsMax: 0,
icon: "sparse"
})
infillModel.append({
percentageMin: 40,
percentageMax: 89,
stepsMin: -1,
stepsMax: 0,
icon: "dense"
})
infillModel.append({
percentageMin: 90,
percentageMax: 9999999999,
stepsMin: -1,
stepsMax: 0,
icon: "solid"
})
infillModel.append({
percentageMin: 0,
percentageMax: 9999999999,
stepsMin: 1,
stepsMax: 9999999999,
icon: "gradual"
})
}
}
} }
UM.SettingPropertyProvider UM.SettingPropertyProvider

45
resources/qml/PrintSetupSelector/Recommended/RecommendedPrintSetup.qml
View file

@ -12,10 +12,10 @@ Item
{ {
id: base id: base
height: childrenRect.height + 2 * padding
signal showTooltip(Item item, point location, string text) signal showTooltip(Item item, point location, string text)
signal hideTooltip() signal hideTooltip()
// width: parent.width
height: childrenRect.height + 2 * padding
property Action configureSettings property Action configureSettings
@ -28,24 +28,11 @@ Item
name: "cura" name: "cura"
} }
// Rectangle
// {
// width: parent.width - 2 * parent.padding
// anchors
// {
// left: parent.left
// right: parent.right
// top: parent.top
// margins: parent.padding
// }
// color: "blue"
// height: 50
// }
Column Column
{ {
width: parent.width - 2 * parent.padding width: parent.width - 2 * parent.padding
spacing: UM.Theme.getSize("default_margin").height spacing: UM.Theme.getSize("wide_margin").height
anchors anchors
{ {
left: parent.left left: parent.left
@ -55,33 +42,27 @@ Item
} }
// TODO // TODO
property real labelColumnWidth: Math.round(width / 3) property real firstColumnWidth: Math.round(width / 3)
property real settingsColumnWidth: width - labelColumnWidth
RecommendedQualityProfileSelector RecommendedQualityProfileSelector
{ {
width: parent.width width: parent.width
// TODO Create a reusable component with these properties to not define them separately for each component // TODO Create a reusable component with these properties to not define them separately for each component
property real labelColumnWidth: parent.labelColumnWidth labelColumnWidth: parent.firstColumnWidth
property real settingsColumnWidth: parent.settingsColumnWidth
} }
// RecommendedInfillDensitySelector RecommendedInfillDensitySelector
// { {
// width: parent.width width: parent.width
// height: childrenRect.height // TODO Create a reusable component with these properties to not define them separately for each component
// // TODO Create a reusable component with these properties to not define them separately for each component labelColumnWidth: parent.firstColumnWidth
// property real labelColumnWidth: parent.labelColumnWidth }
// property real settingsColumnWidth: parent.settingsColumnWidth
// }
// //
// RecommendedSupportSelector // RecommendedSupportSelector
// { // {
// width: parent.width // width: parent.width
// height: childrenRect.height
// // TODO Create a reusable component with these properties to not define them separately for each component // // TODO Create a reusable component with these properties to not define them separately for each component
// property real labelColumnWidth: parent.labelColumnWidth // property real firstColumnWidth: parent.labelColumnWidth
// property real settingsColumnWidth: parent.settingsColumnWidth
// } // }

28
resources/qml/PrintSetupSelector/Recommended/RecommendedQualityProfileSelector.qml
View file

@ -17,6 +17,9 @@ Item
id: qualityRow id: qualityRow
height: childrenRect.height height: childrenRect.height
property real labelColumnWidth: Math.round(width / 3)
property real settingsColumnWidth: width - labelColumnWidth
Timer Timer
{ {
id: qualitySliderChangeTimer id: qualitySliderChangeTimer
@ -158,6 +161,7 @@ Item
} }
} }
// Here are the elements that are shown in the left column
Item Item
{ {
id: titleRow id: titleRow
@ -210,6 +214,7 @@ Item
{ {
anchors.left: speedSlider.left anchors.left: speedSlider.left
anchors.top: speedSlider.bottom anchors.top: speedSlider.bottom
height: childrenRect.height
Repeater Repeater
{ {
@ -219,6 +224,8 @@ Item
{ {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.top: parent.top anchors.top: parent.top
// The height has to be set manually, otherwise it's not automatically calculated in the repeater
height: UM.Theme.getSize("default_margin").height
color: (Cura.MachineManager.activeMachine != null && Cura.QualityProfilesDropDownMenuModel.getItem(index).available) ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable") color: (Cura.MachineManager.activeMachine != null && Cura.QualityProfilesDropDownMenuModel.getItem(index).available) ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable")
text: text:
{ {
@ -268,7 +275,7 @@ Item
} }
} }
//Print speed slider // Print speed slider
// Two sliders are created, one at the bottom with the unavailable qualities // Two sliders are created, one at the bottom with the unavailable qualities
// and the other at the top with the available quality profiles and so the handle to select them. // and the other at the top with the available quality profiles and so the handle to select them.
Item Item
@ -287,6 +294,8 @@ Item
Slider Slider
{ {
id: unavailableSlider id: unavailableSlider
width: parent.width
height: qualitySlider.height // Same height as the slider that is on top height: qualitySlider.height // Same height as the slider that is on top
updateValueWhileDragging : false updateValueWhileDragging : false
tickmarksEnabled: true tickmarksEnabled: true
@ -297,8 +306,6 @@ Item
maximumValue: qualityModel.totalTicks maximumValue: qualityModel.totalTicks
stepSize: 1 stepSize: 1
width: parent.width
style: SliderStyle style: SliderStyle
{ {
//Draw Unvailable line //Draw Unvailable line
@ -329,7 +336,7 @@ Item
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
// Do not use Math.round otherwise the tickmarks won't be aligned // Do not use Math.round otherwise the tickmarks won't be aligned
x: ((UM.Theme.getSize("print_setup_slider_handle").width / 2) - (UM.Theme.getSize("print_setup_slider_tickmarks").width / 2) + (qualityModel.qualitySliderStepWidth * index)) x: ((UM.Theme.getSize("print_setup_slider_handle").width / 2) - (implicitWidth / 2) + (qualityModel.qualitySliderStepWidth * index))
radius: Math.round(implicitWidth / 2) radius: Math.round(implicitWidth / 2)
} }
} }
@ -354,11 +361,19 @@ Item
Slider Slider
{ {
id: qualitySlider id: qualitySlider
width: qualityModel.qualitySliderStepWidth * (qualityModel.availableTotalTicks - 1) + UM.Theme.getSize("print_setup_slider_handle").width
height: UM.Theme.getSize("print_setup_slider_handle").height // The handle is the widest element of the slider height: UM.Theme.getSize("print_setup_slider_handle").height // The handle is the widest element of the slider
enabled: qualityModel.totalTicks > 0 && !Cura.SimpleModeSettingsManager.isProfileCustomized enabled: qualityModel.totalTicks > 0 && !Cura.SimpleModeSettingsManager.isProfileCustomized
visible: qualityModel.availableTotalTicks > 0 visible: qualityModel.availableTotalTicks > 0
updateValueWhileDragging : false updateValueWhileDragging : false
anchors
{
right: parent.right
rightMargin: qualityModel.qualitySliderMarginRight
}
minimumValue: qualityModel.qualitySliderAvailableMin >= 0 ? qualityModel.qualitySliderAvailableMin : 0 minimumValue: qualityModel.qualitySliderAvailableMin >= 0 ? qualityModel.qualitySliderAvailableMin : 0
// maximumValue must be greater than minimumValue to be able to see the handle. While the value is strictly // maximumValue must be greater than minimumValue to be able to see the handle. While the value is strictly
// speaking not always correct, it seems to have the correct behavior (switching from 0 available to 1 available) // speaking not always correct, it seems to have the correct behavior (switching from 0 available to 1 available)
@ -367,11 +382,6 @@ Item
value: qualityModel.qualitySliderActiveIndex value: qualityModel.qualitySliderActiveIndex
width: qualityModel.qualitySliderStepWidth * (qualityModel.availableTotalTicks - 1) + UM.Theme.getSize("print_setup_slider_handle").width
anchors.right: parent.right
anchors.rightMargin: qualityModel.qualitySliderMarginRight
style: SliderStyle style: SliderStyle
{ {
// Draw Available line // Draw Available line