Format the slider for the infill in the recommended mode

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

View file

@ -25,7 +25,7 @@ Item
{
id: header
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
{

View file

@ -15,57 +15,37 @@ import Cura 1.0 as Cura
Item
{
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
{
id: infillRowTitle
source: UM.Theme.getIcon("category_infill")
text: catalog.i18nc("@label", "Infill") + " (%)"
anchors.bottom: parent.bottom
width: labelColumnWidth
}
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.left: infillRowTitle.right
anchors.right: parent.right
Label
anchors
{
id: selectedInfillRateText
anchors.left: infillSlider.left
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)
left: infillRowTitle.right
right: parent.right
verticalCenter: infillRowTitle.verticalCenter
}
Slider
{
id: infillSlider
anchors.top: selectedInfillRateText.bottom
anchors.left: parent.left
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)
width: parent.width
height: UM.Theme.getSize("print_setup_slider_handle").height // The handle is the widest element of the slider
minimumValue: 0
maximumValue: 100
@ -78,9 +58,62 @@ Item
// set initial value from stack
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:
{
// Don't round the value if it's already the same
if (parseInt(infillDensity.properties.value) == infillSlider.value)
{
@ -104,228 +137,177 @@ Item
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
{
id: handleButton
anchors.centerIn: parent
color: control.enabled ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable")
implicitWidth: 10 * screenScaleFactor
implicitHeight: 10 * screenScaleFactor
radius: 10 * screenScaleFactor
}
}
tickmarks: Repeater
{
id: repeater
model: control.maximumValue / control.stepSize + 1
// 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 shouldShowTick (index)
{
if (index % 10 == 0)
{
return true
}
return false
}
Rectangle
{
anchors.verticalCenter: parent.verticalCenter
color: control.enabled ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable")
width: 1 * screenScaleFactor
height: 6 * screenScaleFactor
x: Math.round(styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1)))
visible: shouldShowTick(index)
}
}
}
}
Rectangle
{
id: infillIcon
width: Math.round((parent.width / 5) - (UM.Theme.getSize("thick_margin").width))
height: width
anchors.right: parent.right
anchors.top: parent.top
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
{
id: infillIconList
model: infillModel
anchors.fill: parent
function activeIndex ()
{
for (var i = 0; i < infillModel.count; i++)
{
var density = Math.round(infillDensity.properties.value)
var steps = Math.round(infillSteps.properties.value)
var infillModelItem = infillModel.get(i)
if (infillModelItem != "undefined"
&& density >= infillModelItem.percentageMin
&& density <= infillModelItem.percentageMax
&& steps >= infillModelItem.stepsMin
&& steps <= infillModelItem.stepsMax)
{
return i
}
}
return -1
}
Rectangle
{
anchors.fill: parent
visible: infillIconList.activeIndex() == index
border.width: UM.Theme.getSize("default_lining").width
border.color: UM.Theme.getColor("quality_slider_unavailable")
UM.RecolorImage
{
anchors.fill: parent
anchors.margins: 2 * screenScaleFactor
sourceSize.width: width
sourceSize.height: width
source: UM.Theme.getIcon(model.icon)
color: UM.Theme.getColor("quality_slider_unavailable")
}
}
}
}
// Gradual Support Infill Checkbox
CheckBox
{
id: enableGradualInfillCheckBox
property alias _hovered: enableGradualInfillMouseArea.containsMouse
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
anchors.left: infillCellRight.left
style: UM.Theme.styles.checkbox
enabled: base.settingsEnabled
visible: infillSteps.properties.enabled == "True"
checked: parseInt(infillSteps.properties.value) > 0
MouseArea
{
id: enableGradualInfillMouseArea
anchors.fill: parent
hoverEnabled: true
enabled: true
property var previousInfillDensity: parseInt(infillDensity.properties.value)
onClicked:
{
// Set to 90% only when enabling gradual infill
var newInfillDensity;
if (parseInt(infillSteps.properties.value) == 0)
{
previousInfillDensity = parseInt(infillDensity.properties.value)
newInfillDensity = 90
} else {
newInfillDensity = previousInfillDensity
}
Cura.MachineManager.setSettingForAllExtruders("infill_sparse_density", "value", String(newInfillDensity))
var infill_steps_value = 0
if (parseInt(infillSteps.properties.value) == 0)
{
infill_steps_value = 5
}
Cura.MachineManager.setSettingForAllExtruders("gradual_infill_steps", "value", infill_steps_value)
}
onEntered: base.showTooltip(enableGradualInfillCheckBox, Qt.point(-infillCellRight.x, 0),
catalog.i18nc("@label", "Gradual infill will gradually increase the amount of infill towards the top."))
onExited: base.hideTooltip()
}
Label
{
id: gradualInfillLabel
height: parent.height
anchors.left: enableGradualInfillCheckBox.right
anchors.leftMargin: Math.round(UM.Theme.getSize("thick_margin").width / 2)
verticalAlignment: Text.AlignVCenter;
text: catalog.i18nc("@label", "Enable gradual")
font: UM.Theme.getFont("default")
color: UM.Theme.getColor("text")
}
}
// 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"
})
}
}
// Rectangle
// {
// id: infillIcon
//
// width: Math.round((parent.width / 5) - (UM.Theme.getSize("thick_margin").width))
// height: width
//
// anchors.right: parent.right
// anchors.top: parent.top
// 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
// {
// id: infillIconList
// model: infillModel
// anchors.fill: parent
//
// function activeIndex ()
// {
// for (var i = 0; i < infillModel.count; i++)
// {
// var density = Math.round(infillDensity.properties.value)
// var steps = Math.round(infillSteps.properties.value)
// var infillModelItem = infillModel.get(i)
//
// if (infillModelItem != "undefined"
// && density >= infillModelItem.percentageMin
// && density <= infillModelItem.percentageMax
// && steps >= infillModelItem.stepsMin
// && steps <= infillModelItem.stepsMax)
// {
// return i
// }
// }
// return -1
// }
//
// Rectangle
// {
// anchors.fill: parent
// visible: infillIconList.activeIndex() == index
//
// border.width: UM.Theme.getSize("default_lining").width
// border.color: UM.Theme.getColor("quality_slider_unavailable")
//
// UM.RecolorImage
// {
// anchors.fill: parent
// anchors.margins: 2 * screenScaleFactor
// sourceSize.width: width
// sourceSize.height: width
// source: UM.Theme.getIcon(model.icon)
// color: UM.Theme.getColor("quality_slider_unavailable")
// }
// }
// }
// }
//
// // Gradual Support Infill Checkbox
// CheckBox
// {
// id: enableGradualInfillCheckBox
// property alias _hovered: enableGradualInfillMouseArea.containsMouse
//
// 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
// anchors.left: infillSliderContainer.left
//
// style: UM.Theme.styles.checkbox
// enabled: base.settingsEnabled
// visible: infillSteps.properties.enabled == "True"
// checked: parseInt(infillSteps.properties.value) > 0
//
// MouseArea
// {
// id: enableGradualInfillMouseArea
//
// anchors.fill: parent
// hoverEnabled: true
// enabled: true
//
// property var previousInfillDensity: parseInt(infillDensity.properties.value)
//
// onClicked:
// {
// // Set to 90% only when enabling gradual infill
// var newInfillDensity;
// if (parseInt(infillSteps.properties.value) == 0)
// {
// previousInfillDensity = parseInt(infillDensity.properties.value)
// newInfillDensity = 90
// } else {
// newInfillDensity = previousInfillDensity
// }
// Cura.MachineManager.setSettingForAllExtruders("infill_sparse_density", "value", String(newInfillDensity))
//
// var infill_steps_value = 0
// if (parseInt(infillSteps.properties.value) == 0)
// {
// infill_steps_value = 5
// }
//
// Cura.MachineManager.setSettingForAllExtruders("gradual_infill_steps", "value", infill_steps_value)
// }
//
// onEntered: base.showTooltip(enableGradualInfillCheckBox, Qt.point(-infillSliderContainer.x, 0),
// catalog.i18nc("@label", "Gradual infill will gradually increase the amount of infill towards the top."))
//
// onExited: base.hideTooltip()
//
// }
//
// Label
// {
// id: gradualInfillLabel
// height: parent.height
// anchors.left: enableGradualInfillCheckBox.right
// anchors.leftMargin: Math.round(UM.Theme.getSize("thick_margin").width / 2)
// verticalAlignment: Text.AlignVCenter;
// text: catalog.i18nc("@label", "Enable gradual")
// font: UM.Theme.getFont("default")
// color: UM.Theme.getColor("text")
// }
// }
//
// // 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

View file

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

View file

@ -17,6 +17,9 @@ Item
id: qualityRow
height: childrenRect.height
property real labelColumnWidth: Math.round(width / 3)
property real settingsColumnWidth: width - labelColumnWidth
Timer
{
id: qualitySliderChangeTimer
@ -158,6 +161,7 @@ Item
}
}
// Here are the elements that are shown in the left column
Item
{
id: titleRow
@ -210,6 +214,7 @@ Item
{
anchors.left: speedSlider.left
anchors.top: speedSlider.bottom
height: childrenRect.height
Repeater
{
@ -219,6 +224,8 @@ Item
{
anchors.verticalCenter: parent.verticalCenter
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")
text:
{
@ -268,7 +275,7 @@ Item
}
}
//Print speed slider
// Print speed slider
// 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.
Item
@ -287,6 +294,8 @@ Item
Slider
{
id: unavailableSlider
width: parent.width
height: qualitySlider.height // Same height as the slider that is on top
updateValueWhileDragging : false
tickmarksEnabled: true
@ -297,8 +306,6 @@ Item
maximumValue: qualityModel.totalTicks
stepSize: 1
width: parent.width
style: SliderStyle
{
//Draw Unvailable line
@ -329,7 +336,7 @@ Item
anchors.verticalCenter: parent.verticalCenter
// 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)
}
}
@ -354,11 +361,19 @@ Item
Slider
{
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
enabled: qualityModel.totalTicks > 0 && !Cura.SimpleModeSettingsManager.isProfileCustomized
visible: qualityModel.availableTotalTicks > 0
updateValueWhileDragging : false
anchors
{
right: parent.right
rightMargin: qualityModel.qualitySliderMarginRight
}
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
// 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
width: qualityModel.qualitySliderStepWidth * (qualityModel.availableTotalTicks - 1) + UM.Theme.getSize("print_setup_slider_handle").width
anchors.right: parent.right
anchors.rightMargin: qualityModel.qualitySliderMarginRight
style: SliderStyle
{
// Draw Available line