Follow us on Twitter!
back to panic.com

Panic Blog

From the desk of Cabel
Portland, Oregon 97205

The Panic Status Board: 2013 Edition

You might be familiar with where it all started: the status board we put on our Panic office wall in 2010.

Since then, as you may know, we turned that status board into an iPad app called Status Board. Now everyone can have a cool, beautiful, data-packed status board on their desk or wall.

And since we built the app, we rebuilt our status board, making it twice as good! (Literally.)

Panic Status Board

No, you’re not seeing double — this time we went with two goofy screens of stuff.

It’s pretty glorious.

About The Panels

Here are some implementation notes on our board:

Status Board - RevenueTraditionally Panic is quiet about how-are-we-doing data. It always feels like a possible distraction for our hard-working team. But we’re always changing, and this revenue Graph panel has been fascinating. Every day a script totals up our direct sales data, then retrieves our App Store sales data using AppFigures and their nice API. The totals get dumped into a database, and then we make that available via a simple PHP script that outputs JSON to the Status Board. That might sound tricky, but all told it took about a day of work to make happen.
Status Board - UnitsUnits have been especially interesting since they reveal so much about the economics of (our) iOS software, as this Graph panel shows. Although (our) iOS apps sell a respectable number of units, the revenue they bring in barely charts compared to our Mac stalwarts. So far! We’re working hard on improving our iOS apps, and trying new ideas, in order to crack the iOS market a little bit more. (Sorry this chart was pre-Status Board, which is doing well!) By the way, Graph documentation is here.
Status Board - InboxThe Support team works tirelessly to fight this tide! This is just an Email panel, which ties into our IMAP server. It took about 3 minutes to set up, and has been incredibly useful to see what our support load is at a very quick glance. (On the server, each Support person shares a single “Help” IMAP account, which has folders for each support person, and a script distributes the incoming support requests round-robin style.)
Status Board - SentConversely, this Graph panel this is a great way to quickly see how many support responses are going out the door. (Of course, it’s not a competition — it’s just for fun.) To get accurate Sent counts, we have a script that looks at both outgoing Twitter replies, and outgoing e-mails, and totals them up per-person into JSON.
Status Board - ProjectsThis list is using our Table panel, connecting to an HTML file on our server. (Table documentation is here.) This is an edited version to protect our secret projects, of course. A project list is always tricky, since it’s the most manually-updated thing on the board, and always runs the risk of being stale. But, it’s fun to see who’s working on what.
Status Board - Sparkle
What version of OS X are our users using? Using StatHat, which lets you track data incredibly quickly, I added one line of code to our PHP script that handles Sparkle updates. StatHat can output to Status Board natively via the Graph panel. Boom: instant OS version graph. (Also, fascinating how people use our Mac apps during the day, and not very much on the weekend.)
Status Board - Car2GoThis is our car2go map, so we can quickly see if there are any cars near the office that we can hijack and drive home at the end of the day. It’s totally custom — we’re using the Do-It-Yourself panel so it’s just a little web page on our server. We signed up for the car2go API and combined their data with Google maps and some nice CSS animation. If enough people are interested, we might make this available to others. (Does your city have car2go?)
Status Board - TriMetThis is another Do-It-Yourself panel to show everyone’s bus lines. Sometimes end-of-the-day conversations are abruptly interrupted when we notice a bus is nearby. Logan has more recently made his own TriMet panel that we like a lot.
Of course, we’re also using the stock Weather, Twitter, and RSS panels for different things. And naturally, the Clock, to show the current time in Portland, Seattle, and San Francisco. You know, for conference call scheduling.

Hardware Notes

  • This time, we chose the Samsung DE55A 55″ Professional Display. Bright, thin bezel, built to stay on.
  • To cover up the Samsung logo, we used a piece of black non-glare artist tape. (Electrical tape was too shiny.)
  • We installed a double gang outlet in the wall, to support 2 TV’s and 2 iPad chargers. Permanent power.
  • We applied 3M Magnet Tape to the back of our iPads. They just stick right to the back of the display:

Back

As people continue to build new things, our Status Board seems to change every week. Since taking these photos we’ve already added GoSquared, SNMP traffic graphs, and much more. That’s the best/worst thing about Status Board: it’s now so easy to make a cool Status Board that it’s hard to know when to stop. But hey, it’s fun!

If you’ve used Status Board to make a cool status board, send us a photo!

Posted at 12:04 pm 29 Comments

From the desk of Noby
Portland, Oregon 97205

海外の Status Board マニア達!

私たちが Status Board をリリースしてから約1日が経ちました。驚くべきことに、既にたくさんの人々の手によって非常に多くのクールで役立つパネルが作成されています。

ここに偉大な数々をご紹介します。

banner

Dead Simple Greatness. クリックするだけで追加完了:

  • TubeTracker — an incredible one-click layout for people in the UK who rely on the tube (pictured above)
  • AAPL — simple module for Apple’s stock price (don’t follow too closely or you’ll go crazy)
  • LastFM — see your last-listened track
  • App Store Review Times —  a great way to see how busy Apple is
  • WWDC Alert — but really, how fast are tickets going to sell out this year
  • Bart Arrival Times — for those of you in San Francisco

New Native Sources. 情報の供給元によって Status Board の為に準備されました:

  • LeafPing — output your Envato sales data to Status Board. An example.
  • uri.lv — track your podcast statistics on the big screen.
  • AppViz — this must-have app for App Store sales tracking can now output to Status Board
  • Don’t forget our amazing launch sources: StatHat (so useful!) and Hockey.

Sources/Conduits. 動作には少々のコーディングが必要となります:

  • Nest — a quick look at the temperatures on N
  • Server Statistics — keep an eye on your server loads
  • OmniFocus — a Python conduit to get your tasks up and running
  • Google Analytics — 7-day website stats
  • Jenkins — display running jenkins jobs in a table
  • TimeTiger — interestingly, a Windows app for time tracking
  • Mint Analytics  — a Pepper to create Status Board-compatible web stats
  • Mite — time tracking reports
  • Things — a way to get your Things to-do lists up and running
  • AppFigures 1 — a conduit for displaying your AppStore sales data
  • AppFigures 2 — another simple PHP conduit for AppStore sales data
  • BitBucket Issues — track open issues in Git/Mercurial hosted source

(And you can always add a new Do-It-Yourself widget and point it to always-running Mario.)

さらにファンタスティックな Web サービスが Status Board でネイティブに利用可能になるようです。詳しくは後日お知らせします!

また、オフィシャルではありませんが 以下のまとめサイトもご紹介します: Pinboard, StatusBoardWidgets.comStatusBoardApp.info.

最後に、私たちは Status Board が実際に活躍している写真が大好きです!こちらはバイクメーカー Ducati のディーラー:

BHmy3FyCIAA8FAj.jpg-large

あなたのセットアップを @panic や @panicjapan を付けてツイートしたりメールでお知らせください!

また日本のサービスに対応したウィジェットに期待しています!

[原文]

Posted at 4:56 pm No Comments

すべてのデータを美しく。Status Board をご紹介します。

以前、私たちは自身のオフィスで使用するためのクールな 電光掲示板 – Status Board を作りました。

私たちはその後すぐに、美しくレイアウトされたデータが如何に素晴らしく、そして重要であるかに気付かされました。サポートメールの受信状況がパッとひと目で確認できるという体験は業務上とても貴重でした。そしてこのボードの前に(もしくはスナックの山の前に)人が立ち寄り、自然にミーティングが始まりました。今では私たちのオフィス活動の中心にそれはあります。

私たちは考えました: 美しいデータはすべての人に価値がある、と。

すぐに iPad アプリケーションの開発に取り掛かりました。ツイート数やメールの未読数をカウントしたり、ニュースフィードや天気を表示したりするための誰でも簡単に利用可能なモジュールを準備しました。業務用やプロ向けのモジュールとして、自由にデザインされたグラフや表をイメージ通りに表示するためのモジュールも準備しました。それらを信じられないほど簡単に使い始めることができます。そして常にあなたのデスクの上に置いておくことができます。一方で(有料のアドオンとして提供される)テレビ出力機能も準備しました。実際に壁に設置された大画面モニタにデータを表示することが可能です。

Status Board。それは Panic から生まれた、あなたのデータをディスプレイする為のまったく新しい iPad App です。

appstore-download

しかしこれはまだ第一歩: バージョン 1.0 です。どのようなモジュールやウィジェットが必要ですか?ぜひ聞かせてください!もしかすると不自然な動作に遭遇してしまうかも知れません。ぜひレポートをお願い致します!そしてどんな風にこのアプリケーションを活用するでしょうか?我々はあらゆるご意見に耳を傾け、クレイジーに開発を続けます!

(このプロジェクトでの Greg, Neven, Dave, そして Kenichi の素晴らしい働きに感謝します。)

このアプリケーションの完成を記念して、私たちのオフィスの壁に設置されている Status Board スクリーンもアップデートされました。それはまた別の機会にこのブログでお知らせします!

PS: 以前、私たちがなぜ Lightning – Digital AV アダプタによる外部出力時の不思議に気付いたのか、もうお分かりですよね?

[原文]

statusboard-shot

Posted at 3:28 pm No Comments

Coda 2.0.8 beta 1, Noby

April 9th, 2013

Coda 2.0.8 のベータテストにご協力ください!

安定性とパフォーマンスを改善し、Transmit 4.3 のお気に入りの読み込みに対応したバージョンを現在開発しています。もしお試しいただける場合は下記のリンクよりご入手ください。

Coda 2.0.8b1 (52 MB)

もし、気になる挙動が見つかりましたら私たちのバグトラッカーである Hive にログインしてレポートをお願いします!(開発担当が直接閲覧しますので、すべて英語でのご入力となります。)

Posted at 1:43 pm No Comments

Wanted: Office Manager & Non-Technical Support

Hello! Panic, Inc., a software developer for Mac, iPhone, and iPad is seeking an Office Manager at our 15-employee headquarters in Portland, OR. A rare, non-technical Panic job!

Candidate must already live in the Portland area, and be able to start immediately. Our office is located downtown, across from Powell’s Books. This is a full-time position.

Typical job duties include:

  • Being on-site weekdays from 9 AM – 6 PM to answer / screen phone calls, take messages, and receive deliveries and visitors
  • Answering general support emails, helping users get up and running, and forwarding technical questions when necessary
  • Handling voicemails and, somehow, faxes
  • Writing checks and paying bills immediately
  • Coordinating occasional social and corporate events such as company dinners, talks, conferences
  • Recording company meetings
  • @answering non-technical queries via Twitter
  • Responding to credit card disputes and refunds
  • Following up with purchase orders for payment (accounts receivable)
  • Providing price quotes for companies interested in volume purchases
  • Maintaining office calendar (who’s in/out, any upcoming special events, birthdays)
  • Scanning receipts and verifying purchase data
  • Keeping the dishwasher sane
  • Welcoming guests & making travel reservations
  • Unexpected Cabel Tasks and miscellaneous errands

Technical knowledge beyond email and word processing is a definite plus, as is a sense of humor and easy-going attitude. We’d love someone who has a fondness for our products and technology in general. But being organized and reliable is critical.

In addition to base salary, Panic offers:

  • Medical, dental, and vision coverage after 90 days
  • Bi-annual profit-sharing bonuses
  • SEP IRA retirement plan contributions after first year
  • Flexible vacation policy
  • Reasonable, life-compatible hours
  • Convenient central Downtown location
  • Free TriMet passes and bike storage
  • A very beautiful and inspiring office, we think

Candidates of every race, gender, nationality, age, and orientation are encouraged to apply.

Sound good? E-mail your resume to us, (UPDATE: This position has been filled. Thanks!) and tell us about yourself. If we’re interested, we will send you additional details and possibly schedule an interview. While we won’t be able to write back to everyone, we really thank you for your interest!

Posted at 11:37 am 5 Comments

From the desk of
Noby
Engineering Dept.

Lightning Digital AVアダプタに吃驚

現在、私たちは未来のプロジェクトのために様々な iOS デバイスからのビデオ出力について検証しています。そんな中、あるミステリーに遭遇しました。それについて紐解いて行きましょう。(効果音!)

ミステリー #1: 最大解像度が 1600 × 900

ある画像を Lightning – Digital AVアダプタ経由で “ビデオミラーリング” すると、以下の様に最適化された最大解像度は 1600 × 900 だとシステムに表示されました:

Lightning

“ちょっ、それ 1080p じゃない!” と思うかも知れません。

同じことを以前の Apple 30ピン Digital AVアダプタで行うと、1920 x 1080 まで利用可能だと表示されました:

Dock Connector

Apple の iPad mini 技術仕様には “最大 1080p” でのビデオ出力サポートと記述されています。ウソは書かれていないハズなので、もしかするとアダプタが 1600 × 900 解像度の画像を 1080p にアップスケールしているという意味なのでしょうか?

ミステリー #2: MPEG アーティファクト

デバイスをテレビに接続するとき、私たちは画面を鏡に映したかのようなクリーンでキレのある映像を期待します。

しかし、Lightning – Digital AVアダプタの場合はそうなりません:

jpegcompression

文字際にブロックノイズが現れているのが確認できます。(私たちは Apple 30ピン Digital AVアダプタでも検証しましたが、こうした現象は起こりませんでした。)

仮説

非常識です。これは単なる AVアダプタです!なのに何故、限定された解像度や表示のタイムラグ、MPEG アーティファクトなどの現象が起こるのでしょうか。と、ここであることが思い出されます。iOS デバイスから Apple TV へビデオ出力したときの体験と同じであると…

有益なツイートや少々の議論の末、私たちは以下の仮説を立てました:

Lightning – Digital AVアダプタは、最小構成の AirPlay レシーバ?

iOS デバイスを接続すると何らかの方法で AirPlay 接続をセットアップし、デバイスからの出力をそのまま HDMI 出力せず、むしろ 1080p にアップスケールして AirPlay しているに違いありません。

“でも、ちょっと待って!” と思われるでしょう。”それって AirPlay ストリーミングとデコードを行う為の電子部品があの小さいコネクタ内に詰め込まれてるってこと?”

信じられないですよね。ではここで、糸ノコの登場です。

chip-2

左側に信じられないほどの超精密なコンポーネントがあります。今までに見たことのない精密さです。取り付けられている抵抗器は何の為のものでしょう?

反対側も見てみましょう:

chip-1

目を疑ったかも知れませんが — 小さなチップには ARMとあります。さらに RAM をあらわす部品番号 H9TKNNN2GD の記述も見えます。

つまり: Lightning – Digital AVアダプタには、SoC CPU が搭載されているように見えます。 

従って、AirPlay(か、AirPlay の様な MPEG ストリーミング)を行っていると考えるのは理にかなっていると言えるでしょう。

結論

このアダプタには我々の想像以上のものが詰まっていました。そして私たちは Lightning – Digital AVアダプタは AirPlay(か、AirPlay の様な MPEG ストリーミング)を使用して出力していると結論付けます。

しかし疑問もたくさんあります。例えば OS どうやって起動するのか? @jmreid 曰く アダプタには個々に “mini iOS” (!) がインストールされていて、コネクタへの接続毎に起動しており、それによりビデオ出力されるまでに数秒の遅延が生じる、とツイートしました。なぜ?あまりにクレイジーですが恐らく、Lightning コネクタのピンの数が足らずに RAW の HDMI を取り扱えなかったのではないかと算段しています。従来のビデオ出力に対応させる為にゼロからまったく新しい考え方で作られたのでしょう。もしくは、シンプルに低コストでより多くの機能を iPad で提供したいと考えたのかも知れません。

アダプタを経由することで劣化した 1080p では無い出力が行われます。これは悪いニュースかもしれません。私たちは RAW での HDMI 出力を熱望します。

一方で、アダプタが $50 もするなんて高すぎる、と言われますがこれは小さなコンピュータです!これは良いニュースかも知れません。

[原文]

PS: なぜ我々が iOS デバイスからのクリーンなビデオ出力にこだわるのか、それらのステータスについては追ってポストします!
Posted at 7:16 pm No Comments

From the desk of Noby
Portland, Oregon 97205

Coda and Sandboxing from Cabel

Mac App Store版の Coda 2 に新機能を追加する前に、我々はそれを“サンドボックス化”しなければなりません。Apple は OS X のセキュリティ向上を目的としてガイドラインに定めています。

それは何を意味するでしょうか?

サンドボックス化されたアプリケーションは、ユーザから明示的に許可が与えられるまでローカルファイルへのアクセスが限定されます。許可を与えるとそれは記憶されます。Coda で言い換えると、ユーザから許可を与えられるまで、一般的な選択ダイアログからであってもローカルファイルを参照することができなくなります。また Coda には“サイト”という設定があり、その設定にはローカルパスが含まれています。この設定でもまず、最初にローカルファイルへのアクセス許可を明示的に与える必要があります。これはバッドニュースでしょうか?既存のサイト設定のすべてで再度ローカルパスを設定する必要があり、サイト設定を使用しない(そんなユーザは居ないと思いますが)場合、都度、アクセス制限に作業が中断されることが予想されます。

これらの変更は Mac App Store 版のみです。直販版では変更ありません。

以下、相違点を詳しくご説明します:

1 ローカルルート

サイト設定の “ローカルルート” がリセットされます。初回の設定時にアクセスを許可するか訊ねられます。

この設定は初回の1度きりです!

2 フォルダに移動

プルダウンメニューから直接フォルダに移動することはできなくなり、従来の “選択パネル” が現れます。

3 パスポップアップ

サイドバーおよびファイルブラウザから利用可能な “パス” ポップアップですが、定義されたローカルルートより上位の階層は表示されなくなります。

サイト設定を利用していない場合、サンドボックス化されたホームディレクトリが表示されます。継続する為には他のフォルダを選択します。

フォルダ選択操作は初回の 1度きりです!

4 パスバーブラウザ

ローカルルート設定外のフォルダを選択しようとすると、アクセスを許可するための選択画面が現れます。

フォルダ選択操作は初回の 1度きりです!

5 ファイルの保存

書き込み権限の無いファイルを保存できません。またこれを回避する方法も Coda から提供することができません。

これは、書き込み権限を一般的に付与しない Web ページを含む、すべてのファイルに適用されます。

Mac App Store による制限です。

6 情報を見る

Coda の情報を見るウインドウから、アクセス権の変更を行えなくなります。

編集する前にあらかじめ Finder の情報を見るウインドウで変更してください。

Mac App Store による制限です。

7 場所(プレイス)

サイドバーの“場所(プレイス)”のローカル設定がすべてリセットされ、再定義が必要です。

NOTE: 本設定はコンピュータ毎に定義されています。そのためコンピュータ毎にリセットと再定義が必要です。

8 SVN と GIT

ツールパスのリセットと再設定が必要になります。

以上です。いかがでしょうか?

これらの変更をご体験いただくために、Coda 2 のスペシャルビルドを準備しました。

実験スタート

サンドボックス化された Coda をお試しいただく前に、このビルドが実験版でベータ品質であることをご理解ください。必ず、システム全体のバックアップを準備してからお試しください。

また、現在 Coda 2.0.6 以降の Mac App Store 版をお使いいただいている必要があります。またこの実験版を起動する前に、Coda 2 の iCloud 同期機能をオフにしてください。

実験版をダウンロードするにはここをクリックしてください。(50 MB .zip)

お試しいただけましたら、ぜひご意見をお聞かせください。サンドボックス化された Coda 2 がほとんどのユーザ様にとって大きな影響が無いことと予想していますが、皆さんの率直なご意見をお聞かせください(開発担当が直接閲覧しますので、すべて英語でご入力ください。):

最後までお読みいただき、また Coda 2 をご選択いただき、ありがとうございます。サンドボックス化された Coda 2 をご紹介できることに興奮しており、新しく、素晴らしいものになるよう開発を続けます!

Posted at 7:17 pm Comments Off

From the desk of
Noby
Engineering Dept.

iTunes 11 and Colors from Wade

iTunes 11 は以前のバージョンから大きく変わりました。新しいアルバムディスプレイモードはその最たる機能です。この新しい表示スタイルは、アルバムのカバーアートと視覚的にマッチしたトラックリストを生成して表示します。その結果、文字もアルバムのアートワークとシームレスに統合され、とても魅力的です。

iTunes を1日使ってみてふと、この機能  あるイメージを元にイメージとテキストテーマを生成する  を実装することは、どの程度大変だろうか?と考えました。

iTunes テーマのレプリカを作成する第1歩は明白で、トラックリストの背景色を取得することです。これは単純にアートワークの左端で最も使用されている色によって決定されています。色をカウントして抽出すると良い結果が得られましたが、iTunes では明確に、それ以外の何かがあります。最も使用されている色が黒か白の場合、ちょっとしたロジックを背景色に加えてみました。単なる黒や白の背景は単調で退屈なので、これによりちょっと面白いスタイルになりました。もちろん、ほとんどが黒もしくは白で支配されている場合はそのままで、少なくとも 30% はデフォルトの黒もしくは白と共通でした。

黒と白の背景をフィルタリングし始めると、だいぶ iTunes に近づいてきました。さらに分析を進めた結果、iTunes はアートワークの周りの枠を認識していることに気づきました。アートワークの周りに白い枠があると iTunes はそれを取り除き、内側の色をテーマのベースにします。私の最初のシンプルなデモアプリケーションではこの機能を含めていませんでした。

背景色が決まれば、次は背景色と対照的なテキスト色を見つける番です。再び、とりあえず色数をカウントして求めると中々の好結果が得られましたが iTunes の方がベターです。使われている頻度でのみ求めると、異なるタイプのテキスト(例えばプライマリテキスト、セカンダリテキスト、詳細等)で同じ色のバリエーションが使用されることになります。結果を改善するため、次に私は個々のテキストの色について確認しました。選ばれた背景色上で常に美しく表示されるテキストの色を決定するアスペクトを求めるには何が必要でしょうか?カラフルなテキストを確実にするため、私はテキストに使用される色が最小の彩度レベルを持つかどうかを確認するちょっとしたコードを加えました。これによってアピアランス的にベストではない白っぽい色や明るすぎるパステルカラーの使用が防がれました。これでテキストは背景に合う美しくユニークな色になりました。唯一残る問題は、判読に十分な背景とのコントラストが得られないかも知れないということでした。なので最後に、判読が十分可能かどうかの為の背景色とテキスト色のコントラストのチェックを加えました。あいにく、これによってテキスト色を見つける際、デフォルトの黒や白が使われるミスをまれに引き起こします。

最終的には以下の様になります:

これは iTunes と 100% 一致しません — が、時々こっちの方が良いです!異なる場合もありますが、全面的によく動作します。

以下の Xcode デモプロジェクトで実際にお確かめください:


このデモについていくつかの注意があります。私はランダムな色がテキスト色として現れるのを防ぐため、基本的な周波数フィルタリングを行いました。私のケースでは 1回しか現れない色を無視しています。小さすぎるイメージではサンプリングに十分なピクセル数を持たないので、このしきい値は入力されるイメージサイズに基づくことが望まれます。iTunes が行っているその他の加工テクニックとして、もしこれが出荷レベルのコードだとしたら私もしますが、イメージ外周の縁取りを見つけ圧縮しています。いくつかのカバーアートイメージには、色をサンプリングする前に無視されるべき 1ピクセルの白もしくはグレーの縁取りがあることに私は気づきました。

(このコードは数時間で書かれとても荒いです。なので速度や最適化について考えがあれば、これがアルゴリズムデザインのレッスンというよりも考察であることに注意してください。エンジニアは免責です。)

ちょっとでも楽しんでいただければと思います!少しのコードで高度なテーマデザインを得ることについてのお話でした。

アップデート: Aaron Brethorst 氏に感謝。コードは GitHub からもご入手いただけます。

[原文]

Posted at 9:40 pm No Comments

Coda 2.0.7 Beta 1 from Cabel, Noby

December 12th, 2012

Coda 2.0.7b1  (51MB).

UPDATE 12/10: ご協力ありがとうございました。直販版がリリースされ、Mac App Store 版は Apple に申請されました。

主な変更点: 動作速度と安定性の全体的な向上。

もし不具合を見つけられた場合は、私たちのバグトラッカーである Hive にログインしてレポートをお願いします!(開発担当が直接閲覧しますので、すべて英語でご入力ください。)

PS: 引き続き Twitter 経由で、まもなくリリース予定の iCloud および Dropbox 経由でお気に入りを同期する Transmit とまったく新しい iPad アプリケーションのベータテストを募集しておりますので、ぜひご協力ください!

Posted at 5:01 pm No Comments

From the desk of
logan
Engineering Dept.

Fun with Face Detection

Let’s face it (sorry): face detection is cool. It was a big deal when iPhoto added Faces support — the ability to automatically tag your photos with the names of your friends and family adds a personal touch. And Photo Booth and iChat gained some awesome new effects in OS X Lion that can automatically track faces in the frame to add spinning birds and lovestruck hearts and so on. While not always productively useful, face detection is a fun technique.

I’ve seen attempts at duplicating Apple’s face detection technology. (Apple is far from the first company to do it.) There are libraries on GitHub and various blog posts for doing so. But recently I realized that Apple added support for face detection in OS X Lion and iOS 5. It seemed to slip under my radar of new shiny things. Developers now have a direct link to this powerful technology on both platforms right out of the proverbial box.

Using Face Detection through Core Image

Apple’s face detection is exposed through Core Image, the super-useful image manipulation library. Two classes are important: CIDetector and CIFeature (along with its subclass, CIFaceFeature). With a little experimenting one night, I was able to get a sample app detecting faces within a static image in about 10 lines of code:

  1. // Create the image
  2. CIImage *image = [CIImage imageWithContentsOfURL:[NSURL fileURLWithPath:@"Photo.jpg"]];
  3.  
  4. // Create the face detector
  5. NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:CIDetectorAccuracyHigh, CIDetectorAccuracy, nil];
  6.  
  7. CIDetector *faceDetector = [CIDetector detectorOfType:CIDetectorTypeFace context:nil options:options];
  8.  
  9. // Detect the faces
  10. NSArray *faces = [faceDetector featuresInImage:image];
  11.  
  12. NSLog(@"%@", faces);

Note the dictionary of options. There is only one particularly useful key: CIDetectorAccuracy. It has two possible values: CIDetectorAccuracyLow and CIDetectorAccuracyHigh. The only difference: There seems to be additional processing performed on the image in order to detect faces, but at the cost of higher CPU usage and lower performance.

In cases where you are only apply detection to a single static image, high accuracy is best. Low accuracy becomes handy when manipulating many images at once, or applying the detector to a live video stream. You see about a 2-4x improvement in render time with low accuracy, but face tracking might pick up a couple of false-positives in the background once in a while, or be unable to detect a face at an angle away from the camera as well as high accuracy could.

Now that we have an array of faces, we can find out some information about each face within the image. CIFaceFeature exposes several useful properties to determine the bounding rectangle of the face, as well as the position of each eye and the mouth.

Using these metrics, it’s then possible to draw on top of the image to mark each facial feature. What you get is a futuristic sci-fi face tracker ala the Fifth Element. Leeloo Dallas Multipass, anyone?

  1. // Create an NSImage representation of the image
  2. NSImage *drawImage = [[NSImage alloc] initWithSize:NSMakeSize([image extent].size.width, [image extent].size.height)];
  3. [drawImage addRepresentation:[NSCIImageRep imageRepWithCIImage:image]];
  4.  
  5. [drawImage lockFocus];
  6.  
  7. // Iterate the detected faces
  8. for (CIFaceFeature *face in faces) {
  9. // Get the bounding rectangle of the face
  10. CGRect bounds = face.bounds;
  11.  
  12. [[NSColor colorWithCalibratedWhite:1.0 alpha:1.0] set];
  13. [NSBezierPath strokeRect:NSRectFromCGRect(bounds)];
  14.  
  15. // Get the position of facial features
  16. if (face.hasLeftEyePosition) {
  17. CGPoint leftEyePosition = face.leftEyePosition;
  18.  
  19. [[NSColor colorWithCalibratedWhite:1.0 alpha:1.0] set];
  20. [NSBezierPath strokeRect:NSMakeRect(leftEyePosition.x - 10.0, leftEyePosition.y - 10.0, 20.0, 20.0)];
  21. }
  22.  
  23. if (face.hasRightEyePosition) {
  24. CGPoint rightEyePosition = face.rightEyePosition;
  25.  
  26. [[NSColor colorWithCalibratedWhite:1.0 alpha:1.0] set];
  27. [NSBezierPath strokeRect:NSMakeRect(rightEyePosition.x - 10.0, rightEyePosition.y - 10.0, 20.0, 20.0)];
  28. }
  29.  
  30. if (face.hasMouthPosition) {
  31. CGPoint mouthPosition = face.mouthPosition;
  32.  
  33. [[NSColor colorWithCalibratedWhite:1.0 alpha:1.0] set];
  34. [NSBezierPath strokeRect:NSMakeRect(mouthPosition.x - 10.0, mouthPosition.y - 10.0, 20.0, 20.0)];
  35. }
  36. }
  37.  
  38. [drawImage unlockFocus];

With a little more work, it’s pretty easy to apply this technique to live video from the device’s camera using AVFoundation. As you get back frames from AVFoundation, you perform face detection and modify the frame before it is displayed. But I’ll leave that as an activity for the reader. :-)

And amazingly, it even works with cats.

With a little more effort, I was able to grab the closest detected face’s region of the image, and do a simple copy-and-paste onto the other detected faces (adjusting for angle and distance, of course). Behold… Panic’s newest, most terrifying cloning technology!

Here’s a little sample app. Have fun!

Posted at 11:25 am 14 Comments