아날로그 시계 앱인벤터 코딩

 

 

아두이노 HTML 아날로그 클럭에서부터 시작하여 앱인벤터에서도 역시 아날로그 클럭 코딩이 매우 중요하다. 시계 디자인 감각뿐만 아니라 코딩 실력을 극성으로 끌어 올릴 수 있는 계기가 되기 때문이다.

 

 

 

아날로그 시계 코딩을 위해 팔레트에서 2개의 콤포넌트 즉 캔버스(Canvas) 1개와 클럭(Clock) 1개를 가져 온다. 캔버스의 가로 세로 크기를 320 픽셀로 설정하고 배경색을 핑크 빛으로 설정하자.

 

 

블록 편집을 시작하기로 한다. 아날로그 클럭의 시간(h) 분(m) 및 초(s)의 초기 변수 값을 variables에서 전역 변수 초기 설정(initialize global) 기능을 사용하여 0으로  설정한다.

 

Clock1 과 variabl

 

es의 서브 기능들을 사용하여 스마트 폰의 지금 시각(Now)을 넘겨받아 Instant에 입력하여 전역 변수 h,m,s 값을 설정해 준다.

 

h,m,s의 값이 10보다 작을 경우 2자리를 맞춰주기 위해서 문자 0과 h,m,s의 값을 합친다.

그리고 이 값들을 스크린1에서 시간을 출력하기 h,m,s의 값들 사이에 “:”을 집어넣는다.

마지막으로 이 퍼즐 전체를 timer  퍼즐 하부에 연결하도록 한다.

 

일단 이 상태에서 블록 편집 결과를 저장하고 AI Companion을 실행하여 스마트 폰에서 시간 출력 중간 결과를 아래와 같이 모니터 해 본다.

 

 

 

이어서 Canvas1의 전역 변수 h,m,s 의 값들은 계속 갱신되므로 Canvas1을 시간 정보 업데이트를 위해 주기적으로 클리어 할 필요가 있다.

 

 

 

 

 

아울러 디자이너에서 Canvas1의 페인트 컬러를 지정할 수도 있지만 블록 편집에서도 가능하다. 여기서는 Colors 로부터 검은 색을 선택한다.

 

 

 

Canvas1에서 시계 테를 표현할 수 있도록 DrawCircle 기능을 사용하기로 하자. Canvas1의 크기가 320X320 픽셀이므로 원의 중심을 (160,160)으로 잡고 반경을 120으로 설정한다. 원의 내부는 검은 색으로 채우지 않도록 false를 설정한다. 아울러 선폭(line width)은 블록 편집기 밖 디자이너에서 Canvas1을 선택하면 Line Width  항을 볼 수 있는데 좀 굵은 선이 표현될 수 있도록 2로 설정한다.

 

 

 

 

C

 

anvas1에서 시계 테 외부에 시간을 표현할 수 있도록 DrawText 기능을 사용하기로 하자.

텍스트의 중심 좌표를 부여한 중간 결과는 그림과 같다.

 

 

 

초침을 작성하도록 한다. Canvas1의 선폭(Line Width)을 2로 설정하고 DrawLine 기능을 불러온다. 초침의 중심은 (160,160) 이다.

 

 

 

Math에서 + 기능을 불러내어 마우스 오른쪽으로 크릭해 보면 메뉴에서 External Inputs를 선택하면 빨간색 박스 친 아래 위 형태의 + 기능으로 바뀐다.

 

 

 

초침의 끝 부분 x 좌표 즉 x2를 계산 하는 퍼즐 코딩 부분이다. 유사하게 아래와 같이 y2를 계산할 수 있다. 차이점은 cos 함수를 사용하고 부호는 – 이다.

 

 

(x2,y2) 좌표 값이 준비되면 위의 DrawLine의 x2,y2 위치에 퍼즐띠를 조립한다. 이 DrawLine 퍼즐 띠를 DrawCircle 과 DrawText 사이에 위치시킨다.

분침과 시간 침은 반경을 각각 110과 90 으로 설정한다. 한편 회전 각도는 분침의 경우는 6도/분 이며 시침은 30도/시 이다. 초침과 분침은 60을 기준으로 1씩 즉 6도씩 회전하면 OK 이나 시침의 경우는 소숫점 이하를 계산해서 반영해야 한다. 따라서 소숫점 이상은 시간 정보를 호출하여 12시 이하일때는 그대로 값을 취하고 이상일 때에는 12로 나눈 후 나머지를 취하면 12 시간 이내의 데이터로 표현된다. 이 시간 데이터를 30 으로 곱하면 현재의 시간에 대한 각도가 계산된다.
반면에 현재의 분 데이터 값을 2로 나누면 이 역시 가도로 환산이 되며 앞서 계산한 시간에 대한 각도와 더해주면 시침의 각도가 계산된다.

 

 

각각의 초,분,시침의 앞부분에 사용자의 취향에 맞도록 set Canvas1 LineWidth 와 set Canvas1 PaintColors를 설정하도록 한다.