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

Connections qml dial and slider in qml



  • It doesn't work, I wrote:

    import QtQuick 2.0
    import QtQuick.Extras 1.4
    import QtGraphicalEffects 1.0
    import QtQuick.Window 2.10
    import QtQuick.Controls 2.3
    
    
    Item{
        x: 10
        y: 0
    
        width:100
        height:100
    
    
        Dial{
            id: control
            inputMode: Dial.Horizontal
        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 ? "#17a81a" : "#21be2b"
            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: "white"
    //        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
    //            }
    //        ]
    //    }
    
    Connections
    {
        target: yourObject1
        onSliderMoved: control.position = position
    }
    
    
    
    }
    }
    
    

    in mainwindow:

    #include "mainwindow.h"
    #include "ui_mainwindow.h"
    #include <QtQml>
    #include <QtQuick>
    
    #include <iostream>
    #include <fstream>
    #include <qscreen.h>
    #include <QDebug>
    #include <QDir>
    #include <QFile>
    #include <QFileSystemModel>
    #include <QMoveEvent>
    #include <QString>
    #include <QTextStream>
    #include <QTime>
    #include <QTimer>
    #include <QToolTip>
    #include <QTreeView>
    #include <QGuiApplication>
    #include <QPixmap>
    #include <QtQml>
    #include <QtQuick>
    
    #include <QSpacerItem>
    #include <QTranslator>
    #include <fstream>
    #include <string>
    #include <stdio.h>
    
    
    MainWindow::MainWindow(QWidget *parent)
        : QMainWindow(parent)
        , ui(new Ui::MainWindow)
    {
        ui->setupUi(this);
    
        setStyleSheet("background-color:white");
    
        ui->quickWidget->engine()->rootContext()->setContextProperty("yourObject",ui->horizontalSlider);
    
        ui->quickWidget_2->engine()->rootContext()->setContextProperty("yourObject1",ui->horizontalSlider_3);
    
    
        ui->quickWidget_2->setSource(QUrl("qrc:///sl.qml"));
       ui->quickWidget->setSource(QUrl("qrc:///qml.qml"));
    
    
    
    
         //connect circularGauge e text
    
    }
    
    MainWindow::~MainWindow()
    {
        delete ui;
    }
    
    
    void MainWindow::on_horizontalSlider_2_sliderMoved(int position)
    {
        ui->dial->setValue(position);
    }
    
    


  • @vale88 said in Connections qml dial and slider in qml:

    doesn't work

    tell us what is the error at least .. instead of pasting 50 useless Include directives

    edit : + it is duplicate of this one ? https://forum.qt.io/topic/107260/load-two-file-qml wow..
    https://forum.qt.io/topic/107226/error-with-qml/3

    can you tell what exactly are you trying to do ?



  • @LeLev I want to connect dial of qml and slider of qml..

    this is code of dial:

    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 ? "#17a81a" : "#21be2b"
                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: "lightgray"
                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 code of slider:

    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 would like that when I move slider dial moves, I want to use mainwindow and not main qml, thanks
    in mainwindow I wrote:

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

    and I have this:

    Cattura.PNG



  • @vale88 please don't double post. Since your issue it's related to QML, it looks we could close this one.



  • @Pablo-J-Rogina ok I delete the last post



  • @vale88 I solved

     QObject* item = ui->quickWidget_3->rootObject();
            QObject::connect(item, SIGNAL(moved()), SLOT(sliderMoved()));
    
            QObject *item1 = ui->quickWidget_5->rootObject();
            QObject::connect(item1,SIGNAL(moved()),SLOT(sliderMoved1()));
    
    
    
        ui->horizontalSlider->setStyleSheet("QSlider::groove:vertical {background-color:red; position:absolute; left:4px; right: 4px}");
        //connect circularGauge e text
    
    }
    
    MainWindow::~MainWindow()
    {
        delete ui;
    }
    
    
    void MainWindow::on_horizontalSlider_2_sliderMoved(int position)
    
    {
        ui->dial->setValue(position);
    
    }
    
    void MainWindow::sliderMoved()
    {
        QObject* slider = ui->quickWidget_3->rootObject();
        QObject* dial = ui->quickWidget_4->rootObject();
        qreal value = QQmlProperty::read(slider, "value").toReal();
        QQmlProperty::write(dial, "value", value);
        //ui->dial->setValue(value);
    }
    


  • @vale88 said in Connections qml dial and slider in qml:

    I solved

    Again, if your issue is solved please don't forget to mark your post as such! Thanks.


Log in to reply