From bd6bb872b7cf8c7aac8e53ca14cd8da715e0f7e7 Mon Sep 17 00:00:00 2001 From: alekseisasin Date: Thu, 21 Sep 2017 15:24:40 +0200 Subject: [PATCH] Changed Quality slider CURA-4182 --- resources/qml/SidebarSimple.qml | 589 ++++++++++++++------------------ 1 file changed, 260 insertions(+), 329 deletions(-) diff --git a/resources/qml/SidebarSimple.qml b/resources/qml/SidebarSimple.qml index 9bd5c7590a..072b6d2ee7 100644 --- a/resources/qml/SidebarSimple.qml +++ b/resources/qml/SidebarSimple.qml @@ -40,74 +40,20 @@ Item // // Quality profile // - Text + Rectangle { - id: resolutionLabel - anchors.top: resolutionSlider.top - anchors.left: parent.left - anchors.leftMargin: UM.Theme.getSize("sidebar_margin").width - text: catalog.i18nc("@label", "Layer Height") - font: UM.Theme.getFont("default") - color: UM.Theme.getColor("text") - } - - Text - { - id: speedLabel - anchors.bottom: resolutionSlider.bottom - anchors.left: parent.left - anchors.leftMargin: UM.Theme.getSize("sidebar_margin").width - - text: catalog.i18nc("@label", "Print Speed") - font: UM.Theme.getFont("default") - color: UM.Theme.getColor("text") - } - - Text - { - id: speedLabelSlower - anchors.bottom: speedLabel.bottom - anchors.left: resolutionSlider.left - - text: catalog.i18nc("@label", "Slower") - font: UM.Theme.getFont("default") - color: UM.Theme.getColor("text") - horizontalAlignment: Text.AlignLeft - } - - Text - { - id: speedLabelFaster - anchors.bottom: speedLabel.bottom - anchors.right: resolutionSlider.right - - text: catalog.i18nc("@label", "Faster") - font: UM.Theme.getFont("default") - color: UM.Theme.getColor("text") - horizontalAlignment: Text.AlignRight - } - - Item - { - id: resolutionSlider - anchors.top: parent.top - anchors.left: infillCellRight.left - anchors.right: infillCellRight.right - - width: UM.Theme.getSize("sidebar").width * .55 - height: UM.Theme.getSize("quality_slider_bar").height * 25 - - property var model: Cura.ProfilesModel - - Connections - { - target: Cura.ProfilesModel - onItemsChanged: - { - resolutionSlider.updateCurrentQualityIndex(); - resolutionSlider.updateBar(); + Timer { + id: qualitySliderChangeTimer + interval: 50 + running: false + repeat: false + onTriggered: Cura.MachineManager.setActiveQuality(Cura.ProfilesModel.getItem(qualityRowSlider.value).id) } + + Component.onCompleted: + { + qualityRow.updateAvailableTotalTicks() } Connections @@ -115,287 +61,271 @@ Item target: Cura.MachineManager onActiveQualityChanged: { - resolutionSlider.updateCurrentQualityIndex(); - resolutionSlider.updateBar(); + qualityRow.updateAvailableTotalTicks() } } + /* Component.onCompleted: { updateCurrentQualityIndex(); updateBar(); } + */ - function updateCurrentQualityIndex() + id: qualityRow + + property var totalTicks: 0 + property var availableTotalTicks: 0 + property var qualitySliderStep: qualityRow.totalTicks != 0 ? (base.width * 0.55) / (qualityRow.totalTicks) : 0 + property var qualitySliderSelectedValue: 0 + + property var sliderAvailableMin : 0 + property var sliderAvailableMax : 0 + property var sliderMarginRight : 0 + + function updateAvailableTotalTicks() { - for (var i = 0; i < resolutionSlider.model.rowCount(); ++i) + qualityRow.totalTicks = Cura.ProfilesModel.rowCount() - 1 // minus one, because slider starts from 0 + + var availableMin = -1 + var availableMax = -1 + + for (var i = 0; i <= Cura.ProfilesModel.rowCount(); i++) { - if (Cura.MachineManager.activeQualityId == resolutionSlider.model.getItem(i).id) + //Find slider range, min and max value + if (availableMin == -1 && Cura.ProfilesModel.getItem(i).available) { - if (resolutionSlider.currentQualityIndex != i) + availableMin = i + availableMax = i + } + else if(Cura.ProfilesModel.getItem(i).available) + { + availableMax = i + } + + //Find selected value + if(Cura.MachineManager.activeQualityId == Cura.ProfilesModel.getItem(i).id) + { + qualitySliderSelectedValue = i + } + } + + if(availableMin !=-1) + { + availableTotalTicks = availableMax - availableMin + } + else + { + availableTotalTicks = -1 + } + + qualitySliderStep = qualityRow.totalTicks != 0 ? (base.width * 0.55) / (qualityRow.totalTicks) : 0 + + if(availableMin == -1) + { + sliderMarginRight = base.width * 0.55 + } + else if (availableMin == 0 && availableMax == 0) + { + sliderMarginRight = base.width * 0.55 + } + else if(availableMin == availableMax) + { + sliderMarginRight = (qualityRow.totalTicks - availableMin) * qualitySliderStep + } + else if(availableMin != availableMax) + { + sliderMarginRight = (qualityRow.totalTicks - availableMax) * qualitySliderStep + } + + + qualityRow.sliderAvailableMin = availableMin + qualityRow.sliderAvailableMax = availableMax + + //console.log("==>>FIND.availableMin: " + availableMin) + //console.log("==>>FIND.availableMax: " + availableMax) + //console.log("==>>FIND.qualitySliderSelectedValue: " + qualitySliderSelectedValue) + //console.log("==>>FIND.sliderMarginRightVALUE: "+ sliderMarginRight) + + } + + height: UM.Theme.getSize("sidebar_margin").height + + anchors.topMargin: UM.Theme.getSize("sidebar_margin").height + anchors.left: parent.left + anchors.leftMargin: UM.Theme.getSize("sidebar_margin").width + anchors.right: parent.right + + Text + { + id: qualityRowTitle + text: catalog.i18nc("@label", "Layer Height") + font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") + } + + //Show titles for the each quality slider ticks + Item + { + y: -5; + anchors.left: speedSlider.left + Repeater + { + model: qualityRow.totalTicks + 1 + Text + { + anchors.verticalCenter: parent.verticalCenter + anchors.top: parent.top + anchors.topMargin: UM.Theme.getSize("sidebar_margin").height / 2 + color: UM.Theme.getColor("text") + text: { - resolutionSlider.currentQualityIndex = i; + return Cura.ProfilesModel.getItem(index).layer_height_without_unit } - return; - } - } - resolutionSlider.currentQualityIndex = undefined; - backgroundBarUpdateTimer.start(); - } - - function updateBar() - { - fullRangeMax = Cura.ProfilesModel.rowCount(); - - // set avaiableMin - var foundAvaiableMin = false; - for (var i = 0; i < Cura.ProfilesModel.rowCount(); ++i) - { - if (Cura.ProfilesModel.getItem(i).available) - { - avaiableMin = i; - foundAvaiableMin = true; - break; - } - } - if (!foundAvaiableMin) - { - avaiableMin = undefined; - } - - var foundAvaiableMax = false; - for (var i = Cura.ProfilesModel.rowCount() - 1; i >= 0; --i) - { - if (Cura.ProfilesModel.getItem(i).available) - { - avaiableMax = i; - foundAvaiableMax = true; - break; - } - } - if (!foundAvaiableMax) - { - avaiableMax = undefined; - } - - currentHover = undefined; - backgroundBar.requestPaint(); - } - - property var fullRangeMin: 0 - property var fullRangeMax: model.rowCount() - - property var avaiableMin - property var avaiableMax - property var currentQualityIndex - property var currentHover - - //TODO: get from theme - property var barLeftRightMargin: 5 - property var tickLeftRightMargin: 2 - property var tickMargin: 15 - property var tickThickness: 1 - property var tickWidth: 1 - property var tickHeight: 5 - property var tickTextHeight: 8 - property var totalTickCount: fullRangeMax - fullRangeMin - property var selectedCircleDiameter: 10 - - property var showQualityText: false - - property var tickStepSize: (width - (barLeftRightMargin + tickLeftRightMargin) * 2) / (totalTickCount > 1 ? totalTickCount - 1 : 1) - property var tickAreaList: - { - var area_list = []; - if (avaiableMin != undefined && avaiableMax != undefined) - { - for (var i = avaiableMin; i <= avaiableMax; ++i) - { - var start_x = (barLeftRightMargin + tickLeftRightMargin) + tickStepSize * (i - fullRangeMin); - var diameter = tickStepSize * 0.9; - start_x = start_x + tickWidth / 2 - (diameter / 2); - var end_x = start_x + diameter; - var start_y = height / 2 - diameter / 2; - var end_y = start_y + diameter; - - var area = {"id": i, - "start_x": start_x, "end_x": end_x, - "start_y": start_y, "end_y": end_y, - }; - area_list.push(area); - } - } - return area_list; - } - - onCurrentHoverChanged: - { - backgroundBar.requestPaint(); - } - onCurrentQualityIndex: - { - backgroundBar.requestPaint(); - } - - // background bar - Canvas - { - id: backgroundBar - anchors.fill: parent - - Timer { - id: backgroundBarUpdateTimer - interval: 10 - running: false - repeat: false - onTriggered: backgroundBar.requestPaint() - } - - onPaint: - { - var ctx = getContext("2d"); - ctx.reset(); - ctx.fillStyle = UM.Theme.getColor("quality_slider_unavailable"); - - const bar_left_right_margin = resolutionSlider.barLeftRightMargin; - const tick_left_right_margin = resolutionSlider.tickLeftRightMargin; - const tick_margin = resolutionSlider.tickMargin; - const bar_thickness = resolutionSlider.tickThickness; - const tick_width = resolutionSlider.tickWidth; - const tick_height = resolutionSlider.tickHeight; - const tick_text_height = resolutionSlider.tickTextHeight; - const selected_circle_diameter = resolutionSlider.selectedCircleDiameter; - - // draw unavailable bar - const bar_top = parent.height / 2 - bar_thickness / 2; - ctx.fillRect(bar_left_right_margin, bar_top, width - bar_left_right_margin * 2, bar_thickness); - - // draw unavailable ticks - var total_tick_count = resolutionSlider.totalTickCount; - const step_size = resolutionSlider.tickStepSize; - var current_start_x = bar_left_right_margin + tick_left_right_margin; - - const tick_top = parent.height / 2 - tick_height / 2; - - for (var i = 0; i < total_tick_count; ++i) - { - ctx.fillRect(current_start_x, tick_top, tick_width, tick_height); - current_start_x += step_size; - } - - // draw available bar and ticks - if (resolutionSlider.avaiableMin != undefined && resolutionSlider.avaiableMax != undefined) - { - current_start_x = (bar_left_right_margin + tick_left_right_margin) + step_size * (resolutionSlider.avaiableMin - resolutionSlider.fullRangeMin); - ctx.fillStyle = UM.Theme.getColor("quality_slider_available"); - total_tick_count = resolutionSlider.avaiableMax - resolutionSlider.avaiableMin + 1; - - const available_bar_width = step_size * (total_tick_count - 1); - ctx.fillRect(current_start_x, bar_top, available_bar_width, bar_thickness); - - for (var i = 0; i < total_tick_count; ++i) + width: 1 + x: { - ctx.fillRect(current_start_x, tick_top, tick_width, tick_height); - current_start_x += step_size; + if(index != qualityRow.totalTicks) + return (base.width * 0.55 / qualityRow.totalTicks) * index; + else + return (base.width * 0.55 / qualityRow.totalTicks) * index - 15; } } + } + } - // print the selected circle - if (resolutionSlider.currentQualityIndex != undefined) - { - var circle_start_x = (bar_left_right_margin + tick_left_right_margin) + step_size * (resolutionSlider.currentQualityIndex - resolutionSlider.fullRangeMin); - circle_start_x = circle_start_x + tick_width / 2 - selected_circle_diameter / 2; - var circle_start_y = height / 2 - selected_circle_diameter / 2; - ctx.fillStyle = UM.Theme.getColor("quality_slider_handle"); - ctx.beginPath(); - ctx.ellipse(circle_start_x, circle_start_y, selected_circle_diameter, selected_circle_diameter); - ctx.fill(); - ctx.closePath(); - } + //Print speed slider + Item + { + id: speedSlider + width: base.width * 0.55 + height: UM.Theme.getSize("sidebar_margin").height + anchors.right: parent.right + anchors.top: parent.top + anchors.topMargin: UM.Theme.getSize("sidebar_margin").height - // print the hovered circle - if (resolutionSlider.currentHover != undefined && resolutionSlider.currentHover != resolutionSlider.currentQualityIndex) - { - var circle_start_x = (bar_left_right_margin + tick_left_right_margin) + step_size * (resolutionSlider.currentHover - resolutionSlider.fullRangeMin); - circle_start_x = circle_start_x + tick_width / 2 - selected_circle_diameter / 2; - var circle_start_y = height / 2 - selected_circle_diameter / 2; - ctx.fillStyle = UM.Theme.getColor("quality_slider_handle_hover"); - ctx.beginPath(); - ctx.ellipse(circle_start_x, circle_start_y, selected_circle_diameter, selected_circle_diameter); - ctx.fill(); - ctx.closePath(); - } + // Draw Unavailable line + Rectangle + { + id: groovechildrect + width: base.width * 0.55 + height: 2 + color: UM.Theme.getColor("quality_slider_unavailable") + //radius: parent.radius + y: 9 + x: 0 + } - // print layer height texts - total_tick_count = resolutionSlider.totalTickCount; - const step_size = resolutionSlider.tickStepSize; - current_start_x = bar_left_right_margin + tick_left_right_margin; - for (var i = 0; i < total_tick_count; ++i) - { - const text_top = parent.height / 2 - tick_height - tick_text_height; - ctx.fillStyle = UM.Theme.getColor("quality_slider_text"); - - ctx.font = "12px sans-serif"; - const string_length = resolutionSlider.model.getItem(i).layer_height_without_unit.length; - const offset = string_length / 2 * 4; - - var start_x = current_start_x - offset; - if (i == 0) - { - start_x = 0; - } - else if (i == total_tick_count - 1) - { - start_x = current_start_x - offset * 2.5; - } - - ctx.fillText(resolutionSlider.model.getItem(i).layer_height_without_unit, start_x, text_top); - current_start_x += step_size; + // Draw ticks + Repeater + { + id: qualityRepeater + model: qualityRow.totalTicks + 1 + Rectangle { + anchors.verticalCenter: parent.verticalCenter + color: qualityRow.availableTotalTicks != 0 ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable") + width: 1 + height: 6 + y: 0 + x: qualityRow.qualitySliderStep * index } } - MouseArea + + Slider { - anchors.fill: parent - hoverEnabled: true - onClicked: + id: qualityRowSlider + height: UM.Theme.getSize("sidebar_margin").height + anchors.bottom: speedSlider.bottom + enabled: qualityRow.availableTotalTicks != 0 + updateValueWhileDragging : false + + minimumValue: qualityRow.sliderAvailableMin + maximumValue: qualityRow.sliderAvailableMax + stepSize: 1 + + value: qualityRow.qualitySliderSelectedValue + + width:{ + return qualityRow.qualitySliderStep * (qualityRow.availableTotalTicks) + } + + anchors.right: parent.right + anchors.rightMargin:{ + return qualityRow.sliderMarginRight + } + + style: SliderStyle { - for (var i = 0; i < resolutionSlider.tickAreaList.length; ++i) - { - var area = resolutionSlider.tickAreaList[i]; - if (area.start_x <= mouseX && mouseX <= area.end_x && area.start_y <= mouseY && mouseY <= area.end_y) - { - resolutionSlider.currentHover = undefined; - resolutionSlider.currentQualityIndex = area.id; - - Cura.MachineManager.setActiveQuality(resolutionSlider.model.getItem(resolutionSlider.currentQualityIndex).id); - return; + //Draw Available line + groove: Rectangle { + implicitHeight: 2 + color: UM.Theme.getColor("quality_slider_available") + radius: 1 + } + handle: Item { + Rectangle { + id: qualityhandleButton + anchors.centerIn: parent + color: control.enabled ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable") + implicitWidth: 10 + implicitHeight: 10 + radius: 10 } } - resolutionSlider.currentHover = undefined; } - onPositionChanged: - { - for (var i = 0; i < resolutionSlider.tickAreaList.length; ++i) + + onValueChanged: { + + //Prevent updating during view initializing. Trigger only if the value changed by user + if(qualityRowSlider.value != qualityRow.qualitySliderSelectedValue) { - var area = resolutionSlider.tickAreaList[i]; - if (area.start_x <= mouseX && mouseX <= area.end_x && area.start_y <= mouseY && mouseY <= area.end_y) - { - resolutionSlider.currentHover = area.id; - return; - } + //start updating with short delay + qualitySliderChangeTimer.start(); } - resolutionSlider.currentHover = undefined; - } - onExited: - { - resolutionSlider.currentHover = undefined; } } } + + Text + { + id: speedLabel + anchors.top: speedSlider.bottom + + anchors.left: parent.left + + text: catalog.i18nc("@label", "Print Speed") + font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") + } + + Text + { + anchors.bottom: speedLabel.bottom + anchors.left: speedSlider.left + + text: catalog.i18nc("@label", "Slower") + font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") + horizontalAlignment: Text.AlignLeft + } + + Text + { + anchors.bottom: speedLabel.bottom + anchors.right: speedSlider.right + + text: catalog.i18nc("@label", "Faster") + font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") + horizontalAlignment: Text.AlignRight + } } + + // // Infill // @@ -403,12 +333,11 @@ Item { id: infillCellLeft - anchors.top: speedLabel.bottom + anchors.top: qualityRow.bottom anchors.topMargin: UM.Theme.getSize("sidebar_margin").height anchors.left: parent.left width: UM.Theme.getSize("sidebar").width * .45 - UM.Theme.getSize("sidebar_margin").width - height: UM.Theme.getSize("sidebar_margin").height Text { @@ -418,12 +347,14 @@ Item color: UM.Theme.getColor("text") anchors.top: parent.top - anchors.topMargin: UM.Theme.getSize("sidebar_margin").height + anchors.topMargin: UM.Theme.getSize("sidebar_margin").height * 1.7 anchors.left: parent.left anchors.leftMargin: UM.Theme.getSize("sidebar_margin").width } } + + Item { id: infillCellRight @@ -438,7 +369,7 @@ Item Text { id: selectedInfillRateText - anchors.top: parent.top + //anchors.top: parent.top anchors.left: infillSlider.left anchors.leftMargin: (infillSlider.value / infillSlider.stepSize) * (infillSlider.width / (infillSlider.maximumValue / infillSlider.stepSize)) - 10 anchors.right: parent.right @@ -455,10 +386,9 @@ Item anchors.top: selectedInfillRateText.bottom anchors.left: parent.left - anchors.right: infillIcon.left - anchors.rightMargin: UM.Theme.getSize("sidebar_margin").width height: UM.Theme.getSize("sidebar_margin").height + width: infillCellRight.width - UM.Theme.getSize("sidebar_margin").width - style.handleWidth minimumValue: 0 maximumValue: 100 @@ -477,6 +407,7 @@ Item style: SliderStyle { + groove: Rectangle { id: groove implicitWidth: 200 @@ -485,13 +416,15 @@ Item radius: 1 } - handle: Rectangle { - id: handleButton - anchors.centerIn: parent - color: control.enabled ? UM.Theme.getColor("quality_slider_available") : UM.Theme.getColor("quality_slider_unavailable") - implicitWidth: 10 - implicitHeight: 10 - radius: 10 + 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 + implicitHeight: 10 + radius: 10 + } } tickmarks: Repeater { @@ -511,8 +444,6 @@ Item Item { - id: infillIcon - width: (infillCellRight.width / 5) - (UM.Theme.getSize("sidebar_margin").width) height: width @@ -549,6 +480,7 @@ Item visible: infillIconList.activeIndex == index UM.RecolorImage { + id: infillIcon anchors.fill: parent sourceSize.width: width sourceSize.height: width @@ -602,7 +534,6 @@ Item text: catalog.i18nc("@label", "Enable gradual") font: UM.Theme.getFont("default") color: UM.Theme.getColor("text") - elide: Text.ElideRight } } @@ -659,8 +590,8 @@ Item id: enableSupportLabel visible: enableSupportCheckBox.visible - anchors.top: enableSupportCheckBox.top - + anchors.top: infillCellRight.bottom + anchors.topMargin: UM.Theme.getSize("sidebar_margin").height anchors.left: parent.left anchors.leftMargin: UM.Theme.getSize("sidebar_margin").width anchors.verticalCenter: enableSupportCheckBox.verticalCenter @@ -676,7 +607,7 @@ Item property alias _hovered: enableSupportMouseArea.containsMouse anchors.top: infillCellRight.bottom - anchors.topMargin: UM.Theme.getSize("sidebar_margin").height * 2 + anchors.topMargin: UM.Theme.getSize("sidebar_margin").height anchors.left: infillCellRight.left style: UM.Theme.styles.checkbox;