Raspberry PI GUI displays temperature monitoring -PySide/PyQT/QML

This paper introduces the development of GUI program using Python and QT on raspberry PI. The function of the program is to display the temperature curve of DS18B20 module. The development environment still uses PyCharm to write Python code and develop remotely, and then QtCreator to write QML interfaces.

1. New projects

1.1. New construction project

Open PyCharm and create a new project tempMonitor like this:

1.2. Add the Python main program

The tempmonitor. py main program is as follows:

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.99 e88 D0D0000"."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_())

Copy the code

• In this program, create a Controler class, and implement a method to obtain the temperature, the temperature can be displayed in the QML interface.

1.3. Add interface files

• Add the UI folder to the project and create a new main.qml file. The reference code is as follows:

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(a); } } 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
                }
            }
        }

    }

}

Copy the code

• The interface uses a component of QML ChartView to display the temperature change curve;
• QML component Gauge is used to display the variation scale.

2. Execute the program

2.1. Upload the program to Raspberry PI

Right-click on the project and upload the project file to raspberry PI:

2.2. Execute the program

After uploading, run the following command in the raspberry PI folder to execute the program:

python3 tempMonitor.py
Copy the code

The following output is displayed:

When the DS18B20 temperature module is touched by hand, the temperature change curve can be seen:

• The video demo is as follows:

www.bilibili.com/video/BV1Dq…