[Solved] QPushButton from C++ UI signal to rotate qml element



  • hi
    I have 2 windows one QT C++ UI and other QML aplication viewer

    how can I send a signal from QPushButton, in Qt Ui, to an element in qml to rotate it ?



  • They are different applications? I mean, two different executables?



  • Hi, iosif18!
    I wrote a small example to solve your problem.
    In Qt Creator, I create a new project (File->New->Qt Quick Project->Qt Quick Application) named QPushVsItem.
    Content of main.cpp:
    @
    #include <QtGui/QApplication>
    #include <QtGui/QPushButton>
    #include <QtGui/QVBoxLayout>
    #include <QtDeclarative/QDeclarativeContext>
    #include "qmlapplicationviewer.h"

    int main(int argc, char *argv[])
    {
    QApplication app(argc, argv);

    QWidget widget;
    
    QPushButton *button = new QPushButton("Rotate", &widget);
    
    QmlApplicationViewer *view = new QmlApplicationViewer(&widget);
    view->setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
    view->rootContext()->setContextProperty("button", button);
    view->setMainQmlFile&#40;QLatin1String("qml/QPushVsItem/main.qml"&#41;);
    view->resize(400, 400);
    
    QVBoxLayout *layout = new QVBoxLayout(&widget);
    layout->addWidget(view);
    layout->addWidget(button);
    
    widget.setLayout(layout);
    
    widget.show();
    
    return app.exec();
    

    }
    @
    Content of main.qml:
    @
    import QtQuick 1.0

    Rectangle {
    width: 400
    height: 400

    Rectangle {
        id: item
        width: 300
        height: 50
        anchors.centerIn: parent
        color: "chocolate"
        property bool rotated: false
        rotation: rotated ? 90 : 0
    }
    
    Connections {
        target: button
        onClicked: item.rotated = !item.rotated
    }
    

    }
    @
    I advise you to read: "Exchanging data between QML and C++":http://doc.qt.nokia.com/4.7/qtbinding.html#exchanging-data-between-qml-and-c.
    If you have questions ask me.



  • Thank you for that answer.

    but i wasn't give you enough details; I have a qml just for animations for example a Instrument cluster(car speedometer, and fuel indicator, with LEDs for fuelEmpty, ABS, ESP etc.) and I want from one UI window with push buttons and vertical or horizontal sliders to control the qml interface from the other one.
    So i don't know how to send the signal from QT UI QPushButton to the QML to set the speedNeedle to indicate 100 km/h (rotation angle = 169) for example.

    The values of rotation I must to set them from outside the QML, QML is just for fluid animations.

    The Speedometer example:
    @ Image {
    id: speedNeedle

                    property int viteza //means "speed" in Romanian
                    viteza: (((speedRotation.angle-66.5)*220)/(291 - 66.5))
                    x: 134
                    y: 114
                    width: 64
                    height: 203
                    smooth: true
                    sourceSize.width: 300
                    source: "pointer_transparent.png"
    
                    transform: Rotation {
                        id:speedRotation
                        origin.x: 33
                        origin.y: 52
                        angle: 66.5 //66.5=0km/h  //169=100km/h //178.8=110km/h
    
                        onAngleChanged: {
                            if(speedRotation.angle >= 97) {
                                beltLed.state = "BLINK"
                            }
                            else {
                                beltLed.state = "STINS"  //means LED light "OFF" in Romanian
                            }
                        }
    
                        // sets the smoth spring animation for the speedNeedle
                        Behavior on angle {
                            SpringAnimation {
                                damping: 0.15
                                spring: 0.4
                            }
                        }
    
                    }
                }@
    

    The Qt UI is a new QT designer form.
    and some pictures for exemplification
    QT UI:
    ![url=http://www.postimage.org/][img]http://s3.postimage.org/ipfr3w7y3/qt_UI.png[/img][/url] [url=http://www.postimage.org/]image upload[/url](QT UI)!
    and QML:
    ![url=http://www.postimage.org/][img]http://s3.postimage.org/psn604wfb/qml.png[/img][/url] [url=http://www.postimage.org/]free image hosting/url!



  • Saying "2 windows" does not give us enough information. Do you mean "2 applications" or 1 application with "2 top-level windows"?



  • [quote author="ZapB" date="1316167150"]Saying "2 windows" does not give us enough information. Do you mean "2 applications" or 1 application with "2 top-level windows"?[/quote]

    sorry... I'm new in software

    one application with 2 top-level windows



  • Ok!
    Content of main.cpp:
    @
    #include <QtGui/QApplication>
    #include <QtGui/QPushButton>
    #include <QtGui/QSlider>
    #include <QtGui/QGridLayout>
    #include <QtGui/QSpinBox>
    #include <QtDeclarative/QDeclarativeContext>
    #include "qmlapplicationviewer.h"

    int main(int argc, char *argv[])
    {
    QApplication app(argc, argv);

    QWidget widget;
    
    QPushButton *button = new QPushButton("Set", &widget);
    
    QSlider *slider = new QSlider(Qt::Horizontal, &widget);
    slider->setRange(0, 100);
    slider->setValue(30);
    
    QSpinBox *spin = new QSpinBox(&widget);
    spin->setRange(0, 100);
    spin->setValue(100);
    
    QmlApplicationViewer view;
    view.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
    view.rootContext()->setContextProperty("button", button);
    view.rootContext()->setContextProperty("slider", slider);
    view.rootContext()->setContextProperty("spin", spin);
    view.setMainQmlFile&#40;QLatin1String("qml/QPushVsItem/main.qml"&#41;);
    
    view.show();
    
    QGridLayout *layout = new QGridLayout(&widget);
    layout->addWidget(slider, 0, 0, 1, 2);
    layout->addWidget(button, 1, 0);
    layout->addWidget(spin, 1, 1);
    
    widget.setLayout(layout);
    
    widget.show();    
    
    return app.exec();
    

    }
    @
    Content of main.qml:
    @
    import QtQuick 1.0

    Rectangle {
    width: 400
    height: 205
    color: "black"

    Rectangle {
        id: speedometer
        width: 400 - border.width
        height: width
        radius: width / 2
        anchors.horizontalCenter: parent.horizontalCenter
        y: parent.height - radius - border.width / 2
        color: "black"
        border.width: 10
        border.color: "green"
        property bool rotated: false
        rotation: rotated ? 90 : 0
    
        Text {
            anchors.horizontalCenter: speedometer.horizontalCenter
            anchors.bottom: center.top
            color: "green"
            font.pixelSize: 24
            text: slider.value + ", km/h"
        }
    
        Rectangle {
            id: arrow
            width: speedometer.radius - speedometer.border.width
            height: 2 * radius
            radius: speedometer.border.width / 2
            transformOrigin: Item.Left
            anchors.left: speedometer.horizontalCenter
            anchors.verticalCenter: speedometer.verticalCenter
            color: "green"
            rotation: -180 + 180 / 100 * slider.value
            smooth: true
        }
    
        Rectangle {
            id: center
            width: 40
            height: width
            radius: width / 2
            anchors.centerIn: parent
            color: "green"
        }
    
        // You can do it in C++
        Connections {
            target: button
            onClicked: slider.value = spin.value
        }
    }
    

    }
    @
    Screen:
    !http://s3.postimage.org/irxc1uyrt/speedometer.png(Speedometer scteen)!



  • [quote author="Konstantin Podsvirov" date="1316172464"]Ok!
    Content of main.cpp:
    @
    #include <QtGui/QApplication>
    #include <QtGui/QPushButton>
    #include <QtGui/QSlider>
    #include <QtGui/QGridLayout>
    #include <QtGui/QSpinBox>
    #include <QtDeclarative/QDeclarativeContext>
    #include "qmlapplicationviewer.h"

    int main(int argc, char *argv[])
    {
    QApplication app(argc, argv);

    QWidget widget;
    
    QPushButton *button = new QPushButton("Set", &widget);
    
    QSlider *slider = new QSlider(Qt::Horizontal, &widget);
    slider->setRange(0, 100);
    slider->setValue(30);
    
    QSpinBox *spin = new QSpinBox(&widget);
    spin->setRange(0, 100);
    spin->setValue(100);
    
    QmlApplicationViewer view;
    view.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
    view.rootContext()->setContextProperty("button", button);
    view.rootContext()->setContextProperty("slider", slider);
    view.rootContext()->setContextProperty("spin", spin);
    view.setMainQmlFile&#40;QLatin1String("qml/QPushVsItem/main.qml"&#41;&#41;;
    
    view.show();
    
    QGridLayout *layout = new QGridLayout(&widget);
    layout->addWidget(slider, 0, 0, 1, 2);
    layout->addWidget(button, 1, 0);
    layout->addWidget(spin, 1, 1);
    
    widget.setLayout(layout);
    
    widget.show();    
    
    return app.exec();
    

    }
    @
    Content of main.qml:
    @
    import QtQuick 1.0

    Rectangle {
    width: 400
    height: 205
    color: "black"

    Rectangle {
        id: speedometer
        width: 400 - border.width
        height: width
        radius: width / 2
        anchors.horizontalCenter: parent.horizontalCenter
        y: parent.height - radius - border.width / 2
        color: "black"
        border.width: 10
        border.color: "green"
        property bool rotated: false
        rotation: rotated ? 90 : 0
    
        Text {
            anchors.horizontalCenter: speedometer.horizontalCenter
            anchors.bottom: center.top
            color: "green"
            font.pixelSize: 24
            text: slider.value + ", km/h"
        }
    
        Rectangle {
            id: arrow
            width: speedometer.radius - speedometer.border.width
            height: 2 * radius
            radius: speedometer.border.width / 2
            transformOrigin: Item.Left
            anchors.left: speedometer.horizontalCenter
            anchors.verticalCenter: speedometer.verticalCenter
            color: "green"
            rotation: -180 + 180 / 100 * slider.value
            smooth: true
        }
    
        Rectangle {
            id: center
            width: 40
            height: width
            radius: width / 2
            anchors.centerIn: parent
            color: "green"
        }
    
        // You can do it in C++
        Connections {
            target: button
            onClicked: slider.value = spin.value
        }
    }
    

    }
    @
    Screen:
    !http://s3.postimage.org/irxc1uyrt/speedometer.png(Speedometer scteen)![/quote]

    Thank you very much !!!

    [SOLVED]


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.