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

iosif18

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 ?

cpscotti

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

podsvirov

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.

iosif18

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!

ZapB

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

iosif18

[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

podsvirov

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)!

iosif18

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