Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Dashboard with qml
QtWS25 Last Chance

Dashboard with qml

Scheduled Pinned Locked Moved Unsolved General and Desktop
4 Posts 2 Posters 1.3k Views
  • 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.
  • V Offline
    V Offline
    vale88
    wrote on last edited by
    #1

    I created this dashboard with qml using this code:

    import QtQuick 2.6
    import QtQuick.Controls 2.1
    import QtQuick.Extras 1.4
    import QtQuick.Controls.Styles 1.4
    
    import QtQuick 2.7
    import QtQuick.Controls 2.0
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Extras 1.4
    import QtQuick.Extras.Private 1.0
    import QtGraphicalEffects 1.0
    
    
    
    //Rectangle{
    //    id: rectangle
    
    //   width:400
    
    //  height: 400
    
    
    
    
    //   //color: "#000000" //setto il colore dello sfondo
    //   transformOrigin: Item.Left
    
    
    
    
        CircularGauge {
            id: gauge
    
            style: CircularGaugeStyle {
                labelStepSize: 10
                labelInset: outerRadius / 2.2
                tickmarkInset: outerRadius / 4.2
                minorTickmarkInset: outerRadius / 4.2
                minimumValueAngle: -144
                maximumValueAngle: 144
    
                background: Rectangle {
                    implicitHeight: gauge.height
                    implicitWidth: gauge.width
                    color: "black"
                    anchors.centerIn: parent
                    radius: 360
    
                    Image {
                        anchors.fill: parent
                        source: "qrc:/img/background.png"
                        asynchronous: true
                        sourceSize {
                            width: width
                        }
                    }
    
                    Canvas {
                        property int value: gauge.value
    
                        anchors.fill: parent
                        onValueChanged: requestPaint()
    
                        function degreesToRadians(degrees) {
                          return degrees * (Math.PI / 180);
                        }
    
                        onPaint: {
                            var ctx = getContext("2d");
                            ctx.reset();
                            ctx.beginPath();
                            ctx.strokeStyle = "black"
                            ctx.lineWidth = outerRadius
                            ctx.arc(outerRadius,
                                  outerRadius,
                                  outerRadius - ctx.lineWidth / 2,
                                  degreesToRadians(valueToAngle(gauge.value) - 90),
                                  degreesToRadians(valueToAngle(gauge.maximumValue + 1) - 90));
                            ctx.stroke();
                        }
                    }
                }
    
                needle: Item {
                    y: -outerRadius * 0.78
                    height: outerRadius * 0.27
                    Image {
                        id: needle
                        source: "qrc:/img/needle.svg"
                        height: parent.height
                        width: height * 0.1
                        asynchronous: true
                        antialiasing: true
                    }
    
                    Glow {
                      anchors.fill: needle
                      radius: 5
                      samples: 10
                      color: "white"
                      source: needle
                  }
                }
    
                foreground: Item {
                    Text {
                        id: speedLabel
                        anchors.centerIn: parent
                        text: gauge.value.toFixed(0)
                        font.pixelSize: outerRadius * 0.3
                        color: "white"
                        antialiasing: true
                    }
                }
    
                tickmarkLabel:  Text {
                    font.pixelSize: Math.max(6, outerRadius * 0.05)
                    text: styleData.value
                    color: styleData.value <= gauge.value ? "white" : "#777776"
                    antialiasing: true
                }
    
                tickmark: Image {
                    source: "qrc:/img/tickmark.svg"
                    width: outerRadius * 0.018
                    height: outerRadius * 0.15
                    antialiasing: true
                    asynchronous: true
                }
    
                minorTickmark: Rectangle {
                    implicitWidth: outerRadius * 0.01
                    implicitHeight: outerRadius * 0.03
    
                    antialiasing: true
                    smooth: true
                    color: styleData.value <= gauge.value ? "white" : "darkGray"
                }
            }
    
    
    
    
    Connections
    {
      target: yourObject
      onSliderMoved: gauge.value = (position)
    }
    
    
    }
    
    

    and I obtain this:
    Cattura.PNG

    but I wanted a thing with a colored circle inside like this

    Cattura1.PNG

    do you know how must I write?

    ODБOïO 1 Reply Last reply
    0
    • V vale88

      I created this dashboard with qml using this code:

      import QtQuick 2.6
      import QtQuick.Controls 2.1
      import QtQuick.Extras 1.4
      import QtQuick.Controls.Styles 1.4
      
      import QtQuick 2.7
      import QtQuick.Controls 2.0
      import QtQuick.Controls.Styles 1.4
      import QtQuick.Extras 1.4
      import QtQuick.Extras.Private 1.0
      import QtGraphicalEffects 1.0
      
      
      
      //Rectangle{
      //    id: rectangle
      
      //   width:400
      
      //  height: 400
      
      
      
      
      //   //color: "#000000" //setto il colore dello sfondo
      //   transformOrigin: Item.Left
      
      
      
      
          CircularGauge {
              id: gauge
      
              style: CircularGaugeStyle {
                  labelStepSize: 10
                  labelInset: outerRadius / 2.2
                  tickmarkInset: outerRadius / 4.2
                  minorTickmarkInset: outerRadius / 4.2
                  minimumValueAngle: -144
                  maximumValueAngle: 144
      
                  background: Rectangle {
                      implicitHeight: gauge.height
                      implicitWidth: gauge.width
                      color: "black"
                      anchors.centerIn: parent
                      radius: 360
      
                      Image {
                          anchors.fill: parent
                          source: "qrc:/img/background.png"
                          asynchronous: true
                          sourceSize {
                              width: width
                          }
                      }
      
                      Canvas {
                          property int value: gauge.value
      
                          anchors.fill: parent
                          onValueChanged: requestPaint()
      
                          function degreesToRadians(degrees) {
                            return degrees * (Math.PI / 180);
                          }
      
                          onPaint: {
                              var ctx = getContext("2d");
                              ctx.reset();
                              ctx.beginPath();
                              ctx.strokeStyle = "black"
                              ctx.lineWidth = outerRadius
                              ctx.arc(outerRadius,
                                    outerRadius,
                                    outerRadius - ctx.lineWidth / 2,
                                    degreesToRadians(valueToAngle(gauge.value) - 90),
                                    degreesToRadians(valueToAngle(gauge.maximumValue + 1) - 90));
                              ctx.stroke();
                          }
                      }
                  }
      
                  needle: Item {
                      y: -outerRadius * 0.78
                      height: outerRadius * 0.27
                      Image {
                          id: needle
                          source: "qrc:/img/needle.svg"
                          height: parent.height
                          width: height * 0.1
                          asynchronous: true
                          antialiasing: true
                      }
      
                      Glow {
                        anchors.fill: needle
                        radius: 5
                        samples: 10
                        color: "white"
                        source: needle
                    }
                  }
      
                  foreground: Item {
                      Text {
                          id: speedLabel
                          anchors.centerIn: parent
                          text: gauge.value.toFixed(0)
                          font.pixelSize: outerRadius * 0.3
                          color: "white"
                          antialiasing: true
                      }
                  }
      
                  tickmarkLabel:  Text {
                      font.pixelSize: Math.max(6, outerRadius * 0.05)
                      text: styleData.value
                      color: styleData.value <= gauge.value ? "white" : "#777776"
                      antialiasing: true
                  }
      
                  tickmark: Image {
                      source: "qrc:/img/tickmark.svg"
                      width: outerRadius * 0.018
                      height: outerRadius * 0.15
                      antialiasing: true
                      asynchronous: true
                  }
      
                  minorTickmark: Rectangle {
                      implicitWidth: outerRadius * 0.01
                      implicitHeight: outerRadius * 0.03
      
                      antialiasing: true
                      smooth: true
                      color: styleData.value <= gauge.value ? "white" : "darkGray"
                  }
              }
      
      
      
      
      Connections
      {
        target: yourObject
        onSliderMoved: gauge.value = (position)
      }
      
      
      }
      
      

      and I obtain this:
      Cattura.PNG

      but I wanted a thing with a colored circle inside like this

      Cattura1.PNG

      do you know how must I write?

      ODБOïO Offline
      ODБOïO Offline
      ODБOï
      wrote on last edited by
      #2

      @vale88
      https://wiki.qt.io/QtDesignStudio full tutorial avalable here

      V 1 Reply Last reply
      0
      • ODБOïO ODБOï

        @vale88
        https://wiki.qt.io/QtDesignStudio full tutorial avalable here

        V Offline
        V Offline
        vale88
        wrote on last edited by
        #3

        @LeLev yes I saw, but there isn't code

        ODБOïO 1 Reply Last reply
        0
        • V vale88

          @LeLev yes I saw, but there isn't code

          ODБOïO Offline
          ODБOïO Offline
          ODБOï
          wrote on last edited by ODБOï
          #4

          @vale88 dude it is Qt Design Studio demo, there is no code

          1 Reply Last reply
          1

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved