タイマーウィジェット (テーマ指定可能)
タイマーウィジェットでは、2 つのモード (時間を追跡してイベントをトリガーするカウントダウンと、時間を測定するストップウォッチ) のいずれかを使用して時間を追跡できます。
 |
このウィジェットは ThingWorx Web Component SDK ライブラリで Web コンポーネントとしても使用できます。
|
構造
1. ウィジェットラベル
2. 日数とミリ秒を表示するようにフォーマットされた時間値
3. ウィジェットアイコン
時間フォーマットの設定
タイマーウィジェットには、時間の表示方法をカスタマイズするための設定が複数あります。DisplayMilliseconds プロパティは、時間フォーマットにミリ秒を追加し、より正確なタイミングを示します。
時間が 24 時間を超えたときに日数をカウントするには、DisplayDays プロパティ を true に設定します。
タイマーモードの設定
TimerMode プロパティは、ウィジェットが時間をカウントする方法を制御します。カウントダウンとストップウォッチの 2 つのモードを切り替えることができます。
• カウントダウンモードでは、タイマーは初期値から始まり、ゼロまでカウントダウンされます。このモードは、イベントや期限までのカウントダウンなど、特定の時間を測定する必要がある場合に便利です。タイマーがゼロになると、CountdownCompleted イベントがトリガーされます。このイベントをバインドすると、通知の表示や関数またはサービスの実行など、特定の操作をトリガーできます。このモードで設定またはバインドするプロパティを以下に示します。
◦ InitialValue - 開始時間をミリ秒単位で定義するには、このプロパティを設定します。
◦ Running - カウントダウンの開始と停止を制御するには、このブールプロパティをバインドします。
◦ CountdownCompleted - カウントダウンが終了した時点で操作をトリガーするには、このイベントをバインドします。
◦ Reset - カウントダウンを初期値にリセットするには、このサービスをバインドします。
◦ Value - 現在の時間値をミリ秒単位で返します。この値はタイマーが実行されるたびに更新されます。
• ストップウォッチモードでは、タイマーはゼロから始まり、時間の経過とともに増加し、進行中のアクティビティの所要時間を測定します。このモードは、ワークアウトやクッキングセッションの計時など、タスクやイベントの長さを追跡するのに最適です。タイマーは、手動で停止またはリセットされるまで実行を続けます。このモードで設定またはバインド可能なプロパティを以下に示します。
◦ InitialValue - 開始時間をミリ秒単位で定義するには、このプロパティを設定します。
◦ Running - ストップウォッチの開始と停止を制御するには、このブールプロパティをバインドします。
◦ Reset - ストップウォッチをゼロにリセットするには、このサービスをバインドします。
◦ Value - 現在の時間値をミリ秒単位で返します。この値はタイマーが実行されるたびに更新されます。
ウィジェットへの状態フォーマットの適用
状態のフォーマットを設定して、タイマーウィジェットのスタイルをその値に基づいて動的に設定できます。AlternateStyle プロパティとは異なり、現在のウィジェットの値に基づいて適用される複数の状態を定義できます。これにより、さまざまな状態に対してウィジェットスタイルを適用できます。以下のイメージは、カウントダウンモードでのタイマーウィジェットの状態フォーマットの設定を示しています。値に基づいて 2 つの状態スタイルが適用されます。1 つ目の状態では、値が 20000 ミリ秒より小さくなるとテキストの色がオレンジ色に変わります。2 つ目の状態では、値が 10000 ミリ秒より小さくなると赤色に変わります。
|
|
状態フォーマットを適用する場合、ウィジェットの代替状態と標準状態用にアイコンを 1 つだけ表示できます。
|
初期値の設定
ウィジェットの InitialValue プロパティを使用して、タイマーの開始時間を設定できます。ただし、このプロパティがバインドされている場合、タイマーはバインドからの新しい値で自動的に更新されません。この場合、Reset サービスをトリガーして、タイマーが更新後の値を使用していることを確認する必要があります。
代替スタイルの適用
タイマーウィジェットは、デフォルトのウィジェットスタイルを変更する代替状態をサポートしています。この状態を使用して、タイマーのさまざまな状態や条件をユーザーが簡単に見分けられるようになるビジュアルインジケータを提供できます。この状態を有効にするには、AlternateStyle プロパティを True に設定します。たとえば、製造監視アプリケーションでは、タイマーが残り時間を標準色で表示できます。カウントダウンが残り 10 秒に達すると、タイマーが赤色に切り替わり、時間がなくなりそうであることをユーザーに警告します。この状態用のカスタムアイコンを追加するには、ウィジェットの AlternateIcon プロパティを使用します。「スタイルプロパティ」パネルで使用可能なプロパティを使用して、ウィジェットの各状態のデフォルトスタイルと代替スタイルをカスタマイズできます。次のイメージは、ウィジェットの代替状態用のデフォルトスタイルを示しています。
代替スタイルと状態のフォーマットの両方が適用されている場合のスタイル設定の優先度を、高いものから順に次に示します。
1. 状態のフォーマット
2. 代替スタイル
3. ウィジェットのスタイルプロパティ
ウィジェットのプロパティ
|
プロパティ名
|
説明
|
ベースタイプ
|
デフォルト値
|
バインド可能か
|
ローカライズ可能か
|
|---|---|---|---|---|---|
|
DisplayMilliseconds
|
時間フォーマットにミリ秒を追加します。true の場合、タイマーにミリ秒が表示されます。
|
BOOLEAN
|
False
|
Y
|
N
|
|
ValueLabelType
|
タイマー値のラベルタイプを設定します。
|
STRING
|
サブヘッダー
|
N
|
N
|
|
Icon
|
タイマーのアイコンイメージを設定します。
|
MEDIALINK
|
空
|
N
|
|
|
AlternateIcon
|
代替スタイルでタイマーのアイコンイメージを設定します。
|
MEDIALINK
|
空
|
N
|
N
|
|
IconAlignment
|
タイマー値を基準にしたアイコンの整列を設定します。
|
STRING
|
右
|
N
|
N
|
|
AlternateIconAlignment
|
タイマー値を基準にした代替アイコンの整列を設定します。
|
STRING
|
右
|
N
|
N
|
|
IconSize
|
アイコンの幅と高さをピクセル単位で指定します。
|
NUMBER
|
16
|
Y
|
N
|
|
AlternateIconSize
|
代替スタイルアイコンの幅と高さをピクセル単位で指定します。
|
NUMBER
|
16
|
Y
|
N
|
|
AlternateStyle
|
代替スタイルと代替アイコンを使用してタイマーを代替状態に設定します。
|
BOOLEAN
|
False
|
Y
|
N
|
|
Label
|
タイマーウィジェットのラベルを設定します。
|
STRING
|
空
|
Y
|
Y
|
|
LabelAlignment
|
コンテナに対するウィジェットラベルのラベル整列を設定します。
|
STRING
|
左
|
N
|
N
|
|
LabelType
|
タイマーのラベルテキストのラベルタイプを設定します。
|
STRING
|
ラベル
|
N
|
N
|
|
HorizontalAlignment
|
ウィジェットの水平方向の整列を設定します。
|
STRING
|
左
|
Y
|
N
|
|
Running
|
タイマーの状態。タイマーが実行中であれば True に設定します。このプロパティをバインドすることでタイマーを一時停止できます。
|
BOOLEAN
|
True
|
Y
|
N
|
|
InitialValue
|
時間の初期値をミリ秒で設定します。このプロパティを使用して、リセットイベントがトリガーされたときのカウントダウン値を設定します。
|
NUMBER
|
0
|
Y
|
N
|
|
DisplayDays
|
値が 24 時間を超える場合、フォーマットされた時間値の「時間」、「分」、「秒」の横に「日」を表示します。
|
BOOLEAN
|
True
|
Y
|
N
|
|
Value
|
現在のタイマーの時間 (ミリ秒)。
|
NUMBER
|
該当なし
|
Y
|
N
|
|
Reset
|
タイマーを、InitialValue を使用して設定されたデフォルト値にリセットするサービス。タイマーを停止するために、Running プロパティを false に設定することもできます。
|
サービス
|
Y
|
N
|
|
|
TimerMode
|
ウィジェットのタイマーモードを設定します。ストップウォッチモードでは、タスクの所要時間を測定するためにタイマー値が増分されます。カウントダウンモードでは、InitialValue を使用して設定されたタイマー値が減分され、ゼロに達するとイベントがトリガーされます。
|
STRING
|
「ストップウォッチ」
|
Y
|
N
|
|
CountdownCompleted
|
カウントダウンモードでタイマー値がゼロになったときにトリガーされるイベント。
|
イベント
|
Y
|
N
|