Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
69
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

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

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
69
Help us understand the problem. What are the problem?