Solved 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:
can I build a similar slider with qt? is it possible?
-
@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
-
@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
-
@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
-
@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?
-
-
@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
-
@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
-
@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