MakerInChina 发表于 2021-8-1 09:23

树莓派GUI控制LED-Pyside

这里介绍在树莓派上使用Pyside2+QML方式进行GUI程序的开发,该GUI程序可以通过按钮来控制LED。

#### 1、准备

- 开发环境

开发环境使用PyCharm+QtCreator+树莓派远程开发方式,参考之前教程:

[树莓派GUI远程开发-pyside2开发环境搭建](https://makerinchina.cn/%e6%a0%91%e8%8e%93%e6%b4%begui%e8%bf%9c%e7%a8%8b%e5%bc%80%e5%8f%91-pyside2%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba/)

- 树莓派

树莓派需要安装pyside2库和GPIO Zero库,本次使用这两个库进行开发,参考之前python操作LED的教程:

[使用PyCharm进行树莓派的远程开发-python](https://makerinchina.cn/%e4%bd%bf%e7%94%a8pycharm%e8%bf%9b%e8%a1%8c%e6%a0%91%e8%8e%93%e6%b4%be%e7%9a%84%e8%bf%9c%e7%a8%8b%e5%bc%80%e5%8f%91-python/)

#### 2、步骤

##### 2.1、新建项目

新建一个python项目,并填写好项目本地路径和树莓派远程路径,如下:

![](http://makerinchina.cn/wp-content/uploads/2021/08/image-20210731120842128.png)

##### 2.2、新建python文件

新建文件 main.py,文件内容如下:

```python
import os
import sys
from pathlib import Path

from PySide2.QtCore import QObject, Slot
from PySide2.QtGui import QGuiApplication
from PySide2.QtQml import QQmlApplicationEngine

if __name__=="__main__":
    app = QGuiApplication(sys.argv)
    engine = QQmlApplicationEngine()

    engine.load(os.fspath(Path(__file__).resolve().parent / "ui/led.qml"))
    if not engine.rootObjects():
      sys.exit(-1)

    sys.exit(app.exec_())
```

##### 2.3、新建qml界面文件

在工程目录新建ui文件夹,并在其下新建led.qml文件,然后右键用QtCreator打开,并在QtCreator中完成ui设计:

![](http://makerinchina.cn/wp-content/uploads/2021/08/image-20210731233201495.png)

qml文件内容如下:

```css
import QtQuick 2.11
import QtQuick.Window 2.11
import QtQuick.Controls 2.4

ApplicationWindow {
    id:root
    title:qsTr("Led Control")
    visible: true
    width: 800
    height: 480

    background: Rectangle{
      color: "#4d4747"
      anchors.fill: parent
    }

    Text {
      id: info
      color: "#cfcdcd"
      text: qsTr("LED Control")
      anchors{
            horizontalCenter: parent.horizontalCenter
            top: parent.top
            topMargin: 40
      }

      font.bold: true
      font.pointSize: 26
    }

    Item {
      id: contains
      anchors{
            left: parent.left
            top:parent.top
            leftMargin: 260
            topMargin: 150
      }

      Image {
            id: stateOn
            anchors{
                left: contains.left
                top:contains.top
            }
            height: 100
            source: "./image/led-on.svg"
      }

      Rectangle{
            id:ledOn
            color: "#3061e0"
            radius: 20
            width: 140
            height: 40
            Text {
                id:txOn
                color: "#dbdbdb"
                text: qsTr("On")
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: 32
                font.bold: true
                anchors.horizontalCenter: parent.horizontalCenter

            }
            anchors{
                top: stateOn.bottom
                topMargin: 30
                horizontalCenter: stateOn.horizontalCenter
            }

            MouseArea{
                anchors.fill: parent
                onPressed: {
                  ledOn.color = "#f0f0f0"
                }
                onReleased: {
                  ledOn.color = "#3061e0"
                }
                onClicked: {
                  
                }
            }
      }

      Image{
            id:stateOff
            source: "./image/led-off.svg"
            height: 100
            anchors{
                left: stateOn.right
                top: stateOn.top
                leftMargin: 80
            }
      }

      Rectangle{
            id: ledOff
            color: "#3061e0"
            radius: 20
            width: 140
            height: 40
            Text {
                id:txOff
                color: "#dbdbdb"
                text: qsTr("Off")
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: 32
                font.bold: true
                anchors.horizontalCenter: parent.horizontalCenter

            }
            anchors{
                top:stateOff.bottom
                topMargin: 30
                horizontalCenter: stateOff.horizontalCenter
            }
            MouseArea{
                anchors.fill: parent
                onPressed: {
                  ledOff.color = "#f0f0f0"
                }
                onReleased: {
                  ledOff.color = "#3061e0"
                }
                onClicked: {
                  
                }
            }
      }
    }

}

/*##^##
Designer {
    D{i:0;formeditorZoom:0.66}
}
##^##*/

```

##### 2.4、界面按钮控制LED

- 首先在python文件中,新建一个类用于控制LED,使qml调用这个类的槽函数即可在界面中进行控制:

```python
...

from gpiozero import LED


class Control(QObject):
    led = LED(26)
    @Slot()
    def ledOn(self):
      print("led on")
      self.led.on()

    @Slot()
    def ledOff(self):
      print("led off")
      self.led.off()
      
....
```

- 然后把该类注册到qml:

```python
......
    context = engine.rootContext()
    controler = Control()
    context.setContextProperty("_Control",controler)
......
```

- 在qml文件中,根据按钮动作时候调用槽函数:

打开按钮的点击时候:

```css
onClicked: {
    _Control.ledOn();
}
```

关闭按钮点击时候:

```css
onClicked: {
    _Control.ledOff();
}
```

##### 2.5、运行

- 上传工程到树莓派
- 运行python文件即可

- 界面显示如下

![](http://makerinchina.cn/wp-content/uploads/2021/08/image-20210731234046176.png)

- 点击按钮即可看到LED变化

视频效果:

https://www.bilibili.com/video/BV1SL411n7Rf?share_source=copy_web

s66d5o 发表于 2021-11-10 21:02

https://moxing.asia/data/attachment/forum/202111/01/081437m5ncueb2eyceunde.png
https://moxing.asia/data/attachment/forum/202111/01/081455inuzs5qussd8weos.png
https://moxing.asia/data/attachment/forum/202111/01/081455pz4k048zguoonjon.png
https://moxing.asia/data/attachment/forum/202111/01/081455txsbhn5l0nhi3f5m.png
https://moxing.asia/data/attachment/forum/202111/01/081510a4y4dxkvx3v6y3dj.png
https://moxing.asia/data/attachment/forum/202111/01/081525my0nn0mc7h011dk3.png
https://moxing.asia/data/attachment/forum/202111/01/081514tuucqxg77gz8mx5g.png
https://moxing.asia/data/attachment/forum/202111/01/081526e6b6686xvbt15336.png
https://moxing.asia/data/attachment/forum/202111/01/081530kd0zclc88zod7fe8.png
https://moxing.asia/data/attachment/forum/202111/01/081552n00jo0nenkotm9o0.png
https://moxing.asia/data/attachment/forum/202111/01/081552fx2kuju82uua5xg5.png
https://moxing.asia/data/attachment/forum/202111/01/081555zos5brx5rx53oj9j.png
https://moxing.asia/data/attachment/forum/202111/01/081602kx44ydwcedycw5u4.png
https://moxing.asia/data/attachment/forum/202111/01/081610caw6kgugusegmcyw.png
https://moxing.asia/data/attachment/forum/202111/01/081610vs9u6fovz6vdf7fe.png
https://moxing.asia/data/attachment/forum/202111/01/081617m6ccewyp8gccuwcx.png
https://moxing.asia/data/attachment/forum/202111/01/081645qr5epkpv9spf80pq.png
https://moxing.asia/data/attachment/forum/202111/01/081646rx1gj5wlloyldnyo.png
https://moxing.asia/data/attachment/forum/202111/01/081646cgp4gablpzba4yto.png
https://moxing.asia/data/attachment/forum/202111/01/081653w6hyzq64r2s94s99.png
https://moxing.asia/data/attachment/forum/202111/01/081658ftldfntktpvlp4w2.png




http://home.rapidbbs.cn/data/attachment/forum/202110/31/144437e8y9v8yyxrbd0ffv.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144447wa6tk6yzlktrzv2r.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144459dmwvl2b33twr0rll.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144515qm6t6hfef50b9wft.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144522p6235xem2zgl665m.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144532znxlfubau1wnshhu.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144539egsvrgvxi4xmz8rg.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144547g2l299y49jh1dhdy.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144602ci84igm7zhg94855.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144623istb8oo2s8kp9bv7.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144637g6j2g6mqfznbmmos.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144707khq4kuqt0rsy1u2w.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144734p1zj1qnmje3fjjze.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144746gp8rf83fmutakt7d.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144802is3bsin3srdssi32.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144813nu7r2gcl2zmcq60c.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144830sjbb1ojxm3fbeczn.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144846jauiwq3wnauek33z.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144907qe64ckocjzm6yccj.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144924ld9hk6r63lhcuz7s.png
http://home.rapidbbs.cn/data/attachment/forum/202110/31/144938erwqeyrlra2zxeey.png

页: [1]
查看完整版本: 树莓派GUI控制LED-Pyside