前回は、思い付いた夜にOCRを検証し、番号を入れると赤枠が出る1.1.0が動くところまで進みました。
動くものができると、すぐに次の注文が出てきます。番号を打つより、一覧から選びたい。選んだ番号の場所へ画面を動かしてほしい。600dpiの画像を動かすと重い。
今回は、1.2.0から1.6.1までの記録です。一度は「これで十分」と決めた画面の配置を、使ってから変えていきます。どれも、使う前には分からなかったことです。
完成したWindows用ソフトは無料公開中です。→ ダウンロード・動作環境はこちら
まずは、読み取った結果を一覧で見る
1.2.0では、OCRで読み取った結果を一覧にする別窓を足しました。この段階では、表示するだけです。
一覧には、ID、番号、座標、信頼度が並びます。行を選ぶと、その番号に青い枠が付きます。
触ってみると、思った以上に便利でした。
LVで選択よいな。160くらいならコロコロ、クリックの方が数値入力より快適かもしれない。であれば、モードレスじゃなくて左ペインに常時でもよいかもしれない。
LVはListView、つまりこの一覧のことです。番号が160個ほどなら、キーボードで番号を打つより、ホイールで一覧を転がしてクリックした方が速い。それなら、別窓ではなくメイン画面の左に常に置けばいい。
一度は、別窓にもできるドッキングがいいと言いかけました。でも、すぐに取り消しています。
いや、左固定でドッキングいらない。今日は右に表示したい気分になんてならないし。そのかわりスプリッターで幅は変えられるようにする。
一覧は番号だけの1列にして、幅を取らないようにしました。こうしてできたのが、左に一覧、中央に全体図、右に拡大図を並べた1.3.0です。
中央の青い破線の枠が、右の拡大図に映っている範囲です。中央をクリックしたり枠をドラッグしたりすると、右の拡大図が動きます。
ここまでが、思い付いた翌日の午前2時でした。
32インチで使ったら、目が往復した
1日空けて、1.3.0を実際に使ってみました。そこで出てきたのが、次の注文です。
かなり動くようになってきた。OCRの精度は後回しにするとしてその他の実装と現時点で使ってみて分かった問題点を修正する。チャッピーが言った対象にパンを移動させる機能。つかってみると欲しくなった。それから左固定で良いと言ったLV。32インチモニタで最大化すると人間様の視点移動的に厳しいな。なのでこれはフローティングとドッキングを出来るようにしたい。
32インチのモニターで最大化すると、左端の一覧と右の拡大図がかなり離れます。一覧で番号を選び、右で場所を確かめる。そのたびに、首ごと視線を動かすことになりました。
前の日に「左固定でドッキングいらない」と言ったのは私です。それを、使ってから自分で取り消しました。
選んだ番号の場所へ、拡大図を自動で動かす機能も同じです。チャッピーは最初から提案していましたが、私は手動で動かせば十分と考えていました。使ってみると、欲しくなりました。
もう一つ、拡大図を動かす操作がもっさりしていました。
パンがもっさりだ。再描画に600dpiの画像をbitbltでこんなに重いか？という感じ。AF-ImageEditorの時のように重い原因を調査させたい。
画像の表示を動かすことを「パン」と呼びます。100%表示なら、画像の一部を画面に写すだけのはずです。それで重いなら、どこかに原因があります。
推測で直さず、測ってから直す
Codexへの指示書は「Phase 4.1 — UI改善・描画性能調査」としました。一覧については、こう書いています。
OCR一覧を以下の2状態で切り替えられるようにする。
- 左端ドッキング
- 独立したモードレスウィンドウ
切り替えても、選択している番号や赤枠・青枠を失わないこと。別窓を閉じたら、左へ戻ること。前日に作った左固定の一覧を、そのまま別窓にも出せるようにする指示です。
描画については、直し方を指定していません。指定したのは、調べ方です。
原因を推測だけで決めず、実コードを調査し、計測すること。
測る条件も決めました。600dpiの原本、32インチ相当の大きなウィンドウ、25%・50%・100%・200%の4つの倍率です。描画の処理時間、再描画の回数、画像の作り直しの回数などを測り、本当のボトルネックを特定するよう求めました。
AF-ImageEditor編でも、間引く前に何が重いのかを調べさせました。今回も同じ考え方です。
1.4.0：重さの正体は、画像の描画だった
報告によると、主なボトルネックは画像の描画処理でした。表示に要らない範囲まで描いていた部分などを改め、同じ条件で測り直した結果がこちらです。
| 倍率 | 改善前 | 改善後 |
|---|---|---|
| 25% | 368ms | 147ms |
| 50% | 310ms | 73ms |
| 100% | 254ms | 41ms |
| 200% | 233ms | 31ms |
拡大図をドラッグで動かしたときの、1回の更新にかかる平均時間です。Codexが用意した描画の計測用プログラムでの値で、画面に表示されるまでの遅れは含みません。
25%表示だけは、まだ重さが残りました。それでも、こう判断しています。
速度は改善の余地はありそうだが大分軽くなった。メモリをふんだんに使えば改善は出来ると思う。25%画像をメモリに作っておき等倍で描画するなど。ひとまずは実用範囲内なのでおｋ。残りの予定機能優先でいこう。
ふだん使うのは100%前後です。そこが十分に軽くなったので、25%の改善は後回しにして、ほかの機能を先に作ることにしました。
どの番号に読み違えたのか、画像からは分からない
一覧を全部選ぶと、読み取れた番号すべてに青い枠が付きます。そこで、困ったことに気付きました。
で、ある目視した番号を入力しても赤で囲まれない。別の数字として認識されたのだろうが、どの数値として認識されたのかが画像からは判定できない。
ある番号を検索しても、赤枠が出ない。でも、画像を見るとその番号には青い枠が付いている。つまりOCRは丸を見つけていて、別の番号として読んでいます。何番として読んだのかは、画像を見ても分かりません。
そこで頼んだのが、画像から一覧を引く「逆引き」です。画像上の番号をクリックすると、一覧の該当する行が選ばれます。ドラッグで画面を動かす操作とぶつからないよう、マウスがほとんど動かなかったときだけをクリックとして扱います。
1.4.1で、拡大図の37番をクリックしたところです。選ばれた行を見れば、OCRが何番として読んだのかが分かります。間違っていれば、その行を直せばいい。
使ってみた感想です。
この逆引きは強い。むしろ初期の段階から設計しても良かったくらいだ。
済みチェックの原点は、説明書を汚したくないこと
次に足したのは、貼り終えた番号の印です。そもそも私がなぜ説明書をスキャンしていたのか、という話になります。
そもそもなぜ俺はスキャンするか。貼ったら黒マジックでマーキングを塗りつぶして
済みにする。オリジナルの説明書に書きたくないじゃん。なのでスキャンして印刷して貼ったら塗りつぶす。
印刷せずに、GIMPで半透明のレイヤーを重ねて塗る方法も試したことがあります。結果は「面倒で定着しなかったｗ」でした。
一覧には、番号の左にチェックを付けます。番号だけの1列なので、一覧の右側には余白があり、チェックを置く場所には困りません。
チャッピーと詰めたのは、チェックの操作と選択の関係です。何件選んでいても、1回のチェック操作で変わるのはその1件だけ。キーボードのSpaceで複数行のチェックがまとめて変わる標準の動きは止めます。画像の上では、済んだ番号を不透明度50%の黒い四角で覆うことにしました。
画面には表示したい。次にはるデカール選定の一助にもなるしな。
1.5.0で、105番に済みのチェックを入れたところです。右の拡大図では、105番が半透明の黒で覆われています。済んだ番号が画面で分かるので、次に貼るデカールも選びやすくなります。
1.5.0では、この済みチェックと一緒に、番号の修正、番号の手動追加、画像ごとの自動保存も入れました。アプリを閉じて開き直しても、前回の作業の続きから始められます。修正の機能については、次回くわしく書きます。
Enterで移動、選んだら移動、開いたら前回の続き
保存が効き始めると、また欲しいものが増えました。
まず、番号を入れたときの動きです。入力するたびに画面が動くと、目で追うのが大変です。そこで、入力しただけでは動かさず、Enterを押したときだけ、その番号の場所へ移動するようにしました。
数値入力だけではパン移動しないにしよう。数値入力からのEnterでパン移動。強調表示するだけならEnterはいらない動作
1.6.0を使ってみて、次の注文です。
入力→Enterでのパンはかなりよい。LV選択で移動しないのは前回指示してなかったんだっけ？LVでSelectedIndexが変化したときはその先頭に飛ぶようにする。あと、次回起動時に前回の続き作業できるのは確認したが、画面サイズと位置がリセットされる。これは復元するようにする。
1.6.1では、一覧で番号を選ぶと拡大図がその場所へ移動するようにし、ウィンドウの大きさと位置も次回の起動時に戻すようにしました。前回開いていた画像と、最近開いた10件の履歴も、1.6.0で覚えるようにしています。
どれも、仕様を考えている段階では出てこなかった注文です。このころ、チャッピーにこう書いています。
これは次の記事候補だ。記事書くために強引にネタひねり出したわけではなく必要が母となった例
次回：別の説明書を開いたら、赤枠が出なかった
1.6.1で、テムジン1枚を相手にした作業はかなり楽になりました。
ところが、別のキットの説明書を開いたところ、寸法が合わないという警告が出て、赤枠が出なくなりました。次回は、テムジン以外の説明書へ広げたところで起きたことと、OCRの修正を「たまに使う機能」から「いつも使う機能」へ変えた話です。
前の記事：「98番どこ？」を一瞬で。説明書から番号を探すソフトを、まずOCRの検証から始める【AF-DecalFinder 第1回】
コメント