スマートウオッチ作る(4) オリジナル画面の追加 #スマートウォッチ

今回の内容

前回作った環境を使って、オリジナル画面を追加する方法を確認していきます
テンプレートから生成した空の画面を時計に追加してみます

1.開発の流れ

前回クローンした公式サイトのGithubには、このボード専用のフレームワークも含まれています。このフレームワークには７セグメントに文字を表示するためのフォント、画面遷移前後に処理させるためのイベント、秒表示更新のための定期的なイベント、ディープスリープ制御などが含まれています。

このフレームワークを使った開発は、標準の時計画面、ストップウオッチの画面など、画面ごとに行います。１つの画面ごとに１対のヘッダファイルとcソースが対応しています。なので

各画面のソースを作り、画面の表示順をmovement_config.hに書いた後、
エミュレータで動作確認し(emmake make → ブラウザで確認)問題ないことを確認後
実機用にmakeし、出来上がった uf2ファイルを実腕時計に書き込み
となります。

1-1.テンプレートフォルダの確認

Win10のスタート→Ubuntu で前回作った環境に入ったら、watch_faceフォルダに行きフォルダの中身を確認しておきます
5つのフォルダがあり、それぞれが公式が準備してくれている５種類のテンプレート名になります
今回は、全部入りと思われるcomplicationを使っていきます。
メモリを節約するならコンパクトなものを選ぶと良いと思います

$ cd Sensor-Watch/movement/watch_faces/
$ ls
clock  complication  demo  sensor  settings

1-2.テンプレートを使ったcソースとヘッダファイルの準備

templateフォルダに行って、pythonスクリプトを実行し、１画面分のcソースとヘッダファイルを準備します。今回は以下の通りで行ってみます

使用するテンプレート：complication
作成する画面名(face名）：hello

$ cd ../template
$ python3 watch_face.py complication hello

ソースとヘッダファイルは、~/Sensor-Watch/movement/watch_faces/[テンプレート名]に準備されます
今回の場合は、以下のようにファイルが出来ているのが確認できます

$ cd ../watch_faces/complication/
$ ls hello*.*
hello_face.c  hello_face.h

1-3.生成されたソースの確認

今回と次回に関係あるところだけ見て行きます

hello_face.hには、 hello_state_tという構造体が定義されています。
これは作成するhell画面内および他、画面に遷移してもDeep Sleepから復帰しても残る変数保管場所です
テンプレートによりダミーで unusedというのが定義されていますが、これを削除し必要な変数名を追記して使います。

hello_face.h部分

typedef struct {
    // Anything you need to keep track of, put it here!
    uint8_t unused;
} hello_state_t;

hello.cには、先ほどのhello_state_tのコンストラクタの下に hello_face_loopが定義されており、
その中に各種イベントが準備されています

hello.c部分

case EVENT_ACTIVATE:  //最初に呼ばれる場所、初期表示したいものなどを書く場所
   <略>
case EVENT_TICK:　　　//標準だと１秒ごとに読まれる場所、時刻表示更新などを書く場所
　 <略>
case EVENT_MODE_BUTTON_UP: //モードボタンが押された時の動作 
            movement_move_to_next_face();
            break;
case EVENT_LIGHT_BUTTON_UP: //ライトボタンが押された時の動作
            movement_illuminate_led();
            break;

1-4.画面の追加とコンパイル

生成された状況では、確認したようにEVENT_ACTIVATEなどの中は空なので表示は何もされないですが、
画面切り替えボタンと、ライト点灯ボタンは標準で画面遷移と数秒バックライトを点灯するコードが
書かれているので、このままでも最低限の動作はできます。
何も編集しないまま、コンパイルしてエミュレータ上で実行してみたいと思います

~/Sensor-Watch/movement　フォルダにある movement_config.hを開き、生成されたソース名(.cは不要)を追記します。
並び順は時計のMODEボタンを押した際の画面遷移順になります。
今回は、通常の時刻表示画面(simple_clock)の後にhello_faceを追加してみました。

movement_config.h部分

const watch_face_t watch_faces[] = {
    simple_clock_face,
    hello_face, //add
    world_clock_face,
    sunrise_sunset_face,
    moon_phase_face,
    stopwatch_face,
    preferences_face,
    set_time_face,
};

追加したら、~/Sensor-Watch/movement/make　に移って

$ emmake make

を実行するとコンパイルされるので、前回同様以下を実行し

$ python3 -m http.server -d build-sim

Win10側のブラウザでエミュレータ画面を開くと以下のようになります。
左下のモードボタンを１回押すと文字は何も表示されない今回追加した画面になり、
左上のバックライトボタンで光るだけの画面が追加されているのが確認できるかと思います

2.次回

次回は今回作った画面に「Hello Worl」と表示させつつ、バックライト用LEDを1秒おきに点滅する画面に更新してみます

スマートウオッチ作る(4) オリジナル画面の追加