树莓派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 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
                }
            }
        }

    }

}