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. Problem with slider in qml
Forum Updated to NodeBB v4.3 + New Features

Problem with slider in qml

Scheduled Pinned Locked Moved Solved General and Desktop
15 Posts 2 Posters 1.6k 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 have problems when I connect slider and dial built with qml inside mainwindow..I built a slider like this with qml:
    Cattura.PNG

    can I build a similar slider with qt? is it possible?

    jsulmJ 1 Reply Last reply
    0
    • V vale88

      I have problems when I connect slider and dial built with qml inside mainwindow..I built a slider like this with qml:
      Cattura.PNG

      can I build a similar slider with qt? is it possible?

      jsulmJ Offline
      jsulmJ Offline
      jsulm
      Lifetime Qt Champion
      wrote on last edited by
      #2

      @vale88 said in Problem with slider in qml:

      can I build a similar slider with qt?

      Do you mean with Qt widgets? QML is Qt as well...

      https://forum.qt.io/topic/113070/qt-code-of-conduct

      V 1 Reply Last reply
      1
      • jsulmJ jsulm

        @vale88 said in Problem with slider in qml:

        can I build a similar slider with qt?

        Do you mean with Qt widgets? QML is Qt as well...

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

        @jsulm yes with qt widget..can I know if it's possible connect two elements of qml in mainwindow? I opened a topic but I didn't have any answer

        jsulmJ 1 Reply Last reply
        0
        • V vale88

          @jsulm yes with qt widget..can I know if it's possible connect two elements of qml in mainwindow? I opened a topic but I didn't have any answer

          jsulmJ Offline
          jsulmJ Offline
          jsulm
          Lifetime Qt Champion
          wrote on last edited by
          #4

          @vale88 said in Problem with slider in qml:

          can I know if it's possible connect two elements of qml in mainwindow?

          I'm still confused: first you ask whether you can create such a slider with widgets, now you ask whether you can connect two elements from QML in mainwindow. So, what do you really want to do? If you're using QML then why do you want to implement slider with widgets?

          https://forum.qt.io/topic/113070/qt-code-of-conduct

          V 1 Reply Last reply
          2
          • jsulmJ jsulm

            @vale88 said in Problem with slider in qml:

            can I know if it's possible connect two elements of qml in mainwindow?

            I'm still confused: first you ask whether you can create such a slider with widgets, now you ask whether you can connect two elements from QML in mainwindow. So, what do you really want to do? If you're using QML then why do you want to implement slider with widgets?

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

            @jsulm I would like connect two elements of qml in mainwindow, I have dial and slider. My problem is that I don't find the way..so I thought that I can use qt widget, but if someone can help me to connect dial and slider built with qml in mainwindow it's better for me...thanks a lot I have:

             ui->quickWidget_3->setSource(QUrl("qrc:///slider.qml"));
            
                ui->quickWidget_4->setSource(QUrl("qrc:///dial.qml"));
            
            
            
            

            and I must connect this

            jsulmJ 1 Reply Last reply
            -1
            • V vale88

              @jsulm I would like connect two elements of qml in mainwindow, I have dial and slider. My problem is that I don't find the way..so I thought that I can use qt widget, but if someone can help me to connect dial and slider built with qml in mainwindow it's better for me...thanks a lot I have:

               ui->quickWidget_3->setSource(QUrl("qrc:///slider.qml"));
              
                  ui->quickWidget_4->setSource(QUrl("qrc:///dial.qml"));
              
              
              
              

              and I must connect this

              jsulmJ Offline
              jsulmJ Offline
              jsulm
              Lifetime Qt Champion
              wrote on last edited by
              #6

              @vale88 said in Problem with slider in qml:

              ui->quickWidget_3->setSource(QUrl("qrc:///slider.qml"));

              ui->quickWidget_4->setSource(QUrl("qrc:///dial.qml"));
              

              Can't you use both in same qml file? Why do you use two quick widgets?

              https://forum.qt.io/topic/113070/qt-code-of-conduct

              V 1 Reply Last reply
              0
              • jsulmJ jsulm

                @vale88 said in Problem with slider in qml:

                ui->quickWidget_3->setSource(QUrl("qrc:///slider.qml"));

                ui->quickWidget_4->setSource(QUrl("qrc:///dial.qml"));
                

                Can't you use both in same qml file? Why do you use two quick widgets?

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

                @jsulm I have:

                import QtQuick 2.9
                import QtQuick.Extras 1.4
                import QtQuick.Controls 2.2
                
                Item {
                    x: 10
                    y: 0
                
                    width:100
                    height:100
                
                    Dial {
                        id: control
                        width: 92
                        height: 100
                
                        stepSize: 1
                        from:0
                        to:100
                
                        background: Rectangle {
                            x: 5
                            y: 5
                            width: 70
                            height:70
                            color: "black"
                            radius: width / 2
                            transformOrigin: Item.Right
                            border.color: control.pressed ? "#ffd1dc" : "#ffd1dc"
                            opacity: control.enabled ? 1 : 0.3
                        }
                
                        handle: Rectangle {
                            id: handleItem
                            x: control.background.x + control.background.width / 2 - width / 2
                            y: control.background.y + control.background.height / 2 - height / 2
                            width: 12
                            height: 12
                            color: "pink"
                            radius: 8
                            antialiasing: true
                            opacity: control.enabled ? 1 : 0.3
                            transform: [
                                Translate {
                                    y: -Math.min(control.background.width, control.background.height) * 0.4 + handleItem.height / 2
                                },
                                Rotation {
                                    angle: control.angle
                                    origin.x: handleItem.width / 2
                                    origin.y: handleItem.height / 2
                                }
                            ]
                        }
                
                
                    }
                }
                
                
                

                and in an other file

                import QtQuick 2.0
                import QtQuick.Extras 1.4
                import QtQuick.Window 2.10
                import QtQuick.Controls 2.4
                import QtQuick.Controls.Styles 1.4
                
                
                import QtQuick 2.12
                import QtQuick.Controls 2.12
                
                Slider {
                    id: control
                    to: 100
                    value: 0.5
                
                    background: Rectangle {
                        x: control.leftPadding
                        y: control.topPadding + control.availableHeight / 2 - height / 2
                        implicitWidth: 200
                        implicitHeight: 4
                        width: control.availableWidth
                        height: implicitHeight
                        radius: 2
                        color: "#000000"
                
                        Rectangle {
                            width: control.visualPosition * parent.width
                            height: parent.height
                            color: "#ffd1dc"
                            radius: 2
                        }
                    }
                
                    handle: Rectangle {
                        x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
                        y: control.topPadding + control.availableHeight / 2 - height / 2
                        implicitWidth: 26
                        implicitHeight: 26
                        radius: 13
                        color: control.pressed ? "#000000" : "#ffd1dc"
                        border.color: "#000000"
                    }
                }
                
                

                I use two file because I must use them in mainwindow, but if there is a way to use them together I can use it, I'm new with qml

                jsulmJ 1 Reply Last reply
                0
                • V vale88

                  @jsulm I have:

                  import QtQuick 2.9
                  import QtQuick.Extras 1.4
                  import QtQuick.Controls 2.2
                  
                  Item {
                      x: 10
                      y: 0
                  
                      width:100
                      height:100
                  
                      Dial {
                          id: control
                          width: 92
                          height: 100
                  
                          stepSize: 1
                          from:0
                          to:100
                  
                          background: Rectangle {
                              x: 5
                              y: 5
                              width: 70
                              height:70
                              color: "black"
                              radius: width / 2
                              transformOrigin: Item.Right
                              border.color: control.pressed ? "#ffd1dc" : "#ffd1dc"
                              opacity: control.enabled ? 1 : 0.3
                          }
                  
                          handle: Rectangle {
                              id: handleItem
                              x: control.background.x + control.background.width / 2 - width / 2
                              y: control.background.y + control.background.height / 2 - height / 2
                              width: 12
                              height: 12
                              color: "pink"
                              radius: 8
                              antialiasing: true
                              opacity: control.enabled ? 1 : 0.3
                              transform: [
                                  Translate {
                                      y: -Math.min(control.background.width, control.background.height) * 0.4 + handleItem.height / 2
                                  },
                                  Rotation {
                                      angle: control.angle
                                      origin.x: handleItem.width / 2
                                      origin.y: handleItem.height / 2
                                  }
                              ]
                          }
                  
                  
                      }
                  }
                  
                  
                  

                  and in an other file

                  import QtQuick 2.0
                  import QtQuick.Extras 1.4
                  import QtQuick.Window 2.10
                  import QtQuick.Controls 2.4
                  import QtQuick.Controls.Styles 1.4
                  
                  
                  import QtQuick 2.12
                  import QtQuick.Controls 2.12
                  
                  Slider {
                      id: control
                      to: 100
                      value: 0.5
                  
                      background: Rectangle {
                          x: control.leftPadding
                          y: control.topPadding + control.availableHeight / 2 - height / 2
                          implicitWidth: 200
                          implicitHeight: 4
                          width: control.availableWidth
                          height: implicitHeight
                          radius: 2
                          color: "#000000"
                  
                          Rectangle {
                              width: control.visualPosition * parent.width
                              height: parent.height
                              color: "#ffd1dc"
                              radius: 2
                          }
                      }
                  
                      handle: Rectangle {
                          x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
                          y: control.topPadding + control.availableHeight / 2 - height / 2
                          implicitWidth: 26
                          implicitHeight: 26
                          radius: 13
                          color: control.pressed ? "#000000" : "#ffd1dc"
                          border.color: "#000000"
                      }
                  }
                  
                  

                  I use two file because I must use them in mainwindow, but if there is a way to use them together I can use it, I'm new with qml

                  jsulmJ Offline
                  jsulmJ Offline
                  jsulm
                  Lifetime Qt Champion
                  wrote on last edited by
                  #8

                  @vale88 Write another QML file where you import these two QML files and use them.

                  https://forum.qt.io/topic/113070/qt-code-of-conduct

                  V 1 Reply Last reply
                  0
                  • jsulmJ jsulm

                    @vale88 Write another QML file where you import these two QML files and use them.

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

                    @jsulm I don't know how I can write this file..because I know very little qml, a qml main file?

                    jsulmJ 1 Reply Last reply
                    0
                    • V vale88

                      @jsulm I don't know how I can write this file..because I know very little qml, a qml main file?

                      jsulmJ Offline
                      jsulmJ Offline
                      jsulm
                      Lifetime Qt Champion
                      wrote on last edited by
                      #10

                      @vale88 said in Problem with slider in qml:

                      a qml main file?

                      Yes

                      https://forum.qt.io/topic/113070/qt-code-of-conduct

                      V 1 Reply Last reply
                      0
                      • jsulmJ jsulm

                        @vale88 said in Problem with slider in qml:

                        a qml main file?

                        Yes

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

                        @jsulm I wrote in a file:

                        import QtQuick 2.9
                        import QtQuick.Extras 1.4
                        import QtQuick.Controls 2.2
                        
                        Item {
                            x: 10
                            y: 0
                        
                            width:100
                            height:100
                        
                            Dial {
                                id: controla
                                width: 92
                                height: 100
                        
                                stepSize: 1
                                from:0
                                to:100
                        
                                background: Rectangle {
                                    x: 5
                                    y: 5
                                    width: 70
                                    height:70
                                    color: "black"
                                    radius: width / 2
                                    transformOrigin: Item.Right
                                    border.color: controla.pressed ? "#ffd1dc" : "#ffd1dc"
                                    opacity: controla.enabled ? 1 : 0.3
                                }
                        
                                handle: Rectangle {
                                    id: handleItem
                                    x: controla.background.x + controla.background.width / 2 - width / 2
                                    y: controla.background.y + controla.background.height / 2 - height / 2
                                    width: 12
                                    height: 12
                                    color: "pink"
                                    radius: 8
                                    antialiasing: true
                                    opacity: controla.enabled ? 1 : 0.3
                                    transform: [
                                        Translate {
                                            y: -Math.min(controla.background.width, controla.background.height) * 0.4 + handleItem.height / 2
                                        },
                                        Rotation {
                                            angle: controla.angle
                                            origin.x: handleItem.width / 2
                                            origin.y: handleItem.height / 2
                                        }
                                    ]
                                }
                        
                        
                            }
                        
                            Slider {
                                id: slider
                                x: -54
                                y: 106
                                value: 0.5
                            }
                        }
                        
                        
                        
                        import QtQuick 2.6
                        import QtQuick.Window 2.2
                        
                        Window {
                            visible:true
                            width:640
                            height: 480
                            title: qsTr("Hello")
                            
                            MainForm
                            {
                                slider.onValueChanged : { control.value = slider.valueAt(slider.position).toFixed(1)}
                                
                             anchors.fill: parent
                                
                            }
                        
                        }
                        
                        

                        I wrote in a file slider and dial and in an other I put connect..but when I write mainform program says:

                        Unknown component

                        jsulmJ 1 Reply Last reply
                        0
                        • V vale88

                          @jsulm I wrote in a file:

                          import QtQuick 2.9
                          import QtQuick.Extras 1.4
                          import QtQuick.Controls 2.2
                          
                          Item {
                              x: 10
                              y: 0
                          
                              width:100
                              height:100
                          
                              Dial {
                                  id: controla
                                  width: 92
                                  height: 100
                          
                                  stepSize: 1
                                  from:0
                                  to:100
                          
                                  background: Rectangle {
                                      x: 5
                                      y: 5
                                      width: 70
                                      height:70
                                      color: "black"
                                      radius: width / 2
                                      transformOrigin: Item.Right
                                      border.color: controla.pressed ? "#ffd1dc" : "#ffd1dc"
                                      opacity: controla.enabled ? 1 : 0.3
                                  }
                          
                                  handle: Rectangle {
                                      id: handleItem
                                      x: controla.background.x + controla.background.width / 2 - width / 2
                                      y: controla.background.y + controla.background.height / 2 - height / 2
                                      width: 12
                                      height: 12
                                      color: "pink"
                                      radius: 8
                                      antialiasing: true
                                      opacity: controla.enabled ? 1 : 0.3
                                      transform: [
                                          Translate {
                                              y: -Math.min(controla.background.width, controla.background.height) * 0.4 + handleItem.height / 2
                                          },
                                          Rotation {
                                              angle: controla.angle
                                              origin.x: handleItem.width / 2
                                              origin.y: handleItem.height / 2
                                          }
                                      ]
                                  }
                          
                          
                              }
                          
                              Slider {
                                  id: slider
                                  x: -54
                                  y: 106
                                  value: 0.5
                              }
                          }
                          
                          
                          
                          import QtQuick 2.6
                          import QtQuick.Window 2.2
                          
                          Window {
                              visible:true
                              width:640
                              height: 480
                              title: qsTr("Hello")
                              
                              MainForm
                              {
                                  slider.onValueChanged : { control.value = slider.valueAt(slider.position).toFixed(1)}
                                  
                               anchors.fill: parent
                                  
                              }
                          
                          }
                          
                          

                          I wrote in a file slider and dial and in an other I put connect..but when I write mainform program says:

                          Unknown component

                          jsulmJ Offline
                          jsulmJ Offline
                          jsulm
                          Lifetime Qt Champion
                          wrote on last edited by
                          #12

                          @vale88 This can't work as there is no "slider" in Window. You need to import your slider QML in your main QML file and add the slider to your main QML code.

                          https://forum.qt.io/topic/113070/qt-code-of-conduct

                          V 1 Reply Last reply
                          0
                          • jsulmJ jsulm

                            @vale88 This can't work as there is no "slider" in Window. You need to import your slider QML in your main QML file and add the slider to your main QML code.

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

                            @jsulm I don't understand how I must import..anyway I put in one file slider and dial

                            jsulmJ 1 Reply Last reply
                            0
                            • V vale88

                              @jsulm I don't understand how I must import..anyway I put in one file slider and dial

                              jsulmJ Offline
                              jsulmJ Offline
                              jsulm
                              Lifetime Qt Champion
                              wrote on last edited by
                              #14

                              @vale88 said in Problem with slider in qml:

                              I don't understand how I must import

                              Like explained here: https://doc.qt.io/qt-5/qtqml-syntax-imports.html

                              https://forum.qt.io/topic/113070/qt-code-of-conduct

                              V 1 Reply Last reply
                              0
                              • jsulmJ jsulm

                                @vale88 said in Problem with slider in qml:

                                I don't understand how I must import

                                Like explained here: https://doc.qt.io/qt-5/qtqml-syntax-imports.html

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

                                @jsulm I solved, I didn't use main qml, but two different file, and I connected them in mainwindow

                                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