now they want a pattern...
-
Lots of good suggestions...I went with what was easiest (for me), which was using an image:
Rectangle { ... Image { id: highlight source: resourceHelper.imageSourcePrefix + "images/hatch.png" visible: (cellText === "S1") height: parent.height width: parent.width fillMode: Image.Pad }Produces this:
Thanks for all the good ideas.
Oh, fcarney: the wiggle performance wasn't terrible, but it was quite subtle -- it took me a while to realize that anything was even changing.
mz
-
Lots of good suggestions...I went with what was easiest (for me), which was using an image:
Rectangle { ... Image { id: highlight source: resourceHelper.imageSourcePrefix + "images/hatch.png" visible: (cellText === "S1") height: parent.height width: parent.width fillMode: Image.Pad }Produces this:
Thanks for all the good ideas.
Oh, fcarney: the wiggle performance wasn't terrible, but it was quite subtle -- it took me a while to realize that anything was even changing.
mz
-
@mzimmers Hi. I like the UI style. If all your items have round corners, maybe the cross-lined rectangle should have too, in order to maintain consistency.
-
@oria66 oh man...I completely overlooked that. Good catch...thanks!
EDIT:
But...how does one radius an Image? I wonder if a different fill mode is the answer...?
-
@mzimmers Also. All your rectangles have separations (5 px?) and S3 and S2 don't have one. In the name of consistency too, lol. By the way, really love the color selection. Is it for an industry application? Kind of HMI?
@oria66 said in now they want a pattern...:
@mzimmers Also. All your rectangles have separations (5 px?) and S3 and S2 don't have one. In the name of consistency too, lol.
Yep...that's actually a faithful representation of the rack. Bottles S2 and S3 share a long slot because there just wasn't room for a separator.
By the way, really love the color selection. Is for an industry application? Kind of HMI?
It's a medical research application. The customer supplied the colors. They're fine for the UI, but our attempt to use them for QR barcode symbols was not successful, so we're looking at alternatives.
-
@oria66 said in now they want a pattern...:
@mzimmers Also. All your rectangles have separations (5 px?) and S3 and S2 don't have one. In the name of consistency too, lol.
Yep...that's actually a faithful representation of the rack. Bottles S2 and S3 share a long slot because there just wasn't room for a separator.
By the way, really love the color selection. Is for an industry application? Kind of HMI?
It's a medical research application. The customer supplied the colors. They're fine for the UI, but our attempt to use them for QR barcode symbols was not successful, so we're looking at alternatives.
@mzimmers mmm, I see. I don't think a fill mode property works for that kind of use. Maybe two options here: 1. Edit the image in an external editor (the easy way I believe). 2. Maybe, some crop function following a shape. I know this can be achieved with QPainter and QImage on the C++ side, but on the QML side, I don't know.
-
I don't think editing the image is the right approach, as the image is applied to bottles of multiple sizes (though I suppose I could create multiple files, one for each bottle size). Also, I'd have to do the radiusing by hand, and I don't have any editing tools for that.
-
I don't think editing the image is the right approach, as the image is applied to bottles of multiple sizes (though I suppose I could create multiple files, one for each bottle size). Also, I'd have to do the radiusing by hand, and I don't have any editing tools for that.
-
@mzimmers Maybe this can help you.
https://stackoverflow.com/questions/42432456/circular-image-in-qt-qml/42432691
@oria66 oh, that is a thing of beauty:
Rectangle { id: bottle property int radiusValue: 5 * bottleScaleFactor radius: radiusValue Image { id: highlight source: resourceHelper.imageSourcePrefix + "images/hatch.png" visible: (cellText.charAt(0) == "S") height: parent.height width: height fillMode: Image.Pad layer.enabled: true layer.effect: OpacityMask { maskSource: opacityMask } } Rectangle { id: opacityMask height: parent.height width: height visible: false radius: parent.radiusValue }
(I changed it so the entire group is highlighted.)Thank you SO much for finding that!
-
@oria66 oh, that is a thing of beauty:
Rectangle { id: bottle property int radiusValue: 5 * bottleScaleFactor radius: radiusValue Image { id: highlight source: resourceHelper.imageSourcePrefix + "images/hatch.png" visible: (cellText.charAt(0) == "S") height: parent.height width: height fillMode: Image.Pad layer.enabled: true layer.effect: OpacityMask { maskSource: opacityMask } } Rectangle { id: opacityMask height: parent.height width: height visible: false radius: parent.radiusValue }
(I changed it so the entire group is highlighted.)Thank you SO much for finding that!
