Complex QT GUI Design

[trripy01]

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

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

Please help me with any reference, Many thanks in advance

Regards,
Kankan

[jay1]

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:

[PeTroVic]

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: