PathView delegate use attached attributes

Fan__

QtVersion: 5.12.5
I encountered an issue while using PathView. The custom additional attribute of PathAttribute used in the delegate looks normal, but the console will report an error：

qrc:/main.qml:25:17: Unable to assign [undefined] to double
qrc:/main.qml:32:21: Unable to assign [undefined] to double

According to the error line, rotation and opacity are abnormal, but the display is normal, And this is my code:

import QtQuick 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    width: 1024
    height: 600
    visible: true
    Rectangle {
        width: 280
        height: 280
        radius: 140
        color: "#7097c2"
        Component {
            id: dialingDelegate
            Item {
                width: 25
                height: 5
                property var itemScale: PathView.itemScale
                property var itemOpacity: PathView.itemOpacity
                property var itemRotation: PathView.itemRotation
                property bool isCurrentItem: PathView.isCurrentItem

                rotation: (PathView.itemIsFlip > 0) ? itemRotation : -itemRotation
                
                Rectangle {
                    width: parent.width * itemScale
                    height: isCurrentItem ? parent.height * itemScale + 1.5 : parent.height * itemScale 
                    anchors.left: parent.left
                    radius: 5
                    opacity: itemOpacity
                    color: isCurrentItem ? "#fffeff" : "#dee5ee"
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: pathViewDialing.currentIndex = index
                }
            }
        }

        PathView {
            id: pathViewDialing
            model: 14
            width: 240
            height: width
            anchors.centerIn: parent
            // offset: pathView.offset
            pathItemCount: 7
            // interactive: false
            path: Path {
                startX: pathViewDialing.width/2
                startY: 0
                PathAttribute { name: "itemOpacity"; value: 1 }
                PathAttribute { name: "itemScale"; value: 1.0 } 
                PathAttribute { name: "itemRotation"; value: 0.0 }
                PathAttribute { name: "itemIsFlip"; value: 0 }
                PathAngleArc {
                    centerX: pathViewDialing.width/2
                    centerY: pathViewDialing.height/2
                    radiusX: pathViewDialing.width/2
                    radiusY: pathViewDialing.width/2
                    startAngle: 0
                    sweepAngle: 30
                }

                PathAttribute { name: "itemOpacity"; value: 0.4 } //不透明度
                PathAttribute { name: "itemScale"; value: 0.5 } // 最大缩放
                PathAttribute { name: "itemRotation"; value: -30.0 } // 选中项角度
                PathAttribute { name: "itemIsFlip"; value: 0 } //是否翻转

                PathAngleArc {
                    centerX: pathViewDialing.width/2
                    centerY: pathViewDialing.height/2
                    radiusX: pathViewDialing.width/2
                    radiusY: pathViewDialing.width/2
                    startAngle: -30
                    sweepAngle: 30
                }
                PathAttribute { name: "itemOpacity"; value: 1 } //不透明度
                PathAttribute { name: "itemScale"; value: 1.0 }
                PathAttribute { name: "itemRotation"; value: 0.0 } // 最终角度
                PathAttribute { name: "itemIsFlip"; value: 1 } //是否翻转

            }

            // 菜单项委托
            delegate: dialingDelegate
        }
    }
}

Markkyboy

I already made an alternative using Repeater and Rectangles, no need for PathView, which I think is too complex for what you appear to be doing. I would say also to update your Qt SDK if you can.

    // blue circle
    Rectangle {
        id: circle
        width: 1000
        height: width
        rotation: -18
        radius: width/2
        color: "#7097c2"
        anchors.centerIn: parent

        // repeat tickmarks
        Repeater {
            model: 7
            Rectangle {
                id: tickmarks
                radius: width/2
                width: segment.widths[index]
                height: segment.heights[index]
                color: index % 7 === 3 ? "#fffeff" : "#dee5ee"
                property real angle: index * 6 // spacing between tickmarks
                transform: [ Translate {
                        x: circle.width / 2 - width / 2
                        y: segment.yPosition[index]
                    },
                    Rotation {
                        origin.x: circle.width / 2
                        origin.y: circle.height / 2
                        angle: tickmarks.angle
                    }
                ]
            }
        }
    }
    // tickmarks properties; width, height, position
    Item {
        id: segment
        property var widths:    [ 5, 10, 15, 20, 15, 10,  5]
        property var heights:   [25, 40, 60, 80, 60, 40, 25]
        property var yPosition: [70, 55, 35, 15, 35, 55, 70]
    }

I think this code is easier to understand and manipulate, but maybe this is because I wrote it!, hope it helps!

Markkyboy

I tried your code, I cannot reproduce the errors you are getting. I also do not see the 7 rectangles your image shows.

Your code seems overly complex to me. This could be easily achieved using a Rectangle inside a repeater.

Fan__

@Markkyboy Thank you for your reply.
I simplified my code:

import QtQuick 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    width: 1024
    height: 600
    visible: true
    Rectangle {
        width: 280
        height: 280
        radius: 140
        color: "#7097c2"

        PathView {
            id: pathViewDialing
            model: 14
            width: 240
            height: width
            anchors.centerIn: parent
            pathItemCount: 7
            path: Path {
                startX: pathViewDialing.width/2
                startY: 0
                PathAttribute { name: "itemRotation"; value: 0.0 }
                PathLine {
                    x: pathViewDialing.width/2
                    y: pathViewDialing.width
                }
                PathAttribute { name: "itemRotation"; value: -30.0 }
            }

            delegate: Rectangle {
                width: 25
                height: 5
                rotation: PathView.itemRotation
                radius: 5
            }
        }
    }
}

But we still get the same mistake here

Can you tell me your Qt version? Thank you.

Markkyboy

This time I see the same as you show in your image, but I do not get any errors in console.
I'm using Qt 5.15.14 - on a restricted SDK

The image you show is a very different outcome from your original image. What are you making?, a dialler for phone calls?, a volume control knob?

Fan__

Yes, I's part of the control knob. So do I have any other ways to achieve this effect? Or change Qt version now? :-(

Markkyboy

I already made an alternative using Repeater and Rectangles, no need for PathView, which I think is too complex for what you appear to be doing. I would say also to update your Qt SDK if you can.

    // blue circle
    Rectangle {
        id: circle
        width: 1000
        height: width
        rotation: -18
        radius: width/2
        color: "#7097c2"
        anchors.centerIn: parent

        // repeat tickmarks
        Repeater {
            model: 7
            Rectangle {
                id: tickmarks
                radius: width/2
                width: segment.widths[index]
                height: segment.heights[index]
                color: index % 7 === 3 ? "#fffeff" : "#dee5ee"
                property real angle: index * 6 // spacing between tickmarks
                transform: [ Translate {
                        x: circle.width / 2 - width / 2
                        y: segment.yPosition[index]
                    },
                    Rotation {
                        origin.x: circle.width / 2
                        origin.y: circle.height / 2
                        angle: tickmarks.angle
                    }
                ]
            }
        }
    }
    // tickmarks properties; width, height, position
    Item {
        id: segment
        property var widths:    [ 5, 10, 15, 20, 15, 10,  5]
        property var heights:   [25, 40, 60, 80, 60, 40, 25]
        property var yPosition: [70, 55, 35, 15, 35, 55, 70]
    }

I think this code is easier to understand and manipulate, but maybe this is because I wrote it!, hope it helps!

Fan__

@Markkyboy U are great!

Markkyboy

Happy to help. I've been playing with gauges, clocks, dials, etc for some time. Laying out text in a circular fashion or as a shape can easily be created using Repeater, handy for speedometers, clocks, you name it. Then you can do stuff with the index of Repeater, endless possibilities.

Also, you may find this GitHub helpful; I've gleaned so much information from here; https://github.com/arunpkio/CircularSlider

JoeCFD

@Fan__ said in PathView delegate use attached attributes:

QtVersion: 5.12.5

QtVersion: 5.12.5 is too old. Upgrade Qt above 5.15 or 6.8.