Obsidian - Pebbleのウォッチフェイスをひとつ書いてみた

Posted 10 months ago by yoosee.
  pebble

さて先日買ったPebbleだが、せっかくスマートウォッチを買ったことだし、ウォッチフェイスのひとつくらいは自分で作ってみることにした。シンプルなアナログ時計のデザインで Health の Steps (歩数計) と Weather (現在の天気) を出してくれるウォッチフェイスが見当たらなかったので、その方向で作成。Obsidian という名前にしたけど背景が黒いから以上に根拠はない。

Pebble AppStore にも上げておいた。Submit してすぐ有効になったけど手動の審査とかはないのかな。

気温の C/F や各パーツの色は設定で変更が可能。

Pebble Obsidian Watchface

Pebble の開発環境は基本的に C + JavaScript で Linux 用のSDKがあるが、CloudPebble という Cloud9 のようなブラウザ上で動く開発環境があるのでそれを使って作業した。Compileから Virtual Machine を動かしてのテストや、Pebbleアプリの Developer Connection という機能を使って実機にアプリを流しこみつつアプリの実行時ログを見るなどもできるので、結構使いやすい。インラインの補完も効くし、Githubとの連携もできる。

Pebble の開発は先述の通り C と JavaScript で、アプリ本体部分を C で書きつつ外部Webサービスとの連携、例えば天気予報の取得などを JavaScript で記述する形になっている。C 部分はよくある GUI ツールキット作成の構成で、コールバックを作ってGUIパーツをレイヤーとして位置・色・リソースを割り当てて重ねていく形。C と JS の間は Data Dictionary を介したメッセージのやり取りになっていて、これもよくある。ウェブアクセスや文字列操作系を JS に任せられるのは楽といえば楽。

開発にあたってはチュートリアルもあるので、Build Your Own Watchface // Pebble Developers をたどれば時計と天気を表示するところまではだいたい進むし、Examples // Pebble Developers にアナログ時計のサンプルもあるのでその辺りを参考にできる。

ちょっと面倒だったのが設定画面で、Pebble の設定は外部にWebサーバを立てて JavaScript でそこに飛ばし、HTML Form の設定値を JavaScript で持ってきて Dictionaly に入れて C コードの Tuple に渡す、という割と迂遠なやり方になっている。このためにWebサーバを使うのもなあと思ったら、 RawGit という Github のコンテンツをそのまま配信してくれるサービスが有ったのでこれにホストしてもらうことにした。

そんな感じで一応は使用に耐えるウォッチフェイスをひとつ作ったのでコードは公開しておく。書き方を調べながら書いたのでコードがかなり汚いのはご容赦頂きたい。なお基本的に Pebble Time Round (CHALK) での動作確認はしているが、Pebble Time (BASALT) の方は実機もないしあまり真面目に画面表示のチューニングもしてないのでそこもご容赦を。

背景に Bitmap イメージを貼れるので機能にこだわらなければ好きなデザインのウォッチフェイスを作るだけなら簡単だと思う。しかしテストを書きにくいのは皆どうしているのだろう。

追記・更新記録

  • 1.3 Weather Provider を OpenWeather.org から Weather.gov に変更。早く Pebble SDK が Weather API を提供して欲しいのだが、取り敢えずの対応として。また Notification から Back で戻ると時計の針や各種情報が非表示になる問題に対応。.did_focus handler を書いたけどこの辺りの Best Practice が見当たらない。と言うか Pebble 側の不具合だと思うのだけど。