Help us understand the problem. What is going on with this article?

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が点灯します。

soramimi_jp
C++とQtが好き。電子工作もやる。第一種情報処理技術者と第二種電気工事士を持ってる。ワンチップマイコンのファームウェアからPCのデスクトップアプリまで。PCより大規模なシステムは守備範囲外。うちの子かわいい(ドール)。40代独身おっさん(´・ω・`)
http://www.soramimi.jp/
AI-medical-service
近未来の内視鏡医療を実現する医療ベンチャー
https://www.ai-ms.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした