前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >PySide_PyQT_QML

PySide_PyQT_QML

原创
作者头像
大发明家
发布2021-12-06 14:01:17
1.7K0
发布2021-12-06 14:01:17
举报
文章被收录于专栏:技术博客文章
1、新建项目
1.1、新建工程

打开PyCharm,新建工程tempMonitor,如下:

image-20210825202543995.png

1.2、添加python主程序

tempMonitor.py 主程序如下:

代码语言:txt
复制
import math
代码语言:txt
复制
import os
代码语言:txt
复制
import sys
代码语言:txt
复制
import time
代码语言:txt
复制
from pathlib import Path
代码语言:txt
复制
from PySide2.QtCore import Qt, QObject, Slot
代码语言:txt
复制
from PySide2.QtQml import QQmlApplicationEngine
代码语言:txt
复制
from PySide2.QtWidgets import QApplication
代码语言:txt
复制
class Controler(QObject):
代码语言:txt
复制
    def __init__(self):
代码语言:txt
复制
        super().__init__()
代码语言:txt
复制
        self.tempValue = 0
代码语言:txt
复制
    @Slot()
代码语言:txt
复制
    def exit(self):
代码语言:txt
复制
        sys.exit()
代码语言:txt
复制
    @Slot(result=float)
代码语言:txt
复制
    def getTempValue(self):
代码语言:txt
复制
        file_name = os.path.join("/", "mnt", "1wire", "uncached", "28.99E88D0D0000", "temperature")
代码语言:txt
复制
        file_object = open(file_name, 'r')
代码语言:txt
复制
        temp = file_object.read()
代码语言:txt
复制
        self.tempValue = float(temp)
代码语言:txt
复制
        print("tempvalue:",self.tempValue)
代码语言:txt
复制
        file_object.close()
代码语言:txt
复制
        return self.tempValue
代码语言:txt
复制
if __name__=='__main__':
代码语言:txt
复制
    a = QApplication(sys.argv)
代码语言:txt
复制
    a.setOverrideCursor(Qt.BlankCursor)
代码语言:txt
复制
    engine = QQmlApplicationEngine()
代码语言:txt
复制
    controler = Controler()
代码语言:txt
复制
    context = engine.rootContext()
代码语言:txt
复制
    context.setContextProperty("_Controler", controler)
代码语言:txt
复制
    engine.load(os.fspath(Path(__file__).resolve().parent / "ui/monitor.qml"))
代码语言:txt
复制
    if not engine.rootObjects():
代码语言:txt
复制
        sys.exit(-1)
代码语言:txt
复制
    sys.exit(a.exec_())
  • 在该程序中,建立一个 Controler 类,并实现了一个获取温度的方法,获取温度后就可以再qml界面中进行显示了。
1.3、添加界面文件
  • 在项目中添加ui文件夹,并新建main.qml文件; 参考代码如下:
代码语言:txt
复制
import QtQuick 2.11
代码语言:txt
复制
import QtQuick.Window 2.4
代码语言:txt
复制
import QtQuick.Controls 2.4
代码语言:txt
复制
import QtQuick.Controls.Styles 1.4
代码语言:txt
复制
import QtQuick.Extras 1.4
代码语言:txt
复制
import QtGraphicalEffects 1.0
代码语言:txt
复制
import QtCharts 2.2
代码语言:txt
复制
ApplicationWindow{
代码语言:txt
复制
    id:root
代码语言:txt
复制
    width: 800
代码语言:txt
复制
    height: 480
代码语言:txt
复制
    visible: true
代码语言:txt
复制
    visibility: Window.FullScreen
代码语言:txt
复制
    background: Rectangle{
代码语言:txt
复制
        color: "black"
代码语言:txt
复制
        anchors.fill: parent
代码语言:txt
复制
    }
代码语言:txt
复制
    Button{
代码语言:txt
复制
        id:btnexit
代码语言:txt
复制
        background: Rectangle{
代码语言:txt
复制
            color: "#a01010"
代码语言:txt
复制
            anchors.fill: parent
代码语言:txt
复制
            radius:12
代码语言:txt
复制
        }
代码语言:txt
复制
        width: 48
代码语言:txt
复制
        height: 48
代码语言:txt
复制
        anchors{
代码语言:txt
复制
            top: parent.top
代码语言:txt
复制
            right: parent.right
代码语言:txt
复制
            topMargin: 8
代码语言:txt
复制
            rightMargin: 8
代码语言:txt
复制
        }
代码语言:txt
复制
        Text {
代码语言:txt
复制
            text: qsTr("X")
代码语言:txt
复制
            anchors.centerIn: parent
代码语言:txt
复制
            font{
代码语言:txt
复制
                pointSize: 32
代码语言:txt
复制
            }
代码语言:txt
复制
            color: "white"
代码语言:txt
复制
        }
代码语言:txt
复制
        onClicked: {
代码语言:txt
复制
            _Controler.exit();
代码语言:txt
复制
        }
代码语言:txt
复制
    }
代码语言:txt
复制
    Text {
代码语言:txt
复制
        id: title
代码语言:txt
复制
        text: qsTr("Temperature Monitor")
代码语言:txt
复制
        anchors{
代码语言:txt
复制
            top:  parent.top
代码语言:txt
复制
            horizontalCenter: parent.horizontalCenter
代码语言:txt
复制
            topMargin: 20
代码语言:txt
复制
        }
代码语言:txt
复制
        font{
代码语言:txt
复制
            pointSize: 24
代码语言:txt
复制
        }
代码语言:txt
复制
        color: "#a0a0a0"
代码语言:txt
复制
    }
代码语言:txt
复制
    ChartView{
代码语言:txt
复制
        id:cv
代码语言:txt
复制
        width:600
代码语言:txt
复制
        height:400
代码语言:txt
复制
        anchors{
代码语言:txt
复制
            top:title.bottom
代码语言:txt
复制
            topMargin:10
代码语言:txt
复制
            left:parent.left
代码语言:txt
复制
            leftMargin:40
代码语言:txt
复制
        }
代码语言:txt
复制
        antialiasing: true
代码语言:txt
复制
        theme: ChartView.ChartThemeDark
代码语言:txt
复制
        property int  timcnt: 0
代码语言:txt
复制
        property double  tempValue: 0
代码语言:txt
复制
        ValueAxis{
代码语言:txt
复制
            id:xAxis
代码语言:txt
复制
            min: 0
代码语言:txt
复制
            max: cv.timcnt < 10 ? 10 : cv.timcnt + 1
代码语言:txt
复制
            tickCount: 11
代码语言:txt
复制
            labelFormat: "%d"
代码语言:txt
复制
        }
代码语言:txt
复制
        ValueAxis{
代码语言:txt
复制
            id:yAxis
代码语言:txt
复制
            min: 20
代码语言:txt
复制
            max: 40
代码语言:txt
复制
            tickCount: 1
代码语言:txt
复制
            labelFormat: "%d"
代码语言:txt
复制
        }
代码语言:txt
复制
        LineSeries {
代码语言:txt
复制
            name: "Temperature"
代码语言:txt
复制
            id:lines
代码语言:txt
复制
            axisX: xAxis
代码语言:txt
复制
            axisY: yAxis
代码语言:txt
复制
            width: 3
代码语言:txt
复制
            color: "#F11C9C"
代码语言:txt
复制
        }
代码语言:txt
复制
        Timer{
代码语言:txt
复制
            id:tm
代码语言:txt
复制
            interval: 1000
代码语言:txt
复制
            repeat: true
代码语言:txt
复制
            running: true
代码语言:txt
复制
            onTriggered: {
代码语言:txt
复制
                cv.timcnt = cv.timcnt + 1
代码语言:txt
复制
                cv.tempValue = _Controler.getTempValue()
代码语言:txt
复制
                lines.append(cv.timcnt,cv.tempValue)
代码语言:txt
复制
                console.log("qml temp value:",cv.tempValue)
代码语言:txt
复制
            }
代码语言:txt
复制
        }
代码语言:txt
复制
    }
代码语言:txt
复制
    Rectangle {
代码语言:txt
复制
        width: 80
代码语言:txt
复制
        height: 300
代码语言:txt
复制
        color: "transparent"
代码语言:txt
复制
        anchors{
代码语言:txt
复制
            left: cv.right
代码语言:txt
复制
            leftMargin: 20
代码语言:txt
复制
            verticalCenter: cv.verticalCenter
代码语言:txt
复制
        }
代码语言:txt
复制
        Timer {
代码语言:txt
复制
            running: true
代码语言:txt
复制
            repeat: true
代码语言:txt
复制
            interval: 600
代码语言:txt
复制
            onTriggered: gauge.value = cv.tempValue
代码语言:txt
复制
        }
代码语言:txt
复制
        Gauge {
代码语言:txt
复制
            id: gauge
代码语言:txt
复制
            anchors.fill: parent
代码语言:txt
复制
            anchors.margins: 10
代码语言:txt
复制
            minimumValue: 20
代码语言:txt
复制
            maximumValue: 40
代码语言:txt
复制
            Behavior on value {
代码语言:txt
复制
                NumberAnimation {
代码语言:txt
复制
                    duration: 600
代码语言:txt
复制
                }
代码语言:txt
复制
            }
代码语言:txt
复制
            style: GaugeStyle {
代码语言:txt
复制
                valueBar: Rectangle {
代码语言:txt
复制
                    color: "#e34c22"
代码语言:txt
复制
                    implicitWidth: 28
代码语言:txt
复制
                }
代码语言:txt
复制
            }
代码语言:txt
复制
        }
代码语言:txt
复制
    }
代码语言:txt
复制
}
  • 界面中使用了qml的一个组件 ChartView 用于显示温度的变化曲线;
  • 使用qml的组件 Gauge 来显示变化刻度;
2、执行程序
2.1、上传程序到树莓派

在工程上右键将这个项目文件上传到树莓派中:

image-20210828224250787.png

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
作者已关闭评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、新建项目
    • 1.1、新建工程
      • 1.2、添加python主程序
        • 1.3、添加界面文件
        • 2、执行程序
          • 2.1、上传程序到树莓派
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档