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

Complex QT GUI Design



  • Hi QT developers,

    Over the quarantine, I am trying to learn QT, I have gone through a couple of tutorials for designing and controlling GUI elements using real-world data, however, I don't have a clue ho create a UI like below

    3ad0671d-7cb4-4439-b4cc-5b112d78c6a3-image.png

    Notice the semi arc will show different color levels based on data.

    Please help me with any reference, Many thanks in advance

    Regards,
    Kankan



  • There are many ways this can be achieved. Few of them i can think of are:

    1. Using the import from the PSD file using the Qt Design Studio (Simple and elegant way)
    2. Using the "QPainter" to draw
    3. Using the native OpenGL commands to draw
    4. Using images

    For simple example i have used the "QPainter" to draw. This can used with C++ + QML Integration for drawing in QML.

    Here changing the span & start angle of the arc the location of the color part can be moved.
    Hope this will provide some reference and answers your question

    void paintEvent(QPaintEvent *)
    {
        int barStartAngle = 0;
        int barSpanAngle = 45;
        int curveOffset = 100;
        int curveDimension = 500;
        int curvePosX = 0;
        int curvePosY = 0;
    
        QPainter pHandle(this);
        pHandle.setRenderHint(QPainter::Antialiasing, true);
        pHandle.setRenderHint(QPainter::SmoothPixmapTransform, true);
    
        pHandle.save();
        pHandle.setPen(QPen(QColor("#1d758c"), 0, Qt::SolidLine, Qt::RoundCap));
        pHandle.setBrush(QBrush(QColor("#1d758c"), Qt::SolidPattern));
    
        pHandle.setClipping(true);
        QPainterPath curvePath;
        curvePath.addEllipse(QRect(curvePosX,curvePosY,curveDimension,curveDimension));
        pHandle.setClipPath(curvePath);
        pHandle.setClipRect(QRect(curveDimension-(2*curveOffset),curvePosY,curveDimension-(2*curveOffset),curveDimension));
    
        QPainterPath path;
        path.addEllipse(QRect(curvePosX,curvePosY,curveDimension,curveDimension));
        path.addEllipse(QRect(curveOffset,curvePosY,curveDimension,curveDimension));
        pHandle.drawPath(path);
    
        pHandle.setPen(QPen(QColor("#71daff"), 2.5, Qt::SolidLine, Qt::RoundCap));
        pHandle.setBrush(QBrush(QColor("#71daff")));
        for(int i = 0; i < curveOffset; i++)
            pHandle.drawArc(QRect(i,curvePosY,curveDimension,curveDimension), barStartAngle*16, barSpanAngle*16);
    
        pHandle.restore();
    }
    

    Output:

    saa4.PNG



  • Hey,

    You could do this using QML as well.
    If you want to use QML the simplest way that I found is using Shape, and ShapePath.

    By using ShapePath you could create whatever shape you want.
    In your example, I used fillGradient property to create multi-color, because that was the easiest. However, you could create another Shape that will represent the second color.

    Code:

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Shapes 1.12
    
    Item {
        property real uLimit: 0.5 //upperLimit
        property real bLimit: 0.7 //bottomLimit
    
        width: 150
        height: 500
    
        Rectangle{
            anchors.fill: parent
            color: "#eeeeee"
        }
    
        Shape {
            anchors.fill: parent
            ShapePath {
                strokeColor: "transparent"
                fillGradient: LinearGradient {
                    x1: 0; y1: 0
                    x2: 0; y2: 500
                    GradientStop { position: 0; color: "#70c3ed" }
                    GradientStop { position: uLimit; color: "#70c3ed" }
                    GradientStop { position: uLimit + 0.0000001; color: "#5453c4" }
                    GradientStop { position: bLimit; color: "#5453c4" }
                    GradientStop { position: bLimit + 0.0000001; color: "#70c3ed" }
                    GradientStop { position: 1; color: "#70c3ed" }
                }
    
                startX: 0; startY: 0
                PathQuad { x: 0; y: 500; controlX: 290; controlY: 250; }
                PathQuad { x: 0; y: 0; controlX: 150; controlY: 250;}
            }
        }
    }
    

    Output:
    Untitled.png


Log in to reply