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

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

1、新建项目

1.1、新建工程

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

image-20210825202543995.png

1.2、添加python主程序

tempMonitor.py 主程序如下：

import math
import os
import sys
import time
from pathlib import Path

from PySide2.QtCore import Qt, QObject, Slot
from PySide2.QtQml import QQmlApplicationEngine
from PySide2.QtWidgets import QApplication

class 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.tempValue

if __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.2

ApplicationWindow{
    id:root
    width: 800
    height: 480
    visible: true
    visibility: Window.FullScreen

    background: Rectangle{
        color: "black"
        anchors.fill: parent
    }

    Button{
        id:btnexit
        background: Rectangle{
            color: "#a01010"
            anchors.fill: parent
            radius:12
        }
        width: 48
        height: 48
        anchors{
            top: parent.top
            right: parent.right
            topMargin: 8
            rightMargin: 8
        }
        Text {
            text: qsTr("X")
            anchors.centerIn: parent
            font{
                pointSize: 32
            }
            color: "white"
        }
        onClicked: {
            _Controler.exit();
        }
    }

    Text {
        id: title
        text: qsTr("Temperature Monitor")
        anchors{
            top:  parent.top
            horizontalCenter: parent.horizontalCenter
            topMargin: 20
        }
        font{
            pointSize: 24
        }
        color: "#a0a0a0"
    }

    ChartView{
        id:cv
        width:600
        height:400

        anchors{
            top:title.bottom
            topMargin:10
            left:parent.left
            leftMargin:40
        }
        antialiasing: true
        theme: ChartView.ChartThemeDark

        property int  timcnt: 0
        property double  tempValue: 0

        ValueAxis{
            id:xAxis
            min: 0
            max: cv.timcnt < 10 ? 10 : cv.timcnt + 1
            tickCount: 11
            labelFormat: "%d"
        }

        ValueAxis{
            id:yAxis
            min: 20
            max: 40
            tickCount: 1
            labelFormat: "%d"
        }

        LineSeries {
            name: "Temperature"
            id:lines
            axisX: xAxis
            axisY: yAxis
            width: 3
            color: "#F11C9C"
        }

        Timer{
            id:tm
            interval: 1000
            repeat: true
            running: true
            onTriggered: {
                cv.timcnt = cv.timcnt + 1
                cv.tempValue = _Controler.getTempValue()

                lines.append(cv.timcnt,cv.tempValue)

                console.log("qml temp value:",cv.tempValue)
            }
        }
    }

    Rectangle {
        width: 80
        height: 300
        color: "transparent"
        anchors{
            left: cv.right
            leftMargin: 20
            verticalCenter: cv.verticalCenter
        }

        Timer {
            running: true
            repeat: true
            interval: 600
            onTriggered: gauge.value = cv.tempValue
        }

        Gauge {
            id: gauge
            anchors.fill: parent
            anchors.margins: 10
            minimumValue: 20
            maximumValue: 40

            Behavior on value {
                NumberAnimation {
                    duration: 600
                }
            }

            style: GaugeStyle {
                valueBar: Rectangle {
                    color: "#e34c22"
                    implicitWidth: 28
                }
            }
        }

    }

}

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

2、执行程序

2.1、上传程序到树莓派

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

image-20210828224250787.png

2.2、执行程序

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

python3 tempMonitor.py

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

image-20210828224335850.png

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

pic1024.jpg

• 视频演示效果如下：

演示视频