만들어진 키패드의 버튼에 들어갈 인터랙션에 대한 설명은 다음과 같습니다.
State 1 : Hour 버튼의 경우를 예를 들면,
먼저 키패드 입력을 통해 만들어진 문자는 replace 함수를 통해 "{keypad_hour}"에 문자로 저장됩니다.
이렇게 만들어진 "{keypad_hour}"를 가지고 "substr" 함수를 통해 "{length_hour}"에 2자리 문자로 저장됩니다.
2자리 문자인 "{length_hour}"는 "parseInt" 함수를 통해 숫자 형식으로 변환되어 {integer_hour}에 저장됩니다.
이렇게 생성된 {length_hour}는 조건문 필터링을 통해 값이 23이하인 경우에만 입력 값을 그대로 저장하고 그 이상인 경우는 문자열 "00"을 저장합니다.
그리고 {integer_hour}는 slice 함수를 통해 1자리 숫자인 경우 앞에 "0"이 붙은 후 {zero_hour}에 저장됩니다.
최종적으로는 {zero_hour}의 값이 텍스트 필드 "Hour"로 보내집니다.
<Hour 버튼 중 ①번에 적용될 인터랙션>
- Trigger : Tap
- Action : Set variable
- Variable Name : keypad_hour (default: empty)
- Value type : Custom value
- New Value : "{keypad_hour}".replace("undefined", "") + 1
- Delay : 0
>>>콜백
- Action : Set variable
- Variable Name : length_hour (default: empty)
- Value type : Custom value
- New Value : "{length_hour}".substr(0,2)
- Delay : 0
>>>콜백
- Action : Set variable
- Variable Name : integer_hour (default: empty)
- Value type : Custom value
- New Value : parseInt("{keypad_hour}")
- Delay : 0
>>>콜백
- Action : Set variable
- Variable Name : integer_hour (default: empty)
- Value type : Custom value
- New Value : {integer_hour} > 23 ? "00" : {integer_hour}
- Delay : 0
>>>콜백
- Action : Set variable
- Variable Name : zero_hour (default: empty)
- Value type : Custom value
- New Value : "0{integer_hour}".slice(-2)
- Delay : 0
>>>콜백
- Action : Change property
- Screen : Setting Time
- Item : Hour
- Property : Value
- Value type : Read from variable
- Variable name : zero_hour (default: empty)
- Delay : 0
작성된 인터랙션을 복사하여 나머지 버튼에도 붙여 넣은 후 첫 번째 인터랙션의 뒷 부분 숫자만 각각 2에서 0까지 수정합니다.
<Minute 버튼 중 ①번에 적용될 인터랙션>
변수 이름만 다르고 위에 작성한 Hour와 같은 방법으로 인터랙션이 적용되며, 단지 다른 점은 integer_minute 값의 범위를 설정하는 부분에서의 자바스크립트만 다음과 같이 바뀐다는 점입니다.
{integer_minute} < 60 ? {integer_minute} : "00"
적용된 인터랙션을 복사하여 나머지 Minute 용 버튼에 붙여 넣고 첫 번째 인터랙션의 뒷 부분 숫자를 2에서 0까지 수정합니다.
<텍스트 필드 인터랙션>
시와 분이 표시되는 텍스트 필드를 각각 탭 했을 때 해당하는 스크린 상태로 이동하여 변수를 리셋하고, keypad 컨테이너 내부의 상태를 바꿔 해당하는 키패드로 바꿔야 합니다.
- Hour 텍스트 필드 인터랙션
- Trigger : Tap
- Action : Change Screen State
- Screen : Setting Time
- State : hour reset State
- Delay : 0
>>>콜백
- Action : Change Container State
- Screen : Setting Time
- Container : keypad
- State : State 1
- Delay : 0
- Minute 텍스트 필드 인터랙션
- Trigger : Tap
- Action : Change Screen State
- Screen : Setting Time
- State : minute reset State
- Delay : 0
>>>콜백
- Action : Change Container State
- Screen : Setting Time
- Container : keypad
- State : State 2
- Delay : 0
- reset all time 리셋 버튼 인터랙션
- Trigger : Tap
- Action : Change Screen State
- Screen : Setting Time
- State : all reset State
- Delay : 0
>>>콜백
- Action : Change property
- Screen : Setting Time
- Item : Hour
- Property : Value
- Value type : Custom value
- New Value : 0
- Delay : 0
>>>콜백
- Action : Change property
- Screen : Setting Time
- Item : Minute
- Property : Value
- Value type : Custom value
- New Value : 0
- Delay : 0
<텍스트 필드 초기화 인터랙션>
첫 화면에 빈 칸으로 보이는 텍스트 필드에 초기값으로 "00" 을 넣기 위해서 스크린에 인터랙션을 추가합니다.
- 인터랙션 1 Hour 초기값
- Trigger : Screen show
- Action : Set variable
- Variable Name : zero_hour (default: empty)
- Value type : Custom value
- New Value : "00"
- Delay : 0
>>>콜백
- Action : Change property
- Screen : Setting Time
- Item : Hour
- Property : Value
- Value type : Read from variable
- Variable name : zero_hour (default: empty)
- Delay : 0
- 인터랙션 2 : Minute 초기값
- Trigger : Screen show
- Action : Set variable
- Variable Name : zero_hour (default: empty)
- Value type : Custom value
- New Value : "00"
- Delay : 0
>>>콜백
- Action : Change property
- Screen : Setting Time
- Item : Hour
- Property : Value
- Value type : Read from variable
- Variable name : zero_hour (default: empty)
- Delay : 0
두 인터랙션 모두 변수의 New Value 값으로 0이 아닌 "00" 을 넣는 것에 주의합니다(문자형).
프로젝트를 저정하고 미리보기로 확인합니다.
기본
한자리 숫자 입력값 - 앞에 0 붙임
잘못된 입력값 - 00 으로 초기화
'프로토타이핑 > Proto.io' 카테고리의 다른 글
프로토타이핑 툴 Proto.io - 텍스트 필드에 키패드로 시간 입력 - 1 (0) | 2016.11.28 |
---|---|
프로토타이핑 툴 proto.io 페이드-인 이미지 슬라이더 - 2 (0) | 2016.10.19 |
프로토타이핑 툴 proto.io 페이드-인 이미지 슬라이더 - 1 (0) | 2016.10.19 |
프로토타이핑 툴 proto.io 다운로드 진행 막대(progress bar) 제작 - 3 (0) | 2016.10.18 |
프로토타이핑 툴 proto.io 다운로드 진행 막대(progress bar) 제작 - 2 (0) | 2016.10.18 |