프로토타이핑 툴 Proto.io - 텍스트 필드에 키패드로 시간 입력 - 1

전에 포스팅한 "다이얼 패드" 이용하여 텍스트필드에 시간을 넣는 인터페이스를 만들어보려고 합니다.

다이얼 패드에서는 특별히 값에 대한 범위가 적용이 되어 있지 않지만, 시간을 넣기 위해서는 시와 분에 각각 범위가 정해져 있어서 최소값으로 "00:00" 최대값으로 "23:59"가 입력이 되어야 하기 때문에 변수의 설정이 조금 복잡해 집니다.

<인터페이스 제작>

라이브러리의 버튼, 텍스트 필드 등을 사용하여 다음과 같이 인터페이스를 디자인합니다. 키패드는 위치만 선정하고 제작은 나중에 할 것입니다.

• 스크린 이름 : Setting Time
• 시 텍스트 필드 : Hour
• 분 텍스트 필드 : Minute
• 리셋 버튼 : reset all time

주의할 점으로 텍스트 필드의 속성 중 Placeholder Texts 항목은 반드시 빈 칸으로 설정합니다.

<변수의 생성>

변수는 시, 분 각각 다음과 같이 최소 4개씩이 필요합니다. 메인 메뉴에서 "Variables(X)" 클릭하고 시, 분에 사용될 변수를 생성합니다. 기본적으로 값은 비워 놓고 Evaluate는 체크합니다.

- 시

• keypad_hour : Text, Evaluate (default: empty) : 탭
• length_hour : Text, Evaluate (default: empty) : 문자열 자르기
• integer_hour : Numeric, Evaluate (default: empty) : 문자값을 정수값으로
• zero_hour : Numeric, Evaluate (default: empty) : 한자리 숫자에 0 붙이기

- 분

• keypad_minute : Text, Evaluate (default: empty) : 탭
• length_minute : Text, Evaluate (default: empty) : 문자열 자르기
• integer_minute : Numeric, Evaluate (default: empty) : 문자값을 정수값으로
• zero_minute : Numeric, Evaluate (default: empty) : 한자리 숫자에 0 붙이기

<변수 리셋 스크린 생성>

Setting Time 스크린에서 하단의 "+ NEW SCREEN STATE"를 클릭하여 기본상태인 "State 1"이외에 변수를 리셋하는 상태인 "hour reset State", "minute reset State", "all reset State"를 각각 생성합니다.

State 1을 제외한 각각의 상태에 인터랙션을 추가하여 각각의 변수를 모두 0 으로 초기화 합니다. 다음의 이미지는 hour reset State 의 인터랙션입니다. 나머지 인터랙션도 같은 방법으로 넣습니다.

• Trigger : State enter
• Action : Set variable
• Variable Name : keypad_hour (default: empty)
• Value type : Custom value
• New Value : 0
• Delay : 0

>>>콜백

...

위와 같이 length_hour, integer_hour, zero_hour 값을 0로 설정

...

>>>콜백

• Action : Change Screen State
• Screen : Setting Time (스크린 이름)
• State : State 1
• Delay : 0

<키패드 제작>

키패드는 Hour 용과 Minute 용이 별도로 있어야 합니다. 그렇기 때문에 반드시 컨테이너로 만들어져야 하고 그 내부에는 두 개의 상태가 있어야 합니다(여기에서는 기본값인 State 1, State 2 로 생성하였습니다).

State 1 : Hour 입력용 키패드

State 2 : Minute 입력용 키패드

다음 포스트에는 버튼에 들어갈 인터랙션을 다룹니다.