C++
Qt
RaspberryPi

Raspberry Pi でGUIアプリ開発、初めての手引き

More than 1 year has passed since last update.

GUIアプリを作ってみましょう。Raspberry PiならPythonでやるのが王道かとは思いますが、本記事ではC++を使用します。GUIフレームワークはQt5を使用します。


インストール

OSはraspbianの最新版 2017-11-29-raspbian-stretch (liteじゃない方)を使用します。標準パッケージに Qt 5.7.1 が用意されていますので、インストールは難しくありません。

マイクロSDカードにOSを書き込んだら Raspberry Pi を起動します。raspi-configを実行して、ロケール、タイムゾーン、キーボードレイアウトの設定を行ってください。再起動したら apt-get updateapt-get upgradeを実行します。ここまではRaspberry Piの基本ですので、手順は割愛させて頂きます。

Qt5とその開発環境である Qt Creator をインストールします。

$ sudo apt-get install qt-sdk qtbase5-dev libgl1-mesa-dev

インストールが完了したら、 Qt Creator を起動します。

qtcreatormenu.png


最初の設定

メニューの [Tools]/[Options] を選択し、設定ダイアログを開きます。

[Build & Run][Compilers]タブを開き、コンパイラの設定を行います。[Add]ボタンを押してGCCを登録します。 C++ = /usr/bin/g++ 、 C = /usr/bin/gcc を指定します。ここまでできたら、右下の[Apply]ボタンを押します。

compilers.png

[Build & Run][Kits]タブを開き、赤い感嘆符と共に「Desktop (default)」というアイテムが表示されていると思いますので、これをクリックします。

kits.png

次のように設定します。


  • Compiler: C = GCC

  • Compiler: C++ = GCC

  • Debugger = System GDB at /usr/bin/gdb

  • Qt Version = Qt 5.7.1 in PATH (qt5)

感嘆符が黄色になれば大丈夫です。これで[OK]を押して、ダイアログボックスを閉じます。


初めてのアプリケーション

Qt Creator の Welcome 画面で、New Project ボタンを押します。

newproject.png

「Qt Widgets Application」が選択されていると思います。そのまま[Choose...]ボタンを押します。

アプリケーション名を決めます。untitledと表示されていると思いますが、最初は適当で構いません。ExampleやTestやHogeなど、好きな名前を付けます。入力したら[Next>]ボタンを押します。

「Desktop」と表示されていて、[Details]を押すと、「Debug」と「Release」が現れると思います。これはこのままでいいので、[Next>]ボタンを押します。

「Class name: MainWindow」などと表示されていると思います。そのまま[Next>]ボタンを押します。

プロジェクト作成の最終確認の画面になります。間違いがあれば[<Back]ボタンで戻ります。問題なければ[Finish]ボタンを押します。

いくつかのファイルが自動生成され、アプリケーションの雛形が作られます。

created.png

左下の ▶ ボタンを押すと、コンパイルが行われ、完成したら実行されます。

newapp.png


実験回路

下図のような回路を用意してください。

led.jpg

circuit.jpg


GPIO制御ライブラリ

下記サイトで公開されているBCM2835ライブラリを用いて、GPIOを制御してみましょう。いわゆるLチカです。

http://www.airspayce.com/mikem/bcm2835/

$ wget http://www.airspayce.com/mikem/bcm2835/bcm2835-1.52.tar.gz

$ tar zxvf bcm2835-1.52.tar.gz

中に含まれている src ディレクトリを確認します。

pi@raspberrypi:~ $ ls bcm2835-1.52/src/

bcm2835.c bcm2835.h Makefile.am Makefile.in test.c

このうち bcm2835 で始まるファイルを、アプリケーションのプロジェクトディレクトリにコピーします。

$ cp bcm2835-1.52/src/bcm2835.* Hoge

プロジェクト名を右クリックして、[Add Exsisting Files...]を選択します。

addexisting.png

コピーした二つのファイルを選択して[Open]ボタンを押します。

addfiles.png

メニューの[Build]/[Run qmake]を選択します。プロジェクトにファイルを追加したときは、必ずこれを行う必要があります。

runqmake.png


フォームの編集

Forms の mainwindow.ui をダブルクリックします。

mainwindowui.png

チェックボックスをドラッグしてフォームに配置します。

checkbox.png

配置したチェックボックスを右クリックして、[Go to slot...]を選択します。

gotoslot.png

ダイアログボックスが開きますので、リストボックスの中で「clicked()」が選択されているのを確認して、[OK]ボタンを押します。


イベント処理の実装

mainwindow.cpp を編集します。

#include "mainwindow.h"

#include "ui_mainwindow.h"
#include "bcm2835.h" // 追加

MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
bcm2835_init(); // 追加
bcm2835_gpio_fsel(14, BCM2835_GPIO_FSEL_OUTP); // 追加
ui->checkBox->click(); // 追加
}

MainWindow::~MainWindow()
{
delete ui;
}

void MainWindow::on_checkBox_clicked() // 追加
{
bool on = ui->checkBox->isChecked();
bcm2835_gpio_write(14, on ? HIGH : LOW);
}


実行

Qt Creator の左下の ▶ ボタンを押して実行します。

チェックボックスをクリックする度、状態に応じてLEDが点灯します。