타이머 위젯(테마 적용 가능)
타이머 위젯을 사용하면 두 가지 모드인 "시간을 추적하고 이벤트를 트리거하는 카운트다운"과 "지속 시간을 측정하는 스톱워치" 중 하나를 사용하여 시간을 추적할 수 있습니다.
 |
이 위젯을 ThingWorx Web Component SDK 라이브러리에서 웹 구성 요소로 사용할 수도 있습니다.
|
구조
1. 위젯 레이블
2. 일과 밀리초를 표시하도록 형식이 지정된 시간 값
3. 위젯 아이콘
시간 형식 구성
타이머 위젯에는 시간 표시 방식을 사용자 정의할 수 있는 몇 가지 설정이 있습니다. DisplayMilliseconds 속성은 더 정확한 타이밍을 위해 시간 형식에 밀리초를 추가합니다.
시간이 24시간을 초과하는 경우 일을 계산하려면 DisplayDays 속성을 true로 설정합니다.
타이머 모드 구성
TimerMode 속성은 위젯이 시간을 계산하는 방법을 제어합니다. 두 가지 모드인 카운트다운과 스톱워치 간을 전환할 수 있습니다.
• 카운트다운 모드에서는 타이머가 초기 값부터 시작하여 0까지 카운트다운합니다. 이 모드는 이벤트 또는 마감일 카운트다운과 같이 특정 기간을 측정해야 할 때 유용합니다. 타이머가 0에 도달하면 CountdownCompleted 이벤트가 트리거됩니다. 이 이벤트를 바인딩하여 알림 표시나 함수 또는 서비스 실행과 같은 특정 작업을 트리거할 수 있습니다. 다음은 이 모드에서 설정하거나 바인딩할 수 있는 속성입니다.
◦ InitialValue - 이 속성을 설정하여 시작 시간(밀리초)을 정의합니다.
◦ Running - 이 부울 속성을 바인딩하여 카운트다운의 시작과 중지를 제어합니다.
◦ CountdownCompleted - 카운트다운이 완료되면 이 이벤트를 바인딩하여 동작을 트리거합니다.
◦ Reset - 이 서비스를 바인딩하여 카운트다운을 초기 값으로 재설정합니다.
◦ Value - 타이머가 실행됨에 따라 업데이트되는 현재 시간 값(밀리초)을 반환합니다.
• 스톱워치 모드에서는 타이머가 0부터 시작하여 시간이 지남에 따라 증분하여 진행 중인 작업의 기간을 측정합니다. 이 모드는 운동 또는 요리 세션의 타이밍과 같이 작업이나 이벤트의 길이를 추적하는 데 이상적입니다. 타이머는 수동으로 중지하거나 재설정할 때까지 계속 실행됩니다. 다음은 이 모드에서 설정하거나 바인딩할 수 있는 속성입니다.
◦ InitialValue - 이 속성을 설정하여 시작 시간(밀리초)을 정의합니다.
◦ Running - 이 부울 속성을 바인딩하여 스톱워치의 시작과 중지를 제어합니다.
◦ Reset - 이 서비스를 바인딩하여 스톱워치를 0으로 재설정합니다.
◦ Value - 타이머가 실행됨에 따라 업데이트되는 현재 시간 값(밀리초)을 반환합니다.
위젯에 상태 서식 적용
상태 서식 적용을 구성하여 해당 값에 따라 타이머 위젯의 스타일을 동적으로 지정할 수 있습니다. AlternateStyle 속성과 달리 현재 위젯 값에 따라 적용되는 여러 상태를 정의할 수 있습니다. 이를 통해 다양한 상태에 위젯 스타일을 적용할 수 있습니다. 다음 이미지는 카운트다운 모드에서 타이머 위젯의 상태 서식 적용 구성을 보여줍니다. 값에 따라 두 가지 상태 스타일이 적용됩니다. 첫 번째 상태에서는 값이 20000밀리초보다 낮으면 텍스트 색상이 주황색으로 변경됩니다. 두 번째 상태에서는 값이 10000밀리초보다 낮으면 색상이 빨간색으로 변경됩니다.
|
|
상태 서식을 적용할 때 대체 및 표준 위젯 상태에 대해 하나의 아이콘만 표시할 수 있습니다.
|
초기 값 설정
위젯 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를 사용하여 설정된 타이머 값이 감소하고 0에 도달하면 이벤트가 트리거됩니다.
|
STRING
|
스톱워치
|
Y
|
N
|
|
CountdownCompleted
|
카운트다운 모드에서 타이머 값이 0에 도달할 때 트리거되는 이벤트입니다.
|
이벤트
|
Y
|
N
|