Nominate our 2022 Qt Champions!

Canvas onPaint in ui.qml

  • 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 {
        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"
            id: background_progress_bar
            anchors.fill: parent
            width: root.size
            height: root.size
            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.fillStyle = root.colorBackground;
                ctx.arc(x,y,100,(start),(end),true); //(x,y,r,startAngle,endAngle,bAnticlockwise)
                ctx.lineTo(x, y)
    Thanks for helping.
    Kind regards.

  • @TMJJ001 hi

    you need a Property Alias


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


    import QtQuick 2.4
    GaugeCircleForm {

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


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