树莓派GUI显示温度监控-PySide/PyQT/QML

本文介绍在树莓派上使用python和qt开发GUI程序，程序功能为显示DS18B20模块的温度曲线。开发环境依然使用之前介绍的PyCharm编写python代码和远程开发，然后使用QtCreator编写QML界面的方式。

1、新建项目

1.1、新建工程

打开PyCharm，新建工程tempMonitor，如下：

1.2、添加python主程序

tempMonitor.py 主程序如下：

import math
import os
import sys
import time
from pathlib import Pathfrom PySide2.QtCore import Qt, QObject, Slot
from PySide2.QtQml import QQmlApplicationEngine
from PySide2.QtWidgets import QApplicationclass Controler(QObject):def __init__(self):super().__init__()self.tempValue = 0@Slot()def exit(self):sys.exit()@Slot(result=float)def getTempValue(self):file_name = os.path.join("/", "mnt", "1wire", "uncached", "28.99E88D0D0000", "temperature")file_object = open(file_name, 'r')temp = file_object.read()self.tempValue = float(temp)print("tempvalue:",self.tempValue)file_object.close()return self.tempValueif __name__=='__main__':a = QApplication(sys.argv)a.setOverrideCursor(Qt.BlankCursor)engine = QQmlApplicationEngine()controler = Controler()context = engine.rootContext()context.setContextProperty("_Controler", controler)engine.load(os.fspath(Path(__file__).resolve().parent / "ui/monitor.qml"))if not engine.rootObjects():sys.exit(-1)sys.exit(a.exec_())

• 在该程序中，建立一个 Controler 类，并实现了一个获取温度的方法，获取温度后就可以再qml界面中进行显示了。

1.3、添加界面文件

• 在项目中添加ui文件夹，并新建main.qml文件; 参考代码如下：

import QtQuick 2.11 import QtQuick.Window 2.4 import QtQuick.Controls 2.4 import QtQuick.Controls.Styles 1.4 import QtQuick.Extras 1.4 import QtGraphicalEffects 1.0 import QtCharts 2.2ApplicationWindow{
    id:rootwidth: 800height: 480visible: truevisibility: Window.FullScreenbackground: Rectangle{
    color: "black"anchors.fill: parent}Button{
    id:btnexitbackground: Rectangle{
    color: "#a01010"anchors.fill: parentradius:12}width: 48height: 48anchors{
    top: parent.topright: parent.righttopMargin: 8rightMargin: 8}Text {
    text: qsTr("X")anchors.centerIn: parentfont{
    pointSize: 32}color: "white"}onClicked: {
    _Controler.exit();}}Text {
    id: titletext: qsTr("Temperature Monitor")anchors{
    top:  parent.tophorizontalCenter: parent.horizontalCentertopMargin: 20}font{
    pointSize: 24}color: "#a0a0a0"}ChartView{
    id:cvwidth:600height:400anchors{
    top:title.bottomtopMargin:10left:parent.leftleftMargin:40}antialiasing: truetheme: ChartView.ChartThemeDarkproperty int timcnt: 0property double tempValue: 0ValueAxis{
    id:xAxismin: 0max: cv.timcnt < 10 ? 10 : cv.timcnt + 1tickCount: 11labelFormat: "%d"}ValueAxis{
    id:yAxismin: 20max: 40tickCount: 1labelFormat: "%d"}LineSeries {
    name: "Temperature"id:linesaxisX: xAxisaxisY: yAxiswidth: 3color: "#F11C9C"}Timer{
    id:tminterval: 1000repeat: truerunning: trueonTriggered: {
    cv.timcnt = cv.timcnt + 1cv.tempValue = _Controler.getTempValue()lines.append(cv.timcnt,cv.tempValue)console.log("qml temp value:",cv.tempValue)}}}Rectangle {
    width: 80height: 300color: "transparent"anchors{
    left: cv.rightleftMargin: 20verticalCenter: cv.verticalCenter}Timer {
    running: truerepeat: trueinterval: 600onTriggered: gauge.value = cv.tempValue}Gauge {
    id: gaugeanchors.fill: parentanchors.margins: 10minimumValue: 20maximumValue: 40Behavior on value {
    NumberAnimation {
    duration: 600}}style: GaugeStyle {
    valueBar: Rectangle {
    color: "#e34c22"implicitWidth: 28}}}}}

• 界面中使用了qml的一个组件 ChartView 用于显示温度的变化曲线；
• 使用qml的组件 Gauge 来显示变化刻度；

2、执行程序

2.1、上传程序到树莓派

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

2.2、执行程序

上传后，在树莓派对应文件夹中，执行如下命令执行程序：

python3 tempMonitor.py

执行后可以看到显示如下：

当用手接触DS18B20温度模块后，可以看到温度变化曲线：

• 视频演示效果如下：