Canvas onPaint in ui.qml

[TMJJ001]

Dear,

Probably a stupid question (I'm a beginner in QML design), but I'm designing a gauge. I have a .qml and .ui.qml file. (Gauge_Circle.qml and Gauge_Circle.ui.qml)
I designed the gauge in .qml file without problem.
But I want to finalize the design in .ui.qml file as it is easier by using the qt qml designer.

When I copy my code from the .qml to the .ui.qml I get errors because I'm using java script in the .ui.qml.
What is the way arround this? How can I use the canvas onPaint and still design the gauge in qt qml designer?

import QtQuick 2.11

Gauge_CircleForm {

    id:root

    property int size: 200               // The size of the circle in pixel
    property real arcBegin: 310           // start arc angle in degree
    property real arcEnd: 50            // end arc angle in degree
    property real arcValue: 200        // real value
    property real arcOffset: 0           // rotation
    property bool isPie: false           // paint a pie instead of an arc
    property bool showBackground: false  // a full circle as a background of the arc
    property real lineWidth: 20          // width of the line
    property string colorCircle: "#CC3333"
    property string colorBackground: "#779933"
    property string colorBorder: "red"
    property string colorCenter: "orange"

    Canvas{
        id: background_progress_bar
        anchors.fill: parent

        width: root.size
        height: root.size

        x:100
        y:100

        onPaint: {

            var x = width / 2
            var y = height / 2
            var start = Math.PI * (parent.arcBegin / 180)
            var end = Math.PI * (parent.arcEnd / 180)
            var ctx = getContext("2d");

            ctx.reset();
            ctx.beginPath();
            ctx.fillStyle = root.colorBackground;
            ctx.arc(x,y,100,(start),(end),true); //(x,y,r,startAngle,endAngle,bAnticlockwise)
            ctx.lineTo(x, y)
            ctx.fill();
        }
    }
}

Thanks for helping.
Kind regards.

[ODБOï]

@TMJJ001 hi

you need a Property Alias

//.ui.qml

Item {

    id: root
    property alias background_progress_bar: background_progress_bar
    Canvas {
        id: background_progress_bar
      }
}

//.qml

import QtQuick 2.4

GaugeCircleForm {
           //variables
        background_progress_bar.onPaint:{     
    }
}

[TMJJ001]

@LeLev

Thanks for the quick response.

I did exactly as you have explained. The application works indeed.

But it is not 100% what I meant. What I meant is that I create e.g. the blue pi as above. Now I want to add text at a certain position.
To do this it is easier to work in qt designer. So I'm trying to edit the ui.qml file. But in this i'm not able to show the blue pie.

Can you please give me a hand with this as well?

Thanks

[ODБOï]

@TMJJ001 hi the canvas content is generated programmatically, i'm not sure you can do it in the Designer