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

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



  • 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


Log in to reply