KeroKeyboard with Qt

Qt Brynhildr のタッチパネル向け部品を使って KeroKeyboard の Qt版モックアップがなんとなく出来上がりました。

実際に使うためには最低限以下の実装が必要ですが、とりあえず作業はここまでとして必要になったらまた検討したいと思います。

1. ネイティブのキーイベント送出機能
2. ウィンドウ・フォーカスの制御

ローカルテストのため使ったアイコンデータは、KeroKeyboard 0.3.1(KeroKeyboard「0.3.1」リリース)の実行バイナリファイルから抽出して使わせていただきました。
(ですので、リリースの予定はありません…Qt Brynhildrのキーボードテスト用に個人的に使います。)

システムトレイアイコン機能の追加のためQSystemTrayIconクラスのサンプルソース(systray)を参考にしたのですが、まだまだQtを使いこなせていないなぁと改めて実感しましたヽ(´▽｀)/

Ver.1.6.2 リリース

Qt5.8.0がリリースされたので移行してみました。(Linux x86は除く)

(1) Qt5.8.0に移行したため、Linux版(x86を除く)でメニューバーの位置が変更となりました。

(2) タッチパネル対応のための準備としてソフトウェア・キーボード/ボタンの実装を見直しました。
まだ調整のための作業が結構残っていますが…

(3) QGamepadはまだTP2(Technology Preview 2)なのでぼちぼち試してみようかと思っています。

[Windows]

[Ubuntu]

以下からダウンロードできます。(Windows/Linux/Mac版)

https://github.com/funfun-dc5/qtbrynhildr/releases

主な変更は以下です。

[不具合修正]
・フルスクリーンモードのまま終了(ALT-F4などで)すると次回起動時に
メニュー/ステータスバーが非表示となる不具合修正
・アプリケーションウィンドウにメニューバーが存在しない場合に
デスクトップサイズの制御が不正となる不具合修正
・ソフトウェア・キーボード/ボタンパネルをドックの'X'ボタンで非表示にした場合に
「表示」メニューのチェックが不正となる不具合
・ソフトウェア・キーボードのキートップ文字列の修正('&')
・終了時にコアダンプする場合がある不具合修正

[その他変更]
・「終了」メニュー項目の削除(Mac版のみ)
・ソフトウェア・キーボードのキートップ文字列の小変更
"ESC" -> "Esc","RET" -> "Enter"
・Qt5.8.0でビルドするように変更(Linux(x86)版のみ5.4.2のまま)
Windows版ではVisual C++ 2015 x86 Redistributable が必要
・デバッグ出力の整理
・KeroKeyboardを手本とした新規のソフトウェア・キーボード/ボタンの
テスト実装を追加

-----------------------------------------------------------------------------------
[SHA256SUM]
-----------------------------------------------------------------------------------
acdfa8e9c898c52231cb0797580be884d8952edc4700349c01522a7da2aad954 *QtBrynhildr-documents-20170126.zip

cc1b6fb0b66346192e9cef79c99557ce3eed5743d6395ae83c21e552d1248524 *QtBrynhildr-linux_x64-v162.run

3372bd1b63ce01254b13bdaf249b868fe663199fd176b13080ffcff23ce029ce *QtBrynhildr-linux_x86-v162.run

8c9342757c65dd643d4b02b59b0b63ce1fda83fa9cb7a349c071ca6c8268e4b4 *QtBrynhildr-macosx_x64-v162.dmg

99caaf4030cf4a3502955fe3153829c99eb9e2fbdd9ac1887d308744964d822e *QtBrynhildr-windows-v162.exe

微調整をする

現在のソフトウェア・キーボード、ボタンを置き換えるためにはもう少し手を加える必要がありそうです。

まずリサイズした時の表示方法です。

実際にKeroKeyboardをリサイズしてみると分かりますが、キーボード全体を一様に拡大、縮小しているわけではありません。より押しやすくしたいキーはその他のキーに比べて比較的サイズを大きく維持しようとします。
いろいろなサイズで使いやすくするための工夫なので取り入れたいのですが、今は単純な拡大、縮小を実装しようと思います。

次に背景色と境界線、文字の色を変更します。

将来的にはKeroKeyboardのように配色をユーザーが変更できるようにしたいのですが、まずはKeroKeyboardらしくするために色を似せてみようと思います。

早速KeroKeyboardのキャプチャ画像をフリーソフトであるXnViewで開きます。で、「表示」メニューから「色情報」を選択するとマウスカーソル下の情報がカーソルのそばに表示されます。2段の表示のうち上がR,G,Bの10進値の情報、下がhtmlに書くための16進値の情報のようです。

マウスカーソルを移動してキーボードの背景を調べると、15,31,64 という値でした。この値を利用してこんな感じにするとKeroKeyboardと同じような色で長方形領域が描画できます。

QColor panelColor = QColor::fromRgb(15, 31, 64);
painter.fillRect(rect, panelColor);

文字と境界線の色は同じようなので、これらの色情報も同様に調べました。色を似せると大分近づきますね。

[ Windows版 ]

[ Ubuntu版 ]

キートップを表示して、押されたキーを判断するようにする

キーボードの外観だけで、なんのキーなのかさっぱり分からないのでキートップを表示するようにしました。

QPainter::drawText()には表示する長方形領域(QRect)、文字列(QString)を渡して、ついでに真ん中に表示してねとパラメータで指定すればQRectの真ん中に文字列を表示してくれる関数があるのでそれを利用します。

指定するQRectはキーボードを描画するときに使ったQRectがそのまま利用できますので、キートップに表示する文字列だけを用意すれば良さそうです。

ついでにソフトウェア・ボタンも用意しました。テストのためにすべてのボタンを表示するようにしていますが、KeroRemote のように、必要なボタンのみが表示されるように制御する予定です。

上向きカーソルキーの左のキーは円マーク(￥)でなくバックスラッシュ(＼)を表示させたいですね。

Ubuntu でビルド、実行するとこんな感じです。

マウスでクリックしたり、タッチパネルでタッチするとイベントが発生します。このイベント情報からクリックした場所(x,y)がQPointの形で取得できるのでこれを使ってどのキーが指定されたのかを地道に判断します。

ここでもキーボードの描画に使ったQRectが使えますね。クリックした場所がどのキーの領域に入っているかを判断すればよさそうです。

Qt Assistantを起動してQRectに使えそうなメンバー関数がないか調べてみるとcontains()というメンバー関数が使えそうです。

bool QRect::contains(const QPoint &point, bool proper=false)

エッジを領域外としたい場合はproperを明示的にtrueで指定すれば良いそうです。

これを利用して各キーの領域を調べることにします。1つ1つ地道にキー表示領域を調べるので最大、キーの個数回も領域チェックしてしまいますが、まぁ大きな問題はないかと…(*^-^)

背景色、文字色、フォント、背景の属性、リサイズした場合の表示計算の方法など検討すべきところはまだまだ沢山ありそうです…

キーレイアウト用のデータが出来上がりました

地味に定規で測った後微調整してキーレイアウト用基本データが出来上がりました。こんな感じです。

  // original size
  static const int WIDTH = 270;
  static const int HEIGHT = 75;

  // layout entry
  typedef struct {
	QRect rect;
	ID_KEY id;
  } KeyLayout;

  // layout table for keyboard
  KeyLayout layout[ID_KEY_NUM] = {
	//       x,  y,  w,  h   key
	{QRect(  0,  0,  0,  0), ID_KEY_0}, // dummy entry

	// 1st row
	{QRect(  0,  0, 18, 15), ID_KEY_1},
	{QRect( 18,  0, 18, 15), ID_KEY_2},
	{QRect( 36,  0, 18, 15), ID_KEY_3},
	{QRect( 54,  0, 18, 15), ID_KEY_4},
	{QRect( 72,  0, 18, 15), ID_KEY_5},
	{QRect( 90,  0, 18, 15), ID_KEY_6},
	{QRect(108,  0, 18, 15), ID_KEY_7},
	{QRect(126,  0, 18, 15), ID_KEY_8},
	{QRect(144,  0, 18, 15), ID_KEY_9},
	{QRect(162,  0, 18, 15), ID_KEY_10},
	{QRect(180,  0, 18, 15), ID_KEY_11},
	{QRect(198,  0, 18, 15), ID_KEY_12},
	{QRect(216,  0, 18, 15), ID_KEY_13},
	{QRect(234,  0, 18, 15), ID_KEY_14},
	{QRect(252,  0, 18, 15), ID_KEY_15},

	// 2nd row
	{QRect(  0, 15, 24, 15), ID_KEY_16},
	{QRect( 24, 15, 18, 15), ID_KEY_17},
                       :
                       :

テスト用のWidgetクラスで、このデータを元にサイズを5倍に拡大して、drawRect()で描画するとこんな感じになりました。

なんとなく KeroKeyboard のバッタモンにはみえるかも(*^-^)

スクリーンキーボード KeroKeyboard を Qt で実現しよう

現在のソフトウェア・キーボード/ボタンはQt Designerで作成したウィジェットをベースに実装していますが、なかなか思うようなものにならなそうなので現在の実装を捨てようと思います。実装自体は泥臭くなってしまうとは思うのですが…

で、キーレイアウトの見本としたKeroRemoteのレイアウトを真似しようかと思ったのですが最近リリースされたKeroKeyboardが手本とするのにいいかもと思いました、Windows上で試せるので。

作者のIchiGekiさんに連絡して「レイアウトをパク…じゃなくて真似させてください(^_^)」とお願いして、ご了承頂きました。

キーのおおよその配置はこれまでもKeroRemoteを真似していたのですが、実際のキーの位置、キーの大きさの情報を計算するのにKeroKeyboardを参考にさせていただくことにしました。

画面上でドットレベルで確認する方法もあるのですが、おおよその配置が分かればいいので今回はKeroKeyboardのウィンドウをキャプチャし、プリンタでA4サイズで印刷して定規で測るという低レベルヽ(´▽｀)/な方法をとりました。

A4サイズで印刷すると270 mm x 75 mmという切りの良いサイズにKeroKeyboardが印刷されたのでこれを元に地味に測りました。キーの高さは15mm、ただしEnterキーだけは2つ分の30mm、幅は通常のキーで18mm、スペースキーは72mm…という感じです。これらの値を基本データとして持っておいてリサイズ時の実配置を計算するのに使います。

また現在はキーの情報をソースコード中に持っているのですが、これを機に外部ファイルに分離することにしました。

人が読める形のテキストファイルなので外部ファイルを追加すれば日本語、英語以外のキーボードにも対応できるメリットがあります。(キーボードタイプの情報も同様に外部ファイルに分離するのがいいのですが、まずはこちらを優先しようかと思います)

基本的なデータは揃ったので、これからKeroKeyboardをQtで実現してみます。キーイベントを実際に投げるところまでは実装しないかもしれませんが、見た目KeroKeyboard with Qtを目標とします。

もし需要があればKeroKeyboard on Mac/Linuxとかも実現できるかも…