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

Problem with slider in qml



  • 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?


  • Qt Champions 2019

    @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...



  • @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


  • Qt Champions 2019

    @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?



  • @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


  • Qt Champions 2019

    @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?



  • @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


  • Qt Champions 2019

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



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


  • Qt Champions 2019

    @vale88 said in Problem with slider in qml:

    a qml main file?

    Yes



  • @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


  • Qt Champions 2019

    @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.



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


  • Qt Champions 2019

    @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



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


Log in to reply