void MainWindow::on_Read_clicked() //dogru calisiyor mu bilinmiyor ---> read from serial
{

if(serial->isOpen()) {

    int16_t dizi[11];
    int s;
    QByteArray data = serial->readAll();
   // m_console->putData(data);
  // qDebug() << "okuyor" << data;
    s= data.size();
    if (s>22)
        s=22;

    memcpy(dizi, data.constData(), 22);
    qDebug() << "-->"<< dizi[1] << dizi[2]<< dizi[3]<< dizi[4]<< dizi[5]<< dizi[6]<< dizi[7]<< dizi[8]<< dizi[9]<< dizi[10];

}

else {
    msgBox.setText("port acik degil!!!!");
msgBox.exec();
}

I have 2 joystick. I want to move them according to that datas. Here is my joystick code for it. But now, it moves according to my mouse event.

import QtQuick 2.0

Rectangle {
    id: root2
    width: joystick2.width
    height: joystick2.height
    color: "transparent"

    signal joystick2_moved2(double x2, double y2);
    Image {
        id: joystick2

        property real angle : 0
        property real distance : 0

        source: "background.png"
        anchors.centerIn: parent

        ParallelAnimation {
            id: returnAnimation
            NumberAnimation { target: thumb.anchors; property: "horizontalCenterOffset";
                to: 0; duration: 200; easing.type: Easing.OutSine }
            NumberAnimation { target: thumb.anchors; property: "verticalCenterOffset";
                to: 0; duration: 200; easing.type: Easing.OutSine }
        }



        MouseArea {
            id: mouse
            property real fingerAngle : Math.atan2(mouseX, mouseY)
            property int mcx : mouseX - width * 0.5
            property int mcy : mouseY - height * 0.5
            property bool fingerInBounds : fingerDistance2 < distanceBound2
            property real fingerDistance2 : mcx * mcx + mcy * mcy
            property real distanceBound : width * 0.5 - thumb.width * 0.5
            property real distanceBound2 : distanceBound * distanceBound

            property double signal_x : (mouseX - joystick2.width/2) / distanceBound
            property double signal_y : -(mouseY - joystick2.height/2) / distanceBound


            anchors.fill: parent

            onPressed: {
                returnAnimation.stop();
            }

            onReleased: {
                returnAnimation.restart()
                joystick2_moved2(0, 0);
            }

            onPositionChanged: {
                if (fingerInBounds) {
                    thumb.anchors.horizontalCenterOffset = mcx
                    thumb.anchors.verticalCenterOffset = mcy
                } else {
                    var angle = Math.atan2(mcy, mcx)
                    thumb.anchors.horizontalCenterOffset = Math.cos(angle) * distanceBound
                    thumb.anchors.verticalCenterOffset = Math.sin(angle) * distanceBound
                }

                // Fire the signal to indicate the joystick has moved
                angle = Math.atan2(signal_y, signal_x)

                if(fingerInBounds) {
                    joystick2_moved2(
                        Math.cos(angle) * Math.sqrt(fingerDistance2) / distanceBound,
                        Math.sin(angle) * Math.sqrt(fingerDistance2) / distanceBound
                    );
                } else {
                    joystick2_moved2(
                        Math.cos(angle) * 500,
                        Math.sin(angle) * 500
                    );
                }
            }
        }

        Image {
            id: thumb
            source: "finger.png"
            anchors.centerIn: parent
        }
    }
}