From fa00a17c784f3b1e6b7a9354e31e5abad79f6c7c Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Sun, 26 Nov 2017 21:21:18 +0100 Subject: [PATCH] Make UI changes in the Simulation View for adapting the color gradient in the Feedrate color scheme. Due to the travel speed is normally very high compared with the other speeds in the model, the gradient is now gradual instead of linear in order to show more changes in the low values and less changes in the high values. Adapt also the button styles and themes' colors. Set the play/pause button to the left and reduce the size. --- plugins/SimulationView/SimulationView.qml | 61 ++++++--- plugins/SimulationView/layers3d.shader | 21 +++- .../resources/simulation_pause.svg | 116 ++++++++--------- .../resources/simulation_resume.svg | 118 +++++++++--------- resources/qml/Topbar.qml | 10 +- resources/themes/cura-dark/theme.json | 9 ++ resources/themes/cura-light/styles.qml | 94 +++++++------- resources/themes/cura-light/theme.json | 12 ++ 8 files changed, 257 insertions(+), 184 deletions(-) diff --git a/plugins/SimulationView/SimulationView.qml b/plugins/SimulationView/SimulationView.qml index bc224f19e2..6e7dec1875 100644 --- a/plugins/SimulationView/SimulationView.qml +++ b/plugins/SimulationView/SimulationView.qml @@ -97,6 +97,8 @@ Item // if we are in compatibility mode, we only show the "line type" property bool show_legend: UM.SimulationView.compatibilityMode ? true : UM.Preferences.getValue("layerview/layer_view_type") == 1 property bool show_gradient: UM.SimulationView.compatibilityMode ? false : UM.Preferences.getValue("layerview/layer_view_type") == 2 || UM.Preferences.getValue("layerview/layer_view_type") == 3 + property bool show_feedrate_gradient: show_gradient && UM.Preferences.getValue("layerview/layer_view_type") == 2 + property bool show_thickness_gradient: show_gradient && UM.Preferences.getValue("layerview/layer_view_type") == 3 property bool only_show_top_layers: UM.Preferences.getValue("view/only_show_top_layers") property int top_layer_count: UM.Preferences.getValue("view/top_layer_count") @@ -171,6 +173,9 @@ Item { // update visibility of legends viewSettings.show_legend = UM.SimulationView.compatibilityMode || (type_id == 1); + viewSettings.show_gradient = !UM.SimulationView.compatibilityMode && (type_id == 2 || type_id == 3); + viewSettings.show_feedrate_gradient = viewSettings.show_gradient && (type_id == 2); + viewSettings.show_thickness_gradient = viewSettings.show_gradient && (type_id == 3); } } @@ -451,11 +456,42 @@ Item } } - // Gradient colors for feedrate and thickness + // Gradient colors for feedrate Rectangle { // In QML 5.9 can be changed by LinearGradient // Invert values because then the bar is rotated 90 degrees - id: gradient - visible: viewSettings.show_gradient + id: feedrateGradient + visible: viewSettings.show_feedrate_gradient + anchors.left: parent.right + height: parent.width + width: UM.Theme.getSize("layerview_row").height * 1.5 + border.width: UM.Theme.getSize("default_lining").width + border.color: UM.Theme.getColor("lining") + transform: Rotation {origin.x: 0; origin.y: 0; angle: 90} + gradient: Gradient { + GradientStop { + position: 0.000 + color: Qt.rgba(1, 0.5, 0, 1) + } + GradientStop { + position: 0.625 + color: Qt.rgba(0.375, 0.5, 0, 1) + } + GradientStop { + position: 0.75 + color: Qt.rgba(0.25, 1, 0, 1) + } + GradientStop { + position: 1.0 + color: Qt.rgba(0, 0, 1, 1) + } + } + } + + // Gradient colors for layer thickness + Rectangle { // In QML 5.9 can be changed by LinearGradient + // Invert values because then the bar is rotated 90 degrees + id: thicknessGradient + visible: viewSettings.show_thickness_gradient anchors.left: parent.right height: parent.width width: UM.Theme.getSize("layerview_row").height * 1.5 @@ -469,15 +505,15 @@ Item } GradientStop { position: 0.25 - color: Qt.rgba(0.75, 0.5, 0.25, 1) + color: Qt.rgba(0.5, 0.5, 0, 1) } GradientStop { position: 0.5 - color: Qt.rgba(0.5, 1, 0.5, 1) + color: Qt.rgba(0, 1, 0, 1) } GradientStop { position: 0.75 - color: Qt.rgba(0.25, 0.5, 0.75, 1) + color: Qt.rgba(0, 0.5, 0.5, 1) } GradientStop { position: 1.0 @@ -504,9 +540,9 @@ Item id: pathSlider height: UM.Theme.getSize("slider_handle").width - anchors.right: playButton.left - anchors.rightMargin: UM.Theme.getSize("default_margin").width - anchors.left: parent.left + anchors.left: playButton.right + anchors.leftMargin: UM.Theme.getSize("default_margin").width + anchors.right: parent.right visible: !UM.SimulationView.compatibilityMode // custom properties @@ -540,7 +576,7 @@ Item height: UM.Theme.getSize("layerview_menu_size").height anchors { - top: !UM.SimulationView.compatibilityMode ? playButton.bottom : parent.top + top: !UM.SimulationView.compatibilityMode ? pathSlider.bottom : parent.top topMargin: !UM.SimulationView.compatibilityMode ? UM.Theme.getSize("default_margin").height : 0 right: parent.right rightMargin: UM.Theme.getSize("slider_layerview_margin").width @@ -578,13 +614,10 @@ Item // Play simulation button Button { id: playButton - implicitWidth: Math.floor(UM.Theme.getSize("button").width * 0.75) - implicitHeight: Math.floor(UM.Theme.getSize("button").height * 0.75) iconSource: "./resources/simulation_resume.svg" - style: UM.Theme.styles.tool_button + style: UM.Theme.styles.small_tool_button visible: !UM.SimulationView.compatibilityMode anchors { - horizontalCenter: layerSlider.horizontalCenter verticalCenter: pathSlider.verticalCenter } diff --git a/plugins/SimulationView/layers3d.shader b/plugins/SimulationView/layers3d.shader index f377fca055..2633b54787 100644 --- a/plugins/SimulationView/layers3d.shader +++ b/plugins/SimulationView/layers3d.shader @@ -38,12 +38,25 @@ vertex41core = out highp vec3 f_vertex; out highp vec3 f_normal; - vec4 gradientColor(float abs_value, float min_value, float max_value) + vec4 feedrateGradientColor(float abs_value, float min_value, float max_value) { float value = (abs_value - min_value)/(max_value - min_value); float red = value; + float green = 1-abs(1-4*value); + if (value > 0.375) + { + green = 0.5; + } + float blue = max(1-4*value, 0); + return vec4(red, green, blue, 1.0); + } + + vec4 layerThicknessGradientColor(float abs_value, float min_value, float max_value) + { + float value = (abs_value - min_value)/(max_value - min_value); + float red = max(2*value-1, 0); float green = 1-abs(1-2*value); - float blue = 1-value; + float blue = max(1-2*value, 0); return vec4(red, green, blue, 1.0); } @@ -64,10 +77,10 @@ vertex41core = v_color = a_color; break; case 2: // "Feedrate" - v_color = gradientColor(a_feedrate, u_min_feedrate, u_max_feedrate); + v_color = feedrateGradientColor(a_feedrate, u_min_feedrate, u_max_feedrate); break; case 3: // "Layer thickness" - v_color = gradientColor(a_line_dim.y, u_min_thickness, u_max_thickness); + v_color = layerThicknessGradientColor(a_line_dim.y, u_min_thickness, u_max_thickness); break; } diff --git a/plugins/SimulationView/resources/simulation_pause.svg b/plugins/SimulationView/resources/simulation_pause.svg index 67f7deea5d..652434bd44 100644 --- a/plugins/SimulationView/resources/simulation_pause.svg +++ b/plugins/SimulationView/resources/simulation_pause.svg @@ -1,4 +1,6 @@ + + + id="svg877" + inkscape:version="0.92.2 (5c3e80d, 2017-08-06)" + sodipodi:docname="simulation_pause2.svg"> + + + id="metadata874"> image/svg+xml + - - - - - - - + + + + + + diff --git a/plugins/SimulationView/resources/simulation_resume.svg b/plugins/SimulationView/resources/simulation_resume.svg index a8ed8e79a3..912a2ac418 100644 --- a/plugins/SimulationView/resources/simulation_resume.svg +++ b/plugins/SimulationView/resources/simulation_resume.svg @@ -1,4 +1,6 @@ + + + id="svg8" + inkscape:version="0.92.2 (5c3e80d, 2017-08-06)" + sodipodi:docname="simulation_resume2.svg"> + + + id="metadata5"> image/svg+xml + - - - - - - + + + diff --git a/resources/qml/Topbar.qml b/resources/qml/Topbar.qml index 6085c6fe7e..db9abafb5c 100644 --- a/resources/qml/Topbar.qml +++ b/resources/qml/Topbar.qml @@ -240,7 +240,7 @@ Rectangle Button { iconSource: UM.Theme.getIcon("view_3d") - style: UM.Theme.styles.orientation_button + style: UM.Theme.styles.small_tool_button anchors.verticalCenter: viewOrientationControl.verticalCenter onClicked:{ UM.Controller.rotateView("3d", 0); @@ -252,7 +252,7 @@ Rectangle Button { iconSource: UM.Theme.getIcon("view_front") - style: UM.Theme.styles.orientation_button + style: UM.Theme.styles.small_tool_button anchors.verticalCenter: viewOrientationControl.verticalCenter onClicked:{ UM.Controller.rotateView("home", 0); @@ -264,7 +264,7 @@ Rectangle Button { iconSource: UM.Theme.getIcon("view_top") - style: UM.Theme.styles.orientation_button + style: UM.Theme.styles.small_tool_button anchors.verticalCenter: viewOrientationControl.verticalCenter onClicked:{ UM.Controller.rotateView("y", 90); @@ -276,7 +276,7 @@ Rectangle Button { iconSource: UM.Theme.getIcon("view_left") - style: UM.Theme.styles.orientation_button + style: UM.Theme.styles.small_tool_button anchors.verticalCenter: viewOrientationControl.verticalCenter onClicked:{ UM.Controller.rotateView("x", 90); @@ -288,7 +288,7 @@ Rectangle Button { iconSource: UM.Theme.getIcon("view_right") - style: UM.Theme.styles.orientation_button + style: UM.Theme.styles.small_tool_button anchors.verticalCenter: viewOrientationControl.verticalCenter onClicked:{ UM.Controller.rotateView("x", -90); diff --git a/resources/themes/cura-dark/theme.json b/resources/themes/cura-dark/theme.json index 5cfed426e5..9e99945d3d 100644 --- a/resources/themes/cura-dark/theme.json +++ b/resources/themes/cura-dark/theme.json @@ -55,6 +55,15 @@ "button_disabled": [39, 44, 48, 255], "button_disabled_text": [255, 255, 255, 101], + "small_button": [39, 44, 48, 0], + "small_button_hover": [39, 44, 48, 255], + "small_button_active": [67, 72, 75, 255], + "small_button_active_hover": [67, 72, 75, 255], + "small_button_text": [255, 255, 255, 197], + "small_button_text_hover": [255, 255, 255, 255], + "small_button_text_active": [255, 255, 255, 255], + "small_button_text_active_hover": [255, 255, 255, 255], + "button_tooltip": [39, 44, 48, 255], "button_tooltip_border": [39, 44, 48, 255], "button_tooltip_text": [255, 255, 255, 172], diff --git a/resources/themes/cura-light/styles.qml b/resources/themes/cura-light/styles.qml index 0f3c910270..0de761b7d9 100755 --- a/resources/themes/cura-light/styles.qml +++ b/resources/themes/cura-light/styles.qml @@ -295,16 +295,26 @@ QtObject { anchors.fill: parent; property bool down: control.pressed || (control.checkable && control.checked); - color: { - if(control.customColor !== undefined && control.customColor !== null) { + color: + { + if(control.customColor !== undefined && control.customColor !== null) + { return control.customColor - } else if(control.checkable && control.checked && control.hovered) { + } + else if(control.checkable && control.checked && control.hovered) + { return Theme.getColor("button_active_hover"); - } else if(control.pressed || (control.checkable && control.checked)) { + } + else if(control.pressed || (control.checkable && control.checked)) + { return Theme.getColor("button_active"); - } else if(control.hovered) { + } + else if(control.hovered) + { return Theme.getColor("button_hover"); - } else { + } + else + { return Theme.getColor("button"); } } @@ -381,30 +391,39 @@ QtObject { } } - property Component orientation_button: Component { + property Component small_tool_button: Component { ButtonStyle { background: Item { - implicitWidth: 25; - implicitHeight: 25; + implicitWidth: Theme.getSize("small_button").width; + implicitHeight: Theme.getSize("small_button").height; Rectangle { - id: buttonFace2; + id: smallButtonFace; anchors.fill: parent; property bool down: control.pressed || (control.checkable && control.checked); - color: { - if(control.customColor !== undefined && control.customColor !== null) { + color: + { + if(control.customColor !== undefined && control.customColor !== null) + { return control.customColor - } else if(control.checkable && control.checked && control.hovered) { - return Theme.getColor("button_active_hover"); - } else if(control.pressed || (control.checkable && control.checked)) { - return Theme.getColor("button_active"); - } else if(control.hovered) { - return Theme.getColor("button_hover"); - } else { - //return Theme.getColor("button"); - return "transparent" + } + else if(control.checkable && control.checked && control.hovered) + { + return Theme.getColor("small_button_active_hover"); + } + else if(control.pressed || (control.checkable && control.checked)) + { + return Theme.getColor("small_button_active"); + } + else if(control.hovered) + { + return Theme.getColor("small_button_hover"); + } + else + { + return Theme.getColor("small_button"); } } Behavior on color { ColorAnimation { duration: 50; } } @@ -413,17 +432,10 @@ QtObject { border.color: Theme.getColor("tool_button_border") UM.RecolorImage { - id: tool_button_arrow2 - //anchors.right: parent.right; - //anchors.rightMargin: (Theme.getSize("button").width - Theme.getSize("button_icon").width) / 4 - //anchors.bottom: parent.bottom; - //anchors.bottomMargin: (Theme.getSize("button").height - Theme.getSize("button_icon").height) / 4 - //width: Theme.getSize("standard_arrow").width - //height: Theme.getSize("standard_arrow").height + id: smallToolButtonArrow width: 5 height: 5 - sourceSize.width: 5 sourceSize.height: 5 visible: control.menu != null; @@ -431,19 +443,19 @@ QtObject { { if(control.checkable && control.checked && control.hovered) { - return Theme.getColor("button_text_active_hover"); + return Theme.getColor("small_button_text_active_hover"); } else if(control.pressed || (control.checkable && control.checked)) { - return Theme.getColor("button_text_active"); + return Theme.getColor("small_button_text_active"); } else if(control.hovered) { - return Theme.getColor("button_text_hover"); + return Theme.getColor("small_button_text_hover"); } else { - return Theme.getColor("button_text"); + return Theme.getColor("small_button_text"); } } source: Theme.getIcon("arrow_bottom") @@ -456,31 +468,29 @@ QtObject { anchors.centerIn: parent; opacity: !control.enabled ? 0.2 : 1.0 source: control.iconSource; - width: 20; - height: 20; + width: Theme.getSize("small_button_icon").width; + height: Theme.getSize("small_button_icon").height; color: { if(control.checkable && control.checked && control.hovered) { - return Theme.getColor("button_text_active_hover"); + return Theme.getColor("small_button_text_active_hover"); } else if(control.pressed || (control.checkable && control.checked)) { - return Theme.getColor("button_text_active"); + return Theme.getColor("small_button_text_active"); } else if(control.hovered) { - //return Theme.getColor("button_text_hover"); - return "white" + return Theme.getColor("small_button_text_hover"); } else { - //return Theme.getColor("button_text"); - return "black" + return Theme.getColor("small_button_text"); } } - sourceSize: Theme.getSize("button_icon") + sourceSize: Theme.getSize("small_button_icon") } } } diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 09f93d413e..edc88f4654 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -103,6 +103,15 @@ "button_disabled": [31, 36, 39, 255], "button_disabled_text": [255, 255, 255, 101], + "small_button": [31, 36, 39, 0], + "small_button_hover": [68, 72, 75, 255], + "small_button_active": [68, 72, 75, 255], + "small_button_active_hover": [68, 72, 75, 255], + "small_button_text": [31, 36, 39, 197], + "small_button_text_hover": [255, 255, 255, 255], + "small_button_text_active": [255, 255, 255, 255], + "small_button_text_active_hover": [255, 255, 255, 255], + "button_tooltip": [31, 36, 39, 255], "button_tooltip_border": [68, 192, 255, 255], "button_tooltip_text": [192, 193, 194, 255], @@ -323,6 +332,9 @@ "button_icon": [2.5, 2.5], "button_lining": [0, 0], + "small_button": [2, 2], + "small_button_icon": [1.5, 1.5], + "topbar_logo_right_margin": [3, 0], "topbar_button": [8, 4], "topbar_button_icon": [1.2, 1.2],