樹莓派GUI顯示溫度監控-PySidePyQTQML

本文介紹在樹莓派上使用python和qt開發GUI程式，程式功能為顯示DS18B20模組的溫度曲線。開發環境依然使用之前介紹的PyCharm編寫python程式碼和遠端開發，然後使用QtCreator編寫QML介面的方式。

1、新建專案

1。1、新建工程

開啟PyCharm，新建工程tempMonitor，如下：

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、上傳程式到樹莓派

在工程上右鍵將這個專案檔案上傳到樹莓派中：