Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Unsolved Complex QT GUI Design

    QML and Qt Quick
    3
    3
    122
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      trripy01 last edited by

      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

      1 Reply Last reply Reply Quote 0
      • J
        jay1 last edited by

        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

        1 Reply Last reply Reply Quote 1
        • PeTroVic
          PeTroVic last edited by

          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

          1 Reply Last reply Reply Quote 1
          • First post
            Last post