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

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 update`、`apt-get upgrade`を実行します。ここまではRaspberry Piの基本ですので、手順は割愛させて頂きます。

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

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

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

![qtcreatormenu.png](https://qiita-image-store.s3.amazonaws.com/0/61222/c2060ac5-f1f6-2a4b-7c2f-0b7124decd1e.png)

## 最初の設定

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

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

![compilers.png](https://qiita-image-store.s3.amazonaws.com/0/61222/0709189f-772c-feca-3967-cd6b553131bb.png)

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

![kits.png](https://qiita-image-store.s3.amazonaws.com/0/61222/7531d81f-75a7-554a-1eac-57437170c358.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](https://qiita-image-store.s3.amazonaws.com/0/61222/2250e953-9881-8d10-2cbb-f22e51761ef8.png)

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

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

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

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

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

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

![created.png](https://qiita-image-store.s3.amazonaws.com/0/61222/d41f2494-0475-8bff-4d22-9de6b626d855.png)

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

![newapp.png](https://qiita-image-store.s3.amazonaws.com/0/61222/48f31bd0-2e0e-a32c-433a-648d58020955.png)

## 実験回路

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

![led.jpg](https://qiita-image-store.s3.amazonaws.com/0/61222/96dfdd39-e5fb-e1f6-1a32-532f6d989ba5.jpeg)

![circuit.jpg](https://qiita-image-store.s3.amazonaws.com/0/61222/3f69f9fc-b6dd-95a8-ea65-78423c7b400f.jpeg)

## 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](https://qiita-image-store.s3.amazonaws.com/0/61222/02585b2b-6a24-c5c1-a43d-357434a5d79c.png)

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

![addfiles.png](https://qiita-image-store.s3.amazonaws.com/0/61222/b5a46e7b-1263-4cc4-141b-8ab5585f370b.png)

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

![runqmake.png](https://qiita-image-store.s3.amazonaws.com/0/61222/95a1d3bd-18d7-90e9-c0f0-6f14f0fbe017.png)

## フォームの編集

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

![mainwindowui.png](https://qiita-image-store.s3.amazonaws.com/0/61222/f3d6d950-7dda-8c4c-21c4-ccd024c0c908.png)

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

![checkbox.png](https://qiita-image-store.s3.amazonaws.com/0/61222/ce2c8f54-0e40-a416-c56b-b3988e1ecc48.png)

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

![gotoslot.png](https://qiita-image-store.s3.amazonaws.com/0/61222/ac61f102-d6c9-7717-f6be-c79ce9988a5f.png)

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

## イベント処理の実装

mainwindow.cpp を編集します。

``` c++
#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が点灯します。