【Fitbit Studio】背景に任意の画像を設定出来ない
Q&A
現在 FitbitStudio でクロックの作成をしていて、つまづいています。
ここでは「helloworld.jpg」という名前の画像を背景に指定します。
ファイルは以下の通りです。
index.js
import clock from "clock";
import * as document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";
// Update the clock every minute
clock.granularity = "minutes";
// Get a handle on the <text> element
const myLabel = document.getElementById("myLabel");
// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
let today = evt.date;
let hours = today.getHours();
if (preferences.clockDisplay === "12h") {
// 12h format
hours = hours % 12 || 12;
} else {
// 24h format
hours = util.zeroPad(hours);
}
let mins = util.zeroPad(today.getMinutes());
myLabel.text = `${hours}:${mins}`;
}
utils.js
// Add zero in front of numbers < 10
export function zeroPad(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
index.view
<svg class="background">
<image href="helloworld.jpg"/>
<text id="myLabel" />
</svg>
styles.css
.background {
viewport-fill: "red";
}
#myLabel {
font-size: 80;
font-family: System-Bold;
text-length: 32;
text-anchor: middle;
x: 50%;
y: 50%+40;
fill: white;
}
widget.defs
<svg>
<defs>
<link rel="stylesheet" href="styles.css" />
<link rel="import" href="/mnt/sysassets/system_widget.defs" />
</defs>
</svg>
Fitbit Studioでの実行結果としては、赤い画面をバックグラウンドに、真ん中に時間が白文字で表示されていました。こちらが期待していたのは、バックグラウンドが赤いシンプル画面でなく画像 "helloworld.jpg" である事です。
画面表示に直結しそうなindex.viewやstyles.cssに原因があるのではないかと考えて調べているものの、バックグラウンドは赤のままで改善しません。なぜ "helloworld.jpg" が適用されないのかを知りたいです。
0