Fitbit OS

2019年3月 3日 (日)

Fitbit_OSアプリ作成のヒント集(2019年3月版)

2019/3/3

2019/1/5

Fitbit OS App Hints


Fitbit_OSアプリ作成のヒント集(2019年3月版)


0.概要


Fitbit_OSアプリ作成において参考になるような情報をまとめた。
公開されているソースから参考になるものを抜粋したり、実際に作成してみた気がついたことをまとめたものである。


1.古いSDKのバージョンでエラー無しでビルドできたものがSDKのバージョンを上げたらエラーになった。


(1)解決方法
 ディレクトリのデフォルト設定が変更になったらしいので以下のような変更をするとエラーが解消する。


修正例:


import * as hrm from "hrm";

import * as hrm from "./hrm";

2.画面タッチとBACKボタンでの画面切り替え


BACKボタンはscreen1画面以外のときに有効となる。

(1)resources/index.gui


<svg>
<svg id="screen1">

<svg>
      #scrren1用の画面をSVGで記述する。
</svg>
<rect id="button1" pointer-events="all" width="100%" height="100%" fill="red" fill-opacity="0.0" />

</svg>

<svg id="screen2" display="none">

<svg>
      #screen2用の画面をSVGで記述する
</svg>
<rect id="button2" pointer-events="all" width="100%" height="100%" fill="blue" fill-opacity="0.0" />

</svg>

<svg id="screen3" display="none">

<svg>
#screen3用の画面をSVGで記述する
</svg>
<rect id="button3" pointer-events="all" width="100%" height="100%" fill="green" fill-opacity="0.0" />

</svg>

</svg>


(2)app/index.js


import document from "document";

let screen1 = document.getElementById("screen1");
let screen2 = document.getElementById("screen2");
let screen3 = document.getElementById("screen3");

let button1 = document.getElementById("button1");
let button2 = document.getElementById("button2");
let button3 = document.getElementById("button3");

function showScreen1() {
console.log("Show screen 1");
screen1.style.display = "inline";
screen2.style.display = "none";
screen3.style.display = "none";
}

function showScreen2() {
console.log("Show screen 2");
screen1.style.display = "none";
screen2.style.display = "inline";
screen3.style.display = "none";
}

function showScreen3() {
console.log("Show screen 3");
screen1.style.display = "none";
screen2.style.display = "none";
screen3.style.display = "inline";
}


button1.onclick = function() {
showScreen2();
}

button2.onclick = function () {
showScreen3();
}

button3.onclick = function() {
showScreen1();
}


document.onkeypress = function(evt) {
if (evt.key === "back") {
if (screen3.style.display === "inline") {
// Go to screen 2
showScreen2();
evt.preventDefault();
} else if (screen2.style.display === "inline") {
// Go to screen 1
showScreen1();
evt.preventDefault();
} else if (screen1.style.display === "inline") {
// Default behaviour to exit the app
}
}
}


(3)参考URL

https://community.fitbit.com/t5/SDK-Development/Wanted-example-of-multiple-UI-views-and-back-navigation/m-p/2300847

Wanted: example of multiple UI views and back navigation


3.マスク用png画像はグレースケールであること


アニメーションの画像用のpng画像はグレースケールである必要がある。
画像編集ソフトなどで修正するとデフォルトがRGBモードが場合、自動的にRGBモードになり
見かけ上、区別がつかないので、そのまま保存して、組み込んだ場合、期待したアニメショーンが動かないことになる。

 したがって修正した画像を保存する場合、グレースケールに変換して保存すること。
ちなみにGIMP画像エディタの場合、以下の操作で行なう:

(1)画像ウィンドウのメニューより、「画像 → モード → グレースケール」でグレースケールに変換する

(2)「ファイル→名前を付けてエクスポート」で画像名を付けてpngで保存する


4.exportした変数には外部モジュールからは代入はできない(read-onlyになる)


最近のjavascriptの言語仕様でexportした変数に外部モジュールから参照するとread-onlyになり代入はできない。
代入したい場合、関数として定義して、その定義の中で代入を行なう。



//app/foo.js

export let abc=123;

export function assigenABD(val) {
abc = val;
}


//app/othesrs.js

import * as foo from './foo'

consoole.log(foo.abc); // 123が出力される
foo.abc = 456; // エラーになる

foo.assignABC(456); // エラーにならず代入が可能


5.installで失敗してinternal-errorが出るようになった場合


いったんスマフォ側でuninstallしたほうが良いようだ。そうでないと新たにインストールできないようだ。


6.シミュレータでは問題なくインストールできるが、実機(Versa)でのインストールが不安定である。


この場合、接続に使っているネットワークのWiFiの電波が弱くて実機のインストールが不安定になっている可能性がある。iPhone,AndroidやPCでは問題が起きていないので気が付きにくいが、実機のアンテナの性能が悪く受信感度が悪いようだ。(筐体の小型化、省電力化で、しかたない部分があるとは思うが。。。)

解決方法としては、スマフォ(Andorid,iPhoneなど)を実機の近くに置き、そのスマフォをテザリングで、開発用PCと実機を接続する。この状態でインストールする。

個人的な経験ではあるが、見違えるほど、インストール時間の短縮され、安定する。


7.不完全インストール


インストールが不完全に終わった場合、経験的な言い方になるが以下のような現象が出るようだ:

(1)原因不明のNaN

プログラムで、fs.readFileSyncなどでファイルを読み込んで変数の値などをリストアしているときは、
読み込むファイルの中身が壊れていて変数の値をリストアできない場合にNaNが出ることがある。

(2)時刻が頻繁に狂い、その結果として同期が多発する。

(3)HRが動作しないなど

インストールが不完全だと、システムにも悪影響を与えるようで、HR(心拍数)が動作しなくなったことがあった。
versaの設定で、心拍数がオフになっている場合もあるが、それをオンにしても動作しなかった。


以上の現象の解決方法としては、実機、シミュレータとも、コンパニオン(スマフォ)からアプリをいったんアンインストールしてアプリを再インストールすると解決する。
実機のアンインストールは、以下のやり方で確実なものにする必要がある:

(1)[Developer Menu]に入り、sideloaded-appsをリストアップする。(時間がかかるので辛抱強く待つ)

(2)sideloaded-appsが表示されたら、アンインストールしたいapp名をタップする。

(3)タップ後、表示された画面の最下行に「Delete App」があるので、これをタップする。

 タップ後、「Delete App」が一瞬点滅する。

(4)[<Back]をタップして元の画面に戻る。最下行に「Refreshing Apps」が表示されるので、
 このメッセージが消えるまで(辛抱強く)待つ。

(5)再度、表示されたsideloaded-appsのリストからapp名が消えていればアンインストールが完了したことになる。

再インストール時に以下のようなメッセージが出る:


fitbit$ install
No app package specified. Using default ./build/app.fba.
Loaded appID: <省略> buildID:<省略>
App install complete (full) 
Companion install complete (full)
#上の2つの行の(full)の部分が(partial)となるようだと
#アプリのアンインストール(削除)が正しく行われたかったことになる。
Launching app

8.Versaの時刻が正しくない


確信は持てないが上書きインストール(=patialインストール)時に時刻が狂う現象が起きている印象がある
解決方法は以下:

(0)partialインストールしたアプリがあるようならアンインストールする。

(1)Fitbit ロゴが画面に表示されるまで、BACKおよびDOWNのボタンを長押しする。

(2)ロゴが表示されたらボタンを離す。

(3)Fitbit アプリのダッシュボードから、[アカウント] アイコンをタップする。

(4)[詳細設定] をタップする。

(5)[自動タイムゾーン] オプションをオフにする。

(6)[タイムゾーンの選択] をタップして、適切なタイムゾーンを選択する。

(7)Fitbit デバイスを同期する。

同期に異常に時間がかかることがあるので、辛抱強く待つ。


9.SVG仕様の差分


Fitbit OSは、画面設計のコーディングにSVGを採用しているが、PC(web)などのSVG仕様と差がある。全てではないが、気がついた差分を以下に記する:


(1)CSSの単位px(Fitbit OSでは付けない)

Fitbit:


.line0p {
 font-family: System-Light;
fill: yellow;
text-anchor: middle;
text-length: 32;
font-size: 70;
}

PC(web):


.line0p {
 font-family: System-Light;
fill: yellow;
text-anchor: middle;
text-length: 32;
font-size: 70px;
}

(2)属性名(Fitbit「.text」vs PC(web)「.textContent」))

Fitbit:


const line0 = document.getElementById("line0");
...
line0.text = "Hello,Versa";

PC(web):


const line0 = document.getElementById("line0");
...
line0.textContent = "Hello,Versa";

9.画面がスリープしなくなるコード


import { display } from "display";
...
display.autoOff = false;
display.on = true;

切り替える形での実装例(THE-clockfaceからの抜粋)

app/index.js:


//THE-clockface

import {display} from "display";

function $(s) {
return document.getElementById(s);
}

$("top_half").onclick = () => {
if(display.autoOff === true) {
display.autoOff = false;
$("bklight").style.display = "inline";
} else {
display.autoOff = true;
$("bklight").style.display = "none";
}
};


resources/index.gui:

透明(opacity="0")の領域を重ねて、そこでイベントを発生させている。


<image id="bklight" class="color2" x="50%-15" y="20%-15" width="31" height="31" href="bklight.png" fill="#5682b4" display="none" />
<rect id="top_half" width="30%" height="30%" x="35%" y="5%" fill="#ffffff" opacity="0" pointer-events="visible" />

以上


| | コメント (0) | トラックバック (0)

2019年3月 2日 (土)

web版「Versa KanjiClock」紹介

Versaアプリを以下の記事で紹介したが、
Versaアプリ「Kanji Clock」紹介
これのweb版(html版)を作成したので紹介する。Versaアプリは、簡単な言い方をすると、画面関係はSVG、ロジックはJavascriptで作成できるので、なるべく変更しないでweb版を作ることに挑戦してみた。画面関係はカスタマイズフォントを使用している関係で、そのまま流用はできなかったが、ロジック部分(Javascript部分)が、ほとんど、そのまま流用が可能だった。嵌った部分は、documentの属性名が異なり、Versa(FitbitOS)では「.text」のところをweb版では「.textContent」に変更する必要があった。毛筆体のWebフォントが入手できなかったので、明朝系Webフォントを使用した。
「Versa_KanjiClock.html」をダウンロード

以上

| | コメント (0) | トラックバック (0)

Versaアプリ「Kanji Clock」紹介

Versaアプリ「Kanji Clock」紹介


2019/3/2


icon


1.概要


Fitbit OSでは任意のフォント(.tff)をインストールして表示できるので、それを利用して毛筆体で漢字だけで時計表示するアプリ「Kanji Clock」を作成した。
ソースからのビルドとインストール方法ならびにフォントのインストールについて説明する。「時刻」と「月」に関しては大字(だいじ)と言われる画数の多い漢字を使っている。

大字(だいじ)解説


アラビア数字と漢字(大字)の対応表:































0 1 2 3 4 5 6 7 8 9

実際の表示例:





















3月2日 3月21日 12月12日 9:11 21:34
参二 参二一 壱弐一二 零玖壱壱 弐壱参肆

2.インストール方法


(0)まずは、本件のソースを以下のURLから入手して解凍する。

Versa_KanjiClock.zip

(1)トップディレクトで以下を実行する:


npm install
#あとは通常のアプリのビルド&インストールと同様に以下を実行する。
npx fitbit
build
install

3.カスタマイズフォントのインストール方法


今回のソースでは既にカスタマイズフォントはインストール済みなので特に実行すべきことはないが

機能追加などで新規フォントをインストールする場合、以下を実行する:


(1)まずはトップデレクトリにインストールしたいフォントファイル(.ttf)を置く.

(2)次に以下のツールを実行して必要なフォントをpng画像に変換してresourceフォルダに置く。


npx fitfont-generate [font_name.ttf] [font_size(pixel)] [表示したい文字を含む文字列]

実行後、resourceフォルダに、[font_name]_[font_size]の名前のフォルダが生成され、その中に必要なフォントのpng画像ができる。


以下、実行例:


npx fitfont-generate KouzanBrushFont.ttf 70 0123456789.MTWFSabcdefghijklmnopqrstuvwxyz零壱弐参肆伍陸質捌玖拾一二三四五六七八九十時分秒月日曜火水木金土
npx fitfont-generate KouzanBrushFont.ttf 90 0123456789.MTWFSabcdefghijklmnopqrstuvwxyz零壱弐参肆伍陸質捌玖拾一二三四五六七八九十時分秒月日曜火水木金土

4.カスタマイズフォントの表示コード例


従来のフォントの表示コード例:


import document from "document";
...
const line0 = document.getElementById("line0");
...
line0.text = "金曜日";

カスタマイズフォントの表示コード例:


import { FitFont } from 'fitfont';
...
const line0 = new FitFont({ id:'line0', font:'KouzanBrushFont_70', halign: 'middle'});
...
line0.text = "金曜日";

上の例を見て分かるようにimportに関した部分は異なるが、表示するコードは全く同じになる。
(resources/*.gui,resources/style.cssなどは異なるので注意のこと)


5.参考URL


https://github.com/gregoiresage/fitfont

https://github.com/gregoiresage/fitfont-demo

【商用利用可】毛筆体の日本語フリーフォント26選


以上


| | コメント (0) | トラックバック (0)

2019年2月24日 (日)

Fitbit OS Custom Font インストール方法(改版)


Fitbit OS Custom Font インストール方法(fitfont-demoのインストール方法)


2019/2/23


1.概要


Fitbit OS で任意のフォントをインストールする方法があったので実際にカスタマイズしたフォントを表示するデモアプリをインストールしてみた。さらに、そのアプリをベースに新たなフォントをインストールして実行してみた。


2.インストール方法


(1)まずは、デモソフトのソースを以下のようにgitで入手する。


git clone https://github.com/gregoiresage/fitfont-demo.git
cd fitfont-demo

(2)トップディレクトリにあるpackage.jsonを以下のものに差し替える。


{
"fitbit": {
"appUUID": "b57470b3-f234-43ba-bb8f-43e400fea170",
"appType": "app",
"appDisplayName": "fitfont-demo",
"iconFile": "resources/icon.png",
"wipeColor": "#607d8b",
"requestedPermissions": [
"access_activity",
"access_user_profile",
"access_heart_rate",
"access_location",
"access_internet"
],
"buildTargets": [
"higgs",
"meson"
],
"i18n": {
"en": {
"appType": "app",
"name": "Fitfont Demo"
}
}
},
"devDependencies": {
"@fitbit/sdk": "~3.0.0",
"@fitbit/sdk-cli": "^1.5.0"
},
"scripts": {
"build": "fitbit-build"
},
"dependencies": {
"fitfont": "^1.2.5"
}
}

(3)以下を実行する:


npm install
#以下のように自動的にfitfontツールが起動する。
> fitfont@1.2.5 postinstall ...
> node ./bin/install.js
#以下のようにguiファイルをコピーするか聞いてくるのでYを入力する
#デモソフトの場合、既にコピー済みなのでnでも良いかが新規の場合、Yを入力する。
Copy gui files in your resources folder? (Y/n)Y

#あとは通常のアプリのビルド&インストールと同様に以下を実行する。
npx fitbit
build
install


3.新たなフォントのインストール方法


前の章で、デモソフトとしては動作するので、これに新規フォントをインストールして実行してみる。


(1)まずはトップデレクトリにインストールしたいフォントファイル(.ttf)を置く.


(2)次に以下のツールを実行して必要なフォントをpng画像に変換してresourceフォルダに置く。


npx fitfont-generate [font_name.ttf] [font_size(pixel)] [表示したい文字を含む文字列]

実行後、resourceフォルダに、[font_name]_[font_size]の名前のフォルダが生成され、その中に必要なフォントのpng画像ができる。


以下、実行例:


npx fitfont-generate AoyagiSosekiFont2.ttf 80 0123456789.MTWFSabcdefghijklmnopqrstuvwxyz曜日月火水木金土
npx fitfont-generate TakaoGothic.ttf 80 0123456789.MTWFSabcdefghijklmnopqrstuvwxyz曜日月火水木金土

app/index.jsを以下のように修正する。(以下のソースでは本来'土曜日'のところをテストのために'月火水金'としている。AoyagiSosekiFont2を新規フォントとしてインストールした)


app/index.js:


//const DayNames = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
const DayNames = ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','月火水金']

// declaration of the FitFont objects
//const dayLbl = new FitFont({ id:'dayLbl', font:'Market_Saturday_80', halign: 'middle'})
const dayLbl = new FitFont({ id:'dayLbl', font:'AoyagiSosekiFont2_80', halign: 'middle'})


この修正が終わったら通常のアプリのビルド&インストール同様に以下を実行する:


npx fitbit
build
install

4.参考RUL


https://github.com/gregoiresage/fitfont

https://github.com/gregoiresage/fitfont-demo

【商用利用可】毛筆体の日本語フリーフォント26選

フリーで使用できる!3つの隷書体フォント


5.色々なフォントのインストール例(スクリーンショット表示)

original
AoyagiSosekiFont2
TakaoGothic
HakusyuHigerei
HakusyuHKakukuzushi
kusyuSKakukuzushi


以上


| | コメント (0) | トラックバック (0)

2019年2月17日 (日)

versaアプリ「HR/LCD clock」の紹介

versaアプリ「HR/LCD clock」の紹介

versaアプリを作成したので紹介する。ソースは以下のURLからダウンロードできる。
「sdk-lcd-clock_pllus_HR_ALT_CAL_Touchpanel.zip」をダウンロード

そのアプリの概要、インストール方法は以下:



README2.md



2019/2/16


HR/LCD clock 概要



Icon_20190215_225031


本アプリは「LCD Clock Face」にHR(心拍数表示),ALT(高度表示),CAL(カロリ表示など)を追加したもので
本体とHRは以下のurlのソースの流用で、それ以外は新規作成したものである。

https://github.com/Fitbit/sdk-lcd-clock

https://github.com/Fitbit/sdk-hr-meter


インストール方法


ダウンロードしたzipを解凍して通常のversaアプリのビルト/インストールと同様に以下を実行する。

ソースのトップディレクトリに入り以下を実行する:

npm install

npx fitbit-build generate-appid

npx fitbit

build

connect phone

connect device

install


操作方法


画面を以下のように9(3x3)分割してタッチパネルを実装してある。


[0][1][2]

[3][4][5]

[6][7][8]


数字は分割部分の対応番号で以下の機能を割りつけてある。以下で、それぞれの機能を説明する。


0: Display On/Off


トグルスイッチになっていて表示のタイムアウトをオン・オフできる。押した時に2度振動したとき、表示のタイムアウトがオフになる。(表示が継続する)



トグルスイッチになっていて気圧表示のアイコン点滅をオン・オフする。点滅している場合、現地気圧を表示する。点滅していない場合、海面気圧を表示する。(海面気圧は天気予報などに使われる)



トグルスイッチになっていて高度表示のアイコン点滅をオン・オフする。点滅している場合、獲得高度(m)を表示する。点滅していない場合、現地の高度(m)を表示する。


4: Change Pressure (/Cal/Steps/Dist/Floors) Icon


ロータリースイッチになっていて、心拍数の右側のアイコン(真ん中のアイコン)が押す度にアイコンが、気圧、カロリ、歩数、距離、階数の順に変更される。


6: Clear Blinking Pressure (/Cal/Steps/Dist/Floors) Icon Value


このスイッチを押すと点滅しているアイコンの値をクリア(0)する。(隠れている値もクリアされる) 点滅しているアイコンの値は、クリアを経過した後の値を示している。


7: extend Icon Values


floorの値が表示されているときに、このスイッチを押すとフロア値(階数f)を獲得高度(m)に変換した値を表示する。階数をm表示しただけなので、階数に量子化した値になる。(1階分10フィート)


海面気圧(アイコンが点滅していない状態)が表示されているとき、このスイッチを押すとUP/DOWNキーで高度を設定した際の高度を適用した時の海面気圧を表示する。(高度が変わらない状態での海面気圧の変化がわかる)


8: clear Blinking Alt Icon Value


高度アイコンが点滅しているとき、このスイッチを押すと、値がクリア(0)される。(=獲得高度がゼロになる)


UP/DOWNキー


versaの画面の右側にある2つのキー(UP/DOWN)を押すことで高度を変更できる。
現地の高度が既知である場合、高度表示にして、この2つのキーで高度を合わせる。高度が未知で(気象情報などで)海面気圧がわかっている場合、この2つのキーで、海面気圧を合わせると、現地の高度が求まる。


留意点


気圧は、ゆらぎの影響を低減するために平均をとっている。そのため、気圧値の更新には多少遅延が生じる。気圧を元に高度を計算しているので、高度の更新にも遅延が生じる。



| | コメント (0) | トラックバック (0)

2019年1月20日 (日)

Fitbit_OSアプリ作成のヒント集(その1)


Fitbit_OSアプリ作成のヒント集(その1)

0.概要
Fitbit_OSアプリ作成において参考になるような情報をまとめた。公開されているソースから参考になるものを抜粋したり、実際に作成してみた気がついたことをまとめたものである。

文字数が多いのでPDF化した。以下のpdfファイルを参照のこと。
「fitbit_app_hint01.txt.pdf」をダウンロード

i以上

| | コメント (0) | トラックバック (0)

2019年1月 2日 (水)

Fitbitのソース公開アプリのビルド&インストール方法

Fitbitのソース公開アプリのビルド&インストール方法

文字数が多くPDF化したので以下のpdfファイルを参照のこと。
「Fitbit_OS_App_memo.txt.pdf」をダウンロード

関連ファイル(package.json雛形)は以下のテキストファイルを参照のこと。
「Template_FitbitOS_package.json.txt」をダウンロード

以上

| | コメント (0) | トラックバック (0)

2019年1月 1日 (火)

ubuntuでFitbit_OS_Simulator(windows版)を動かす(補足)

ubuntuでFitbit_OS_Simulator(windows版)を動かす(補足)

本記事はubuntuでFitbit_OS_Simulator(windows版)を動かすの補足である。
前の記事でのアイコンのクリックでSimulatorが起動できないときは、以下のやり方で起動できるようだ。
#以下、文字列がウェブ画面上、切れているかもしれないが、テキストコピーができるので、利用する場合、その方法を使用してください。

(1)端末からwineで実行する


wine '/home/USER/.wine/drive_c/users/USER/Local Settings/Application Data/Programs/@fitbitsimulator/fitbit os simulator.exe'

#USERは実際のlinuxのアカウント名を入れる


(2)上のやりかただと使いにくいので.bashrcに以下を追加する

alias fbsim="wine '/home/komatsu/.wine/drive_c/users/komatsu/Local Settings/Application Data/Programs/@fitbitsimulator/fitbit os simulator.exe'"

#注意:文字列の最後は、シングルクォート、ダブルクォートの順に並んでいる。


(3)上のようにalias設定後は端末に入り以下を実行する

fbsim

これで起動ができない場合は、linuxを再起動したあと、(3)を実行すると上手く行くようだ。


以上

| | コメント (0) | トラックバック (0)

2018年12月22日 (土)

fitbitアプリのアイコンの作成とインストール方法

fitbitアプリのアイコンの作成とインストール方法

1.fitbit app iconを作成する
(1)fitbit_shellのなかでscreenshotコマンドで実行中の画面のスクリーンショットを作成する。
(実行例)
npx fitbit
connect device
#既に接続済なら不要
screenshot
#カレントディレクトリにpng形式でスクリーンショット(Screenshot 2018-xx-yy at hh.mm.ss.png)が保存される

(2)上で作成されたpng画像をアプリicon用に80x80のサイズに(GIMPなどを使用して)縮小する。

2.上で作成したicon.pngを以下のフォルダに置く
resources/

3.プロジェクトをリフレッシュ?するために以下を実行する
npm install

4.これ以降は通常の開発と同様に以下を実行する。
npx fitbit
build
connect device
connect phone
install

以上

| | コメント (0) | トラックバック (0)