매쉬업 작성기 > 위젯 > 표준 위젯 > 타이머 위젯(테마 적용 가능)
타이머 위젯(테마 적용 가능)
타이머 위젯을 사용하면 두 가지 모드인 "시간을 추적하고 이벤트를 트리거하는 카운트다운"과 "지속 시간을 측정하는 스톱워치" 중 하나를 사용하여 시간을 추적할 수 있습니다.
* 
이 위젯을 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
도움이 되셨나요?