Raspberry PiにPyQt5を導入する【pythonでGUI】【インストール手順紹介】

ええと、
引き続きあさがおIoT観察日記の続きでRaspberry Pi側のアプリを作っていく予定だったんですが急遽予定を変更してお送りします。

というのも、ちょっとやってみて、

pythonでGUI開発めんどい
Windowsでは
救世主「PyQt5」
Raspberry PiにPyQt5をインストールする
pyQt5を使ったGUI開発の流れ

pythonでGUI開発めんどい

…って感じました。正直。(※後述のような事情を踏まえた個人の感想です。)

これまで、

symamoneの技術ノート

あさがおIoT観察日記⑩：ArduinoからRaspberryPiにデータを渡す①【大人の自由研究】

https://symamone-tec.com/asagao_iot_11

前回まで／次回以降の取り組みはこちらから。どんどん続きを作っていきますよー。今日はArduinoからRaspberryPiにデータを渡すことを考えていきます。ここまでのおさらいと課題の整理Arduinoにはセンサデータとして、温度湿度大気圧照度土の水分量タンクに水があるかが届いていて、水分量的に水やりするかどうかの判断水やり用ポンプの運転をする必要があります。 RaspberryPiではタイムラプス撮影データをIoTサービスにアップロードする水やりする時刻かどうかをArduinoに指示する(時計機能はRaspberryPiに持たせます...

の通り、

Raspberry Piにもともと入っているpythonと
tkinterというGUIを作るライブラリを組み合わせて

作っていました。

#coding:utf-8
import tkinter as tk
import datetime
 
root = tk.Tk()
root.attributes("-fullscreen", True)
root.title("あさがおIoT観察アプリ")
 
def window_refresh():
    #時刻更新
    now = datetime.datetime.now()
    label_time =tk.Label(root,text="現在時刻："+now.strftime('%Y/%m/%d %H:%M:%S'),font=("Helvetica",18))
    label_time.place(x=20,y=15)
    
    root.after(100,window_refresh)
    
window_refresh()    
root.mainloop()

#coding:utf-8

import tkinter as tk

import datetime

root = tk.Tk()

root.attributes("-fullscreen", True)

root.title("あさがおIoT観察アプリ")

def window_refresh():

#時刻更新

now = datetime.datetime.now()

label_time =tk.Label(root,text="現在時刻："+now.strftime('%Y/%m/%d %H:%M:%S'),font=("Helvetica",18))

label_time.place(x=20,y=15)

root.after(100,window_refresh)

window_refresh()

root.mainloop()

文字を表示する「label」要素や、今後は画像を表示する要素、ボタン要素などをpythonでプログラムして定義していくことになります。

GUIってなんぞや？という方はこちらを読んでみてください。

ワードプレステーマTCD

【初心者向け】CUIとGUIの違いとその特徴。なぜ使い分ける必要があるのか。

https://design-plus1.com/tcd-w/2019/12/cui-gui.html

IT・WEB業界で働いている方や、プログラミングを勉強中の方は、CUIというワードを聞いたことがあるかと思います。ざっくりゆうと画面いっぱいに文字が表示されているような画面のことです。

Windowsでは

私、WindowsでVisual Basic(最近はオープンソースの類似ソフト、sharpdevelop)でWindowsのちょっとした自分用のアプリを作って使ったことがあります。

文字を表示するラベル要素や、画像を表示する要素、ボタン、ラジオボタン、スライダーなど、必要なものを「ドラッグ＆ドロップで置いて」「マウスで位置調整」して作るのが私にとっては当たり前でした。

なので、pythonの「いろいろな要素をソースコードから書いていく」って作業がめんどくさいと感じてしまったんです。

なんとかVisual Basicみたいな感じでRaspberry Piでもアプリを作れないものか…色々調べていたら、

救世主「PyQt5」

に行きつきました。

ja.wikipedia.org

PyQt - Wikipedia

https://ja.wikipedia.org/wiki/PyQt

Visual Basicそのままとは行きませんが、同じように必要な要素を「ドラッグ＆ドロップで置いて」「マウスで位置調整」して作っていくことができます。

また、Windowsでpythonを使用するときに使うプラットフォームの「anaconda」にも同様の機能が含まれているので、windowsでアプリを作る際にも使えます。

www.python.jp

Anaconda - python.jp

https://www.python.jp/install/anaconda/index.html

Anaconda はデータサイエンス向けのPythonパッケージなどを提供するプラットフォームです。科学技術計算などを中心とした、多くのモジュールやツールのコンパイル済みバイナリファイルを提供しており、簡単にPythonを利用する環境を構築できます。 Pythonのパッケージだけではなく、他言語のライブラリやいろいろなユーティリティも提供しており、NvidiaのGPUを利用する場合に必要な、CUDAなどの環境も簡単にインストールできるようになっています。 Anacondはパッケージ管理ツールとして Conda コマンドを提供しています。 Python公...

PyQtの存在は、本屋さんでたまたま見つけたPythonプログラミングの本で知りました。この本は購入しましたが、まだちゃんとこの本に沿った学習というのはしてません。必要な部分を読んだり、ググったり、という具合で進めています。

(2020.12.14追記：中身に沿って学習進めてるんですが、Pythonの学習本としては微妙かも。Jupyter Notebook前提で書いてあるのに、Jupyter Notebookで進めるとハマるポイントがあってなんとも)

Raspberry PiにPyQt5をインストールする

前提条件として、

Raspberry Pi Model 3 B+を使用していて、
Raspberry Pi OS(旧名称：Raspbian)がインストールされて動く状態で、
VNC接続できるように設定してあり、同じネットワークにつながっているWindowsのPCから遠隔操作できる状態

であることとします。セットアップについてはこちらから。

symamoneの技術ノート

【Raspberry Pi Imager】Raspberry Pi OSをセットアップする【スクショ大量】

https://symamone-tec.com/raspberrypi_imager

Raspberry Piに専用OSのRaspberry Pi OSをインストールする方法について解説します。※2020年5月末にOSのバージョンアップが発表され、名前が「Raspbian」から「Raspberry Pi OS」に変わったみたいです。Raspberry Pi Imagerで出てくるOSの名前も変わっています。インストールの方法や基本的な使い方は変わっていないようです。どうでもいいですが、ぶっちゃけGoogleとかで検索しにくくなった気がします。［Raspbian🔎］だと確実にOSの情報が出てきますが［Raspberry Pi OS🔎］だと部分一致でいろいろ関係ない情報も出てきます。実はこの...

①LXTerminal起動

左上の黒いアイコンをクリックします。

②下準備

sudo apt-get update

1	sudo apt-get update

と入力してEntetキー。

VNC接続していれば、「Windows側でコピーしてRaspberry Pi側でペーストする」というコピペもできます。
キーボードショートカットは、windowsでは「Ctrl+C」でコピー、「Ctrl+V」でペーストですが、LXTerminalにペーストするのは「Ctrl+Shift+V」です。

sudo apt-get dist-upgrade

1	sudo apt-get dist-upgrade

と入力してEntetキー。

「続行しますか？[Y/n]」と聞かれたら「Y」を入力してENTERキーを押すとインストール続行します。(これ以降同じです。)

作業中はずーっと文字が流れていきますが、

「pi@Raspberrypi:~ $」というのが出てくれば作業終了です。
次の作業に進めます。

③pyqt5と関連するソフトなどをインストールする

LXTerminalでpyQt5と関連するソフト・ライブラリをインストールしていきます。

sudo apt-get install qt5-default

1	sudo apt-get install qt5-default

sudo apt-get install qtcreator

1	sudo apt-get install qtcreator

↑ここがおそらくメインで、そこそこ時間かかります。

ここからは関連するライブラリ群です。

sudo apt-get install libqt5serialport5

1	sudo apt-get install libqt5serialport5

sudo apt-get install libqt5serialport5-dev

1	sudo apt-get install libqt5serialport5-dev

sudo apt-get install qttools5-dev-tools

1	sudo apt-get install qttools5-dev-tools

「eric」という、pythonのIDEをインストールします。

sudo apt-get install eric

1	sudo apt-get install eric

ここまで済んだら、一度LXTerminalを閉じます。

もう一つ関連ライブラリをインストールします。
スタートメニュー(左上のラズベリーアイコン)をクリック＞「設定」＞「Add / Remove Software」をクリックします。

左上の検索窓に「pyuic5」と入力してEnterキーで検索、

出てきた「pyiuc5」をインストールします。
「Development tools for PyQt5」にチェックを入れて「Apply」をクリックするとインストールが始まります。

追加で必要なパッケージがあるので承認が必要です、と聞いてきます。
「続行」をクリックします。

パスワードも聞かれます。

インストールが終われば準備完了です。

pyQt5を使ったGUI開発の流れ

①pythonのIDE「eric」を起動

スタートメニュー＞「プログラミング」＞「eric」をクリックします。

pythonのIDEが起動します。
config設定がされていません。とメッセージが出るので「OK」をクリックします。

設定画面が出てきます。
何も設定変更せずに「OK」をクリックします。

作業フォルダを設定するように促されます。
「Pi」フォルダに「python」フォルダを作り、そこをericでの作業フォルダにすることにしました。

②プロジェクトを作る

メニューバーの「Project」＞「New」をクリック。

ダイアログが開くのでいろいろ入力します。図の中で上から、

Project Name：プロジェクトの名前→今回は「test」
Project Directory：プロジェクトの保存フォルダ→pythonフォルダの下に「test」というフォルダを作成
Main Script：メインプログラムを作るpythonファイルを決めます→今回は「main.py」
Author：プロジェクトの作者→今回は「symamone」

としました。

２のプロジェクトフォルダは、右側のフォルダのアイコンをクリックするとフォルダ選択の画面が開きます。

設定が終わって「OK」をクリックすると、既存のファイルを含めるかどうか聞かれます。
今回はまったくの1から作っていくので「いいえ」とします。

③フォームを用意する

左側の「Forms」タブをクリックします。

ここにフォーム(≒GUIの画面)を作っていきます。
余白部分を右クリックして「New Form」をクリックします。

「Select a form type」をクリックすると、いろいろ出てきます。
今回は「Main Window」を選びました。(正直まだよくわかっていません)

「OK」をクリックするとMain Windowという名前のフォームが追加されました。

名前を決めます。今回は「mainWindow」としました。

④GUIを作る

フォームを作ると、左側のFormsタブに.uiファイルが追加されます。
ファイルを右クリックして「Open in Qt-Designer」をクリックすると、Qt-Designerの画面が立ち上がります。

Visual Basicのような画面が出てきました。
左側にいろいろなGUIの部品があるので、ドラッグ＆ドロップで必要な部品をフォームに置いていきます。

必要な部品を置いたら、Ctrl＋Sで保存して、Qt Designerを閉じます。
(開いたままでもいいみたいです)

Visual Basicだとボタンなどをダブルクリックしたら動作をプログラムを組めますが、こちらはもうひと手間必要です。

⑤GUIをコンパイルする

ericの方に戻って.uiファイルを右クリック、「Generate Dialog Code」をクリックします。

クラスの名前を決めます。「New」をクリックします。

フォームの名前に応じて自動で名前が決められます。
OKをクリックします。

下にフォームに置いた部品の一覧が表示されます。＋ボタンを押すと色々なコマンドが並んでいます。

例えばボタンなら

on_pushButton_clicked()　：クリックされたら
on_pushButton_pressed() 　：押されたら

などたくさん出てきます。

このボタンをクリックされたら何かをする、などプログラムで必要な動作にチェックを入れ、「OK」をクリックします。

設定が終わったら.uiファイルを右クリック、「Compile form」をクリックします。

左上にコンパイル成功と出たら、実際に動作に対してプログラムを作っていきます。

⑥pythonプログラムを作っていく

ここまでで、GUIを作ることと、GUI操作と紐付けたプログラムの動作を作る準備ができました。

main.pyにメインのプログラムを書きます。

from PyQt5.QtWidgets import QApplication
from ui.mainWindow import MainWindow
    
if __name__=="__main__":
    import sys
    app = QApplication(sys.argv)
    ui = MainWindow()
    #ui.showFullScreen()
    ui.show()
    sys.exit(app.exec_())

from PyQt5.QtWidgets import QApplication

from ui.mainWindow import MainWindow

if __name__=="__main__":

import sys

app = QApplication(sys.argv)

ui = MainWindow()

#ui.showFullScreen()

ui.show()

sys.exit(app.exec_())

画面を表示するだけのプログラムですね。

mainWindow.pyに実際にボタンが押されたときの動作を書きます。
今回はプログラムを終了するexit()命令を実行することにしました。

# -*- coding: utf-8 -*-
from PyQt5.QtCore import pyqtSlot
from PyQt5.QtWidgets import QMainWindow

from .Ui_mainWindow import Ui_MainWindow
import sys

class MainWindow(QMainWindow, Ui_MainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        self.setupUi(self)
    
    @pyqtSlot()
    def on_pushButton_clicked(self):
        sys.exit()