now they want a pattern...

[mzimmers]

Hi all -

Working on an app that makes extensive use of QML Rectangles. The customer has decided that, under certain circumstances, they'd like these rectangles to be cross-lined, like this:

Before I tell them that this isn't natively supported in Qt (this will mean something to them, as they specifically asked for Qt to be used on this project), does anyone have any tricks up their sleeve?

Thanks...

[oria66]

@mzimmers Hi. I faced a similar problem in the past. The ways I found:

1. Load an image.
2. Use Canvas to draw black lines over a red rectangle.
3. Use QQuickPaintedItem to do the same as item 2 but in C++ (You can use a Qt::BrushStyle).

I hope it helps.

[fcarney]

You could also draw a bunch of rectangles vertically inside a rectangle. Then rotate them. Set clipping to true on outside rectangle.

[fcarney]

Wiggle timer is optional. I just did it for the lols.

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 480
    height: 480
    visible: true
    title: qsTr("pattern")

    Timer {
        id: wiggletimer

        interval: 1000
        running: true
        repeat: false

        property real wiggle: 0.0

        onTriggered: {
            interval = (Math.random() + 0.5) * 5000;
            wiggle = Math.random() * 0.5

            start()
        }
    }

    Rectangle {
        id: masterrect

        anchors.centerIn: parent

        width: 400
        height: 400

        border.width: 1

        Item {
            anchors.fill: parent
            anchors.margins: 1

            clip: true

            Rectangle {
                width: parent.width * 1.5
                height: parent.height * 1.5

                anchors.centerIn: parent

                rotation: 45 + wiggletimer.wiggle

                Repeater {
                    id: rmodel

                    model: 20

                    Rectangle {
                        property real size: parent.width / rmodel.count

                        height: parent.height * 1.5
                        width: size * 0.2

                        x: size * 0.5 + size * index - width/2

                        color: "black"
                    }
                }
            }
        }
    }
}

[fcarney]

I don't know how performant it will be. It might be dog slow.

[mzimmers]

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

[fcarney]

@mzimmers That looks really nice.

[oria66]

@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.

[mzimmers]

@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...?

[oria66]

@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?

[mzimmers]

@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]

@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.

[mzimmers]

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.

[oria66]

@mzimmers Maybe this can help you.

https://stackoverflow.com/questions/42432456/circular-image-in-qt-qml/42432691

[mzimmers]

@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]

@mzimmers glad to help.