健康ぶーむ：ブログ : watchfaceeditor

Amazfit Bipの文字盤を自作します。初期から作成してもいいのですがアップロードされたものを修正した方が早いのでその方法を記載します。
5b3f25d480ff7_06072018_packed_packed_animated

０．はじめに
文字盤の形式：
ドット数は176ドット×176ドット、色は８色です。

１．準備するもの
（１）Windowsパソコン

（２）Windowsで使用するツール（WatchFace.exe）
　最終的にiPhoneにアップロードするファイルは、「ファイル名.bin」のみですamazfitwatchfaces.comなどのサイトにはこのファイルのみがアップロードされています。このファイルを展開して展開された各ファイルを編集します。展開するためのツールがこちら↓
https://bitbucket.org/valeronm/amazfitbiptools/downloads/

BipとCor用があるので上の方の「AmazfitBipTools-1.0.3.0.7z」をクリックしてダウンロードします。7zファイルのため解凍ソフトが別途必要です。解凍後のファイル一覧です。

（３）編集したいファイル（ファイル名.bin）をダウンロードする。
一番充実しているこのサイトから好きな文字盤データをダウンロードします。
https://amazfitwatchfaces.com/bip/

今回編集するのはこれです。https://amazfitwatchfaces.com/bip/view/?id=9415

「ファイル名.bin」がパソコンに保存されます。

２．Ｂｉｐファイルの展開
保存された「ファイル名.bip」を展開します。展開するには「ファイル名.bip」を「WatchFace.exe」にドロップします。

「ファイル名」フォルダができます。フォルダの中には画像データ（PNGなど）があります。

３．ファイルの読み込み
ファイルを修正するための方法は２通りあります。
（１）ブラウザ(オンライン)で修正する方法
安全な方法です。とりあえずはこちらで作成できますが細かい設定ができません。JSONファイルを手動で修正しないといけない場合があります。

（２）プログラム(Amazfit Bip WF Editor)で修正する方法
EXE形式なので使うのにちょっと躊躇します。テキストジェネレーターがとっても便利です。　

とりあえずブラウザ（オンライン）で作成する方法が以下の通りです。
　ブラウザでWatchface Editorのサイトを開きます。いくつかあるようですが、以下がおすすめです。理由はImage creator機能があるからです。
https://v1ack.github.io/watchfaceEditor/
他にはここもありますがImage creator機能がありません。
https://amazfitwatchfaces.com/editor/watchfaceEditor/?bip

Images: [SELECT]を押します。

先ほど保存した「ファイル名」フォルダを開いて、 Ctrl + A ですべてのファイルを選び「開く」を押します。Ctrl+Aができないときはとにかくどんな方法でもいいのでファイルを全て選択しましょう。

JSON : [SELECT]を押します。

「ファイル名.json」ファイルを選びます。
1027

ダウンロードされた文字盤が表示されます。

４．編集
（１）VIEW
　好きな表示にできます。例えば時刻や日付、天気を変更して表示確認ができます。.PNGファイルを出力することができます。
（２）DESIGN
（３）EDIT
（４）ANALOG
（５）RESOURCES
（６）Image creater

・曜日表記がヒンディー語のため日本語に修正しましょう。
まずは、「ファイル名」フォルダを開いてフォントの情報を見ます。

ここでは0033.png～0039.pngになります。0033.pngが月曜日で0039.pngが日曜日になります。
1036

ファイルの大きさ（ピクセル数）になるように作成します。ここでは横37ピクセル、縦14ピクセルです。pngファイルを簡単に「Image creator」コマンドで作成することができます。まずは今あるファイル0033.png～0039.pngを削除します。次に「Image creator」コマンドでファイルを作成します。

Image Creatorが開くので設定します。

・Font size　　　　　：フォントサイズ
・First image index　：ファイル名の最初の番号
・Text　　　　　　　：テキスト、複数指定する場合はカンマで区切ります
・Background color　：Transperent透明にするのですが文字が確認できなかったので一時的にBlackにしただけです。
設定後「DOWNLOAD」を押す。

もし土、日の色を変えたいならtextボックスに１個だけ（土）文字を入れてFont Colorを変更しDOWNLOADを押します。
1040

・日付の並びを変更する。
　「曜日、日、月」→「月、日、曜日」に変更します。曜日はWeekday、日はDay、月はMonthです。Watchfacw Editorの「DESIGN」をクリックします。マウスを近づけるとボックスの名称が出るのでボックスをドラッグして位置を変更します。

修正後、「EXPORT JONSON」を押します。

・点の位置がおかしいので修正します。背景「0000.png」ファイルをペイントなどで修正します。

Watchface editorの「View」に戻り「Images: SELECT」を押してファイルをすべて選択します。すると修正が反映されます。

ちょっと月と日の間の斜め線がずれていますので修正します。修正が完了したら先ほどと同様に「DESIGN」から「EXPORT JONSON」を押します。

５．Ｂｉｐファイルの書き出し
・ファイル名.pngとファイル名.gifを削除します。
・ファイル名.jsonファイルをWatchFace.exeファイルにドロップすると新しい「ファイル名.png」と「ファイル名.gif」と「ファイル名.bin」ができます。
5b3f25d480ff7_06072018_packed_animated

画面では気にならないのですがBipで確認すると曜日がちょっと細いですね。気に入らないのでGIMPで修正しました。

６．ｉＰｈｏｎｅに読み込み
・iPhoneで「Mi Fit」アプリを起動してください。通信が終わるまでしばし待つ。
・Amaztoolsがインストールされていないならば先にインストールしてください。
・作った「ファイル名.bip」を何とかiPhoneが読めるようにします。（いろんな手があると思いますが私は自分のブログに貼りつけてます）
・読み込めればAmaztoolsが自動でBipに転送してくれます。

７．amazfitwatchfaces.comにアップロード
iPhoneに読み込ませる手法が難しい人は思い切ってamazfitwatchfaces.comにアップロードしてみましょう。まずはユーザー登録が必要です。特に審査はないのでメールが来た後にアクティベーションすればOKです。