Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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


  • @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:{     
        }
    }
    
    


  • @LeLev

    Thanks for the quick response.

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

    Screenshot_2.png

    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.

    Screenshot_3.png

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

    Thanks



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