image-20210825202543995
1.2、添加python主程序tempMonitor.py 主程序如下：
1import math 2import os 3import sys 4import time 5from pathlib import Path 6 7from PySide2.QtCore import Qt, QObject, Slot 8from PySide2.QtQml import QQmlApplicationEngine 9from PySide2.QtWidgets import QApplication1011class Controler(QObject):1213 def __init__(self):14 super().__init__()15 self.tempValue = 01617 @Slot()18 def exit(self):19 sys.exit()2021 @Slot(result=float)22 def getTempValue(self):23 file_name = os.path.join("/", "mnt", "1wire", "uncached", "28.99E88D0D0000", "temperature")2425 file_object = open(file_name, 'r')26 temp = file_object.read()2728 self.tempValue = float(temp)2930 print("tempvalue:",self.tempValue)3132 file_object.close()3334 return self.tempValue3536if __name__=='__main__':3738 a = QApplication(sys.argv)3940 a.setOverrideCursor(Qt.BlankCursor)4142 engine = QQmlApplicationEngine()4344 controler = Controler()45 context = engine.rootContext()46 context.setContextProperty("_Controler", controler)4748 engine.load(os.fspath(Path(__file__).resolve().parent / "ui/monitor.qml"))4950 if not engine.rootObjects():51 sys.exit(-1)5253 sys.exit(a.exec_())在该程序中，建立一个 Controler 类，并实现了一个获取温度的方法，获取温度后就可以再qml界面中进行显示了。1.3、添加界面文件在项目中添加ui文件夹，并新建main.qml文件; 参考代码如下：
1import QtQuick 2.11 2import QtQuick.Window 2.4 3import QtQuick.Controls 2.4 4import QtQuick.Controls.Styles 1.4 5import QtQuick.Extras 1.4 6import QtGraphicalEffects 1.0 7import QtCharts 2.2 8 9ApplicationWindow{ 10 id:root 11 width: 800 12 height: 480 13 visible: true 14 visibility: Window.FullScreen 15 16 background: Rectangle{ 17 color: "black" 18 anchors.fill: parent 19 } 20 21 Button{ 22 id:btnexit 23 background: Rectangle{ 24 color: "#a01010" 25 anchors.fill: parent 26 radius:12 27 } 28 width: 48 29 height: 48 30 anchors{ 31 top: parent.top 32 right: parent.right 33 topMargin: 8 34 rightMargin: 8 35 } 36 Text { 37 text: qsTr("X") 38 anchors.centerIn: parent 39 font{ 40 pointSize: 32 41 } 42 color: "white" 43 } 44 onClicked: { 45 _Controler.exit(); 46 } 47 } 48 49 Text { 50 id: title 51 text: qsTr("Temperature Monitor") 52 anchors{ 53 top: parent.top 54 horizontalCenter: parent.horizontalCenter 55 topMargin: 20 56 } 57 font{ 58 pointSize: 24 59 } 60 color: "#a0a0a0" 61 } 62 63 ChartView{ 64 id:cv 65 width:600 66 height:400 67 68 anchors{ 69 top:title.bottom 70 topMargin:10 71 left:parent.left 72 leftMargin:40 73 } 74 antialiasing: true 75 theme: ChartView.ChartThemeDark 76 77 property int timcnt: 0 78 property double tempValue: 0 79 80 ValueAxis{ 81 id:xAxis 82 min: 0 83 max: cv.timcnt < 10 ? 10 : cv.timcnt + 1 84 tickCount: 11 85 labelFormat: "%d" 86 } 87 88 ValueAxis{ 89 id:yAxis 90 min: 20 91 max: 40 92 tickCount: 1 93 labelFormat: "%d" 94 } 95 96 LineSeries { 97 name: "Temperature" 98 id:lines 99 axisX: xAxis100 axisY: yAxis101 width: 3102 color: "#F11C9C"103 }104105 Timer{106 id:tm107 interval: 1000108 repeat: true109 running: true110 onTriggered: {111 cv.timcnt = cv.timcnt + 1112 cv.tempValue = _Controler.getTempValue()113114 lines.append(cv.timcnt,cv.tempValue)115116 console.log("qml temp value:",cv.tempValue)117 }118 }119 }120121 Rectangle {122 width: 80123 height: 300124 color: "transparent"125 anchors{126 left: cv.right127 leftMargin: 20128 verticalCenter: cv.verticalCenter129 }130131 Timer {132 running: true133 repeat: true134 interval: 600135 onTriggered: gauge.value = cv.tempValue136 }137138 Gauge {139 id: gauge140 anchors.fill: parent141 anchors.margins: 10142 minimumValue: 20143 maximumValue: 40144145 Behavior on value {146 NumberAnimation {147 duration: 600148 }149 }150151 style: GaugeStyle {152 valueBar: Rectangle {153 color: "#e34c22"154 implicitWidth: 28155 }156 }157 }158159 }160161}界面中使用了qml的一个组件 ChartView 用于显示温度的变化曲线；使用qml的组件 Gauge 来显示变化刻度；2、执行程序2.1、上传程序到树莓派
在工程上右键将这个项目文件上传到树莓派中：
image-20210828224250787
2.2、执行程序上传后，在树莓派对应文件夹中，执行如下命令执行程序：
python3 tempMonitor.py
执行后可以看到显示如下：
image-20210828224335850
当用手接触DS18B20温度模块后，可以看到温度变化曲线：
pic1024
视频演示：树莓派GUI显示温度监控-PySide/PyQT/QML #树莓派
