Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GUIライブラリ FLTK 使ってみた

GUIライブラリ FLTK 使ってみた

第4回バーチャル学生LT On YouTube Live

9a9ba864ec37c5c72c72f0377fe4ccf4?s=128

Sora Arakawa

May 09, 2020
Tweet

Transcript

  1. GUIライブラリ FLTK 使ってみた Sora Arakawa (arkw) 第4回バーチャル学生LT on YouTube Live

    2020/05/09
  2. はじめに ・ 5分しか無いので急ぎます ・ このスライドは42枚あります ・ SpeakersDeckにスライド上げるので 後でゆっくり見て下さい

  3. 自己紹介 Sora Arakawa (arkw) ・ 静岡大学 情報学部 行動情報学科1年 └ 今は在宅授業です(そろそろ通学開始?)

    ・ 愛知県岡崎市在住 ・ conflict歌えます ・ 最近ウェブサイトをリニューアルしました └ https://arkw.net/
  4. 自己紹介 ・ 2019/06/09 第25回学生エンジニアLT大会@名古屋

  5. 【悲報】相変わらず理系の屑 英語 169点 / 200 地理B 83点 / 100

  6. 本 題

  7. 目次 1. FLTKについて 2. FLUIDについて 3. 実践

  8. 目次 1. FLTKについて 2. FLUIDについて 3. 実践

  9. FLTKとは? ・ クロスプラットフォームのGUIライブラリ(主にLinuxだけど) ・ QtやwxWidgetsより軽量 ・ 日本語が使える ・ C++での利用に適している(Python、Ruby、Lua向けバインディングもある) ・

    「フルティック」と読む フルテカ
  10. 選んだ理由 ・ Tiny Core Linuxで動く └ ISOファイル容量18MBの超軽量Linux └ FLTKが標準GUIライブラリのため他のものより楽 ・

    C++が使える └ 競プロやってるので一応書けます
  11. 目次 1. FLTKについて 2. FLUIDについて 3. 実践

  12. FLUIDとは? ・ FLTK用の開発ツール(IDEほど高機能ではない) ・ UIを設計できる ・ C++用のヘッダーとソースを自動生成 ・ エディタ機能は貧弱 ・

    ビルド機能は無い(端末使え) ・ UIが英語(勉強しろ) ※ FLUID無しでもFLTKの開発はできます
  13. FLUIDとは?

  14. 目次 1. FLTKについて 2. FLUIDについて 3. 実践

  15. 今回の環境 ・ Ubuntu 16.04.6 LTS (32ビット) ・ g++ ・ FLTK

    1.3 ・ FLUID ※5分しか無いので実演はありません
  16. インストール sudo apt-get install libfltk1.3 libfltk1.3-dev ・ インストール容量は70MBくらい

  17. 今回の目標 ・ FLUIDでウインドウを設計する。 └ PNG形式の画像 └ ボタン(クリックでダイアログを表示) ・ FLUIDで生成したC++コードを端末でビルドする。 ・

    完成した実行ファイルをUbuntuとTiny Coreで実行する。
  18. 今回の目標 ・ アプリ名は「hello」 以下、ファイル名にはこの名前を使用 例: hello.fl、hello.cxx、hello.h など

  19. FLUIDの起動

  20. (1) プロジェクトの作成 ・ プロジェクトは *.fl 形式のファイルで保存できる 「File」→「Save As…」で保存 ・ 同じ位置にコードや実行ファイルが生成されるので、

    空のフォルダへの保存を推奨 ・ ファイルパスに日本語は入れない(海外製ツールなので一応)
  21. FLUIDの構造 関数 (Function) ウインドウ (Window) ボックス、ボタン、メニューバーなど

  22. (2) 関数の作成 ・ ウインドウより先に関数 「New」→「Code」→「Function/Method…」 ・ 「Name (args)」を空白にするとmain関数になる

  23. (3) ウインドウの作成 「New」→「Group」→「Window…」 ← こうなっていればOK

  24. (3) ウインドウの作成 「Double_Window」をダブルクリックしてプロパティを表示 「Label」 タイトルバー 「X」 初期表示X座標 「Y」 初期表示Y座標 「Width」

    画面幅 「Height」 画面高さ
  25. (4) 画像の表示

  26. (4) 画像の表示 ・ 「Box」を使う └ 文章や画像を表示するパーツ 「New」→「Other」→「Box…」

  27. (4) 画像の表示 「Box」をダブルクリックしてプロパティを表示 「Image」 背景画像 「X」 X座標 「Y」 Y座標 「Width」

    幅 「Height」 高さ
  28. (4) 画像の表示 画像はRGB値として C++コードに直接書かれる あたまおかしい…

  29. (5) ボタンの表示 ・ 「Button」を使う 「New」→「Buttons」→「Button…」 ・ プロパティはWindow、Boxと同じように入力

  30. (5) ボタンの表示 ・ C++コードの入力 プロパティの「C++」タブをクリック 「Callback」欄にC++コードを直接入力 (クラスは自動生成)

  31. (5) ボタンの表示 ・ 何書けば良いの? ドキュメント読め(英語) https://www.fltk.org/doc-1.3/modules.html

  32. C++コードの生成 ・ 「File」→「Write Code…」 ・ hello.cxx と hello.h が生成される

  33. ビルドの前に… ・ hello.h を開く ・ 必要なモジュールの #include を書き足す └ 各関数の依存モジュールはドキュメントに書いてあります

    └ 今回 (fl_message) は fl_ask.H が必要 #include <FL/fl_ask.H> // これを書き足す
  34. ビルドの前に… ・ hello.h を開く ・ 必要なモジュールの #include を書き足す └ ドキュメントの関数説明に書いてあります

    └ 今回 (fl_message) は fl_ask.H が必要 ・ この作業は「Write Code…」する度に必要 めんどい!!!
  35. コンパイル ・ 予めcdコマンドでプロジェクトフォルダに移動 fltk-config --compile hello.cxx → 実行ファイル「hello」が生成される

  36. 動作例(Ubuntu)

  37. 動作例(Ubuntu)

  38. 動作例(Tiny Core Linux)

  39. 動作例(Tiny Core Linux)

  40. まとめ ・ Linux推奨だけどWindowsでも使える ・ 32ビット版OS推奨 ・ 困ったらドキュメントを読む ・ 入門したばかりなのでFLTKわからない ・

    FLUIDの仕様が割とクソ ・ FLUIDの謎挙動に注意
  41. 各種データ配布 ・ 「hello」ソースコード、バイナリ ・ 「hello2」ソースコード、バイナリ(日本語テスト) のダウンロード → http://arkw.client.jp/ ※ パブリックドメインとします。自由に使って下さい

  42. おしまい