Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

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

    General and Desktop
    1
    1
    82
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • B
      bayang last edited by 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

      1 Reply Last reply Reply Quote 0
      • First post
        Last post