Problem with slider in qml

[vale88]

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

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

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

[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

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

[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

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

[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

[jsulm]

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

[vale88]

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

[jsulm]

@vale88 said in Problem with slider in qml:

a qml main file?

Yes

[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

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

[vale88]

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

[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

[vale88]

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