Mixing
QT/QML Material ProgressBar with rounded corners
I wanted to have the Material style ProgressBar component, but with some modifications to make it's height adjustable.
So far so good, I had the result I wanted.
So I just copied this code inside MyPb.qml to use it as a component:
import QtQuick 2.11
import QtQuick.Templates 2.4 as T
import QtQuick.Controls.Material 2.4
import QtQuick.Controls.Material.impl 2.4
T.ProgressBar {
id: control
property real radius: 3
contentItem: ProgressBarImpl {
implicitHeight: control.height
scale: control.mirrored ? -1 : 1
color: control.Material.accentColor
progress: control.position
indeterminate: control.visible && control.indeterminate
}
background: Rectangle {
implicitWidth: control.width
implicitHeight: control.height
radius: control.radius
color: Qt.rgba(control.Material.accentColor.r, control.Material.accentColor.g, control.Material.accentColor.b, 0.25)
}
}
Which gives this result for the sake of example:
With the code:
Rectangle {
width: 600
height: 300
color: "black"
MyPb {
anchors.centerIn: parent
id: prg
width: 100
height: 20
indeterminate: false
radius: 5
visible: true
value: 0.5
}
}
Because ProgressBarImpl doesn't really support radius, the rounded corners are "buried" under the opaque progress rectangle as can be seen on the picture (left of progress bar).
Now, the reason I'm not making my own progress bar is that I want the "indeterminate" animation as well. So I thought it would be much
simpler to reuse the Qt implementation than starting making my own
animations.
So I wonder if there would be a way to have the Material progress bar, but apply to it some kind of treatment to get rounded corners both with indeterminate = false/true.
Any help would be appreciated!
qt user-interface qml components progress-bar
asked Jan 1 at 12:05
YannickYannick
410315
add a comment |
I wanted to have the Material style ProgressBar component, but with some modifications to make it's height adjustable.
So far so good, I had the result I wanted.
So I just copied this code inside MyPb.qml to use it as a component:
import QtQuick 2.11
import QtQuick.Templates 2.4 as T
import QtQuick.Controls.Material 2.4
import QtQuick.Controls.Material.impl 2.4
T.ProgressBar {
id: control
property real radius: 3
contentItem: ProgressBarImpl {
implicitHeight: control.height
scale: control.mirrored ? -1 : 1
color: control.Material.accentColor
progress: control.position
indeterminate: control.visible && control.indeterminate
}
background: Rectangle {
implicitWidth: control.width
implicitHeight: control.height
radius: control.radius
color: Qt.rgba(control.Material.accentColor.r, control.Material.accentColor.g, control.Material.accentColor.b, 0.25)
}
}
Which gives this result for the sake of example:
With the code:
Rectangle {
width: 600
height: 300
color: "black"
MyPb {
anchors.centerIn: parent
id: prg
width: 100
height: 20
indeterminate: false
radius: 5
visible: true
value: 0.5
}
}
Because ProgressBarImpl doesn't really support radius, the rounded corners are "buried" under the opaque progress rectangle as can be seen on the picture (left of progress bar).
Now, the reason I'm not making my own progress bar is that I want the "indeterminate" animation as well. So I thought it would be much
simpler to reuse the Qt implementation than starting making my own
animations.
So I wonder if there would be a way to have the Material progress bar, but apply to it some kind of treatment to get rounded corners both with indeterminate = false/true.
Any help would be appreciated!
qt user-interface qml components progress-bar
asked Jan 1 at 12:05
YannickYannick
410315
What version of Qt are you using? I have many. Sometimes the specific version is really important, and sometimes it's not, but I'd rather start with the right one just in case. :)
– sitting-duck
Jan 1 at 15:51
@AshleyTharp I'm using QT 5.11, but frankly any more recent version would do for me (if for instance it worked with 5.12 I'd be glad to switch)
– Yannick
Jan 2 at 1:02
Try setting thepaddingproperty ofProgressBarto other than zero and ascontentItemuseRectangleand set its radius to 3. I implemented the one you desired last week but I don't have it with me now.
– xeco
Jan 4 at 20:27
add a comment |
I wanted to have the Material style ProgressBar component, but with some modifications to make it's height adjustable.
So far so good, I had the result I wanted.
So I just copied this code inside MyPb.qml to use it as a component:
import QtQuick 2.11
import QtQuick.Templates 2.4 as T
import QtQuick.Controls.Material 2.4
import QtQuick.Controls.Material.impl 2.4
T.ProgressBar {
id: control
property real radius: 3
contentItem: ProgressBarImpl {
implicitHeight: control.height
scale: control.mirrored ? -1 : 1
color: control.Material.accentColor
progress: control.position
indeterminate: control.visible && control.indeterminate
}
background: Rectangle {
implicitWidth: control.width
implicitHeight: control.height
radius: control.radius
color: Qt.rgba(control.Material.accentColor.r, control.Material.accentColor.g, control.Material.accentColor.b, 0.25)
}
}
Which gives this result for the sake of example:
With the code:
Rectangle {
width: 600
height: 300
color: "black"
MyPb {
anchors.centerIn: parent
id: prg
width: 100
height: 20
indeterminate: false
radius: 5
visible: true
value: 0.5
}
}
Because ProgressBarImpl doesn't really support radius, the rounded corners are "buried" under the opaque progress rectangle as can be seen on the picture (left of progress bar).
Now, the reason I'm not making my own progress bar is that I want the "indeterminate" animation as well. So I thought it would be much
simpler to reuse the Qt implementation than starting making my own
animations.
So I wonder if there would be a way to have the Material progress bar, but apply to it some kind of treatment to get rounded corners both with indeterminate = false/true.
Any help would be appreciated!
qt user-interface qml components progress-bar
asked Jan 1 at 12:05
YannickYannick
410315
I wanted to have the Material style ProgressBar component, but with some modifications to make it's height adjustable.
So far so good, I had the result I wanted.
So I just copied this code inside MyPb.qml to use it as a component:
import QtQuick 2.11
import QtQuick.Templates 2.4 as T
import QtQuick.Controls.Material 2.4
import QtQuick.Controls.Material.impl 2.4
T.ProgressBar {
id: control
property real radius: 3
contentItem: ProgressBarImpl {
implicitHeight: control.height
scale: control.mirrored ? -1 : 1
color: control.Material.accentColor
progress: control.position
indeterminate: control.visible && control.indeterminate
}
background: Rectangle {
implicitWidth: control.width
implicitHeight: control.height
radius: control.radius
color: Qt.rgba(control.Material.accentColor.r, control.Material.accentColor.g, control.Material.accentColor.b, 0.25)
}
}
Which gives this result for the sake of example:
With the code:
Rectangle {
width: 600
height: 300
color: "black"
MyPb {
anchors.centerIn: parent
id: prg
width: 100
height: 20
indeterminate: false
radius: 5
visible: true
value: 0.5
}
}
Because ProgressBarImpl doesn't really support radius, the rounded corners are "buried" under the opaque progress rectangle as can be seen on the picture (left of progress bar).
Now, the reason I'm not making my own progress bar is that I want the "indeterminate" animation as well. So I thought it would be much
simpler to reuse the Qt implementation than starting making my own
animations.
So I wonder if there would be a way to have the Material progress bar, but apply to it some kind of treatment to get rounded corners both with indeterminate = false/true.
Any help would be appreciated!
qt user-interface qml components progress-bar
qt user-interface qml components progress-bar
asked Jan 1 at 12:05
YannickYannick
410315
asked Jan 1 at 12:05
YannickYannick
410315
edited Jan 1 at 12:12
Yannick
asked Jan 1 at 12:05
YannickYannick
410315
asked Jan 1 at 12:05
YannickYannick
410315
asked Jan 1 at 12:05
YannickYannick
410315
410315
What version of Qt are you using? I have many. Sometimes the specific version is really important, and sometimes it's not, but I'd rather start with the right one just in case. :)
– sitting-duck
Jan 1 at 15:51
@AshleyTharp I'm using QT 5.11, but frankly any more recent version would do for me (if for instance it worked with 5.12 I'd be glad to switch)
– Yannick
Jan 2 at 1:02
Try setting thepaddingproperty ofProgressBarto other than zero and ascontentItemuseRectangleand set its radius to 3. I implemented the one you desired last week but I don't have it with me now.
– xeco
Jan 4 at 20:27
add a comment |
What version of Qt are you using? I have many. Sometimes the specific version is really important, and sometimes it's not, but I'd rather start with the right one just in case. :)
– sitting-duck
Jan 1 at 15:51
@AshleyTharp I'm using QT 5.11, but frankly any more recent version would do for me (if for instance it worked with 5.12 I'd be glad to switch)
– Yannick
Jan 2 at 1:02
Try setting thepaddingproperty ofProgressBarto other than zero and ascontentItemuseRectangleand set its radius to 3. I implemented the one you desired last week but I don't have it with me now.
– xeco
Jan 4 at 20:27
What version of Qt are you using? I have many. Sometimes the specific version is really important, and sometimes it's not, but I'd rather start with the right one just in case. :)
– sitting-duck
Jan 1 at 15:51
What version of Qt are you using? I have many. Sometimes the specific version is really important, and sometimes it's not, but I'd rather start with the right one just in case. :)
– sitting-duck
Jan 1 at 15:51
@AshleyTharp I'm using QT 5.11, but frankly any more recent version would do for me (if for instance it worked with 5.12 I'd be glad to switch)
– Yannick
Jan 2 at 1:02
@AshleyTharp I'm using QT 5.11, but frankly any more recent version would do for me (if for instance it worked with 5.12 I'd be glad to switch)
– Yannick
Jan 2 at 1:02
Try setting the
padding property of ProgressBar to other than zero and as contentItem use Rectangle and set its radius to 3. I implemented the one you desired last week but I don't have it with me now.– xeco
Jan 4 at 20:27
Try setting the
padding property of ProgressBar to other than zero and as contentItem use Rectangle and set its radius to 3. I implemented the one you desired last week but I don't have it with me now.– xeco
Jan 4 at 20:27
add a comment |
1 Answer
1
active
oldest
votes
You could try setting an OpacityMask on the contentItem using the background item as a mask source.
If that doesn't work out, it will be easier just to create a progress bar. It is a very trivial and non-interactive component with a tiny usage interface after all.
answered Jan 1 at 20:36
dtechdtech
34.6k1374136
Sadly I tried OpacityMask and the progress rectangle (the one at 30% of the width when value = 0.3 for example) doesn't show, nor the animation does. Which I'm not sure why.
– Yannick
Jan 2 at 1:04
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995289%2fqt-qml-material-progressbar-with-rounded-corners%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You could try setting an OpacityMask on the contentItem using the background item as a mask source.
If that doesn't work out, it will be easier just to create a progress bar. It is a very trivial and non-interactive component with a tiny usage interface after all.
answered Jan 1 at 20:36
dtechdtech
34.6k1374136
Sadly I tried OpacityMask and the progress rectangle (the one at 30% of the width when value = 0.3 for example) doesn't show, nor the animation does. Which I'm not sure why.
– Yannick
Jan 2 at 1:04
add a comment |
You could try setting an OpacityMask on the contentItem using the background item as a mask source.
If that doesn't work out, it will be easier just to create a progress bar. It is a very trivial and non-interactive component with a tiny usage interface after all.
answered Jan 1 at 20:36
dtechdtech
34.6k1374136
Sadly I tried OpacityMask and the progress rectangle (the one at 30% of the width when value = 0.3 for example) doesn't show, nor the animation does. Which I'm not sure why.
– Yannick
Jan 2 at 1:04
add a comment |
You could try setting an OpacityMask on the contentItem using the background item as a mask source.
If that doesn't work out, it will be easier just to create a progress bar. It is a very trivial and non-interactive component with a tiny usage interface after all.
answered Jan 1 at 20:36
dtechdtech
34.6k1374136
You could try setting an OpacityMask on the contentItem using the background item as a mask source.
If that doesn't work out, it will be easier just to create a progress bar. It is a very trivial and non-interactive component with a tiny usage interface after all.
answered Jan 1 at 20:36
dtechdtech
34.6k1374136
edited Jan 2 at 11:22
answered Jan 1 at 20:36
dtechdtech
34.6k1374136
answered Jan 1 at 20:36
dtechdtech
34.6k1374136
answered Jan 1 at 20:36
dtechdtech
34.6k1374136
34.6k1374136
Sadly I tried OpacityMask and the progress rectangle (the one at 30% of the width when value = 0.3 for example) doesn't show, nor the animation does. Which I'm not sure why.
– Yannick
Jan 2 at 1:04
add a comment |
Sadly I tried OpacityMask and the progress rectangle (the one at 30% of the width when value = 0.3 for example) doesn't show, nor the animation does. Which I'm not sure why.
– Yannick
Jan 2 at 1:04
Sadly I tried OpacityMask and the progress rectangle (the one at 30% of the width when value = 0.3 for example) doesn't show, nor the animation does. Which I'm not sure why.
– Yannick
Jan 2 at 1:04
Sadly I tried OpacityMask and the progress rectangle (the one at 30% of the width when value = 0.3 for example) doesn't show, nor the animation does. Which I'm not sure why.
– Yannick
Jan 2 at 1:04
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995289%2fqt-qml-material-progressbar-with-rounded-corners%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What version of Qt are you using? I have many. Sometimes the specific version is really important, and sometimes it's not, but I'd rather start with the right one just in case. :)
– sitting-duck
Jan 1 at 15:51
@AshleyTharp I'm using QT 5.11, but frankly any more recent version would do for me (if for instance it worked with 5.12 I'd be glad to switch)
– Yannick
Jan 2 at 1:02
Try setting the
paddingproperty ofProgressBarto other than zero and ascontentItemuseRectangleand set its radius to 3. I implemented the one you desired last week but I don't have it with me now.– xeco
Jan 4 at 20:27