こちらはDeNA 24新卒 Advent Calendar 2023 の16日目の記事になります

（昨日の記事の投稿は@wdtkr さんでした。）

はじめに

はじめまして！AO（あお）と申します。

いつも記事は自身の個人ブログに書いていたので、何気にQiitaで記事書くのは初めてになります..！

こちらの記事をざっくりまとめると以下のような内容になります。

Sensor Watchで遊んだだけの内容にはなりますが、ぜひ最後まで読んでいただけると嬉しいです。

記事概要

【読むのにかかる時間】

だいたい3分程度

【内容】

cheapCASIOの中の基盤をSensor Watchに変更し、プログラム書き換えて私を褒める機能を追加。
さらに文字盤も剥がして塗装し直し。
世界で一つの私だけのオリジナル時計作ったぞ！わい！

【対象読者】

ちょうど新しい時計が欲しい方
電子工作好き
ハンドメイド好き

この記事に至った背景

私は来年の4月から社会人になる予定であり、社会人になっても見劣りしない良さげな腕時計欲しいなあ

↓

cheapCASIOとSensor Watch基盤をいただく機会があった

↓

自分でプログラム書いた腕時計なら、社会人エンジニアとして見劣りしないし面白いやん！！作ったろ！！

cheapCASIO、Sensor Watchって何？

そもそも「cheapCASIO、Sensor Watchって何？」って方も多いと思うので、ここから説明。

cheapCASIOとは、時計メーカーCASIOブランドの腕時計の中でも低価格（1000〜3000円程度）の時計のことです。

一時期あいみょんがつけていて話題になったやつですね。今回弄るのもこれになります。
※私が持ってるあいみょんモデル（A158WEA-9）

Sensor Watchというのは、これらの安価なCASIO時計をベースにしてセンサーやプログラム可能な機能を追加し、よりカスタマイズされた個性的な時計を作ることを可能にするためのオープンソースのハードウェアハッキングプロジェクトになります。

以下から「Sensor Watch」の基盤（32bitCPU)を購入することができ、これのプログラムを書き換え、別途購入したcheapCASIOに入れることでオリジナルの機能を搭載した時計を作ることができるわけです。

使用するもの

まずは使用物。今回は以下のものを使用します。

【機能書き換え・ハード】

Sensor Watchの基盤
cheapCASIO（A158WEA-9）
ちっちゃいドライバー
USB MicroBケーブル

【機能書き換え・ソフト】

Mac(M2)
Docker(ubuntu)
vscode(dev container)

【文字盤まで変えるときのもの】

マニキュアの除光液
UVレジン
UVライト
塗装用のラメや染色できるもの
綿棒
テッシュ
接着剤

※ちっちゃいドライバーは、ネジ外しにはプラスしか使いませんが、ちっちゃいマイナスもあると基板の取り外しなどに便利です。

機能書き換え実践！

さっそく機能書き換えをやってみます。

プログラム書くぞ

まずは環境を立ち上げプログラムを書いていきます。

※以下の記事が本当に参考になりましたので、実際にやる方はこちら参考にする方がわかりやすいかも、、

上記お二方の記事参考に、今回私はDockerで立ち上げてみました。

FROM arm64v8/ubuntu:22.04

WORKDIR /workspaces

# 必要なパッケージをインストール
RUN apt -y update \
    && apt -y upgrade \
    && apt -y dist-upgrade \
    && apt -y install gcc-arm-none-eabi \
    && apt -y install make \
    && apt -y install git \
    && apt -y install python3 \
    && apt -y install xz-utils

# Emscripten SDK (emsdk) のインストール
RUN git clone https://github.com/emscripten-core/emsdk.git \
    && cd emsdk \
    && git pull \
    && ./emsdk install latest \
    && ./emsdk activate latest

# 環境変数の設定
ENV PATH="/workspaces/emsdk:/workspaces/emsdk/node/14.15.5_64bit/bin:/workspaces/emsdk/upstream/emscripten:${PATH}"

vscodeのdevcontainersという拡張機能を使用してこちらのコンテナに入ります。

左下のvscodeのコンテナを開くボタンを押すとチャチャっと入れます。

その際、devcontainer.jsonというdevcontainerの設定などを記入するファイルが作られます。

私の場合は以下の内容になります。


// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/docker-existing-dockerfile
{
	"name": "Sensor Watch Development",
	"build": {
		"context": "..",
		"dockerfile": "../Dockerfile"
	}
}

コンテナを開きWorkspaceを開いたら、そのターミナル内で以下を実行し、Sensor Watchのプロジェクトをクローンしてきます。

git clone https://github.com/joeycastillo/Sensor-Watch

その後以下を実行し、新たなwatch_faceを追加します。

cd /workspaces/Sensor-Watch/movement/template
python3 watch_face.py complication love

watch_faceとは、この時計の機能コンポーネントみたいな部分で、これでlove_faceという機能コンポーネントファイルができたという形です。

※私を褒めさせる機能を作成したかったので名称をloveにしました。ここの名称は機能がわかりやすいものであればなんでもよきです。

これにより、love_face.c と love_face.hというファイルが出来上がりました。

※こちらのファイル等の詳細は以下の方の記事が大変わかりやすいです。

ここからプログラムを書いていきます。

※言語はCになりますが、コード構成の大枠は出来上がっているのでC未経験でも全然かけます。

そして今回実装してく機能としては以下になります。

モードボタンを押すと表示
１秒ごとに私を励ます文字を表示する。
ライトもぴかぴかさせてゴージャスに。

まずはlove_face.hのtypedef structの部分を以下追加します。

typedef struct {
    // Anything you need to keep track of, put it here!
    bool led_light; //ここ追加。赤いライト光らせる判定値
    uint8_t unused;
} hello_state_t;

love_face.cのlove_face_loopにも追記します。

ここポイントで、表示させる文字の表示領域が以下のようになっているので、大きく表示される部分にのみ表示させるために0~1分の空白をうまいこと追記します。（4~9のみ表示）

引用：https://www.sensorwatch.net/docs/wig/display/

さらに、７セグメント表記で表示できないアルファベット(N,M,Tなど)もあるので、これも加味して褒めメッセージを考案します。

苦肉の策で出したメッセージが以下。~~（恥ずかしいなこれ）~~

ao HOPE (あお　希望！)

ao COOL (あお かっこいい！)

これを実際に組み込んでいきます。


bool love_face_loop(movement_event_t event, movement_settings_t *settings, void *context) {
    char buf[100]; // buf変数の宣言とサイズの指定
    love_state_t *state = (love_state_t *)context;
    switch (event.event_type) {
        case EVENT_ACTIVATE:
            sprintf(buf, "    AOHOPE");
            watch_display_string(buf, 0);
            break;
            
        case EVENT_TICK:
            if (state->led_light) {
                watch_set_led_red();
                state->led_light = false;
                sprintf(buf, "    AOHOPE");
                watch_display_string(buf, 0);
            }
            else {
                watch_set_led_off();
                movement_illuminate_led();
                state->led_light = true;
                sprintf(buf, "    AOCOOL");
                watch_display_string(buf, 0);
            }
            break;
        case EVENT_MODE_BUTTON_UP:
            watch_set_led_off();
            state->led_light = true;
            movement_move_to_next_face();
            break;
        case EVENT_LIGHT_BUTTON_UP:
            break;
        case EVENT_ALARM_BUTTON_UP:
            break;
        case EVENT_TIMEOUT:
            break;
        case EVENT_LOW_ENERGY_UPDATE:
            break;
        default:
            // Movement's default loop handler will step in for any cases you don't handle above:
            // * EVENT_LIGHT_BUTTON_DOWN lights the LED
            // * EVENT_MODE_BUTTON_UP moves to the next watch face in the list
            // * EVENT_MODE_LONG_PRESS returns to the first watch face (or skips to the secondary watch face, if configured)
            // You can override any of these behaviors by adding a case for these events to this switch statement.
            return movement_default_loop_handler(event, settings);
    }

ここまでできたらmovement_config.hにlove_faceを追記します。

これはmainみたいなもので、実際に時計に表示するwatch_faceコンポーネント達を記入します。

const watch_face_t watch_faces[] = {
    simple_clock_face,
    love_face, //ここ追加。ここにすることでモードボタン押した時最初にこの画面になる
    world_clock_face,
    sunrise_sunset_face,
    moon_phase_face,
    stopwatch_face,
    preferences_face,
    set_time_face,
};

ここまできたらエミュレータに反映させ、内容を確認します。
以下を実行し、htmlにアクセスするとエミュレーターを確認できます。


//移動
cd /workspaces/Sensor-Watch/movement/make/

//エミュレータに反映。
//私は赤い基盤を使っているのでCOLOR=REDですが、緑の人はCOLOR=GREEN、青の人はCOLOR=BLUEと入力します。
emmake make COLOR=RED

//サーバー立ち上げ
python3 -m http.server -d build-sim

http://localhost:8000/watch.html にアクセス

こんな感じの画面。
モードボタンやライトボタンなど押すと、実際に動きがわかりやすいです。