How to load data from python socket(sensor data) on QML file?

[bayang]

Hi to everyone, I attempt to create a dashboard for cars which can show the velocity and rpm, the temperature in real-time on the QML dashboard. AM using python as backend and QML in front-office. I don't found the documentation about the Network package on the Qt site. how to get these data on QML script, someone could help me with this?

QML dashboard:

import QtQuick 2.2
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4

Window {
    id: root
    visible: true
    width: 1024
    height: 600

    color: "#161616"
    title: "car board"

    ValueSource {
        id: valueSource /// the full scenario with fake data over many loops
    }

    // we need to ensure--
    // our height is never greater than our widht.
    Item {
        id: container
        width: root.width
        height: Math.min(root.width, root.height)
        anchors.centerIn: parent
//        anchors.horizontalCenterOffset: -4

        Row {
            id: gaugeRow
            spacing: container.width * 0.02
            anchors.centerIn: parent

            TurnIndicator {
                id: leftIndicator
                anchors.verticalCenter: parent.verticalCenter
                width: height
                height: container.height * 0.1 - gaugeRow.spacing

                direction: Qt.LeftArrow
                on: valueSource.turnSignal == Qt.LeftArrow
            }
            CircularGauge {
                id: speedometer
                value: valueSource.kph
                anchors.verticalCenter: parent.verticalCenter
                maximumValue: 280
                // We set the width to the height, because the height will always be
                // the more limited factor. Also, all circulaar controls letterbox
                // their contents to ensure that they remain circular. Hoever, we
                // don't want to extra space on the letft and right of our gauges,
                // because they're laid out horizontally, and that would creeate
                // large horizontal gaps between gauges on wide screens.
                width: height
                height: container.height * 0.5

                style: DashboardGaugeStyle {}
            }

            Item {
                id: contain
                width: height
                height: container.height * 0.25 - gaugeRow.spacing
                anchors.verticalCenter: parent.verticalCenter

                Item {
                    id: car
                    width: height
                    height: contain.height
                    visible: true // valueSource.car
                    y: parent.height / 2 - height / 2 - container.height * 0.3

                    Image {
                        id: imgae_car
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        source: "file:/home/bm7/src/dashboard/images/car-g.png"
                        width: 47 // Original width :
                        height: 47 // Original height :
                    }
                }
                Item {
                    id: button
                    width: height
                    height: contain.height
                    visible: valueSource.button

                    y: parent.height / 2 - height / 2 - container.height * 0.3

                    Text {
                        id: texte
                        font.pointSize: 50
                        text: qsTr("60")
                        //font.bold: true


                    }
                    DelayButton {
                            id: control
                            checked: true
                            //visible: false
                            //text: qsTr("60")

                            Rectangle {
                                implicitWidth: 100
                                implicitHeight: 100
                                opacity: enabled ? 1 : 1
                                color: control.down ? "white" : "white"
                                radius : size / 2

                                readonly property real size: Math.min(control.width, control.height)
                                width: size
                                height: size
                                anchors.centerIn: parent

                                Text {
                                    text: texte.text
                                    font: texte.font

                                    anchors.centerIn: parent
                                }
                                Canvas{
                                    id: canvas
                                    anchors.fill: parent

                                    Connections{
                                        target: control
                                        function onProgressChanged() {
                                            canvas.requestPaint();
                                        }
                                    }

                                    onPaint: {
                                        var ctx = getContext("2d")
                                        //ctx.clearRect(0,0, width, height)
                                        ctx.strokeStyle = "red"
                                        ctx.lineWidth = parent.size / 20
                                        ctx.beginPath()
                                        var startAngle = Math.PI / 5 * 3
                                        var endAngle = startAngle + control.progress * Math.PI / 5 * 10
                                        ctx.arc(width/2, height/2, width/2 - ctx.lineWidth/2-2, startAngle, endAngle)
                                        ctx.stroke()
                                    }
                                }

                            }
                            //

                    }

//                    CircularGauge {
//                        id: droite
//                        value: valueSource.fuel
//                        maximumValue: 1
//                        y: parent.height / 2 - height / 2 - container.height * 0.15 0.18
//                        width: parent.width
//                        height: parent.height * 0.7

//                        style: IconGaugeStyle {
//                            id: fuelGaugeStyled

//                            // icon: "qrc:/images/fuel-icon.png" for C++
//                            icon: "file:/home/bm7/qt/project/images/fuel-icon.png"
//                            minWarningColor: Qt.rgba(0.5, 0, 0, 1)

//                            tickmarkLabel: Text {
//                                color: "white"
//                                visible: styleData.value === 0 || styleData.value === 1
//                                font.pixelSize: fuelGaugeStyled.toPixels(0.225)
//                                text: styleData.value === 0 ? "E" : (styleData.value === 1 ? "F" : "")
//                            }
//                        }
//                    }
                }


                CircularGauge {
                    id: fuelGauge
                    value: valueSource.fuel
                    maximumValue: 1
                    y: parent.height / 2 - height / 2 - container.height * 0.01
                    width: parent.width
                    height: parent.height * 0.7

                    style: IconGaugeStyle {
                        id: fuelGaugeStyle

                        // icon: "qrc:/images/fuel-icon.png" for C++
                        icon: "file:/home/bm7/src/dashboard/images/fuel-icon.png"
                        minWarningColor: Qt.rgba(0.5, 0, 0, 1)

                        tickmarkLabel: Text {
                            color: "white"
                            visible: styleData.value === 0 || styleData.value === 1
                            font.pixelSize: fuelGaugeStyle.toPixels(0.225)
                            text: styleData.value === 0 ? "E" : (styleData.value === 1 ? "F" : "")
                        }
                    }
                }
// old place of [2]
                CircularGauge {
                    value: valueSource.temperature
                    maximumValue: 1
                    width: parent.width
                    height: parent.height * 0.7
                    y: parent.height / 2 + container.height * 0.01

                    style: IconGaugeStyle {
                        id: tempGaugeStyle
                        // qrc:images/temperature-icon.png for C++
                        icon: "file:/home/bm7/project/src/dashboard/images/temperature-icon.png"
                        maxWarningColor: Qt.rgba(0.5, 0, 0, 1)

                        tickmarkLabel: Text {
                            color: "white"
                            visible: styleData.value === 0 || styleData.value === 1
                            font.pixelSize: tempGaugeStyle.toPixels(0.225)
                            text: styleData.value === 0 ? "C" : (styleData.value === 1 ? "H" : "")
                        }
                    }
                }

            }



            CircularGauge {
                id: tachometer
                width: height
                height: container.height * 0.5 // contianer.height*0.25 - gaugeRow.spacing [medium size]
                value: valueSource.rpm
                maximumValue: 8
                anchors.verticalCenter: parent.verticalCenter

                style: TachometerStyle {}
            }

            TurnIndicator {
                id: rightIndicator
                anchors.verticalCenter: parent.verticalCenter
                width: height
                height: container.height * 0.1 - gaugeRow.spacing

                direction: Qt.RightArrow
                on: valueSource.turnSignal == Qt.RightArrow
            }



        }
    }
        Row{
            id: _id
            Image {
                id: id_logo
                source: "file:/home/bm7/src/dashboard/images/logo.png"

                //LayoutItem.preferredSize: 48
                width: 167 // Original width : 1115
                height: 75 // Original height : 500

                // the reduction of 50% gives (1115 * 0.5, 500 * 0.5) = (557,250)
                // the reduction of 25% gives (1115 * 0.25, 500 * 0.25) = (278,125)
                // the reduction of 18% gives (1115 * 0.18, 500 * 0.18) = (200,90)
                // the reduction of 15% gives (1115 * 0.15, 500 * 0.15) = (167,75)
            }
        }
}

python code:

import os, sys
from PySide2 import QtCore
from PySide2.QtWidgets import QApplication
from PySide2.QtCore import QCoreApplication, QUrl
from PySide2.QtQml import QQmlApplicationEngine
from PySide2 import QtNetwork


if __name__ == "__main__":


    # application window
    QCoreApplication.setAttribute(QtCore.Qt.AA_EnableHighDpiScaling)
    app = QApplication(sys.argv)

    engine = QQmlApplicationEngine()
    url = QUrl.fromLocalFile(os.path.join(os.path.dirname(__file__), "qml/dashboard.qml"))
#    ctx = engine.rootContext()
#    ctx.setContextProperty("qmlapp", engine)
    engine.load(url)

    # show the window
    if not engine.rootObjects():
        sys.exit(-1)
    app.exec_()

the tree command:
tree

├── assets
│   ├── 280.png
│   ├── bold.png
│   ├── dash.png
│   ├── logo-added.png
│   └── wo-bold.png
├── client_test.py
├── dashboard.pro
├── dashboard.pro.user
├── dashboard.qrc
├── fonts
│   ├── DejaVuSans.ttf
│   └── LICENSE
├── images
│   ├── 140.png
│   ├── 30.png
│   ├── 50.png
│   ├── 70.png
│   ├── 90.png
│   ├── car-gg.png
│   ├── car-g.png
│   ├── car-g.svg
│   ├── car-highlights.png
│   ├── car-r.png
│   ├── car-rr.png
│   ├── car-r.svg
│   ├── fuel-icon.png
│   ├── logo.png
│   ├── red-border-right.png
│   ├── setup.png
│   ├── speed-limit-warning.png
│   └── temperature-icon.png
├── LICENCE
├── main.cpp
├── main.py
├── main.pyproject
├── pycache
│   └── socket.cpython-36.pyc
├── qml
│   ├── DashboardGaugeStyle.qml
│   ├── dashboard.qml
│   ├── IconGaugeStyle.qml
│   ├── TachometerStyle.qml
│   ├── TurnIndicator.qml
│   └── ValueSource.qml
├── README.md
├── requirements.txt
├── serv.py
├── socket_server.py
├── test.cpp
└── test.h
   ├── red-border-right.png
│   ├── setup.png
│   ├── speed-limit-warning.png
│   └── temperature-icon.png
├── LICENCE
├   ├── red-border-right.png
│   ├── setup.png
│   ├── speed-limit-warning.png
│   └── temperature-icon.png
├── LICENCE
├── main.cpp
├── main.py
├── main.pyproject
├── pycache
│   └── socket.cpython-36.pyc
├── qml
│   ├── DashboardGaugeStyle.qml
│   ├── dashboard.qml
│   ├── IconGaugeStyle.qml
│   ├── TachometerStyle.qml
│   ├── TurnIndicator.qml
│   └── ValueSource.qml
├── README.md
├── requirements.txt
├── serv.py
├── socket_server.py
├── test.cpp
└── test.h
── main.cpp
├── main.py
├── main.pyproject
├── pycache
│   └── socket.cpython-36.pyc
├── qml
│   ├── DashboardGaugeStyle.qml
│   ├── dashboard.qml
│   ├── IconGaugeStyle.qml
│   ├── TachometerStyle.qml
│   ├── TurnIndicator.qml
│   └── ValueSource.qml
├── README.md
├── requirements.txt
├── serv.py
├── socket_server.py
├── test.cpp
└── test.h